import { notFound } from "next/navigation";
import Link from "next/link";
import { ArrowLeft, Clock, Tag, ChevronRight } from "lucide-react";
import { MDXRemote } from "next-mdx-remote/rsc";
import remarkGfm from "remark-gfm";
import { getDocBySlug, getAllDocSlugs } from "@/lib/docs";
import { mdxComponents } from "@/components/mdx";
import { sidebar } from "@/lib/docs-sidebar";

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

export async function generateStaticParams() {
  const slugs = await getAllDocSlugs();
  return slugs.map((slug) => ({ slug }));
}

export async function generateMetadata({ params }: PageProps) {
  const { slug } = await params;
  const doc = await getDocBySlug(slug);
  if (!doc) return { title: "Not Found" };
  return {
    title: `${doc.frontmatter.title} — Docs`,
    description: doc.frontmatter.description,
  };
}

function getCategoryLabel(categorySlug: string) {
  return sidebar.find((c) => c.slug === categorySlug)?.category ?? categorySlug;
}

function getPrevNext(slug: string[]) {
  const path = slug.join("/");
  const all = sidebar.flatMap((cat) =>
    cat.articles.map((a) => ({
      title: a.title,
      href: `/support/docs/${cat.slug}/${a.slug}`,
      key: `${cat.slug}/${a.slug}`,
    }))
  );
  const idx = all.findIndex((a) => a.key === path);
  return {
    prev: idx > 0 ? all[idx - 1] : null,
    next: idx < all.length - 1 ? all[idx + 1] : null,
  };
}

export default async function DocPage({ params }: PageProps) {
  const { slug } = await params;
  const doc = await getDocBySlug(slug);
  if (!doc) notFound();

  const { frontmatter, content } = doc;
  const { prev, next } = getPrevNext(slug);
  const categoryLabel = getCategoryLabel(slug[0]);

  return (
    <article className="max-w-3xl mx-auto px-6 lg:px-10 py-12">

      <nav className="flex items-center gap-1.5 text-xs text-content-subtle mb-10">
        <Link href="/support" className="hover:text-zinc-300 transition-colors">Support</Link>
        <ChevronRight className="w-3 h-3" />
        <Link href="/support" className="hover:text-zinc-300 transition-colors">{categoryLabel}</Link>
        <ChevronRight className="w-3 h-3" />
        <span className="text-content-dim truncate">{frontmatter.title}</span>
      </nav>

      <header className="mb-10 pb-8 border-b border-border/80">
        <div className="flex items-center gap-3 mb-4">
          <div className="flex items-center gap-1.5 text-xs text-content-muted">
            <Clock className="w-3.5 h-3.5" />
            Read in {frontmatter.readTime ?? 5} minutes
          </div>
          {frontmatter.category && (
            <>
              <span className="text-zinc-800">·</span>
              <span className="text-xs text-content-subtle">{frontmatter.category}</span>
            </>
          )}
        </div>

        <h1 className="text-3xl md:text-4xl font-semibold text-white tracking-tight leading-[1.15] mb-4">
          {frontmatter.title}
        </h1>

        {frontmatter.description && (
          <p className="text-content-dim text-sm leading-relaxed mb-5">
            {frontmatter.description}
          </p>
        )}

        {frontmatter.tags && frontmatter.tags.length > 0 && (
          <div className="flex flex-wrap items-center gap-2">
            <Tag className="w-3 h-3 text-content-subtle" />
            {frontmatter.tags.map((tag) => (
              <span
                key={tag}
                className="px-2 py-0.5 rounded-md bg-zinc-900 border border-border text-xs text-content-muted font-mono"
              >
                #{tag}
              </span>
            ))}
          </div>
        )}
      </header>

      <MDXRemote
        source={content}
        components={mdxComponents}
        options={{ mdxOptions: { remarkPlugins: [remarkGfm] } }}
      />

      {(prev || next) && (
        <div className="flex items-center justify-between gap-4 mt-14 pt-8 border-t border-border/80">
          {prev ? (
            <Link
              href={prev.href}
              className="flex flex-col gap-1 p-4 rounded-xl border border-border/80 hover:border-border-hover hover:bg-surface transition-all group max-w-[48%]"
            >
              <span className="text-[10px] font-bold text-content-subtle uppercase tracking-widest">Previous</span>
              <span className="text-sm font-semibold text-zinc-300 group-hover:text-white transition-colors">
                ← {prev.title}
              </span>
            </Link>
          ) : <div />}
          {next ? (
            <Link
              href={next.href}
              className="flex flex-col items-end gap-1 p-4 rounded-xl border border-border/80 hover:border-border-hover hover:bg-surface transition-all group max-w-[48%] ml-auto"
            >
              <span className="text-[10px] font-bold text-content-subtle uppercase tracking-widest">Next</span>
              <span className="text-sm font-semibold text-zinc-300 group-hover:text-white transition-colors">
                {next.title} →
              </span>
            </Link>
          ) : <div />}
        </div>
      )}

      <div className="mt-10 pt-8 border-t border-border/80">
        <Link
          href="/support"
          className="inline-flex items-center gap-2 text-xs text-content-muted hover:text-zinc-300 transition-colors group"
        >
          <ArrowLeft className="w-3.5 h-3.5 group-hover:-translate-x-0.5 transition-transform" />
          Back to Support Center
        </Link>
      </div>

    </article>
  );
}