import Link from "next/link";
import type { Metadata } from "next";
import { EventRow } from "@/components/event-row";
import { Badge, Bar, Chip, Empty, Flag, PageHeader, Panel, Score, StateBadge, Table, Td, Tabs, TierBadge } from "@/components/ui";
import { api, type Cluster, type EventItem } from "@/lib/api";
import { CHANNELS, SAVED_VIEWS, feedHref, fmtInt, fmtOffset, fmtScore, relTime, typeLabel } from "@/lib/format";

export const dynamic = "force-dynamic";

const TABS = [
  { key: "trending", label: "Trending" },
  { key: "breaking", label: "Breaking" },
  { key: "silent", label: "Silent" },
  { key: "newly", label: "Newly detected" },
  { key: "active", label: "Active sources" },
  { key: "unusual", label: "Unusual activity" },
  { key: "clusters", label: "Clusters" },
  { key: "entities", label: "Entities" },
  { key: "sources", label: "Sources" },
  { key: "categories", label: "Categories" },
  { key: "countries", label: "Countries" },
] as const;
type TabKey = (typeof TABS)[number]["key"];

function tabOf(v: string | undefined): TabKey {
  return (TABS.find((t) => t.key === v)?.key ?? "trending") as TabKey;
}

export async function generateMetadata({ searchParams }: { searchParams: Promise<{ tab?: string }> }): Promise<Metadata> {
  const { tab } = await searchParams;
  const t = TABS.find((x) => x.key === tabOf(tab))!;
  return { title: `Discover · ${t.label}`, description: "Trending entities, breaking clusters, silent changes, newly detected signals, active and anomalous sources, clusters, entities, sources, categories and countries.", alternates: { canonical: t.key === "trending" ? "/explore" : `/explore?tab=${t.key}` } };
}

/** Discover page (spec §28): URL-driven tabs over the derived views of the event store. */
export default async function ExplorePage({ searchParams }: { searchParams: Promise<{ tab?: string }> }) {
  const sp = await searchParams;
  const tab = tabOf(sp.tab);
  const [x, trending, desk, rank, sources, countries] = await Promise.all([
    api.explore(),
    tab === "trending" ? api.trending(24, 30) : Promise.resolve({ items: [] }),
    tab === "breaking" ? api.breakingDesk() : Promise.resolve(null),
    tab === "entities" ? api.rank(50) : Promise.resolve({ items: [] }),
    tab === "sources" ? api.sources({}) : Promise.resolve({ items: [] }),
    tab === "countries" ? api.countries() : Promise.resolve({ items: [] }),
  ]);
  const counts: Partial<Record<TabKey, number>> = {
    trending: tab === "trending" ? trending.items.length : undefined,
    breaking: desk ? desk.breaking_now.length + desk.developing.length + desk.recently_confirmed.length : undefined,
    silent: x?.silent_changes?.length,
    newly: x?.newly_detected?.length,
    active: x?.most_active_sources?.length,
    unusual: x?.unusual_activity?.length,
    clusters: x?.clusters?.length,
    entities: tab === "entities" ? rank.items.length : undefined,
    sources: tab === "sources" ? sources.items.length : undefined,
    categories: x?.by_category?.length,
    countries: tab === "countries" ? countries.items.length : undefined,
  };
  return (
    <>
      <PageHeader compact kicker="Discover" title="Explore" description="Derived views over the event store: who is changing the most, what mattered most, what changed silently, and where activity is abnormal." />
      <Tabs className="mb-3" current={tab} items={TABS.map((t) => ({ key: t.key, label: t.label, href: t.key === "trending" ? "/explore" : `/explore?tab=${t.key}`, count: counts[t.key] }))} />
      <div className="mb-3 flex flex-wrap items-center gap-1">
        <span className="mr-1 text-[11px] text-fg-subtle">Saved views</span>
        {SAVED_VIEWS.map((v) => (
          <Chip key={v.key} href={feedHref(v.query, "/live")}>{v.label}</Chip>
        ))}
      </div>

      {tab === "trending" && <TrendingTab items={trending.items} />}
      {tab === "breaking" && <BreakingTab desk={desk} />}
      {tab === "silent" && (
        <Panel title="Silent changes · 48 h" dense action={<Link href="/silent" className="text-[11px] text-fg-subtle hover:text-fg">all silent →</Link>}>
          {x?.silent_changes?.length ? x.silent_changes.map((e) => <EventRow key={e.id} ev={e} showDate />) : <Empty>No silent change detected in this window.</Empty>}
        </Panel>
      )}
      {tab === "newly" && (
        <Panel title="Newly detected · first observation of a page, feed or entity" dense action={<Link href="/live" className="text-[11px] text-fg-subtle hover:text-fg">live →</Link>}>
          {x?.newly_detected?.length ? x.newly_detected.map((e) => <EventRow key={e.id} ev={e} showDate />) : <Empty>Nothing newly detected in this window.</Empty>}
        </Panel>
      )}
      {tab === "active" && <ActiveTab items={x?.most_active_sources ?? []} />}
      {tab === "unusual" && <UnusualTab items={x?.unusual_activity ?? []} />}
      {tab === "clusters" && <ClustersTab items={x?.clusters ?? []} />}
      {tab === "entities" && <EntitiesTab items={rank.items} />}
      {tab === "sources" && <SourcesTab items={sources.items} />}
      {tab === "categories" && <CategoriesTab byCategory={x?.by_category ?? []} byType={x?.by_type ?? []} labels={x?.event_types ?? {}} />}
      {tab === "countries" && <CountriesTab items={countries.items} />}
    </>
  );
}

