"use client";
import Link from "next/link";
import { RefreshCw } from "lucide-react";
import { api, type HealthSummary } from "@/lib/api";
import { useAsync, useInterval } from "@/lib/hooks";
import { fmtCompact, fmtGB, fmtInt, fmtRelative, fmtTs } from "@/lib/format";
import { Banner, Card, ErrorState, KpiTile, PageHeader, SeverityBadge, Skeleton, StatusBadge } from "@/components/ui";
import { DataTable } from "@/components/DataTable";
import { Job } from "@/lib/api";
import { useAuth } from "@/lib/auth";

export default function OverviewPage() {
  const { isOwner } = useAuth();
  const { data, error, loading, reload } = useAsync((signal) => api.get<HealthSummary>("/health/summary", undefined, signal), []);
  useInterval(reload, 60_000);

  const h = data?.health;
  const lake = h?.components.lake;
  const jobs = data?.jobs ?? {};
  const anomalies = data?.anomalies_7d ?? {};
  const anomaliesTotal = Object.values(anomalies).reduce((a, b) => a + b, 0);
  const primaryDs = h?.datasets?.find((d) => d.dataset_id === "market_bars.stock.1m.raw") ?? h?.datasets?.[0];
  const dead = jobs.dead ?? 0;
  const freeTone = lake ? (lake.free_gb < lake.hard_min_free_gb ? "crit" : lake.free_gb < lake.hard_min_free_gb * 2 ? "warn" : undefined) : undefined;

  return (
    <>
      <PageHeader
        title="Overview"
        subtitle={h ? <>Health checked {fmtRelative(h.checked_at)} · auto-refresh every 60 s</> : "Lakehouse status at a glance"}
        actions={
          <>
            {h && <StatusBadge status={h.status} label={h.status === "ok" ? "all systems ok" : h.status} />}
            <button className="btn btn-sm" onClick={reload} disabled={loading}>
              <RefreshCw className={loading ? "h-3.5 w-3.5 animate-spin" : "h-3.5 w-3.5"} /> Refresh
            </button>
          </>
        }
      />

      <Banner tone="warn" className="mb-4">
        <strong>FirstRate Data — private use only.</strong> Raw bars and tables may not be redistributed (no public API, CSV or tables). Derived results may be published with attribution.
      </Banner>

      {error && <ErrorState error={error} retry={reload} />}
      {!data && !error && <Skeleton rows={6} />}

      {data && (
        <>
          {h && h.alerts.length > 0 && (
            <Card title={`Alerts (${h.alerts.length})`} className="mb-4">
              <ul className="flex flex-col gap-1.5">
                {h.alerts.map((a, i) => (
                  <li key={i} className="flex flex-wrap items-center gap-2 text-sm">
                    <SeverityBadge severity={a.severity} />
                    <code className="text-xs text-ink-3">{a.code}</code>
                    <span>{a.message}</span>
                  </li>
                ))}
              </ul>
            </Card>
          )}

          <div className="mb-4 grid grid-cols-2 gap-3 md:grid-cols-3 xl:grid-cols-5">
            <KpiTile label="1-min symbols" value={fmtInt(data.bars_1m.symbols)} sub={`${fmtInt(data.instruments.active)} active instruments`} href="/symbols/" />
            <KpiTile label="Sessions" value={fmtInt(data.bars_1m.sessions)} sub="with 1-min bars" href="/coverage/" />
            <KpiTile label="1-min bars" value={fmtCompact(data.bars_1m.bars)} sub={data.bars_1m.bars ? fmtInt(data.bars_1m.bars) : undefined} href="/bars/" />
            <KpiTile label="Last session" value={data.bars_1m.last ?? "—"} sub={primaryDs?.days_since_last_session !== null && primaryDs?.days_since_last_session !== undefined ? `${primaryDs.days_since_last_session} d ago` : undefined} />
            <KpiTile
              label="Vendor lag"
              value={primaryDs?.vendor_lag_days === null || primaryDs?.vendor_lag_days === undefined ? "—" : `${primaryDs.vendor_lag_days} d`}
              sub={primaryDs?.vendor_last_update ? `vendor ${primaryDs.vendor_last_update}` : "no vendor checkpoint"}
              tone={primaryDs?.vendor_lag_days ? "warn" : undefined}
            />
            <KpiTile
              label="Lake free"
              value={lake ? fmtGB(lake.free_gb, 0) : "—"}
              sub={lake ? `curated ${fmtGB(lake.curated_gb, 2)} / budget ${lake.soft_limit_gb} GB · min free ${lake.hard_min_free_gb} GB` : undefined}
              tone={freeTone}
              href={isOwner ? "/storage/" : undefined}
            />
            <KpiTile label="Jobs" value={`${fmtInt(jobs.queued ?? 0)} / ${fmtInt(jobs.running ?? 0)} / ${fmtInt(dead)}`} sub="queued / running / dead" tone={dead ? "crit" : undefined} href={isOwner ? "/ingestion/" : undefined} />
            <KpiTile label="Fundamentals" value={fmtInt(data.fundamentals.entities)} sub={`${fmtCompact(data.fundamentals.facts)} facts`} href="/fundamentals/" />
            <KpiTile label="Anomalies (7 d)" value={fmtInt(anomaliesTotal)} sub={Object.entries(anomalies).map(([k, v]) => `${k} ${v}`).join(" · ") || "none"} tone={anomalies.error ? "crit" : anomaliesTotal ? "warn" : undefined} href="/quality/" />
            <KpiTile label="Datasets" value={fmtInt(data.datasets.active)} sub={`${data.datasets.planned} planned · ${data.datasets.pending} pending · ${data.datasets.unsupported} unsupported`} href="/datasets/" />
          </div>

          <div className="grid gap-4 lg:grid-cols-[1fr_minmax(280px,0.6fr)]">
            <Card title="Recent jobs" actions={isOwner && <Link href="/ingestion/" className="text-xs text-accent-ink hover:underline">All jobs →</Link>}>
              <DataTable<Job>
                rows={data.recent_jobs}
                rowKey={(r) => r.id}
                mobile="scroll"
                columns={[
                  { key: "kind", header: "Kind", render: (r) => <span className="font-medium">{r.kind}</span> },
                  { key: "dataset_id", header: "Dataset", mono: true, hideSm: true },
                  { key: "status", header: "Status", render: (r) => <StatusBadge status={r.status} /> },
                  { key: "started_at", header: "Started", render: (r) => <span className="tnum text-xs">{fmtTs(r.started_at)}</span>, hideSm: true },
                  { key: "finished_at", header: "Finished", render: (r) => <span className="tnum text-xs">{fmtTs(r.finished_at)}</span>, hideSm: true },
                  { key: "last_error", header: "Error", render: (r) => (r.last_error ? <span className="text-xs text-crit-ink break-words">{r.last_error}</span> : <span className="text-ink-3">—</span>) },
                ]}
              />
            </Card>
            <Card title="Components">
              <ul className="flex flex-col gap-2 text-sm">
                <li className="flex items-center justify-between gap-2">
                  <span>Postgres</span>
                  <StatusBadge status={h?.components.postgres?.startsWith("error") ? "error" : h?.components.postgres} label={h?.components.postgres} />
                </li>
                <li className="flex items-center justify-between gap-2">
                  <span>Ingest worker</span>
                  <StatusBadge status={h?.components.ingest_worker === "running" ? "ok" : "error"} label={h?.components.ingest_worker ?? "unknown"} />
                </li>
                <li className="flex items-center justify-between gap-2">
                  <span>Backup</span>
                  <span className="text-right text-xs">
                    {h?.components.backup?.last ? (
                      <>
                        <StatusBadge status={h.components.backup.verified ? "verified" : "warning"} label={h.components.backup.verified ? "verified" : "unverified"} />{" "}
                        <span className="text-ink-2">{fmtRelative(h.components.backup.last)}</span>
                      </>
                    ) : (
                      <StatusBadge status="warning" label="none yet" />
                    )}
                  </span>
                </li>
                <li className="flex items-center justify-between gap-2">
                  <span>SSD SMART</span>
                  <StatusBadge status={h?.components.ssd_smart === "Verified" ? "ok" : h?.components.ssd_smart === "unavailable" || h?.components.ssd_smart === "Not Supported" ? "neutral" : "error"} label={h?.components.ssd_smart ?? "unknown"} />
                </li>
              </ul>
              {h?.datasets && h.datasets.length > 0 && (
                <div className="mt-4">
                  <div className="mb-1 text-xs font-semibold text-ink-2">Dataset freshness</div>
                  <ul className="flex flex-col gap-1 text-xs">
                    {h.datasets.map((d) => (
                      <li key={d.dataset_id} className="flex flex-wrap items-center justify-between gap-1">
                        <Link href={`/datasets/detail/?id=${encodeURIComponent(d.dataset_id)}`} className="font-mono text-accent-ink hover:underline">
                          {d.dataset_id}
                        </Link>
                        <span className="tnum text-ink-2">
                          v{d.version ?? "—"} · {d.last_session ?? "no sessions"}
                          {d.vendor_lag_days ? <span className="ml-1 text-warn-ink">· lag {d.vendor_lag_days} d</span> : null}
                        </span>
                      </li>
                    ))}
                  </ul>
                </div>
              )}
            </Card>
          </div>
        </>
      )}
    </>
  );
}