"use client";
import Link from "next/link";
import { ArrowLeft } from "lucide-react";
import { api, type DatasetDetail } from "@/lib/api";
import { useAsync, useQueryParam } from "@/lib/hooks";
import { fmtBytes, fmtInt, fmtTs } from "@/lib/format";
import { Card, Empty, ErrorState, KV, PageHeader, Skeleton, StatusBadge } from "@/components/ui";
import { DataTable } from "@/components/DataTable";
import { JsonView } from "@/components/JsonView";

export default function DatasetDetailPage() {
  const id = useQueryParam("id");
  const { data, error, loading, reload } = useAsync((s) => api.get<DatasetDetail>(`/catalog/datasets/${encodeURIComponent(id!)}`, undefined, s), [id], { enabled: !!id });
  const d = data?.data;

  return (
    <>
      <Link href="/datasets/" className="mb-2 inline-flex items-center gap-1 text-xs text-ink-2 hover:text-ink-1">
        <ArrowLeft className="h-3.5 w-3.5" /> Datasets
      </Link>
      <PageHeader
        title={d?.name ?? id ?? "Dataset"}
        subtitle={<span className="font-mono">{id}</span>}
        actions={
          d && (
            <>
              <StatusBadge status={d.status} />
              {d.status === "active" && d.kind === "market_bars" && (
                <Link href={`/bars/?interval=${d.interval ?? "1m"}`} className="btn btn-sm">
                  Explore bars
                </Link>
              )}
              {d.status === "active" && (
                <Link href={`/coverage/?dataset_id=${encodeURIComponent(d.id)}`} className="btn btn-sm">
                  Coverage
                </Link>
              )}
            </>
          )
        }
      />
      {!id && <Empty>Missing <code>?id=</code> parameter.</Empty>}
      {error && <ErrorState error={error} retry={reload} />}
      {loading && !data && <Skeleton rows={8} />}
      {d && (
        <div className="grid gap-4 lg:grid-cols-2">
          <Card title="Description">
            <p className="text-sm text-ink-1 whitespace-pre-wrap">{d.description || <span className="text-ink-3">No description.</span>}</p>
            {d.notes && <p className="mt-2 text-xs text-ink-2 whitespace-pre-wrap">{d.notes}</p>}
            <KV
              className="mt-3"
              items={[
                ["Kind", d.kind],
                ["Asset class", d.asset_class ?? "—"],
                ["Interval", d.interval ?? "—"],
                ["Source", `${d.source_name ?? d.source_id ?? "—"}${d.vendor ? ` · ${d.vendor}` : ""}`],
              ]}
            />
          </Card>
          <Card title="Data contract">
            <KV
              items={[
                ["Timestamp convention", d.timestamp_convention ?? "bar_open"],
                ["Storage timezone", d.timezone ?? "UTC"],
                ["Stored adjustment", d.adjustment ?? "raw"],
                ["Current version", d.current_version !== null && d.current_version !== undefined ? `v${d.current_version}` : "—"],
                ["License class", d.license_class],
              ]}
            />
            <p className="mt-3 rounded-md border border-warn/50 bg-warn-soft p-2 text-xs text-warn-ink">{d.license_text || "License not yet determined."}</p>
          </Card>

          <Card title={`Version history (${data.versions.length})`} className="lg:col-span-2">
            <DataTable
              rows={data.versions}
              rowKey={(v) => v.version}
              mobile="scroll"
              columns={[
                { key: "version", header: "Version", render: (v) => <span className="font-medium tnum">v{v.version}</span> },
                { key: "snapshot_id", header: "Snapshot", mono: true },
                { key: "row_count", header: "Rows", num: true, render: (v) => fmtInt(v.row_count) },
                { key: "file_count", header: "Files", num: true, render: (v) => fmtInt(v.file_count) },
                { key: "bytes", header: "Bytes", num: true, render: (v) => fmtBytes(v.bytes) },
                { key: "created_at", header: "Created", render: (v) => <span className="tnum text-xs">{fmtTs(v.created_at)}</span> },
                { key: "note", header: "Note", render: (v) => <span className="text-xs text-ink-2">{v.note ?? "—"}</span> },
              ]}
              empty="No version published yet."
            />
          </Card>

          <Card title="Live files (current layout)">
            <DataTable
              rows={data.files}
              rowKey={(f) => f.layout}
              mobile="scroll"
              columns={[
                { key: "layout", header: "Layout", render: (f) => <span className="font-medium">{f.layout}</span> },
                { key: "n", header: "Files", num: true, render: (f) => fmtInt(f.n) },
                { key: "rows", header: "Rows", num: true, render: (f) => fmtInt(f.rows) },
                { key: "bytes", header: "Bytes", num: true, render: (f) => fmtBytes(f.bytes) },
                { key: "d0", header: "From", render: (f) => f.d0 ?? "—" },
                { key: "d1", header: "To", render: (f) => f.d1 ?? "—" },
              ]}
              empty="No files registered."
            />
          </Card>
          <Card title={`Checkpoints (${data.checkpoints.length})`}>
            {data.checkpoints.length === 0 ? (
              <Empty>No checkpoints.</Empty>
            ) : (
              <ul className="flex flex-col gap-2">
                {data.checkpoints.map((c) => (
                  <li key={c.key} className="text-sm">
                    <div className="flex items-center justify-between gap-2">
                      <code className="text-xs">{c.key}</code>
                      <span className="tnum text-xs text-ink-3">{fmtTs(c.updated_at)}</span>
                    </div>
                    <JsonView value={c.value} collapsed />
                  </li>
                ))}
              </ul>
            )}
          </Card>
        </div>
      )}
    </>
  );
}