import type { Metadata } from "next";
import { notFound, redirect } from "next/navigation";
import { Container } from "@/components/container";
import { Breadcrumbs } from "@/components/breadcrumbs";
import { CTASection } from "@/components/cta-section";
import { JsonLd } from "@/components/json-ld";
import { BLOG_POSTS, BlogPost } from "@/content/blog";
import { site } from "@/content/site";
import { blogService } from "@/lib/blog-service";
import { db } from "@/lib/admin/db";
import { ArticleReader } from "@/components/blog/article-reader";

export const revalidate = 60;

interface PageProps {
  params: Promise<{ slug: string }>;
}

export async function generateStaticParams() {
  try {
    const mongoPosts = await blogService.getPublishedPosts({ limit: 100 });
    if (mongoPosts && mongoPosts.length > 0) {
      return mongoPosts.map((p) => ({ slug: p.slug }));
    }
  } catch {}
  return BLOG_POSTS.map((post) => ({
    slug: post.slug,
  }));
}

export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  const { slug } = await params;

  let post: any = null;
  try {
    post = await blogService.getPostBySlug(slug);
  } catch {}

  if (!post) {
    post = BLOG_POSTS.find((p) => p.slug === slug);
  }

  if (!post) {
    return { title: "Article not found", robots: { index: false, follow: false } };
  }

  const title = post.seoTitle || post.title;
  const description = post.metaDescription || post.excerpt;
  const canonical = post.canonicalUrl || `/blog/${post.slug}`;

  // 4-tier fallback resolution
  const ogTitle = post.ogTitle || post.seoTitle || post.title;
  const ogDescription = post.ogDescription || post.metaDescription || post.excerpt;
  const ogImage = post.ogImage || post.featuredImage || `${site.url}/images/bot-logo.png`;

  const twitterTitle = post.twitterTitle || post.ogTitle || post.seoTitle || post.title;
  const twitterDescription = post.twitterDescription || post.ogDescription || post.metaDescription || post.excerpt;
  const twitterImage = post.twitterImage || post.ogImage || post.featuredImage || `${site.url}/images/bot-logo.png`;

  return {
    title,
    description,
    alternates: { canonical },
    robots: post.robots ? (post.robots.includes("noindex") ? { index: false, follow: false } : undefined) : undefined,
    openGraph: {
      title: `${ogTitle} — Quto AI Blog`,
      description: ogDescription,
      url: `${site.url}/blog/${post.slug}`,
      siteName: site.name,
      type: "article",
      publishedTime: post.publishedDate,
      authors: [post.author?.name || "Quto AI"],
      images: ogImage ? [{ url: ogImage }] : undefined,
    },
    twitter: {
      card: "summary_large_image",
      title: twitterTitle,
      description: twitterDescription,
      images: twitterImage ? [twitterImage] : undefined,
    },
  };
}

export default async function BlogPostDetailPage({ params }: PageProps) {
  const { slug } = await params;

  // 1. Fetch authoritative post from MongoDB
  let post: any = null;
  try {
    post = await blogService.getPostBySlug(slug);
  } catch {}

  // 2. If not found in MongoDB, check for active 301 redirect rule (Requirement 79, 158)
  if (!post) {
    try {
      const redirectItem = await db.getRedirectBySource(`/blog/${slug}`);
      if (redirectItem) {
        redirect(redirectItem.destination);
      }
    } catch (e: any) {
      // Next.js redirect() throws a NEXT_REDIRECT digest which must be re-thrown
      if (e?.message?.includes("NEXT_REDIRECT")) throw e;
    }
  }

  // 3. Fallback to static corpus if MongoDB temporarily unavailable or unseeded
  if (!post) {
    post = BLOG_POSTS.find((p) => p.slug === slug);
  }

  if (!post) {
    notFound();
  }

  // Resolve related posts from MongoDB or fallback
  let relatedPosts: BlogPost[] = [];
  try {
    const related = await blogService.getRelatedPosts(post, 3);
    relatedPosts = related as unknown as BlogPost[];
  } catch {
    relatedPosts = BLOG_POSTS.filter(
      (p) =>
        post.relatedSlugs?.includes(p.slug) ||
        (p.category === post.category && p.slug !== post.slug)
    ).slice(0, 3);
  }

  // Prev/next neighbors
  let prevPost: { slug: string; title: string } | null = null;
  let nextPost: { slug: string; title: string } | null = null;
  try {
    const allPublished = await blogService.getPublishedPosts({ limit: 100 });
    const idx = allPublished.findIndex((p) => p.slug === post.slug);
    if (idx > 0) prevPost = { slug: allPublished[idx - 1].slug, title: allPublished[idx - 1].title };
    if (idx >= 0 && idx < allPublished.length - 1)
      nextPost = { slug: allPublished[idx + 1].slug, title: allPublished[idx + 1].title };
  } catch {
    const postIndex = BLOG_POSTS.findIndex((p) => p.slug === post.slug);
    if (postIndex > 0) {
      prevPost = { slug: BLOG_POSTS[postIndex - 1].slug, title: BLOG_POSTS[postIndex - 1].title };
    }
    if (postIndex >= 0 && postIndex < BLOG_POSTS.length - 1) {
      nextPost = { slug: BLOG_POSTS[postIndex + 1].slug, title: BLOG_POSTS[postIndex + 1].title };
    }
  }

  const articleSchema = {
    "@context": "https://schema.org",
    "@type": "TechArticle",
    headline: post.title,
    description: post.metaDescription || post.excerpt,
    datePublished: post.publishedDate,
    dateModified: post.updatedAt || post.publishedDate,
    author: {
      "@type": "Person",
      name: post.author?.name || "Quto AI Research",
      jobTitle: post.author?.role || "AI Systems Researcher",
    },
    publisher: {
      "@type": "Organization",
      name: site.name,
      url: site.url,
      logo: `${site.url}/images/bot-logo.png`,
    },
    mainEntityOfPage: {
      "@type": "WebPage",
      "@id": `${site.url}/blog/${post.slug}`,
    },
  };

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

      <div className="relative overflow-hidden pb-16 pt-20 sm:pt-24">
        {/* Ambient background glow for hero — starts at top: 0 behind fixed header */}
        <div
          aria-hidden="true"
          className="pointer-events-none absolute inset-x-0 top-0 -z-10 mx-auto h-96 w-full max-w-6xl bg-gradient-to-r from-[#4FDAF1]/20 via-[#F79C09]/15 to-[#E26B0B]/20 blur-3xl"
        />

        <Container className="max-w-6xl">
          <Breadcrumbs
            className="pt-2"
            items={[
              { label: "Blog", href: "/blog" },
              { label: post.title },
            ]}
          />

          {/* Interactive Article Reader */}
          <ArticleReader
            post={post as BlogPost}
            relatedPosts={relatedPosts}
            prevPost={prevPost}
            nextPost={nextPost}
            enablePushOptIn={true}
          />
        </Container>
      </div>

      <CTASection />
    </>
  );
}