import Link from "next/link";
import { IconArrow, IconCpu, IconShield } from "./Icons";

const FACTS: Array<[string, string, "cpu" | "shield" | "layers" | "db"]> = [
  [
    "Apple Silicon nodes",
    "Research jobs run on a private cluster of Apple Silicon Macs with unified memory, suited to numerical work and LaTeX builds.",
    "cpu",
  ],
  [
    "Isolated per-run workspaces",
    "Each run executes under a dedicated low-privilege service identity with OS-enforced sandboxing (Seatbelt), hostname-allowlisted egress and budgets for time, disk and spend.",
    "shield",
  ],
  [
    "Durable scheduling",
    "A PostgreSQL-backed queue with leases, heartbeats and fencing tokens: runs survive reloads, network blips and worker restarts; stale workers can never publish.",
    "layers",
  ],
  [
    "Evidence first",
    "Every artifact is hashed on write and versioned. Publication is a separate service the research agent cannot call.",
    "db",
  ],
];

function Glyph({ k }: { k: "cpu" | "shield" | "layers" | "db" }) {
  if (k === "cpu") return <IconCpu />;
  if (k === "shield") return <IconShield />;
  if (k === "layers")
    return (
      <svg
        width="18"
        height="18"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.6"
        strokeLinecap="round"
        strokeLinejoin="round"
        aria-hidden="true"
      >
        <path d="m12 4 8 4-8 4-8-4z" />
        <path d="m4 12 8 4 8-4M4 16l8 4 8-4" />
      </svg>
    );
  return (
    <svg
      width="18"
      height="18"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.6"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
    >
      <rect x="4" y="4" width="16" height="16" rx="2" />
      <path d="M4 10h16M10 10v10" />
    </svg>
  );
}

/** Abstract, data-free motif: a schematic of a control plane dispatching to isolated nodes. */
export function ClusterMotif({ className = "" }: { className?: string }) {
  const nodes: Array<[number, number]> = [
    [40, 30],
    [120, 22],
    [200, 34],
    [280, 26],
    [60, 110],
    [150, 118],
    [240, 106],
    [100, 190],
    [190, 196],
    [280, 184],
  ];
  return (
    <svg
      viewBox="0 0 320 220"
      className={className}
      role="img"
      aria-label="Schematic of a control plane dispatching isolated research runs to compute nodes"
    >
      <defs>
        <linearGradient id="mg" x1="0" x2="1" y1="0" y2="1">
          <stop offset="0" stopColor="var(--sci)" stopOpacity="0.9" />
          <stop offset="1" stopColor="var(--accent)" stopOpacity="0.9" />
        </linearGradient>
      </defs>
      {nodes.map(([x, y]) => (
        <line
          key={`l-${x}-${y}`}
          x1="160"
          y1="110"
          x2={x}
          y2={y}
          stroke="var(--line-strong)"
          strokeWidth="1"
          strokeDasharray="2 3"
        />
      ))}
      {nodes.map(([x, y], i) => (
        <g key={`n-${x}-${y}`}>
          <rect
            x={x - 11}
            y={y - 11}
            width="22"
            height="22"
            rx="5"
            fill="var(--bg-elev)"
            stroke="var(--line-strong)"
          />
          <rect
            x={x - 5}
            y={y - 5}
            width="10"
            height="10"
            rx="2"
            fill={i % 3 === 0 ? "url(#mg)" : "var(--line-strong)"}
          />
        </g>
      ))}
      <circle cx="160" cy="110" r="17" fill="var(--bg-elev)" stroke="url(#mg)" strokeWidth="1.5" />
      <circle cx="160" cy="110" r="5" fill="url(#mg)" />
    </svg>
  );
}

/** MacLustrInfrastructure — factual compute-credit section. */
export function MacLustrInfrastructure({ full = false }: { full?: boolean }) {
  return (
    <section aria-labelledby="maclustr" className="surface-ink overflow-hidden">
      <div className="grid gap-8 p-6 sm:p-8 lg:grid-cols-12 lg:p-12">
        <div className="lg:col-span-7">
          <p className="eyebrow" style={{ color: "#e8a885" }}>
            Powered by MacLustr
          </p>
          <h2 id="maclustr" className="title-1 mt-2">
            Research computed on MacLustr, an Apple Silicon research compute infrastructure.
          </h2>
          <p className="mt-4 max-w-xl text-sm leading-relaxed" style={{ color: "#c9c2b4" }}>
            AutoScholar is the research institution; MacLustr is the private cluster it runs on. Every study
            executes in its own sandboxed workspace, under budgets enforced outside the model, with every
            artifact hashed the moment it is written.
          </p>
          <ul className="mt-6 grid gap-4 sm:grid-cols-2">
            {FACTS.map(([h, p, k]) => (
              <li key={h} className="flex gap-3">
                <span className="mt-0.5 flex-none" style={{ color: "#e8a885" }}>
                  <Glyph k={k} />
                </span>
                <span>
                  <span className="block text-sm font-medium">{h}</span>
                  <span className="mt-1 block text-xs leading-relaxed" style={{ color: "#b5ac9c" }}>
                    {p}
                  </span>
                </span>
              </li>
            ))}
          </ul>
          {!full && (
            <Link
              href="/infrastructure"
              className="btn mt-7"
              style={{ background: "transparent", color: "#efeadf", borderColor: "#46423a" }}
            >
              About the infrastructure <IconArrow size={16} />
            </Link>
          )}
        </div>
        <div className="hidden items-center lg:col-span-5 lg:flex">
          <ClusterMotif className="w-full opacity-90" />
        </div>
      </div>
    </section>
  );
}