import { useEffect, useState } from "react";
import { useParams, Link } from "react-router-dom";
import { ArrowLeft, CalendarDays, User } from "lucide-react";
import SEO from "../lib/seo";
import Reveal from "../components/Reveal";
import BlogCard from "../components/BlogCard";
import CTASection from "../components/CTASection";
import type { BlogPost } from "../types";

export default function BlogPost() {
  const { slug } = useParams();
  const [data, setData] = useState<{ post: BlogPost; related: BlogPost[] } | null>(null);
  const [notFound, setNotFound] = useState(false);

  useEffect(() => {
    setData(null);
    setNotFound(false);
    fetch(`${process.env.REACT_APP_BACKEND_URL}/api/blog/${slug}`)
      .then((r) => (r.ok ? r.json() : Promise.reject(r.status)))
      .then((d) => setData(d))
      .catch(() => setNotFound(true));
  }, [slug]);

  if (notFound) {
    return (
      <div className="min-h-screen bg-[#0B0C10] flex flex-col items-center justify-center gap-6 pt-24 text-center px-6" data-testid="blog-not-found">
        <p className="font-display font-black text-4xl text-white">Article not found.</p>
        <Link to="/about/blog" className="text-cy font-bold hover:text-ember transition-colors" data-testid="back-to-blog">← Back to Insights</Link>
      </div>
    );
  }
  if (!data) {
    return <div className="min-h-screen bg-[#0B0C10] pt-40 text-center text-white/50 text-sm" data-testid="blog-loading-post">Loading article…</div>;
  }

  const { post, related } = data;
  const date = post.date ? new Date(post.date).toLocaleDateString("en-IN", { day: "numeric", month: "long", year: "numeric" }) : "";
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "Article",
    headline: post.title,
    author: { "@type": "Organization", name: post.author },
    datePublished: post.date,
    articleSection: post.category,
    description: post.excerpt,
  };

  return (
    <div data-testid="blog-post-page" className="bg-[#0B0C10]">
      <SEO title={post.title} description={post.seoDescription || post.excerpt} path={`/about/blog/${post.slug}`} type="article" jsonLd={jsonLd} />

      {/* Briefing room — cinematic article header */}
      <section className="relative bg-[#14151A] pt-40 pb-14 border-b border-white/10 overflow-hidden" data-testid="blog-post-hero">
        {post.image && (
          <>
            <img src={post.image} alt="" aria-hidden="true" className="absolute inset-0 h-full w-full object-cover opacity-[0.14]" />
            <div className="absolute inset-0 bg-gradient-to-b from-[#14151A]/70 via-[#14151A]/80 to-[#14151A]" aria-hidden="true" />
          </>
        )}
        <div className="grain" aria-hidden="true" />
        <div className="mx-auto max-w-3xl px-5 md:px-10 relative">
          <Link to="/about/blog" className="inline-flex items-center gap-2 text-xs font-tech tracking-[0.2em] text-white/50 hover:text-cy transition-colors" data-testid="blog-back-link">
            <ArrowLeft size={13} /> ALL INSIGHTS
          </Link>
          <div className="flex flex-wrap items-center gap-4 mt-8 text-[11px] font-tech tracking-[0.18em] uppercase">
            <span className="text-cy border border-cy/40 px-2.5 py-1">{post.category}</span>
            {date && <span className="text-white/50 flex items-center gap-1.5"><CalendarDays size={12} /> {date}</span>}
            <span className="text-white/50 flex items-center gap-1.5"><User size={12} /> {post.author}</span>
          </div>
          <h1 className="font-display font-black text-3xl md:text-5xl text-white leading-[1.08] tracking-tight mt-7">{post.title}</h1>
          <p className="text-base md:text-lg text-white/65 leading-relaxed mt-6">{post.excerpt}</p>
        </div>
      </section>

      <article className="bg-[#0B0C10] py-16" data-testid="blog-post-content">
        <div className="mx-auto max-w-3xl px-5 md:px-10">
          {post.image && (
            <Reveal>
              <div className="relative">
                <img src={post.image} alt={post.title} loading="lazy" className="w-full aspect-[16/8] object-cover border border-white/10" />
                <div className="absolute inset-0 ring-1 ring-inset ring-cy/25 pointer-events-none" aria-hidden="true" />
              </div>
            </Reveal>
          )}
          <div className="prose-avio prose-avio--dark mt-12" dangerouslySetInnerHTML={{ __html: post.content }} />
          <div className="flex flex-wrap gap-2 mt-12 pt-8 border-t border-white/10">
            {(post.tags || []).map((t) => (
              <span key={t} className="text-[10px] font-tech border border-white/15 text-white/55 px-3 py-1.5 hover:border-cy/50 hover:text-cy transition-colors">{t}</span>
            ))}
          </div>
        </div>
      </article>

      {related?.length > 0 && (
        <section className="bg-[#14151A] py-20 border-y border-white/10 overflow-hidden" data-testid="blog-related">
          <div className="grain" aria-hidden="true" />
          <div className="mx-auto max-w-[1320px] px-5 md:px-10 relative">
            <h2 className="font-display font-black text-2xl md:text-3xl text-white tracking-tight mb-10">Related reading.</h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              {related.map((p, i) => <BlogCard key={p.slug} post={p} index={i} dark />)}
            </div>
          </div>
        </section>
      )}

      <CTASection />
    </div>
  );
}