import Link from "next/link";
import type { Metadata } from "next";
import { ENTITY_TYPES } from "@websensor/core/client";
import { Chip, Empty, PageHeader, Panel, Score, Table, Tabs, Td } from "@/components/ui";
import { api } from "@/lib/api";
import { fmtInt, fmtScore, relTime, typeLabel } from "@/lib/format";

export const dynamic = "force-dynamic";
export const metadata: Metadata = { title: "Entities", description: "Organizations, products, models, APIs and other entities that events resolve to — ranked by importance, activity, velocity, quality and confirmation.", alternates: { canonical: "/entities" } };

type Search = { tab?: string; type?: string; q?: string };

export default async function EntitiesPage({ searchParams }: { searchParams: Promise<Search> }) {
  const sp = await searchParams;
  const tab = sp.tab === "all" || sp.type || sp.q ? "all" : "ranked";
  return (
    <>
      <PageHeader compact title="Entities" description="Everything important resolves to an entity. Each entity has a timeline — the equivalent of git history for its public Web presence." />
      <Tabs
        className="mb-3"
        current={tab}
        items={[
          { key: "ranked", label: "Ranked", href: "/entities" },
          { key: "all", label: "All", href: "/entities?tab=all" },
        ]}
      />
      {tab === "ranked" ? <Ranked /> : <All sp={sp} />}
    </>
  );
}

async function Ranked() {
  const { items } = await api.rank(200);
  return (
    <Panel
      title={<>WebSensor rank <span className="font-mono text-fg-subtle">{fmtInt(items.length)}</span></>}
      dense
      action={<span className="hidden text-[11px] text-fg-subtle md:inline">importance × activity × velocity × quality × confirmation — not raw counts</span>}
    >
      <p className="border-b border-line px-3 py-2 text-[12px] text-fg-muted md:hidden">Ranking uses importance × activity × velocity × quality × confirmation, not raw counts.</p>
      {items.length === 0 ? (
        <Empty>The ranking is computed from the last 7 days of activity — nothing to rank yet.</Empty>
      ) : (
        <Table head={["#", "Entity", "Type", "Rank", "24 h", "7 d", "Sources", "Avg signal", "Confirmed", "Silent 24 h", "Breaking 24 h", "Last"]}>
          {items.map((e) => (
            <tr key={e.id} className="hover:bg-panel-2/60">
              <Td mono className="text-fg-subtle">{e.rank}</Td>
              <Td>
                <Link href={`/entity/${e.id}`} className="font-medium hover:underline">{e.name}</Link>
                {e.domain && <div className="truncate font-mono text-[10.5px] text-fg-subtle">{e.domain}</div>}
              </Td>
              <Td><Chip href={`/entities?tab=all&type=${e.type}`}>{typeLabel(e.type)}</Chip></Td>
              <Td><Score value={e.rank_score} size="sm" title={`Rank score ${fmtScore(e.rank_score)} · entity importance ${fmtScore(e.importance)}`} /></Td>
              <Td mono className={e.events_24h ? "" : "text-fg-subtle"}>{fmtInt(e.events_24h)}</Td>
              <Td mono className="text-fg-muted">{fmtInt(e.events_7d)}</Td>
              <Td mono>{fmtInt(e.sources)}</Td>
              <Td mono>{fmtScore(e.avg_signal)}</Td>
              <Td mono className={e.confirmed_ratio > 0 ? "text-ok" : "text-fg-subtle"}>{Math.round(e.confirmed_ratio * 100)}%</Td>
              <Td mono className={e.silent_24h ? "text-silent" : "text-fg-subtle"}>{fmtInt(e.silent_24h)}</Td>
              <Td mono className={e.breaking_24h ? "text-hot" : "text-fg-subtle"}>{fmtInt(e.breaking_24h)}</Td>
              <Td mono className="whitespace-nowrap text-fg-subtle">{relTime(e.last_at)}</Td>
            </tr>
          ))}
        </Table>
      )}
    </Panel>
  );
}

async function All({ sp }: { sp: Search }) {
  const { items } = await api.entities({ type: sp.type, q: sp.q, limit: 400 });
  const types = new Set(items.map((e) => e.type));
  return (
    <>
      <form className="mb-3 flex flex-wrap items-center gap-2" action="/entities">
        <input type="hidden" name="tab" value="all" />
        <input name="q" defaultValue={sp.q ?? ""} placeholder="Search entities…" className="h-8 w-64 max-w-full rounded-md border border-line bg-panel px-2.5 text-[13px] placeholder:text-fg-subtle" />
        {sp.type && <input type="hidden" name="type" value={sp.type} />}
        <button type="submit" className="h-8 rounded-md border border-line bg-panel-2 px-3 text-[12.5px]">Search</button>
        <span className="font-mono text-[11px] text-fg-subtle tabular">{fmtInt(items.length)} entit{items.length === 1 ? "y" : "ies"}</span>
      </form>
      <div className="mb-3 flex flex-wrap gap-1">
        <Chip href={sp.q ? `/entities?tab=all&q=${encodeURIComponent(sp.q)}` : "/entities?tab=all"} tone={!sp.type ? "signal" : "default"}>all</Chip>
        {ENTITY_TYPES.filter((t) => types.has(t) || t === sp.type).map((t) => (
          <Chip key={t} href={`/entities?tab=all&type=${t}${sp.q ? `&q=${encodeURIComponent(sp.q)}` : ""}`} tone={sp.type === t ? "signal" : "default"}>{typeLabel(t)}</Chip>
        ))}
      </div>
      <Panel dense>
        {items.length === 0 ? (
          <Empty>No entities match.</Empty>
        ) : (
          <Table head={["Entity", "Type", "Domain", "Importance", "Events", "24 h", "Last event"]}>
            {items.map((e) => (
              <tr key={e.id} className="hover:bg-panel-2/60">
                <Td><Link href={`/entity/${e.id}`} className="font-medium hover:underline">{e.name}</Link></Td>
                <Td><Chip>{typeLabel(e.type)}</Chip></Td>
                <Td mono className="text-fg-subtle">{e.domain ?? "—"}</Td>
                <Td mono>{fmtScore(e.importance)}</Td>
                <Td mono>{fmtInt(e.event_count)}</Td>
                <Td mono className={e.events_24h ? "text-signal" : "text-fg-subtle"}>{e.events_24h ?? 0}</Td>
                <Td mono className="whitespace-nowrap text-fg-subtle">{e.last_event_at ? relTime(e.last_event_at) : "—"}</Td>
              </tr>
            ))}
          </Table>
        )}
      </Panel>
    </>
  );
}