import { notFound } from "next/navigation";
import Image from "next/image";
import Link from "next/link";
import type { Metadata } from "next";
import { getPostBySlug, listPosts } from "@/lib/cms";
import { prisma } from "@/lib/db";
import { SiteHeader } from "@/components/site-header";
import { SiteFooter } from "@/components/site-footer";
import { ViewBeacon } from "@/components/view-beacon";
import { Breadcrumb } from "@/components/breadcrumb";
import { PostCard } from "@/components/post-card";
import { ShareButtons } from "@/components/share-buttons";
import { TableOfContents } from "@/components/table-of-contents";
import { ReadingProgress } from "@/components/reading-progress";
import { JsonLd } from "@/components/json-ld";
import { NewsletterSection } from "@/components/newsletter";
import { categoryAccent } from "@/lib/utils";
import { renderMarkdown } from "@/lib/render-markdown";
import { buildArticleGraph } from "@/lib/seo/schema";
import { buildArticleSocial } from "@/lib/seo/social";
import { settingValue } from "@/lib/settings";
import { StaticPageView, buildPageMetadata } from "@/components/static-page-view";
import { getPublishedPage } from "@/lib/pages-repo";

const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? "https://v2.finzone.io.vn";

export const revalidate = 60;
export const dynamic = "force-dynamic";
export const dynamicParams = true;

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

export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  const { slug } = await params;
  const post = await getPostBySlug(slug);
  if (!post) {
    // Fall back to static Page metadata before returning a generic "not found"
    const pageMeta = await buildPageMetadata(slug);
    if (pageMeta) return pageMeta;
    return { title: "Không tìm thấy" };
  }

  // Read SEO meta directly from DB (not legacy WP fetch)
  const seo = await prisma.article.findUnique({
    where: { slug },
    select: {
      metaTitle: true,
      metaDesc: true,
      metaKeywords: true,
      ogImage: true,
      canonicalUrl: true,
      noIndex: true,
      publishedAt: true,
      updatedAt: true,
    },
  });

  const canonical = seo?.canonicalUrl ?? `${SITE_URL}/${slug}`;
  const ogImg = seo?.ogImage ?? post.featured?.url ?? null;

  const social = await buildArticleSocial({
    url: canonical,
    title: seo?.metaTitle ?? post.title,
    description: seo?.metaDesc ?? post.excerpt,
    image: ogImg,
    imageAlt: post.featured?.alt ?? null,
    publishedAt: seo?.publishedAt ?? new Date(post.date),
    updatedAt: seo?.updatedAt ?? new Date(post.modified),
    authorName: post.author.name,
    categoryName: post.categories[0]?.name ?? null,
    tagNames: post.tags.map((t) => t.name),
    isNews: post.categories[0]?.slug === "tin-nong",
  });

  return {
    title: seo?.metaTitle ?? post.title,
    description: seo?.metaDesc ?? post.excerpt,
    keywords: seo?.metaKeywords ?? undefined,
    alternates: { canonical },
    robots: seo?.noIndex ? "noindex, nofollow" : "index, follow",
    ...social,
  };
}

