import { disciplineCounts, listTopics, searchPapers } from "@autoscholar/core";
import { PublicSearchQuery } from "@autoscholar/schemas";
import Link from "next/link";
import { DisciplineExplorer } from "@/components/DisciplineExplorer";
import { Disclosure } from "@/components/Disclosure";
import { EmptyResearchState } from "@/components/EmptyState";
import { IconArrow } from "@/components/Icons";
import { ClusterMotif, MacLustrInfrastructure } from "@/components/MacLustrInfrastructure";
import { PaperCard } from "@/components/PaperCard";
import { PipelineStrip } from "@/components/ResearchPipeline";
import { SectionHeading } from "@/components/SectionHeading";
import { db } from "@/lib/server/db";

export const dynamic = "force-dynamic";

/** Editorial hero motif: a vector "evidence ledger" — abstract, built from no data. */
function HeroMotif() {
  const rows = Array.from({ length: 8 }, (_, i) => i);
  return (
    <svg
      viewBox="0 0 360 300"
      className="h-auto w-full"
      role="img"
      aria-label="Abstract illustration of a verified research ledger"
    >
      <defs>
        <linearGradient id="hg" x1="0" x2="1">
          <stop offset="0" stopColor="var(--sci)" />
          <stop offset="1" stopColor="var(--accent)" />
        </linearGradient>
      </defs>
      <rect x="18" y="14" width="324" height="272" rx="14" fill="var(--bg-elev)" stroke="var(--line)" />
      <rect x="18" y="14" width="324" height="40" rx="14" fill="var(--bg-muted)" />
      <text x="36" y="39" fontFamily="var(--font-mono)" fontSize="11" fill="var(--fg-subtle)">
        AS-WP-2026-····
      </text>
      <circle cx="318" cy="34" r="5" fill="url(#hg)" />
      {rows.map((i) => {
        const y = 74 + i * 22;
        const w = [180, 230, 140, 210, 170, 240, 120, 200][i] ?? 160;
        const ok = i !== 6;
        return (
          <g key={i}>
            <text x="36" y={y + 4} fontFamily="var(--font-mono)" fontSize="9" fill="var(--fg-subtle)">
              {String(i).padStart(2, "0")}
            </text>
            <rect
              x="60"
              y={y - 5}
              width={w}
              height="10"
              rx="5"
              fill={i % 3 === 0 ? "var(--sci-soft)" : "var(--bg-muted)"}
            />
            <rect
              x="60"
              y={y - 5}
              width={Math.round(w * 0.55)}
              height="10"
              rx="5"
              fill={i % 3 === 0 ? "var(--sci)" : "var(--line-strong)"}
              opacity={i % 3 === 0 ? 0.55 : 0.9}
            />
            <path
              d={ok ? `M304 ${y - 2} l4 4 7-8` : `M304 ${y - 4} l8 8 m0 -8 l-8 8`}
              stroke={ok ? "var(--color-ok-500)" : "var(--color-danger-500)"}
              strokeWidth="1.6"
              fill="none"
              strokeLinecap="round"
            />
          </g>
        );
      })}
      <path d="M36 270 H324" stroke="var(--line)" />
      <text x="36" y="262" fontFamily="var(--font-mono)" fontSize="9" fill="var(--fg-subtle)">
        sha256 · verified · gates 16/16
      </text>
    </svg>
  );
}

