import Link from "next/link";
import { homeData } from "@/lib/public/queries";
import { SearchBox } from "@/components/search-box";
import { ToolCard } from "@/components/tool-card";
import { fmtDate } from "@/lib/utils";
import { ArrowRight, Sparkles, ShieldCheck, Layers, BookMarked } from "lucide-react";

export const revalidate = 300;

const PATHS = [
  { href: "/tools?exec=local&category=ai", title: "Run AI locally", text: "Inference engines and model tooling that work on Apple Silicon and your own servers." },
  { href: "/tools?category=research", title: "Write and publish research", text: "Discovery, references, LaTeX, reproducible documents and dissemination." },
  { href: "/tools?category=market-data-apis&category=sec-filings&category=hf-finance-research", title: "Financial data for research", text: "Market data, fundamentals, filings and the engines that process them." },
  { href: "/tools?source=open-source&selfhost=1", title: "Self-host everything", text: "Open-source infrastructure you can run on your own hardware." },
];

export default async function Home() {
  const { stats, featured, recent, tree, collections } = await homeData().catch(() => ({ stats: { tools: 0, deep: 0, categories: 0, vendors: 0, collections: 0, lastVerified: null }, featured: [], recent: [], tree: [], collections: [] }));
  return (
    <>
      <section className="relative overflow-hidden border-b border-line">
        <div className="grain pointer-events-none absolute inset-0 opacity-50 [mask-image:radial-gradient(60%_60%_at_50%_0%,black,transparent)]" aria-hidden />
        <div className="relative mx-auto max-w-7xl px-4 pb-16 pt-14 sm:px-6 sm:pt-20">
          <p className="eyebrow rise">Tool Atlas · curated, cited, verified</p>
          <h1 className="display h-display rise rise-1 mt-3 max-w-4xl">An encyclopedia of the software, AI systems and research tools that matter.</h1>
          <p className="rise rise-2 mt-5 max-w-2xl text-lg text-fg-2">Every entry is written from primary sources, states its license and pricing model without guesswork, lists real limitations, and shows when its links were last checked.</p>
          <div className="rise rise-3 mt-8"><SearchBox size="lg" /></div>
          <dl className="rise rise-3 mt-8 grid max-w-3xl grid-cols-2 gap-4 sm:grid-cols-4">
            {[["Tools", stats.tools], ["In-depth entries", stats.deep], ["Categories", stats.categories], ["Collections", stats.collections]].map(([k, v]) => (
              <div key={String(k)}><dt className="text-xs uppercase tracking-wider text-fg-3">{k}</dt><dd className="display text-3xl">{v as number}</dd></div>
            ))}
          </dl>
        </div>
      </section>

      <section className="mx-auto max-w-7xl px-4 py-12 sm:px-6">
        <div className="mb-5 flex items-end justify-between gap-4">
          <div><p className="eyebrow">Browse</p><h2 className="display h2 mt-1">By discipline</h2></div>
          <Link href="/categories" className="inline-flex items-center gap-1 text-sm text-accent hover:underline">All categories <ArrowRight className="h-4 w-4" aria-hidden /></Link>
        </div>
        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
          {tree.map((c) => (
            <Link key={c.slug} href={`/categories/${c.slug}`} className="card group p-4">
              <div className="flex items-center justify-between"><h3 className="font-semibold tracking-tight">{c.name}</h3><span className="chip">{c.count}</span></div>
              <p className="mt-1.5 line-clamp-2 text-sm text-fg-2">{c.description}</p>
              <p className="mt-3 line-clamp-1 text-xs text-fg-3">{c.children.slice(0, 4).map((x) => x.name).join(" · ")}</p>
            </Link>
          ))}
        </div>
      </section>

      {featured.length > 0 && (
        <section className="mx-auto max-w-7xl px-4 py-8 sm:px-6">
          <div className="mb-5 flex items-end justify-between gap-4">
            <div><p className="eyebrow inline-flex items-center gap-1"><Sparkles className="h-3.5 w-3.5" aria-hidden /> Featured</p><h2 className="display h2 mt-1">Editor&apos;s selection</h2></div>
            <Link href="/tools?depth=deep" className="inline-flex items-center gap-1 text-sm text-accent hover:underline">All in-depth entries <ArrowRight className="h-4 w-4" aria-hidden /></Link>
          </div>
          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">{featured.map((t) => <ToolCard key={t.id} t={t} />)}</div>
        </section>
      )}

      <section className="mx-auto max-w-7xl px-4 py-8 sm:px-6">
        <div className="mb-5"><p className="eyebrow inline-flex items-center gap-1"><Layers className="h-3.5 w-3.5" aria-hidden /> Discovery paths</p><h2 className="display h2 mt-1">Start from a goal</h2></div>
        <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-4">
          {PATHS.map((p) => <Link key={p.href} href={p.href} className="card p-4"><h3 className="font-semibold">{p.title}</h3><p className="mt-1 text-sm text-fg-2">{p.text}</p></Link>)}
        </div>
      </section>

      {collections.length > 0 && (
        <section className="mx-auto max-w-7xl px-4 py-8 sm:px-6">
          <div className="mb-5 flex items-end justify-between gap-4">
            <div><p className="eyebrow inline-flex items-center gap-1"><BookMarked className="h-3.5 w-3.5" aria-hidden /> Collections</p><h2 className="display h2 mt-1">Curated stacks</h2></div>
            <Link href="/collections" className="inline-flex items-center gap-1 text-sm text-accent hover:underline">All collections <ArrowRight className="h-4 w-4" aria-hidden /></Link>
          </div>
          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
            {collections.slice(0, 6).map((c) => (
              <Link key={c.slug} href={`/collections/${c.slug}`} className="card p-5">
                <h3 className="display text-xl">{c.title}</h3>
                <p className="mt-2 line-clamp-2 text-sm text-fg-2">{c.description}</p>
                <p className="mt-3 text-xs text-fg-3">{c.count} tools · {c.preview.map((p) => p.name).join(", ")}</p>
              </Link>
            ))}
          </div>
        </section>
      )}

      {recent.length > 0 && (
        <section className="mx-auto max-w-7xl px-4 py-8 pb-4 sm:px-6">
          <div className="mb-5"><p className="eyebrow inline-flex items-center gap-1"><ShieldCheck className="h-3.5 w-3.5" aria-hidden /> Recently verified</p><h2 className="display h2 mt-1">Links checked {stats.lastVerified ? fmtDate(stats.lastVerified) : "soon"}</h2></div>
          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">{recent.map((t) => <ToolCard key={t.id} t={t} />)}</div>
        </section>
      )}
    </>
  );
}