export default async function PostPage({ params }: PageProps) {
  const { slug } = await params;
  const post = await getPostBySlug(slug);
  if (!post) {
    // Try a static Page first (CMS-managed pages like /gioi-thieu, /lien-he…)
    const staticPage = await getPublishedPage(slug);
    if (staticPage) return <StaticPageView slug={slug} />;

    // Then check redirect table before showing 404
    const fromPath = `/${slug}`;
    const r = await prisma.redirect.findFirst({
      where: { fromPath, enabled: true },
      select: { id: true, toPath: true, statusCode: true },
    });
    if (r) {
      // Fire-and-forget hit counter
      prisma.redirect
        .update({
          where: { id: r.id },
          data: { hits: { increment: 1 }, lastHitAt: new Date() },
        })
        .catch(() => {});
      const { redirect, permanentRedirect } = await import("next/navigation");
      if (r.statusCode === 301 || r.statusCode === 308) permanentRedirect(r.toPath);
      redirect(r.toPath);
    }
    notFound();
  }

  const primary = post.categories[0];
  const url = `${SITE_URL}/${slug}`;

  // Read article SEO fields from DB
  const seoRow = await prisma.article.findUnique({
    where: { slug },
    select: {
      jsonLd: true,
      metaTitle: true,
      metaDesc: true,
      coverImage: true,
      content: true,
      publishedAt: true,
      updatedAt: true,
    },
  });

  // Build JSON-LD: prefer DB-stored block (e.g. FAQ from editor), and always
  // append our auto-generated Article + Organization + WebSite + Breadcrumb graph.
  const jsonLdBlocks: string[] = [];
  if (seoRow?.jsonLd && typeof seoRow.jsonLd === "object") {
    jsonLdBlocks.push(JSON.stringify(seoRow.jsonLd));
  }
  const siteName = (await settingValue("site.title")) ?? "Finzone Network";
  const siteDesc =
    (await settingValue("site.description")) ??
    "Tin tài chính, crypto, chứng khoán, vàng — cập nhật liên tục.";
  const logoUrl =
    (await settingValue("site.logo")) ?? `${SITE_URL}/icon.svg`;
  const wordCount = seoRow?.content
    ? seoRow.content.replace(/[^\p{L}\p{N}\s]+/gu, " ").split(/\s+/).filter(Boolean).length
    : undefined;

  const articleGraph = buildArticleGraph(
    {
      siteUrl: SITE_URL,
      siteName,
      siteDescription: siteDesc,
      logoUrl,
      defaultImage: seoRow?.coverImage ?? post.featured?.url,
    },
    {
      url,
      title: seoRow?.metaTitle ?? post.title,
      description: seoRow?.metaDesc ?? post.excerpt,
      coverImage: seoRow?.coverImage ?? post.featured?.url ?? null,
      publishedAt: seoRow?.publishedAt ?? new Date(post.date),
      updatedAt: seoRow?.updatedAt ?? new Date(post.modified),
      authorName: post.author.name,
      authorUrl: `${SITE_URL}/author/${post.author.slug}`,
      categoryName: primary?.name,
      categoryUrl: primary ? `${SITE_URL}/category/${primary.slug}` : undefined,
      tagNames: post.tags.map((t) => t.name),
      isNews: primary?.slug === "tin-nong",
      wordCount,
      inLanguage: "vi-VN",
    },
    primary
      ? [
          { name: primary.name, url: `${SITE_URL}/category/${primary.slug}` },
          { name: post.title, url },
        ]
      : [{ name: post.title, url }],
  );
  jsonLdBlocks.push(JSON.stringify(articleGraph));

  // Render markdown to HTML
  const htmlContent = post.content ? renderMarkdown(post.content) : "";

  const related = primary
    ? (await listPosts({ categories: [primary.id], perPage: 4 })).posts
        .filter((p) => p.id !== post.id)
        .slice(0, 3)
    : [];

  const { posts: latest } = await listPosts({ perPage: 5, orderBy: "date" });

  return (
    <>
      <SiteHeader />
      <ReadingProgress />
      <JsonLd blocks={jsonLdBlocks} />

      <div
        className="border-b hairline"
        style={{ background: "var(--bg)" }}
      >
        <div className="mx-auto max-w-[var(--container-content)] px-6 lg:px-10 py-3">
          <Breadcrumb
            items={[
              { label: "Trang chủ", href: "/" },
              ...(primary ? [{ label: primary.name, href: `/category/${primary.slug}` }] : []),
              { label: post.title },
            ]}
          />
        </div>
      </div>

      <article id="main" className="mx-auto max-w-[var(--container-content)] px-6 lg:px-10 py-10 lg:py-14 grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-14">
        <div className="lg:col-span-8 max-w-[var(--container-reading)] mx-auto lg:mx-0 w-full min-w-0 overflow-hidden">
          {/* Tag chips */}
          <div className="flex flex-wrap gap-2 mb-5">
            {post.categories.slice(0, 3).map((c) => {
              const a = categoryAccent(c.slug);
              return (
                <Link key={c.id} href={`/category/${c.slug}`} className="pill">
                  <span className="pill-dot" style={{ background: a.color }} />
                  {a.label}
                </Link>
              );
            })}
            <span
              className="text-[11px] font-[family-name:var(--font-jetbrains-mono)] font-mono uppercase tracking-wider self-center"
              style={{ color: "var(--ink-3)" }}
            >
              {new Date(post.date).toLocaleDateString("vi-VN")}
            </span>
          </div>

          <h1 className="display-xl mb-6">{post.title}</h1>

          {post.excerpt && (
            <p
              className="text-base lg:text-lg leading-relaxed mb-6"
              style={{ color: "var(--ink-2)" }}
            >
              {post.excerpt}
            </p>
          )}

          <div
            className="flex flex-wrap items-center gap-x-4 gap-y-3 mb-8 pt-5 border-t hairline"
            style={{ borderColor: "var(--line-soft)" }}
          >
            <Link
              href={`/tac-gia/${post.author.slug}`}
              className="flex items-center gap-3 hover:text-[var(--accent)]"
            >
              <div
                className="w-9 h-9 rounded-full flex items-center justify-center font-bold text-[11px] overflow-hidden"
                style={{ background: "var(--accent)", color: "white" }}
              >
                {post.author.avatar ? (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img src={post.author.avatar} alt={post.author.name} />
                ) : (
                  post.author.name.slice(0, 2).toUpperCase()
                )}
              </div>
              <div>
                <div className="text-sm font-semibold">{post.author.name}</div>
                <div
                  className="text-[10px] font-[family-name:var(--font-jetbrains-mono)] font-mono uppercase tracking-wider"
                  style={{ color: "var(--ink-3)" }}
                >
                  {post.readMinutes} PHÚT ĐỌC
                </div>
              </div>
            </Link>
            <div className="ml-auto">
              <ShareButtons url={url} title={post.title} />
            </div>
          </div>

          {post.featured && (
            <figure className="-mx-6 lg:mx-0 mb-2">
              <div className="aspect-[16/9] lg:rounded-sm overflow-hidden bg-[var(--bg-2)] relative">
                <Image
                  src={post.featured.url}
                  alt={post.featured.alt}
                  fill
                  priority
                  sizes="(max-width: 1024px) 100vw, 720px"
                  className="object-cover"
                />
              </div>
            </figure>
          )}

          <div
            id="article-body"
            className="prose-fz mt-8"
            dangerouslySetInnerHTML={{ __html: htmlContent }}
          />
          <ViewBeacon slug={slug} />

          {post.tags.length > 0 && (
            <div
              className="flex flex-wrap gap-2 pt-6 mt-10 border-t hairline-strong"
            >
              <span
                className="text-[10px] uppercase tracking-wider mr-1 self-center font-[family-name:var(--font-jetbrains-mono)] font-mono"
                style={{ color: "var(--ink-3)" }}
              >
                Tags:
              </span>
              {post.tags.map((t) => (
                <Link
                  key={t.id}
                  href={`/tag/${t.slug}`}
                  className="pill"
                  style={{ background: "var(--bg-2)" }}
                >
                  {t.name}
                </Link>
              ))}
            </div>
          )}
        </div>

        {/* Sidebar */}
        <aside className="lg:col-span-4 space-y-6">
          {post.author?.bio && (
            <div className="card-modern p-6">
              <div className="flex items-center gap-3 mb-3">
                <div
                  className="w-12 h-12 rounded-full flex items-center justify-center font-bold overflow-hidden"
                  style={{ background: "var(--accent)", color: "white" }}
                >
                  {post.author.avatar ? (
                    // eslint-disable-next-line @next/next/no-img-element
                    <img src={post.author.avatar} alt={post.author.name} />
                  ) : (
                    post.author.name.slice(0, 2).toUpperCase()
                  )}
                </div>
                <div>
                  <div className="font-semibold">{post.author.name}</div>
                  <Link
                    href={`/tac-gia/${post.author.slug}`}
                    className="text-xs hover:text-[var(--accent)]"
                    style={{ color: "var(--ink-3)" }}
                  >
                    Xem tất cả bài →
                  </Link>
                </div>
              </div>
              <p className="text-[13px] leading-relaxed" style={{ color: "var(--ink-2)" }}>
                {post.author.bio}
              </p>
            </div>
          )}

          <div>
            <TableOfContents />
          </div>

          {related.length > 0 && (
            <div className="card-modern p-6">
              <div
                className="text-[10px] uppercase tracking-wider font-bold mb-4 font-[family-name:var(--font-jetbrains-mono)] font-mono"
                style={{ color: "var(--ink-3)" }}
              >
                Bài liên quan
              </div>
              <ul className="space-y-4 text-sm">
                {related.map((r) => (
                  <li key={r.id}>
                    <Link
                      href={`/${r.slug}`}
                      className="block hover:text-[var(--accent)] font-medium leading-snug font-[family-name:var(--font-fraunces)]"
                      style={{ fontVariationSettings: "'opsz' 36" }}
                    >
                      {r.title}
                    </Link>
                    <div
                      className="text-[10px] mt-1 font-[family-name:var(--font-jetbrains-mono)] font-mono uppercase tracking-wider"
                      style={{ color: "var(--ink-3)" }}
                    >
                      {new Date(r.date).toLocaleDateString("vi-VN")}
                    </div>
                  </li>
                ))}
              </ul>
            </div>
          )}

          {latest.length > 0 && (
            <div className="card-modern p-6">
              <div
                className="text-[10px] uppercase tracking-wider font-bold mb-3 font-[family-name:var(--font-jetbrains-mono)] font-mono"
                style={{ color: "var(--ink-3)" }}
              >
                Mới nhất
              </div>
              <ul className="space-y-0">
                {latest.map((p) => (
                  <li key={p.id}>
                    <PostCard post={p} variant="rail" />
                  </li>
                ))}
              </ul>
            </div>
          )}
        </aside>
      </article>

      <NewsletterSection />
      <SiteFooter />
    </>
  );
}