"use client";

import Link from "next/link";
import { ArrowRight } from "lucide-react";
import { useApi } from "@/lib/api";
import { ago, fmtNum, truncate } from "@/lib/format";
import { Bar, Empty, Kpi, Panel, Skeleton, StatusPill, Tag } from "@/components/ui";
import { ActivityChart, SurfaceBars, TypeDonut, YieldBars } from "@/components/charts";
import { LiveFeed } from "@/components/LiveFeed";

interface Overview {
  totals: { sessions: number; entities: number; media: number; schemas: number; actions: number; observations: number; relationships: number; patterns_learned: number; feed_items: number };
  by_type: { platform: string; entity_type: string; n: number }[];
  running: { session_id: string; platform: string; started_at: string }[];
  recent_sessions: { session_id: string; platform: string; goal: string | null; mode: string | null; started_at: string; ended_at: string | null; health: string; actions: number; entities: number }[];
  series: { bucket: string; entities: number; responses: number; actions: number; schemas: number }[];
  surfaces: { dom: number; network: number; both: number; agreements: number; conflicts: number };
  actions: { action_type: string; n: number; avg_gain: number | null; success_rate: number | null; avg_new_entities: number | null }[];
  platforms: { platform: string; learned: boolean; adapter: boolean; confidence: number; page_types: number; entity_types: number; network_schemas: number; sessions: number; has_manifest: boolean }[];
}

export default function Observatory() {
  const { data, loading } = useApi<Overview>("/overview", { refreshMs: 8000 });
  const t = data?.totals;
  const s = data?.surfaces;
  const agreement = s && s.agreements + s.conflicts > 0 ? s.agreements / (s.agreements + s.conflicts) : null;
  const spark = (k: keyof Overview["series"][number]) => (data?.series ?? []).slice(-30).map((r) => Number(r[k]));
  return (
    <div className="space-y-6">
      <div className="flex flex-wrap items-end gap-4">
        <div>
          <h1 className="text-2xl font-semibold tracking-tight">Observatory</h1>
          <p className="text-sm text-fg-2 mt-1 max-w-2xl">The crawler does not download pages. It watches social applications run inside an authenticated browser, fuses what the network and the DOM reveal, and learns the platform as it goes.</p>
        </div>
        <div className="ml-auto flex gap-2">
          {data?.running.map((r) => (
            <Link key={r.session_id} href={`/sessions/${r.session_id}`} className="panel px-3 py-1.5 text-xs flex items-center gap-2 hover:border-amber/50">
              <StatusPill status="running" /> {r.platform} <span className="text-dim">{ago(r.started_at)}</span>
            </Link>
          ))}
          <Link href="/jobs" className="rounded-lg bg-cyan/90 hover:bg-cyan text-bg text-sm font-semibold px-3 py-1.5 flex items-center gap-1">
            New mission <ArrowRight className="h-4 w-4" />
          </Link>
        </div>
      </div>

      <div className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-6 gap-3">
        <Kpi label="entities" value={fmtNum(t?.entities)} hint={`${fmtNum(t?.relationships)} relationships`} spark={spark("entities")} />
        <Kpi label="media" value={fmtNum(t?.media)} hint="videos & images with metadata" accent="pink" />
        <Kpi label="runtime schemas" value={fmtNum(t?.schemas)} hint={`${fmtNum(t?.patterns_learned)} patterns learned`} accent="violet" spark={spark("schemas")} />
        <Kpi label="actions" value={fmtNum(t?.actions)} hint={`${fmtNum(t?.sessions)} sessions`} accent="amber" spark={spark("actions")} />
        <Kpi label="observations" value={fmtNum(t?.observations)} hint="raw, append-only" accent="fg" spark={spark("responses")} />
        <Kpi label="surface agreement" value={agreement === null ? "—" : `${Math.round(agreement * 100)}%`} hint={s ? `${fmtNum(s.both)} entities seen on both surfaces` : ""} accent="green" />
      </div>

      <div className="grid grid-cols-1 xl:grid-cols-3 gap-4">
        <Panel title="Activity" sub="10-minute buckets, last 48 h" className="xl:col-span-2">
          {loading ? <Skeleton rows={6} /> : data?.series.length ? <ActivityChart data={data.series} /> : <Empty>No activity yet — launch a mission.</Empty>}
        </Panel>
        <Panel title="Entity mix" sub="canonical entities by type">
          {data?.by_type.length ? <TypeDonut data={data.by_type} /> : <Empty>—</Empty>}
        </Panel>
      </div>

      <div className="grid grid-cols-1 xl:grid-cols-3 gap-4">
        <Panel title="Live observation stream" sub="every event, as the browser sees it" className="xl:col-span-2" pad={false}>
          <div className="p-2">
            <LiveFeed max={80} height={380} />
          </div>
        </Panel>
        <div className="space-y-4">
          <Panel title="Network vs DOM" sub="where entities were confirmed">
            {s ? <SurfaceBars dom={s.dom} network={s.network} both={s.both} /> : <Skeleton />}
            <div className="text-xs text-dim mt-2">
              field agreements <span className="mono text-fg">{fmtNum(s?.agreements)}</span> · conflicts <span className="mono text-fg">{fmtNum(s?.conflicts)}</span>
            </div>
          </Panel>
          <Panel title="Action yield" sub="average new entities per action type">
            {data?.actions.length ? <YieldBars data={data.actions} height={190} /> : <Empty>—</Empty>}
          </Panel>
        </div>
      </div>

      <div className="grid grid-cols-1 xl:grid-cols-2 gap-4">
        <Panel title="Recent sessions" right={<Link href="/sessions" className="hover:text-cyan">all →</Link>} pad={false}>
          {data?.recent_sessions.length ? (
            <ul className="divide-y divide-line/60">
              {data.recent_sessions.map((r) => (
                <li key={r.session_id}>
                  <Link href={`/sessions/${r.session_id}`} className="flex items-center gap-3 px-4 py-2.5 hover:bg-white/[0.03]">
                    <StatusPill status={r.ended_at ? "done" : r.health} />
                    <Tag>{r.platform}</Tag>
                    <span className="text-sm truncate">{truncate(r.goal ?? "(no goal)", 70)}</span>
                    <span className="ml-auto mono text-xs text-dim whitespace-nowrap">
                      {r.actions} steps · {r.entities} ent · {ago(r.started_at)}
                    </span>
                  </Link>
                </li>
              ))}
            </ul>
          ) : (
            <Empty>No sessions yet.</Empty>
          )}
        </Panel>
        <Panel title="Connectors" sub="learned platform knowledge" right={<Link href="/platforms" className="hover:text-cyan">details →</Link>}>
          <div className="space-y-3">
            {data?.platforms
              .filter((p) => p.adapter || p.learned)
              .map((p) => (
                <Link key={p.platform} href={`/platforms/${p.platform}`} className="block group">
                  <div className="flex items-center gap-3 text-sm">
                    <span className="w-20 capitalize group-hover:text-cyan">{p.platform}</span>
                    <Bar value={p.confidence / 100} color={p.confidence >= 70 ? "#43e69a" : p.confidence >= 40 ? "#38e1ff" : "#ffb347"} className="flex-1" />
                    <span className="mono text-xs w-10 text-right">{p.confidence}%</span>
                  </div>
                  <div className="text-[10.5px] text-dim mono ml-[92px]">
                    {p.page_types} page types · {p.entity_types} entity types · {p.network_schemas} schemas · {p.sessions} sessions{p.has_manifest ? " · compiled" : ""}
                  </div>
                </Link>
              ))}
          </div>
        </Panel>
      </div>
    </div>
  );
}