import type { Metadata } from "next";
import Link from "next/link";
import { getToolsBySlugs, type ToolDetail } from "@/lib/public/queries";
import { Breadcrumbs } from "@/components/breadcrumbs";
import { label, fmtDate } from "@/lib/utils";
import { CompareSearch } from "@/components/compare-search";
import { X } from "lucide-react";
export const dynamic = "force-dynamic";
export const metadata: Metadata = { title: "Compare tools", description: "Side-by-side comparison of two to five tools: documented facts (license, pricing model, platforms, interfaces) separated from editorial assessment.", robots: { index: false, follow: true } };

export default async function Compare({ searchParams }: { searchParams: Promise<{ tools?: string }> }) {
  const slugs = ((await searchParams).tools ?? "").split(",").map((s) => s.trim()).filter(Boolean).slice(0, 5);
  const tools = await getToolsBySlugs(slugs);
  const ids = tools.map((t) => t.slug);
  const facts: { k: string; v: (t: ToolDetail) => React.ReactNode }[] = [
    { k: "Vendor", v: (t) => t.vendor?.name ?? "—" }, { k: "Product type", v: (t) => label(t.productType) }, { k: "Status", v: (t) => label(t.productStatus) },
    { k: "Source model", v: (t) => label(t.sourceModel) }, { k: "License", v: (t) => t.licenseSpdx ?? (t.sourceModel === "proprietary" ? "Proprietary" : "Not verified") }, { k: "Pricing model", v: (t) => t.pricingModel.map(label).join(", ") },
    { k: "Runs", v: (t) => t.executionModes.map(label).join(", ") }, { k: "Self-hostable", v: (t) => (t.selfHostable === null ? "Unknown" : t.selfHostable ? "Yes" : "No") }, { k: "Interfaces", v: (t) => t.interfaces.map(label).join(", ") },
    { k: "Operating systems", v: (t) => t.operatingSystems.map(label).join(", ") || "—" }, { k: "Languages", v: (t) => t.languages.join(", ") || "—" }, { k: "Data formats", v: (t) => t.dataFormats.join(", ") || "—" },
    { k: "Integrations", v: (t) => t.integrations.join(", ") || "—" }, { k: "Sources cited", v: (t) => String(t.sources.length) }, { k: "Links verified", v: (t) => (t.linkState === "ok" ? fmtDate(t.checkedAt) : label(t.linkState)) },
  ];
  const editorial: { k: string; v: (t: ToolDetail) => string[] }[] = [{ k: "Capabilities", v: (t) => t.capabilities }, { k: "Strengths", v: (t) => t.advantages }, { k: "Limitations", v: (t) => t.limitations }, { k: "Best for", v: (t) => t.audiences }];
  return (
    <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6">
      <Breadcrumbs items={[{ label: "Compare" }]} />
      <h1 className="display h1 mt-3">Compare tools</h1>
      <p className="mt-2 max-w-2xl text-fg-2">Pick two to five tools. The first table lists documented facts from primary sources; the second is editorial assessment. Nothing here implies measured performance.</p>
      <div className="mt-5 flex flex-wrap items-center gap-2">
        {tools.map((t) => <Link key={t.slug} href={`/compare?tools=${ids.filter((s) => s !== t.slug).join(",")}`} rel="nofollow" className="chip chip-accent">{t.name} <X className="h-3 w-3" aria-hidden /><span className="sr-only">remove</span></Link>)}
        {tools.length < 5 && <CompareSearch current={ids} />}
      </div>
      {tools.length < 2 ? (
        <p className="card mt-8 p-8 text-center text-fg-2">Add at least two tools to compare. Tip: every tool page has a “Compare” button and lists its alternatives.</p>
      ) : (
        <>
          <h2 className="display h2 mt-10 mb-3">Documented facts</h2>
          <div className="overflow-x-auto rounded-2xl border border-line bg-bg-2" tabIndex={0} role="region" aria-label="Documented facts table">
            <table className="table min-w-[48rem]"><caption className="sr-only">Documented facts for {tools.map((t) => t.name).join(", ")}</caption>
              <thead><tr><th scope="col">Fact</th>{tools.map((t) => <th key={t.slug} scope="col"><Link href={`/tools/${t.slug}`} className="text-fg hover:text-accent normal-case tracking-normal text-sm">{t.name}</Link></th>)}</tr></thead>
              <tbody>{facts.map((f) => <tr key={f.k}><th scope="row" className="!static !bg-transparent font-medium text-fg-2 normal-case tracking-normal">{f.k}</th>{tools.map((t) => <td key={t.slug}>{f.v(t)}</td>)}</tr>)}</tbody>
            </table>
          </div>
          <h2 className="display h2 mt-10 mb-3">Editorial assessment</h2>
          <div className="overflow-x-auto rounded-2xl border border-line bg-bg-2" tabIndex={0} role="region" aria-label="Editorial assessment table">
            <table className="table min-w-[48rem]"><caption className="sr-only">Editorial assessment</caption>
              <thead><tr><th scope="col">Aspect</th>{tools.map((t) => <th key={t.slug} scope="col" className="normal-case tracking-normal text-sm text-fg">{t.name}</th>)}</tr></thead>
              <tbody>{editorial.map((e) => <tr key={e.k}><th scope="row" className="!static !bg-transparent font-medium text-fg-2 normal-case tracking-normal">{e.k}</th>{tools.map((t) => <td key={t.slug}><ul className="list-disc space-y-1 pl-4 text-fg-2">{e.v(t).map((x) => <li key={x}>{x}</li>)}</ul></td>)}</tr>)}
                <tr><th scope="row" className="!static !bg-transparent font-medium text-fg-2 normal-case tracking-normal">Summary</th>{tools.map((t) => <td key={t.slug} className="text-fg-2">{t.summary}</td>)}</tr>
              </tbody>
            </table>
          </div>
        </>
      )}
    </div>
  );
}