export default async function Home() {
  const d = db();
  const latest = await searchPapers(d, PublicSearchQuery.parse({ pageSize: "7" }));
  const [featured, ...recent] = latest.items;
  const counts = await disciplineCounts(d);
  const topics = await listTopics(d);
  const total = counts.reduce((n, c) => n + c.n, 0);

  return (
    <div>
      {/* Hero */}
      <section className="container-x section-tight relative">
        <div className="grid items-center gap-10 lg:grid-cols-12 lg:gap-12">
          <div className="reveal lg:col-span-7">
            <p className="eyebrow">Autonomous Research Foundry</p>
            <h1 className="display mt-4 max-w-[13ch]">Research you can check, not just read.</h1>
            <p className="lede mt-5">
              AutoScholar is a library of original working papers produced by an autonomous, auditable
              research pipeline. Every release ships its sources, code, data and build evidence.
            </p>
            <div className="mt-7 flex flex-wrap gap-3">
              <Link href="/research" className="btn btn-primary">
                Browse the library <IconArrow size={16} />
              </Link>
              <Link href="/methodology" className="btn">
                How papers are produced
              </Link>
            </div>
            <dl className="mt-8 grid max-w-md grid-cols-3 gap-4 border-t pt-5 hairline">
              <div>
                <dt className="label">Papers</dt>
                <dd className="serif mt-1 text-2xl">{total}</dd>
              </div>
              <div>
                <dt className="label">Hard gates</dt>
                <dd className="serif mt-1 text-2xl">16</dd>
              </div>
              <div>
                <dt className="label">Stages</dt>
                <dd className="serif mt-1 text-2xl">11</dd>
              </div>
            </dl>
          </div>
          <div className="reveal reveal-2 lg:col-span-5">
            <HeroMotif />
          </div>
        </div>
        <div className="mt-8">
          <Disclosure compact />
        </div>
      </section>

      {/* Featured + latest */}
      <section className="container-x section-tight" aria-labelledby="latest">
        <SectionHeading
          eyebrow="Library"
          title="Latest working papers"
          id="latest"
          more={{ href: "/research", label: "All papers" }}
        >
          Newest releases first. Each paper lists its verified references, artifacts and provenance.
        </SectionHeading>
        <div className="mt-8">
          {!featured ? (
            <EmptyResearchState />
          ) : (
            <div className="space-y-6">
              <PaperCard p={featured} featured />
              {recent.length > 0 && (
                <ul className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                  {recent.slice(0, 6).map((p, i) => (
                    <li key={p.publicId}>
                      <PaperCard p={p} index={i} />
                    </li>
                  ))}
                </ul>
              )}
            </div>
          )}
        </div>
      </section>

      {/* Disciplines */}
      <section className="container-x section-tight" aria-labelledby="subjects">
        <SectionHeading
          eyebrow="Subject explorer"
          title="Disciplines"
          id="subjects"
          tone="sci"
          more={{ href: "/topics", label: "All topics" }}
        >
          Every legitimate academic discipline is in scope. Methodology follows the question.
        </SectionHeading>
        <div className="mt-8">
          <DisciplineExplorer counts={counts} topics={topics} />
        </div>
      </section>

      {/* Process */}
      <section className="section-tight" aria-labelledby="process" style={{ background: "var(--bg-muted)" }}>
        <div className="container-x">
          <SectionHeading
            eyebrow="Process"
            title="Eleven stages, two independent halves"
            id="process"
            more={{ href: "/methodology", label: "Full methodology" }}
          >
            Research runs on an isolated MacLustr worker; verification and publication run on the control
            plane, where deterministic gates decide — never the model.
          </SectionHeading>
          <div className="mt-8">
            <PipelineStrip />
          </div>
          <ul className="mt-8 grid gap-6 md:grid-cols-3">
            {[
              [
                "Integrity before throughput",
                "No paper is released unless its central claims trace to verified sources or executed artifacts and its PDF rebuilds from the released LaTeX.",
              ],
              [
                "Evidence travels with the paper",
                "Manuscript source, verified bibliography, code and data when part of the study, reproducibility notes and a redacted provenance record.",
              ],
              [
                "Honest about what this is",
                "AI-generated working papers, not peer-reviewed articles. Automated review is critique, not validation. Corrections and retractions are public and permanent.",
              ],
            ].map(([h, p]) => (
              <li key={h} className="border-t pt-4 hairline">
                <h3 className="title-3">{h}</h3>
                <p className="muted mt-2 text-sm leading-relaxed">{p}</p>
              </li>
            ))}
          </ul>
        </div>
      </section>

      {/* Infrastructure */}
      <section className="container-x section-tight">
        <MacLustrInfrastructure />
        <div className="sr-only">
          <ClusterMotif />
        </div>
      </section>
    </div>
  );
}