"use client";
import Link from "next/link";
import { useMemo, useState } from "react";
import clsx from "clsx";
import { api, type Dataset } from "@/lib/api";
import { useAsync } from "@/lib/hooks";
import { fmtBytes, fmtCompact, fmtInt } from "@/lib/format";
import { Card, ErrorState, PageHeader, Skeleton, StatusBadge, Tabs } from "@/components/ui";

const ORDER = ["active", "paused", "pending_configuration", "planned", "unsupported"];

export default function DatasetsPage() {
  const { data, error, loading, reload } = useAsync((s) => api.get<{ data: Dataset[] }>("/catalog/datasets", undefined, s), []);
  const [filter, setFilter] = useState<"all" | "active" | "other">("all");
  const rows = useMemo(() => {
    const r = (data?.data ?? []).slice().sort((a, b) => ORDER.indexOf(a.status) - ORDER.indexOf(b.status) || a.id.localeCompare(b.id));
    if (filter === "active") return r.filter((d) => d.status === "active");
    if (filter === "other") return r.filter((d) => d.status !== "active");
    return r;
  }, [data, filter]);

  return (
    <>
      <PageHeader
        title="Datasets"
        subtitle="Catalog of curated datasets, their contract and current version"
        actions={
          <Tabs
            value={filter}
            onChange={setFilter}
            items={[
              { value: "all", label: `All (${data?.data.length ?? 0})` },
              { value: "active", label: "Active" },
              { value: "other", label: "Planned / other" },
            ]}
          />
        }
      />
      {error && <ErrorState error={error} retry={reload} />}
      {loading && !data && <Skeleton rows={6} />}
      <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
        {rows.map((d) => (
          <Link key={d.id} href={`/datasets/detail/?id=${encodeURIComponent(d.id)}`} className={clsx("card flex flex-col gap-2 transition hover:border-accent/60", d.status !== "active" && "opacity-90")}>
            <div className="flex items-start justify-between gap-2">
              <div className="min-w-0">
                <div className="truncate font-semibold">{d.name}</div>
                <div className="truncate font-mono text-xs text-ink-3">{d.id}</div>
              </div>
              <StatusBadge status={d.status} />
            </div>
            {d.description && <p className="line-clamp-2 text-xs text-ink-2">{d.description}</p>}
            <div className="flex flex-wrap gap-1 text-[11px]">
              <span className="pill bg-surface-2 text-ink-2">{d.kind}</span>
              {d.asset_class && <span className="pill bg-surface-2 text-ink-2">{d.asset_class}</span>}
              {d.interval && <span className="pill bg-surface-2 text-ink-2">{d.interval}</span>}
              {d.adjustment && <span className="pill bg-surface-2 text-ink-2">{d.adjustment}</span>}
              <span className={clsx("pill", d.license_class === "public-domain" ? "bg-ok-soft text-ok-ink" : d.license_class === "pending" ? "bg-warn-soft text-warn-ink" : "bg-accent-soft text-accent-ink")} title={d.license_text}>
                {d.license_class}
              </span>
            </div>
            {d.status === "active" && (
              <dl className="mt-1 grid grid-cols-3 gap-2 text-xs">
                <div>
                  <dt className="text-ink-3">Version</dt>
                  <dd className="tnum">v{d.current_version ?? "—"}</dd>
                </div>
                <div>
                  <dt className="text-ink-3">Rows</dt>
                  <dd className="tnum" title={fmtInt(d.row_count)}>
                    {fmtCompact(d.row_count)}
                  </dd>
                </div>
                <div>
                  <dt className="text-ink-3">Size</dt>
                  <dd className="tnum">{fmtBytes(d.bytes)}</dd>
                </div>
                <div>
                  <dt className="text-ink-3">Symbols</dt>
                  <dd className="tnum">{fmtInt(d.symbols)}</dd>
                </div>
                <div className="col-span-2">
                  <dt className="text-ink-3">Sessions</dt>
                  <dd className="tnum">{d.first_session && d.last_session ? `${d.first_session} → ${d.last_session}` : "—"}</dd>
                </div>
              </dl>
            )}
            {d.source_name && <div className="text-[11px] text-ink-3">Source: {d.source_name}{d.vendor ? ` (${d.vendor})` : ""}</div>}
          </Link>
        ))}
      </div>
      {data && rows.length === 0 && <Card>No dataset matches this filter.</Card>}
    </>
  );
}