// ---------------------------------------------------------------------------------------

function Dir({ d }: { d?: "up" | "down" | "flat" }) {
  const c = d === "up" ? "text-signal" : d === "down" ? "text-fg-subtle" : "text-fg-muted";
  return <span className={`font-mono ${c}`} title={d === "up" ? "Rising vs. previous window" : d === "down" ? "Falling vs. previous window" : "Flat vs. previous window"}>{d === "up" ? "↑" : d === "down" ? "↓" : "→"}</span>;
}

function TrendingTab({ items }: { items: Awaited<ReturnType<typeof api.trending>>["items"] }) {
  return (
    <Panel title="Trending entities · 24 h" dense action={<span className="text-[11px] text-fg-subtle">score = volume × acceleration × signal, vs. the previous 24 h</span>}>
      {items.length === 0 ? (
        <Empty>Trending is computed from the last 24 h of events.</Empty>
      ) : (
        <Table head={["#", "Entity", "", "Events", "Sources", "1st-party", "Silent", "Avg signal", "Score"]}>
          {items.map((t, i) => (
            <tr key={t.id} className="hover:bg-panel-2/60">
              <Td mono className="text-fg-subtle">{i + 1}</Td>
              <Td>
                <Link href={`/entity/${t.id}`} className="font-medium hover:underline">{t.name}</Link>
                <div className="truncate font-mono text-[10.5px] text-fg-subtle">{t.type}{t.domain ? ` · ${t.domain}` : ""}</div>
              </Td>
              <Td mono><Dir d={t.direction} /></Td>
              <Td mono className="whitespace-nowrap">{fmtInt(t.events)}<span className="text-fg-subtle"> / {fmtInt(t.prev_events)}</span></Td>
              <Td mono>{t.sources}</Td>
              <Td mono className={t.first_party ? "text-signal" : "text-fg-subtle"}>{t.first_party ?? 0}</Td>
              <Td mono className={t.silent ? "text-silent" : "text-fg-subtle"}>{t.silent}</Td>
              <Td mono>{fmtScore(t.avg_signal)}</Td>
              <Td>
                <div className="flex w-28 items-center gap-2">
                  <Bar value={t.score} tone={t.score >= 80 ? "hot" : t.score >= 60 ? "high" : "signal"} />
                  <span className="w-8 text-right font-mono text-[12px] font-semibold tabular">{fmtScore(t.score)}</span>
                </div>
              </Td>
            </tr>
          ))}
        </Table>
      )}
    </Panel>
  );
}

