import Link from "next/link";
import { ArrowLeft, ExternalLink } from "lucide-react";
import { BackToTopButton } from "@/components/back-to-top-button";
import { TechDocArticle } from "@/components/tech-doc-article";
import { TechDocToc } from "@/components/tech-doc-toc";

type KnowledgePoint = {
  title: string;
  note?: string;
  children?: readonly string[];
};

type TechDocPageProps = {
  eyebrow: string;
  title: string;
  description: string;
  points?: readonly KnowledgePoint[];
  contentHtml?: string;
  toc?: readonly {
    title: string;
    href: string;
  }[];
  source?: {
    label: string;
    href?: string;
  };
};

export function TechDocPage({
  eyebrow,
  title,
  description,
  points = [],
  contentHtml,
  toc = [],
  source,
}: TechDocPageProps) {
  return (
    <main className="relative min-h-dvh overflow-x-clip bg-[#05050b] px-5 py-6 text-white sm:px-8 lg:px-10">
      <div className="neon-aurora" />
      <div className="cyber-grid" />
      <div className="scanline" />

      <div className="relative z-10 mx-auto w-full max-w-[96rem]">
        <header className="flex items-center justify-between rounded-full border border-white/10 bg-white/[0.04] px-4 py-3 shadow-2xl shadow-cyan-500/10 backdrop-blur-2xl">
          <Link
            href="/notes/frontend"
            className="inline-flex h-11 items-center gap-2 rounded-full border border-white/12 bg-white/[0.05] px-4 text-sm font-semibold text-white/80 outline-none transition hover:border-cyan-300/70 hover:text-cyan-100 focus-visible:ring-2 focus-visible:ring-cyan-300"
          >
            <ArrowLeft className="h-4 w-4" />
            前端笔记
          </Link>
          <Link
            href="/"
            className="rounded-full bg-white px-4 py-2 text-sm font-black text-[#05050b] outline-none transition hover:bg-cyan-200 focus-visible:ring-2 focus-visible:ring-cyan-300"
          >
            fly
          </Link>
        </header>

        <section className="grid gap-10 py-14 lg:grid-cols-[20rem_minmax(0,64rem)] lg:justify-center lg:py-20">
          <aside className="min-w-0 lg:w-80">
            <p className="font-mono text-xs uppercase text-cyan-200">{eyebrow}</p>
            <h1 className="mt-5 font-display text-5xl font-semibold leading-tight sm:text-7xl">
              {title}
            </h1>
            <p className="mt-6 max-w-xl text-base leading-8 text-white/62">{description}</p>
            {source ? (
              source.href ? (
                <a
                  href={source.href}
                  target="_blank"
                  rel="noreferrer"
                  className="mt-8 inline-flex h-11 items-center gap-2 rounded-full border border-fuchsia-300/24 bg-fuchsia-300/[0.08] px-4 text-sm font-semibold text-fuchsia-100 outline-none transition hover:border-fuchsia-200/80 hover:bg-fuchsia-300/14 focus-visible:ring-2 focus-visible:ring-fuchsia-300"
                >
                  {source.label}
                  <ExternalLink className="h-4 w-4" />
                </a>
              ) : (
                <span className="mt-8 inline-flex h-11 items-center rounded-full border border-fuchsia-300/24 bg-fuchsia-300/[0.08] px-4 text-sm font-semibold text-fuchsia-100">
                  {source.label}
                </span>
              )
            ) : null}

            {toc.length ? <TechDocToc toc={toc} /> : null}
          </aside>

          {contentHtml ? (
            <TechDocArticle contentHtml={contentHtml} />
          ) : (
            <div className="min-w-0 space-y-4">
              {points.map((point, index) => (
                <article
                  key={point.title}
                  className="rounded-[1.5rem] border border-white/10 bg-white/[0.045] p-5 shadow-xl shadow-black/20 backdrop-blur transition hover:border-cyan-300/40 hover:bg-cyan-300/[0.06] sm:p-6"
                >
                  <div className="flex gap-4">
                    <span className="mt-1 font-mono text-sm text-cyan-200">
                      {String(index + 1).padStart(2, "0")}
                    </span>
                    <div>
                      <h2 className="text-xl font-black text-white sm:text-2xl">{point.title}</h2>
                      {point.note ? (
                        <p className="mt-3 text-sm leading-7 text-white/58">{point.note}</p>
                      ) : null}
                      {point.children?.length ? (
                        <div className="mt-4 flex flex-wrap gap-2">
                          {point.children.map((child) => (
                            <span
                              key={child}
                              className="rounded-full border border-white/10 bg-black/20 px-3 py-2 text-xs font-semibold text-white/70"
                            >
                              {child}
                            </span>
                          ))}
                        </div>
                      ) : null}
                    </div>
                  </div>
                </article>
              ))}
            </div>
          )}
        </section>
      </div>

      <BackToTopButton />
    </main>
  );
}
