import { useParams, Link } from "react-router-dom";
import { ChevronRight, ArrowLeft, Clock, Calendar } from "lucide-react";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import { getBlogBySlug, blogPosts } from "@/lib/data";

const BlogPost = () => {
  const { slug } = useParams<{ slug: string }>();
  const post = getBlogBySlug(slug || "");

  if (!post) {
    return (
      <div className="min-h-screen bg-[#1a1a1a]">
        <Header />
        <div className="pt-32 text-center">
          <h1 className="font-playfair text-3xl text-white mb-4">Article Not Found</h1>
          <Link to="/blog" className="font-oswald text-[#d35400] hover:text-[#e67e22] uppercase tracking-wider">
            ← Back to Blog
          </Link>
        </div>
        <Footer />
      </div>
    );
  }

  const otherPosts = blogPosts.filter((p) => p.id !== post.id).slice(0, 2);

  return (
    <div className="min-h-screen bg-[#1a1a1a]">
      <Header />

      <div className="pt-20 lg:pt-24">
        {/* Breadcrumb */}
        <div className="max-w-[900px] mx-auto px-4 sm:px-6 lg:px-8 py-4">
          <nav className="flex items-center gap-2 text-sm font-inter">
            <Link to="/" className="text-[#888] hover:text-[#d35400] transition-colors">Home</Link>
            <ChevronRight className="w-3 h-3 text-[#555]" />
            <Link to="/blog" className="text-[#888] hover:text-[#d35400] transition-colors">Blog</Link>
            <ChevronRight className="w-3 h-3 text-[#555]" />
            <span className="text-[#b0b0b0] truncate">{post.title}</span>
          </nav>
        </div>

        {/* Hero Image */}
        <div className="max-w-[900px] mx-auto px-4 sm:px-6 lg:px-8">
          <div className="aspect-[21/9] rounded-lg overflow-hidden mb-8">
            <img src={post.image} alt={post.title} className="w-full h-full object-cover" />
          </div>
        </div>

        {/* Article */}
        <article className="max-w-[900px] mx-auto px-4 sm:px-6 lg:px-8 pb-20">
          <span className="font-oswald text-xs text-[#d35400] uppercase tracking-widest">
            {post.category}
          </span>
          <h1 className="font-playfair text-3xl sm:text-4xl lg:text-5xl font-bold text-white mt-2 mb-4 leading-tight">
            {post.title}
          </h1>

          <div className="flex items-center gap-4 mb-8 pb-8 border-b border-[#333]">
            <span className="inline-flex items-center gap-1.5 font-inter text-sm text-[#888]">
              <Calendar className="w-4 h-4" />
              {post.date}
            </span>
            <span className="inline-flex items-center gap-1.5 font-inter text-sm text-[#888]">
              <Clock className="w-4 h-4" />
              {post.readTime}
            </span>
          </div>

          {/* Markdown-like content */}
          <div className="prose-custom">
            {post.content.split("\n").map((line, i) => {
              const trimmed = line.trim();
              if (!trimmed) return <div key={i} className="h-4" />;
              if (trimmed.startsWith("## ")) {
                return (
                  <h2 key={i} className="font-playfair text-2xl sm:text-3xl font-bold text-white mt-10 mb-4">
                    {trimmed.replace("## ", "")}
                  </h2>
                );
              }
              if (trimmed.startsWith("### ")) {
                return (
                  <h3 key={i} className="font-oswald text-lg font-bold text-white uppercase tracking-wider mt-6 mb-3">
                    {trimmed.replace("### ", "")}
                  </h3>
                );
              }
              if (trimmed.startsWith("- **")) {
                const match = trimmed.match(/^- \*\*(.+?)\*\*:?\s*(.*)$/);
                if (match) {
                  return (
                    <div key={i} className="flex items-start gap-2 mb-2">
                      <span className="w-1.5 h-1.5 bg-[#d35400] rounded-full mt-2 shrink-0" />
                      <p className="font-inter text-[#b0b0b0] text-base leading-relaxed">
                        <strong className="text-white">{match[1]}</strong>{match[2] ? `: ${match[2]}` : ""}
                      </p>
                    </div>
                  );
                }
              }
              if (trimmed.startsWith("- ")) {
                return (
                  <div key={i} className="flex items-start gap-2 mb-2">
                    <span className="w-1.5 h-1.5 bg-[#d35400] rounded-full mt-2 shrink-0" />
                    <p className="font-inter text-[#b0b0b0] text-base leading-relaxed">
                      {trimmed.replace("- ", "")}
                    </p>
                  </div>
                );
              }
              if (/^\d+\.\s/.test(trimmed)) {
                const num = trimmed.match(/^(\d+)\.\s/)?.[1];
                const text = trimmed.replace(/^\d+\.\s/, "");
                const boldMatch = text.match(/^\*\*(.+?)\*\*\s*(.*)$/);
                return (
                  <div key={i} className="flex items-start gap-3 mb-2">
                    <span className="font-oswald text-[#d35400] font-bold text-sm mt-0.5 shrink-0">{num}.</span>
                    <p className="font-inter text-[#b0b0b0] text-base leading-relaxed">
                      {boldMatch ? (
                        <>
                          <strong className="text-white">{boldMatch[1]}</strong> {boldMatch[2]}
                        </>
                      ) : (
                        text
                      )}
                    </p>
                  </div>
                );
              }
              if (trimmed.startsWith("**Winner**:") || trimmed.startsWith("**")) {
                return (
                  <p key={i} className="font-inter text-white text-base leading-relaxed mb-4 font-semibold">
                    {trimmed.replace(/\*\*/g, "")}
                  </p>
                );
              }
              return (
                <p key={i} className="font-inter text-[#b0b0b0] text-base leading-relaxed mb-4">
                  {trimmed}
                </p>
              );
            })}
          </div>

          {/* Related Articles */}
          {otherPosts.length > 0 && (
            <div className="mt-16 pt-12 border-t border-[#333]">
              <h2 className="font-playfair text-2xl font-bold text-white mb-8">More Articles</h2>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                {otherPosts.map((p) => (
                  <Link
                    key={p.id}
                    to={`/blog/${p.slug}`}
                    className="group bg-[#2b2b2b] border border-[#444] rounded-lg overflow-hidden hover:border-[#d35400]/50 transition-all"
                  >
                    <div className="aspect-[16/9] overflow-hidden">
                      <img src={p.image} alt={p.title} className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" loading="lazy" />
                    </div>
                    <div className="p-4">
                      <span className="font-oswald text-xs text-[#d35400] uppercase tracking-widest">{p.category}</span>
                      <h3 className="font-playfair text-base font-bold text-white mt-1 group-hover:text-[#d35400] transition-colors leading-tight">
                        {p.title}
                      </h3>
                      <span className="font-inter text-xs text-[#888] mt-2 block">{p.readTime}</span>
                    </div>
                  </Link>
                ))}
              </div>
            </div>
          )}

          <div className="mt-10">
            <Link to="/blog" className="inline-flex items-center gap-2 font-oswald text-[#d35400] hover:text-[#e67e22] uppercase tracking-wider transition-colors">
              <ArrowLeft className="w-4 h-4" />
              Back to All Articles
            </Link>
          </div>
        </article>
      </div>

      <Footer />
    </div>
  );
};

export default BlogPost;