function ClusterRows({ items, empty }: { items: Cluster[]; empty: string }) {
  if (!items.length) return <Empty>{empty}</Empty>;
  return (
    <ul className="divide-y divide-line">
      {items.map((c) => {
        const e = c.event as EventItem | null | undefined;
        return (
          <li key={c.id} className="grid grid-cols-[auto_1fr] items-start gap-x-3 px-3 py-2 text-[13px]">
            <Score value={e?.signal_score ?? c.max_importance} kind="signal" size="sm" />
            <div className="min-w-0">
              <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[11px] text-fg-subtle">
                <StateBadge state={c.state} />
                {(e?.source ?? c.source) && <span className="truncate font-mono uppercase text-fg-muted">{(e?.source ?? c.source)?.name}</span>}
                {e?.country && <Flag code={e.country} />}
                <span className="ml-auto whitespace-nowrap font-mono tabular">{relTime(c.last_at)}</span>
              </div>
              <Link href={`/cluster/${c.primary_slug ?? c.slug ?? c.id}`} className="mt-0.5 block font-medium leading-snug hover:underline">{c.title}</Link>
              <div className="mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[11px] text-fg-subtle">
                <span>{c.event_count} signal{c.event_count === 1 ? "" : "s"} · {c.source_count ?? 1} source{(c.source_count ?? 1) === 1 ? "" : "s"}</span>
                {(c.first_party_count ?? 0) > 0 && <span className="text-signal">{c.first_party_count} first-party</span>}
                {(c.external_count ?? 0) > 0 && <span>{c.external_count} external</span>}
                {c.lead_time_ms && c.lead_time_ms > 0 ? <span title="WebSensor lead time before the first external report">lead {fmtOffset(c.lead_time_ms).replace("+", "")}</span> : null}
                {c.categories?.slice(0, 2).map((k) => <Chip key={k} href={`/category/${k}`}>{k}</Chip>)}
              </div>
            </div>
          </li>
        );
      })}
    </ul>
  );
}

function BreakingTab({ desk }: { desk: Awaited<ReturnType<typeof api.breakingDesk>> }) {
  const d = desk ?? { breaking_now: [], developing: [], recently_confirmed: [], watching: [] };
  return (
    <div className="grid gap-4 xl:grid-cols-2">
      <Panel title={<span className="text-hot">Breaking now <span className="font-mono text-fg-subtle">{d.breaking_now.length}</span></span>} dense action={<Link href="/breaking" className="text-[11px] text-fg-subtle hover:text-fg">desk →</Link>}>
        <ClusterRows items={d.breaking_now} empty="Nothing is breaking right now. Breaking requires strong signal, freshness and confirmation — not just recency." />
      </Panel>
      <Panel title={<span className="text-high">Developing <span className="font-mono text-fg-subtle">{d.developing.length}</span></span>} dense>
        <ClusterRows items={d.developing} empty="No developing story: signals are not accumulating fast enough anywhere." />
      </Panel>
      <Panel title={<span className="text-ok">Recently confirmed <span className="font-mono text-fg-subtle">{d.recently_confirmed.length}</span></span>} dense>
        <ClusterRows items={d.recently_confirmed} empty="No cluster reached independent confirmation in the last 48 h." />
      </Panel>
      <Panel title="Watching · high signal, not yet breaking" dense>
        {d.watching.length ? d.watching.slice(0, 12).map((e) => <EventRow key={e.id} ev={e} />) : <Empty>Nothing to watch.</Empty>}
      </Panel>
    </div>
  );
}

function ActiveTab({ items }: { items: NonNullable<Awaited<ReturnType<typeof api.explore>>>["most_active_sources"] }) {
  const max = Math.max(1, ...items.map((s) => s.events_24h));
  return (
    <Panel title="Most active sources · 24 h" dense action={<Link href="/sources" className="text-[11px] text-fg-subtle hover:text-fg">all sources →</Link>}>
      {items.length === 0 ? (
        <Empty />
      ) : (
        <Table head={["#", "Source", "Domain", "Kind", "Events 24 h", "", "Max importance"]}>
          {items.map((s, i) => (
            <tr key={s.id} className="hover:bg-panel-2/60">
              <Td mono className="text-fg-subtle">{i + 1}</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 as { first_party?: boolean }).first_party === false ? <Badge kind="external" compact /> : <Badge kind="first-party" compact />}</Td>
              <Td mono>{fmtInt(s.events_24h)}</Td>
              <Td><div className="w-24 sm:w-40"><Bar value={s.events_24h} max={max} tone="signal" /></div></Td>
              <Td><Score value={s.max_importance} size="sm" /></Td>
            </tr>
          ))}
        </Table>
      )}
    </Panel>
  );
}

