import { createFileRoute, Link, notFound } from "@tanstack/react-router";
import { Calendar, Clock, ArrowLeft } from "lucide-react";
import { SiteLayout } from "@/components/site/Layout";
import { Section } from "@/components/site/Section";
import { JsonLd } from "@/components/site/JsonLd";
import { POSTS } from "@/lib/blog";
import { SITE } from "@/lib/site";

export const Route = createFileRoute("/blog/$slug")({
  loader: ({ params }) => {
    const post = POSTS.find((p) => p.slug === params.slug);
    if (!post) throw notFound();
    return { post };
  },
  head: ({ loaderData }) => {
    if (!loaderData) return {};
    const { post } = loaderData;
    return {
      meta: [
        { title: `${post.title} | ${SITE.name}` },
        { name: "description", content: post.excerpt },
        { name: "keywords", content: post.keywords.join(", ") },
        { property: "og:title", content: post.title },
        { property: "og:description", content: post.excerpt },
        { property: "og:type", content: "article" },
        { property: "article:published_time", content: post.date },
      ],
      links: [{ rel: "canonical", href: `${SITE.url}/blog/${post.slug}` }],
    };
  },
  component: BlogPostPage,
});

function BlogPostPage() {
  const { post } = Route.useLoaderData();
  const url = `${SITE.url}/blog/${post.slug}`;
  const articleSchema = {
    "@context": "https://schema.org",
    "@type": "Article",
    headline: post.title,
    description: post.excerpt,
    datePublished: post.date,
    dateModified: post.date,
    keywords: post.keywords.join(", "),
    articleSection: post.category,
    inLanguage: "en",
    mainEntityOfPage: { "@type": "WebPage", "@id": url },
    author: { "@type": "Organization", name: SITE.legalName, url: SITE.url },
    publisher: {
      "@type": "Organization",
      name: SITE.legalName,
      url: SITE.url,
    },
  };
  const breadcrumbSchema = {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    itemListElement: [
      { "@type": "ListItem", position: 1, name: "Home", item: SITE.url },
      { "@type": "ListItem", position: 2, name: "Blog", item: `${SITE.url}/blog` },
      { "@type": "ListItem", position: 3, name: post.title, item: url },
    ],
  };

  return (
    <SiteLayout>
      <JsonLd data={articleSchema} />
      <JsonLd data={breadcrumbSchema} />

      <article className="bg-gradient-hero text-cream">
        <div className="container-tight py-16 md:py-24 max-w-3xl">
          <Link to="/blog" className="inline-flex items-center gap-1 text-sm text-cream/70 hover:text-emerald">
            <ArrowLeft className="h-4 w-4" /> All posts
          </Link>
          <span className="mt-6 inline-block text-xs uppercase tracking-wider font-bold text-emerald">{post.category}</span>
          <h1 className="mt-3 text-3xl md:text-5xl font-bold text-balance">{post.title}</h1>
          <p className="mt-5 text-lg text-cream/80 text-pretty">{post.excerpt}</p>
          <div className="mt-6 flex items-center gap-5 text-sm text-cream/70">
            <span className="flex items-center gap-1.5"><Calendar className="h-4 w-4" />{new Date(post.date).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" })}</span>
            <span className="flex items-center gap-1.5"><Clock className="h-4 w-4" />{post.readTime}</span>
          </div>
        </div>
      </article>

      <Section>
        <div className="max-w-3xl mx-auto">
          <div className="space-y-5 text-lg leading-relaxed">
            {post.body.map((b: { h?: string; p?: string; list?: string[] }, i: number) => {
              if (b.h) return <h2 key={i} className="mt-10 text-2xl md:text-3xl font-bold">{b.h}</h2>;
              if (b.list) return (
                <ul key={i} className="space-y-2 pl-5 list-disc marker:text-emerald">
                  {b.list.map((li: string) => <li key={li}>{li}</li>)}
                </ul>
              );
              return <p key={i}>{b.p}</p>;
            })}
          </div>

          <div className="mt-16 rounded-2xl bg-gradient-hero text-cream p-8 shadow-elegant text-center">
            <h3 className="font-display text-2xl font-bold">Need help applying this?</h3>
            <p className="mt-2 text-cream/80">We do this work daily. Reply within 30 minutes — money-back guarantee.</p>
            <Link
              to="/contact"
              className="mt-5 inline-flex items-center justify-center rounded-lg bg-gradient-emerald px-6 py-3 font-semibold text-navy-deep shadow-emerald"
            >
              Get Expert Help
            </Link>
          </div>
        </div>
      </Section>
    </SiteLayout>
  );
}