import Link from "next/link";
import {
  ArrowLeft,
  ArrowUpRight,
  BookOpen,
  Braces,
  Code2,
  Gauge,
  GitBranch,
  Globe2,
  Layers3,
  MonitorCog,
  RadioTower,
  Sparkles,
} from "lucide-react";

type FrontendArticle = {
  slug: string;
  title: string;
  description: string;
  href?: string;
  status?: "ready" | "soon";
};

type FrontendNotesPageProps = {
  eyebrow: string;
  title: string;
  description: string;
  archiveLabel?: string;
  featuredTitle?: string;
  listTitle?: string;
  listDescription: string;
  articles: readonly FrontendArticle[];
};

const articleVisuals: Record<
  string,
  {
    accent: string;
    glyph: string;
    track: string;
    Icon: typeof Code2;
  }
> = {
  html: {
    accent: "from-orange-300 via-rose-300 to-fuchsia-300",
    glyph: "HTML",
    track: "Markup",
    Icon: Layers3,
  },
  css: {
    accent: "from-sky-300 via-cyan-300 to-lime-300",
    glyph: "CSS",
    track: "Visual system",
    Icon: Sparkles,
  },
  "javascript-part-1": {
    accent: "from-yellow-200 via-cyan-300 to-blue-400",
    glyph: "JS-I",
    track: "Core language",
    Icon: Braces,
  },
  "javascript-part-2": {
    accent: "from-cyan-300 via-violet-300 to-fuchsia-300",
    glyph: "JS-II",
    track: "Runtime",
    Icon: Code2,
  },
  "vue-part-1": {
    accent: "from-emerald-300 via-teal-300 to-cyan-300",
    glyph: "Vue I",
    track: "Framework",
    Icon: MonitorCog,
  },
  "vue-part-2": {
    accent: "from-green-300 via-cyan-300 to-blue-300",
    glyph: "Vue II",
    track: "Ecosystem",
    Icon: MonitorCog,
  },
  "react-part-1": {
    accent: "from-cyan-200 via-blue-300 to-indigo-300",
    glyph: "React I",
    track: "UI model",
    Icon: RadioTower,
  },
  "react-part-2": {
    accent: "from-blue-300 via-fuchsia-300 to-rose-300",
    glyph: "React II",
    track: "Architecture",
    Icon: RadioTower,
  },
  network: {
    accent: "from-lime-200 via-cyan-300 to-blue-400",
    glyph: "NET",
    track: "Protocol",
    Icon: Globe2,
  },
  browser: {
    accent: "from-purple-300 via-cyan-300 to-emerald-300",
    glyph: "BOM",
    track: "Browser",
    Icon: MonitorCog,
  },
  performance: {
    accent: "from-lime-200 via-yellow-200 to-cyan-300",
    glyph: "Perf",
    track: "Optimization",
    Icon: Gauge,
  },
  "code-output": {
    accent: "from-fuchsia-300 via-rose-300 to-orange-200",
    glyph: "Quiz",
    track: "Execution",
    Icon: Braces,
  },
  git: {
    accent: "from-orange-200 via-rose-300 to-cyan-300",
    glyph: "Git",
    track: "Version control",
    Icon: GitBranch,
  },
};

const featuredSlugs = ["javascript-part-1", "css", "browser"] as const;

function getArticleVisual(slug: string) {
  return (
    articleVisuals[slug] ?? {
      accent: "from-cyan-300 via-fuchsia-300 to-lime-200",
      glyph: "Soon",
      track: "Coming soon",
      Icon: Code2,
    }
  );
}