function UnusualTab({ items }: { items: NonNullable<Awaited<ReturnType<typeof api.explore>>>["unusual_activity"] }) {
  return (
    <Panel title="Unusual activity · last 2 h vs. 14-day baseline" dense action={<Link href="/radar" className="text-[11px] text-fg-subtle hover:text-fg">radar →</Link>}>
      {items.length === 0 ? (
        <Empty>Activity anomalies compare the last 2 h of raw changes with a 14-day baseline. Nothing is far above its baseline right now.</Empty>
      ) : (
        <Table head={["Source", "Domain", "Changes 2 h", "Baseline / day", "vs. baseline", "Activity score"]}>
          {items.map((s) => {
            const tone = s.activity_score >= 70 ? "hot" : s.activity_score >= 45 ? "high" : "signal";
            return (
              <tr key={s.id} className="hover:bg-panel-2/60">
                <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 mono>{s.changes_2h}</Td>
                <Td mono className="text-fg-subtle">{s.baseline_per_day}</Td>
                <Td mono className={`font-semibold ${tone === "hot" ? "text-hot" : tone === "high" ? "text-high" : "text-fg-muted"}`}>{s.pct_vs_baseline !== null && s.pct_vs_baseline !== undefined ? `+${Math.min(9999, Math.round(s.pct_vs_baseline)).toLocaleString("en-US")}%` : "—"}</Td>
                <Td>
                  <div className="flex w-32 items-center gap-2">
                    <Bar value={s.activity_score} tone={tone} />
                    <span className="w-8 text-right font-mono text-[12px] font-semibold tabular">{fmtScore(s.activity_score)}</span>
                  </div>
                </Td>
              </tr>
            );
          })}
        </Table>
      )}
    </Panel>
  );
}

function ClustersTab({ items }: { items: Cluster[] }) {
  return (
    <Panel title="Event clusters · 48 h" dense action={<Link href="/breaking" className="text-[11px] text-fg-subtle hover:text-fg">breaking desk →</Link>}>
      <ClusterRows items={items} empty="No multi-observation clusters yet. Related observations are grouped into clusters as they arrive." />
    </Panel>
  );
}

function EntitiesTab({ items }: { items: Awaited<ReturnType<typeof api.rank>>["items"] }) {
  return (
    <Panel title="Entity rankings · 7 d" dense action={<Link href="/entities" className="text-[11px] text-fg-subtle hover:text-fg">all entities →</Link>}>
      {items.length === 0 ? (
        <Empty>Rankings appear once entities accumulate events.</Empty>
      ) : (
        <Table head={["#", "Entity", "Type", "24 h", "7 d", "Baseline / d", "Sources", "Silent", "Breaking", "Avg signal", "Confirmed", "Last", "Rank score"]}>
          {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>{e.type.replace(/_/g, " ")}</Chip></Td>
              <Td mono>{fmtInt(e.events_24h)}</Td>
              <Td mono>{fmtInt(e.events_7d)}</Td>
              <Td mono className="text-fg-subtle">{e.baseline_per_day.toFixed(1)}</Td>
              <Td mono>{e.sources}</Td>
              <Td mono className={e.silent_24h ? "text-silent" : "text-fg-subtle"}>{e.silent_24h}</Td>
              <Td mono className={e.breaking_24h ? "text-hot" : "text-fg-subtle"}>{e.breaking_24h}</Td>
              <Td mono>{fmtScore(e.avg_signal)}</Td>
              <Td mono className="text-fg-subtle">{Math.round(e.confirmed_ratio * 100)}%</Td>
              <Td mono className="text-fg-subtle">{relTime(e.last_at)}</Td>
              <Td>
                <div className="flex w-24 items-center gap-2">
                  <Bar value={e.rank_score} tone={e.rank_score >= 80 ? "hot" : e.rank_score >= 60 ? "high" : "signal"} />
                  <span className="w-7 text-right font-mono text-[12px] font-semibold tabular">{fmtScore(e.rank_score)}</span>
                </div>
              </Td>
            </tr>
          ))}
        </Table>
      )}
    </Panel>
  );
}

function SourcesTab({ items }: { items: Awaited<ReturnType<typeof api.sources>>["items"] }) {
  const top = [...items].sort((a, b) => (b.events_24h ?? 0) - (a.events_24h ?? 0)).slice(0, 50);
  const max = Math.max(1, ...top.map((s) => s.events_24h ?? 0));
  return (
    <Panel title="Sources · top 50 by events in 24 h" dense action={<Link href="/sources" className="text-[11px] text-fg-subtle hover:text-fg">all sources →</Link>}>
      {top.length === 0 ? (
        <Empty />
      ) : (
        <Table head={["Tier", "Source", "Country", "Kind", "Categories", "Sensors", "Events 24 h", "", "Total", "Last event"]}>
          {top.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>
                <div className="truncate font-mono text-[10.5px] text-fg-subtle">{s.domain}</div>
              </Td>
              <Td><Flag code={s.country} /></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={`/category/${c}`}>{c}</Chip>)}</div></Td>
              <Td mono>{s.sensor_count ?? 0}</Td>
              <Td mono>{fmtInt(s.events_24h ?? 0)}</Td>
              <Td><div className="w-20 sm:w-32"><Bar value={s.events_24h ?? 0} max={max} /></div></Td>
              <Td mono className="text-fg-subtle">{fmtInt(s.event_count)}</Td>
              <Td mono className="text-fg-subtle">{s.last_event_at ? relTime(s.last_event_at) : "—"}</Td>
            </tr>
          ))}
        </Table>
      )}
    </Panel>
  );
}

