"use client";
import Link from "next/link";
import { useMemo } from "react";
import { RefreshCw } from "lucide-react";
import { api, type StorageOut } from "@/lib/api";
import { useAsync } from "@/lib/hooks";
import { useAuth } from "@/lib/auth";
import { fmtBytes, fmtCompact, fmtGB, fmtInt, fmtRelative, fmtTs } from "@/lib/format";
import { Banner, Card, Empty, ErrorState, KV, PageHeader, Skeleton, StatusBadge } from "@/components/ui";
import { DataTable } from "@/components/DataTable";
import { Meter, SegmentedBar } from "@/components/charts";
import { JsonView } from "@/components/JsonView";

export default function StoragePage() {
  const { isOwner } = useAuth();
  const { data, error, loading, reload } = useAsync((s) => api.get<StorageOut>("/admin/storage", undefined, s), [], { enabled: isOwner });

  const perDataset = useMemo(() => {
    const m = new Map<string, { dataset_id: string; base_files: number; base_bytes: number; base_rows: number; delta_files: number; delta_bytes: number; delta_rows: number; other_files: number; other_bytes: number }>();
    for (const r of data?.per_dataset ?? []) {
      const e = m.get(r.dataset_id) ?? { dataset_id: r.dataset_id, base_files: 0, base_bytes: 0, base_rows: 0, delta_files: 0, delta_bytes: 0, delta_rows: 0, other_files: 0, other_bytes: 0 };
      const b = Number(r.bytes ?? 0), rows = Number(r.rows ?? 0), f = Number(r.files ?? 0);
      if (r.layout === "base") { e.base_files += f; e.base_bytes += b; e.base_rows += rows; }
      else if (r.layout === "delta") { e.delta_files += f; e.delta_bytes += b; e.delta_rows += rows; }
      else { e.other_files += f; e.other_bytes += b; }
      m.set(r.dataset_id, e);
    }
    return Array.from(m.values()).sort((a, b) => b.base_bytes + b.delta_bytes - (a.base_bytes + a.delta_bytes));
  }, [data]);

  if (!isOwner) return <Banner tone="warn">Storage details require the owner role.</Banner>;

  const vol = data?.volume;
  const used = vol ? vol.total_gb - vol.free_gb : 0;
  const freeTone = vol && data ? (vol.free_gb < data.budget.hard_min_free_gb ? "crit" : vol.free_gb < data.budget.hard_min_free_gb * 2 ? "warn" : "accent") : "accent";
  const curatedGb = (data?.curated_bytes ?? 0) / 1e9;
  const bytesPerBar = useMemo(() => {
    const rows = perDataset.reduce((a, d) => a + d.base_rows + d.delta_rows, 0);
    const bytes = perDataset.reduce((a, d) => a + d.base_bytes + d.delta_bytes, 0);
    return rows > 0 ? bytes / rows : null;
  }, [perDataset]);

  return (
    <>
      <PageHeader
        title="Storage"
        subtitle={data ? <>Lake root <code className="text-xs">{data.lake_root}</code></> : "Lake volume, budget and footprint"}
        actions={
          <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>
        }
      />
      {error && <ErrorState error={error} retry={reload} />}
      {loading && !data && <Skeleton rows={6} />}
      {data && vol && (
        <>
          <div className="grid gap-4 lg:grid-cols-2">
            <Card title="Volume">
              <div className="mb-1 flex items-baseline justify-between">
                <span className="text-2xl font-semibold">{fmtGB(vol.free_gb, 0)} free</span>
                <span className="text-xs text-ink-2">of {fmtGB(vol.total_gb, 0)}</span>
              </div>
              <Meter value={used} max={vol.total_gb} tone={freeTone} label="Volume used" marks={[{ at: vol.total_gb - data.budget.hard_min_free_gb, label: `min free ${data.budget.hard_min_free_gb} GB` }]} className="mb-8 mt-2" />
              <KV
                items={[
                  ["Used", `${fmtGB(used, 1)} (${((used / vol.total_gb) * 100).toFixed(0)} %)`],
                  ["Hard minimum free", `${data.budget.hard_min_free_gb} GB`],
                  ["Status", <StatusBadge key="s" status={freeTone === "crit" ? "error" : freeTone === "warn" ? "warning" : "ok"} label={freeTone === "crit" ? "disk critical" : freeTone === "warn" ? "disk low" : "healthy"} />],
                ]}
              />
            </Card>
            <Card title="Curated budget">
              <div className="mb-1 flex items-baseline justify-between">
                <span className="text-2xl font-semibold">{fmtGB(curatedGb, 1)}</span>
                <span className="text-xs text-ink-2">soft limit {data.budget.soft_limit_gb} GB</span>
              </div>
              <Meter value={curatedGb} max={Math.max(data.budget.soft_limit_gb, curatedGb)} tone={curatedGb > data.budget.soft_limit_gb ? "warn" : "accent"} label="Curated bytes vs budget" marks={[{ at: data.budget.soft_limit_gb, label: `budget ${data.budget.soft_limit_gb} GB` }]} className="mb-8 mt-2" />
              <SegmentedBar
                parts={[
                  { label: `curated ${fmtBytes(data.curated_bytes)}`, value: data.curated_bytes, color: "var(--series-1)" },
                  { label: `raw ${fmtBytes(data.raw_bytes)}`, value: data.raw_bytes, color: "var(--series-2)" },
                  { label: `retired ${fmtBytes(data.retired_bytes)}`, value: data.retired_bytes, color: "var(--series-3)" },
                  { label: `exports ${fmtBytes(data.exports_bytes)}`, value: data.exports_bytes, color: "var(--seq-200)" },
                  { label: `postgres ${fmtBytes(data.postgres_bytes)}`, value: data.postgres_bytes, color: "var(--ink-3)" },
                ]}
              />
            </Card>
          </div>

          <Card title={`Per dataset (${perDataset.length})`} className="mt-4">
            <DataTable
              rows={perDataset}
              rowKey={(r) => r.dataset_id}
              mobile="scroll"
              columns={[
                { key: "dataset_id", header: "Dataset", render: (r) => <Link href={`/datasets/detail/?id=${encodeURIComponent(r.dataset_id)}`} className="font-mono text-xs text-accent-ink hover:underline">{r.dataset_id}</Link> },
                { key: "base_bytes", header: "Base bytes", num: true, render: (r) => fmtBytes(r.base_bytes) },
                { key: "base_rows", header: "Base rows", num: true, render: (r) => <span title={fmtInt(r.base_rows)}>{fmtCompact(r.base_rows)}</span> },
                { key: "base_files", header: "Base files", num: true, hideSm: true, render: (r) => fmtInt(r.base_files) },
                { key: "delta_bytes", header: "Delta bytes", num: true, render: (r) => fmtBytes(r.delta_bytes) },
                { key: "delta_rows", header: "Delta rows", num: true, render: (r) => <span title={fmtInt(r.delta_rows)}>{fmtCompact(r.delta_rows)}</span> },
                { key: "delta_files", header: "Delta files", num: true, hideSm: true, render: (r) => fmtInt(r.delta_files) },
                { key: "other", header: "Other", num: true, hideSm: true, render: (r) => (r.other_files ? `${fmtInt(r.other_files)} · ${fmtBytes(r.other_bytes)}` : "—") },
                { key: "ratio", header: "Delta share", num: true, render: (r) => { const t = r.base_bytes + r.delta_bytes; return t ? `${((r.delta_bytes / t) * 100).toFixed(0)} %` : "—"; } },
              ]}
              empty="No lake files registered."
            />
            <p className="mt-2 text-xs text-ink-3">A high delta share means a <code>compaction</code> job would help (merges deltas into base files and publishes a new version).</p>
          </Card>

          <div className="mt-4 grid gap-4 lg:grid-cols-3">
            <Card title="Raw archives">
              <DataTable rows={data.raw_archives} rowKey={(r) => r.status} mobile="scroll" columns={[{ key: "status", header: "Status", render: (r) => <StatusBadge status={r.status} /> }, { key: "n", header: "Archives", num: true, render: (r) => fmtInt(r.n) }, { key: "bytes", header: "Bytes", num: true, render: (r) => fmtBytes(r.bytes) }]} empty="No raw archives." />
            </Card>
            <Card title="Exports">
              <DataTable rows={data.exports} rowKey={(r) => r.status} mobile="scroll" columns={[{ key: "status", header: "Status", render: (r) => <StatusBadge status={r.status} /> }, { key: "n", header: "Count", num: true, render: (r) => fmtInt(r.n) }, { key: "bytes", header: "Bytes", num: true, render: (r) => fmtBytes(r.bytes) }]} empty="No exports." />
              <div className="mt-2 text-xs text-ink-3">Retired files: {fmtInt(data.retired_files.n)} · {fmtBytes(data.retired_files.bytes)} (reclaimed by <code>gc</code>)</div>
            </Card>
            <Card title="Postgres & backup">
              <KV
                items={[
                  ["Database size", fmtBytes(data.postgres_bytes)],
                  ["Last backup", data.last_backup ? `${fmtTs(data.last_backup.updated_at)} (${fmtRelative(data.last_backup.updated_at)})` : "none recorded"],
                  ["Verified", data.last_backup ? <StatusBadge key="v" status={data.last_backup.value?.verified ? "verified" : "warning"} label={data.last_backup.value?.verified ? "yes" : "no"} /> : "—"],
                ]}
              />
              {data.last_backup && <div className="mt-2"><JsonView value={data.last_backup.value} collapsed /></div>}
              {!data.last_backup && <Empty>Enqueue a <code>backup</code> job from Ingestion.</Empty>}
            </Card>
          </div>

          <Card title="Capacity note" className="mt-4">
            <p className="text-sm">
              Reference model: <strong>{data.capacity_model.bytes_per_1m_bar_curated} bytes</strong> per curated 1-minute bar.
              {bytesPerBar !== null && (
                <>
                  {" "}Measured now: <strong>{bytesPerBar.toFixed(1)} bytes/row</strong> across all datasets. At this density the remaining budget ({fmtGB(Math.max(0, data.budget.soft_limit_gb - curatedGb), 0)}) holds about{" "}
                  <strong>{fmtCompact(Math.max(0, (data.budget.soft_limit_gb - curatedGb) * 1e9) / bytesPerBar)}</strong> more bars.
                </>
              )}
            </p>
            <p className="mt-1 text-xs text-ink-3">{data.capacity_model.note}</p>
          </Card>
        </>
      )}
    </>
  );
}