export function FrontendNotesPage({
  eyebrow,
  title,
  description,
  archiveLabel = "ARCHIVE",
  featuredTitle = "精选入口",
  listTitle = "全部文章",
  listDescription,
  articles,
}: FrontendNotesPageProps) {
  const featuredArticles =
    featuredSlugs
      .map((slug) => articles.find((article) => article.slug === slug))
      .filter((article): article is FrontendArticle => Boolean(article)).length > 0
      ? featuredSlugs
          .map((slug) => articles.find((article) => article.slug === slug))
          .filter((article): article is FrontendArticle => Boolean(article))
      : articles.slice(0, 3);

  const renderArticleContent = (article: FrontendArticle, index: number, compact = false) => {
    const visual = getArticleVisual(article.slug);
    const Icon = visual.Icon;
    const isSoon = article.status === "soon";

    if (compact) {
      return (
        <>
          <div
            className={`flex aspect-square items-center justify-center bg-gradient-to-br ${visual.accent} font-mono text-sm font-black text-[#05050b] shadow-lg shadow-cyan-500/15`}
          >
            {isSoon ? "..." : String(index + 1).padStart(2, "0")}
          </div>
          <div className="min-w-0">
            <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.16em] text-cyan-100/65">
              <Icon className="h-4 w-4" />
              {visual.track}
            </div>
            <h3 className="mt-2 text-xl font-black text-white">{article.title}</h3>
            <p className="mt-2 line-clamp-2 text-sm leading-6 text-white/54">
              {article.description}
            </p>
          </div>
          <ArrowUpRight className="h-5 w-5 text-white/42 transition group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-cyan-100" />
        </>
      );
    }

    return (
      <>
        <div className={`absolute inset-x-0 top-0 h-1 bg-gradient-to-r ${visual.accent}`} />
        <div className="flex items-start justify-between gap-4">
          <div
            className={`inline-flex h-14 w-14 items-center justify-center bg-gradient-to-br ${visual.accent} font-mono text-xs font-black text-[#05050b]`}
          >
            {visual.glyph}
          </div>
          <span className="font-mono text-sm text-fuchsia-200/70">
            {isSoon ? "SOON" : String(index + 1).padStart(2, "0")}
          </span>
        </div>

        <div className="mt-8 flex items-center gap-2 text-xs font-bold uppercase tracking-[0.16em] text-cyan-100/60">
          <Icon className="h-4 w-4" />
          {visual.track}
        </div>
        <h3 className="mt-4 text-2xl font-black leading-tight text-white">{article.title}</h3>
        <p className="mt-4 line-clamp-3 text-sm leading-7 text-white/55">{article.description}</p>

        <div className="absolute inset-x-5 bottom-5 flex items-center justify-between border-t border-white/10 pt-4">
          <span className="font-mono text-xs uppercase tracking-[0.16em] text-white/42">
            {isSoon ? "敬请期待" : "Read article"}
          </span>
          <span className="inline-flex h-9 w-9 items-center justify-center rounded-full border border-cyan-300/24 bg-cyan-300/[0.08] text-cyan-100 transition group-hover:border-fuchsia-300/70 group-hover:text-fuchsia-100">
            <ArrowUpRight className="h-4 w-4" />
          </span>
        </div>
      </>
    );
  };

  return (
    <main className="relative min-h-dvh overflow-hidden 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 max-w-7xl">
        <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">
          <Link
            href="/"
            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 min-h-[calc(100dvh-92px)] gap-10 py-12 lg:grid-cols-[0.9fr_1.1fr] lg:items-center lg:py-14">
          <div>
            <div className="inline-flex items-center gap-2 rounded-full border border-cyan-300/30 bg-cyan-300/10 px-4 py-2 font-mono text-xs uppercase text-cyan-100 shadow-lg shadow-cyan-500/10">
              <BookOpen className="h-4 w-4" />
              {eyebrow}
            </div>
            <h1 className="mt-7 font-display text-5xl font-black leading-tight sm:text-7xl lg:text-8xl">
              {title}
              <span className="block bg-gradient-to-r from-cyan-200 via-fuchsia-200 to-lime-200 bg-clip-text text-transparent">
                {archiveLabel}
              </span>
            </h1>
            <p className="mt-7 max-w-2xl text-base leading-8 text-white/62 sm:text-lg">
              {description}
            </p>

            <div className="mt-9 h-px max-w-xl bg-gradient-to-r from-cyan-300 via-fuchsia-300 to-transparent" />
          </div>

          <div className="relative">
            <div className="absolute -inset-6 bg-[radial-gradient(circle_at_20%_12%,rgba(34,211,238,0.25),transparent_30%),radial-gradient(circle_at_84%_80%,rgba(217,70,239,0.2),transparent_32%)] blur-2xl" />
            <div className="relative overflow-hidden border border-white/10 bg-[#090915]/90 p-5 shadow-2xl shadow-black/40 sm:p-6">
              <div className="flex items-center justify-between border-b border-white/10 pb-4">
                <div>
                  <p className="font-mono text-xs uppercase tracking-[0.2em] text-fuchsia-200/70">
                    launch sequence
                  </p>
                  <h2 className="mt-2 text-2xl font-black">{featuredTitle}</h2>
                </div>
                <div className="h-3 w-3 rounded-full bg-lime-300 shadow-[0_0_24px_rgba(190,242,100,0.85)]" />
              </div>

              <div className="mt-5 grid gap-3">
                {featuredArticles.map((article, index) => {
                  const className =
                    "group grid gap-4 border border-white/10 bg-white/[0.045] p-4 outline-none transition hover:-translate-y-0.5 hover:border-cyan-300/50 hover:bg-cyan-300/[0.07] focus-visible:ring-2 focus-visible:ring-cyan-300 sm:grid-cols-[4.8rem_1fr_auto] sm:items-center";

                  return article.href ? (
                    <Link key={article.slug} href={article.href} className={className}>
                      {renderArticleContent(article, index, true)}
                    </Link>
                  ) : (
                    <div key={article.slug} className={className}>
                      {renderArticleContent(article, index, true)}
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        </section>

        <section className="pb-16">
          <div className="flex flex-col justify-between gap-4 border-y border-white/10 py-7 sm:flex-row sm:items-end">
            <div>
              <p className="font-mono text-xs uppercase tracking-[0.2em] text-cyan-200/70">
                all dossiers
              </p>
              <h2 className="mt-3 text-3xl font-black text-white sm:text-4xl">{listTitle}</h2>
            </div>
            <p className="max-w-xl text-sm leading-7 text-white/52">
              {listDescription}
            </p>
          </div>

          <div className="mt-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
            {articles.map((article, index) => {
              const className =
                "group relative min-h-72 overflow-hidden border border-white/10 bg-white/[0.04] p-5 outline-none transition hover:-translate-y-1 hover:border-white/25 hover:bg-white/[0.065] focus-visible:ring-2 focus-visible:ring-cyan-300";

              return article.href ? (
                <Link
                  key={article.slug}
                  href={article.href}
                  className={className}
                >
                  {renderArticleContent(article, index)}
                </Link>
              ) : (
                <div key={article.slug} className={className}>
                  {renderArticleContent(article, index)}
                </div>
              );
            })}
          </div>
        </section>
      </div>
    </main>
  );
}