function CategoriesTab({ byCategory, byType, labels }: { byCategory: { category: string; n: number }[]; byType: { event_type: string; n: number }[]; labels: Record<string, string> }) {
  const maxCat = Math.max(1, ...byCategory.map((t) => t.n));
  const maxType = Math.max(1, ...byType.map((t) => t.n));
  const channelOf = (c: string): string | undefined => CHANNELS.find((ch) => ch.query.category === c)?.label;
  return (
    <div className="grid gap-4 lg:grid-cols-2">
      <Panel title="Events by category · 7 d" dense>
        {byCategory.length ? (
          <ul className="divide-y divide-line">
            {byCategory.slice(0, 30).map((t) => (
              <li key={t.category} className="grid grid-cols-[8rem_1fr_3.5rem] items-center gap-2 px-3 py-1.5 text-[12.5px] sm:grid-cols-[11rem_1fr_3.5rem]">
                <Link href={`/category/${t.category}`} className="truncate hover:underline" title={channelOf(t.category) ? `${channelOf(t.category)} desk` : t.category}>{t.category}</Link>
                <Bar value={t.n} max={maxCat} tone="signal" />
                <span className="text-right font-mono text-fg-subtle tabular">{fmtInt(t.n)}</span>
              </li>
            ))}
          </ul>
        ) : (
          <Empty />
        )}
      </Panel>
      <Panel title="Events by type · 7 d" dense>
        {byType.length ? (
          <ul className="divide-y divide-line">
            {byType.slice(0, 30).map((t) => (
              <li key={t.event_type} className="grid grid-cols-[8rem_1fr_3.5rem] items-center gap-2 px-3 py-1.5 text-[12.5px] sm:grid-cols-[11rem_1fr_3.5rem]">
                <Link href={`/live?event_type=${t.event_type}`} className="truncate hover:underline" title={labels[t.event_type] ?? typeLabel(t.event_type)}>{typeLabel(t.event_type)}</Link>
                <Bar value={t.n} max={maxType} tone="info" />
                <span className="text-right font-mono text-fg-subtle tabular">{fmtInt(t.n)}</span>
              </li>
            ))}
          </ul>
        ) : (
          <Empty />
        )}
      </Panel>
    </div>
  );
}

function CountriesTab({ items }: { items: Awaited<ReturnType<typeof api.countries>>["items"] }) {
  return (
    <Panel title={`Countries · ${items.length}`} dense action={<Link href="/country" className="text-[11px] text-fg-subtle hover:text-fg">country desks →</Link>}>
      {items.length === 0 ? (
        <Empty>Country desks appear once sources carry a country.</Empty>
      ) : (
        <ul className="grid gap-px bg-line sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
          {items.map((c) => (
            <li key={c.country} className="bg-panel">
              <Link href={`/country/${c.slug}`} className="flex items-center gap-3 px-3 py-2 hover:bg-panel-2/60">
                <span className="w-6 text-center text-lg leading-none" aria-hidden>{c.flag || <Flag code={c.country} />}</span>
                <span className="min-w-0 flex-1">
                  <span className="block truncate text-[13px] font-medium">{c.name}</span>
                  <span className="block font-mono text-[10.5px] text-fg-subtle">{c.country} · {c.sources} source{c.sources === 1 ? "" : "s"}</span>
                </span>
                <span className="flex flex-col items-end font-mono text-[12px] tabular">
                  <span>{fmtInt(c.events_24h)} <span className="text-[10px] text-fg-subtle">24 h</span></span>
                  <span className={c.breaking_24h ? "text-hot" : "text-fg-subtle"}>{fmtInt(c.breaking_24h)} <span className="text-[10px] text-fg-subtle">brk</span></span>
                </span>
              </Link>
            </li>
          ))}
        </ul>
      )}
    </Panel>
  );
}