import Link from "next/link";
import type { Metadata } from "next";
import { Badge, Chip, Empty, Flag, PageHeader, Panel, Table, Td, TierBadge } from "@/components/ui";
import { api } from "@/lib/api";
import { fmtInt, relTime } from "@/lib/format";

export const dynamic = "force-dynamic";
export const metadata: Metadata = { title: "Sources", description: "Every organization monitored by WebSensor, with its sensors and recent activity. Filter by country, tier, category and provenance." };

const CATS = ["ai", "cloud", "developer", "cyber", "consumer-tech", "semiconductors", "finance", "government", "statistics", "health", "pharma", "science", "space", "automotive", "commerce", "payments", "crypto", "enterprise", "internet", "standards", "news", "media", "sports", "transport", "energy"];
const TIERS = ["S", "A", "B", "C", "D"];

type Params = { q?: string; category?: string; country?: string; tier?: string; first_party?: string };

function href(p: Params, patch: Partial<Params>): string {
  const n: Record<string, string | undefined> = { ...p, ...patch };
  const sp = new URLSearchParams();
  for (const k of ["q", "category", "country", "tier", "first_party"]) if (n[k]) sp.set(k, n[k]!);
  const s = sp.toString();
  return s ? `/sources?${s}` : "/sources";
}

export default async function SourcesPage({ searchParams }: { searchParams: Promise<Params> }) {
  const raw = await searchParams;
  const sp: Params = { q: raw.q?.trim() || undefined, category: raw.category || undefined, country: raw.country?.toUpperCase() || undefined, tier: TIERS.includes((raw.tier ?? "").toUpperCase()) ? raw.tier!.toUpperCase() : undefined, first_party: raw.first_party === "true" || raw.first_party === "false" ? raw.first_party : undefined };
  const [{ items }, countries] = await Promise.all([api.sources({ q: sp.q, category: sp.category, country: sp.country, tier: sp.tier, first_party: sp.first_party }), api.countries()]);
  const active = [sp.q, sp.category, sp.country, sp.tier, sp.first_party].filter(Boolean).length;
  const firstParty = items.filter((s) => s.first_party !== false).length;
  return (
    <>
      <PageHeader compact kicker={`${fmtInt(items.length)} organizations · ${fmtInt(firstParty)} first-party · ${fmtInt(items.length - firstParty)} media`} title="Sources" description="WebSensor monitors sensors, not merely domains: each organization exposes several official endpoints (feeds, status pages, sitemaps, pricing and documentation pages). Media sources are marked EXTERNAL and never count as first-party evidence." />
      <form className="mb-2 flex flex-wrap items-center gap-2" action="/sources">
        <input name="q" defaultValue={sp.q ?? ""} placeholder="Filter by name or domain…" aria-label="Filter by name or domain" className="h-8 w-full max-w-64 min-w-0 rounded-md border border-line bg-panel px-2.5 text-[13px] placeholder:text-fg-subtle sm:w-64" />
        <select name="country" defaultValue={sp.country ?? ""} aria-label="Country" className="h-8 max-w-[14rem] rounded-md border border-line bg-panel px-2 text-[12.5px]">
          <option value="">all countries</option>
          {countries.items.map((c) => (
            <option key={c.country} value={c.country}>{c.name} · {c.sources}</option>
          ))}
        </select>
        {sp.category && <input type="hidden" name="category" value={sp.category} />}
        {sp.tier && <input type="hidden" name="tier" value={sp.tier} />}
        {sp.first_party && <input type="hidden" name="first_party" value={sp.first_party} />}
        <button type="submit" className="h-8 rounded-md border border-line bg-panel-2 px-3 text-[12.5px] hover:border-line-strong">Filter</button>
        {active > 0 && <Link href="/sources" className="text-[12px] text-fg-subtle hover:text-fg">clear {active} filter{active === 1 ? "" : "s"}</Link>}
      </form>
      <div className="mb-2 flex flex-wrap items-center gap-1">
        <span className="label mr-1">tier</span>
        <Chip href={href(sp, { tier: undefined })} tone={!sp.tier ? "signal" : "default"} className="font-mono">all</Chip>
        {TIERS.map((t) => (
          <Chip key={t} href={href(sp, { tier: t })} tone={sp.tier === t ? "signal" : "default"} className="font-mono">{t}</Chip>
        ))}
        <span className="label mx-1">·</span>
        <Chip href={href(sp, { first_party: undefined })} tone={!sp.first_party ? "signal" : "default"}>all kinds</Chip>
        <Chip href={href(sp, { first_party: "true" })} tone={sp.first_party === "true" ? "signal" : "default"}>first-party</Chip>
        <Chip href={href(sp, { first_party: "false" })} tone={sp.first_party === "false" ? "signal" : "default"}>media / external</Chip>
      </div>
      <div className="mb-3 flex flex-wrap items-center gap-1">
        <span className="label mr-1">category</span>
        <Chip href={href(sp, { category: undefined })} tone={!sp.category ? "signal" : "default"}>all</Chip>
        {CATS.map((c) => (
          <Chip key={c} href={href(sp, { category: c })} tone={sp.category === c ? "signal" : "default"}>{c}</Chip>
        ))}
        {sp.category && !CATS.includes(sp.category) && <Chip tone="signal">{sp.category}</Chip>}
      </div>
      <Panel dense>
        {items.length === 0 ? (
          <Empty>No source matches these filters.</Empty>
        ) : (
          <Table head={["Tier", "Source", "Domain", "Country", "Kind", "Categories", "Sensors", "Events 24 h", "Total", "Last event", "Health"]}>
            {items.map((s) => (
              <tr key={s.id} className="hover:bg-panel-2/60">
                <Td><TierBadge tier={s.tier} /></Td>
                <Td><Link href={`/source/${s.id}`} className="font-medium hover:underline">{s.name}</Link></Td>
                <Td mono><Link href={`/domain/${s.domain}`} className="text-fg-muted hover:underline">{s.domain}</Link></Td>
                <Td>{s.country ? <Link href={href(sp, { country: s.country })} className="inline-flex items-center gap-1 font-mono text-[11px] text-fg-muted hover:text-fg"><Flag code={s.country} /> {s.country}</Link> : <span className="text-fg-subtle">—</span>}</Td>
                <Td>{s.first_party === false ? <Badge kind="external" compact /> : <Badge kind="first-party" compact />}</Td>
                <Td><div className="flex flex-wrap gap-1">{s.categories.slice(0, 3).map((c) => <Chip key={c} href={href(sp, { category: c })}>{c}</Chip>)}{s.categories.length > 3 && <span className="font-mono text-[10.5px] text-fg-subtle">+{s.categories.length - 3}</span>}</div></Td>
                <Td mono>{s.sensor_count ?? 0}</Td>
                <Td mono>{fmtInt(s.events_24h ?? 0)}</Td>
                <Td mono className="text-fg-subtle">{fmtInt(s.event_count)}</Td>
                <Td mono className="whitespace-nowrap text-fg-subtle">{s.last_event_at ? relTime(s.last_event_at) : "—"}</Td>
                <Td>{(s.sensors_degraded ?? 0) > 0 ? <Chip tone="warn" className="font-mono">{s.sensors_degraded} DEGRADED</Chip> : <Chip tone="ok" className="font-mono">UP</Chip>}</Td>
              </tr>
            ))}
          </Table>
        )}
      </Panel>
    </>
  );
}