"use client";
import { useEffect, useMemo, useState, type FormEvent } from "react";
import { Download, RefreshCw } from "lucide-react";
import { api, type Dataset, type ExportRow } from "@/lib/api";
import { useAsync, useInterval } from "@/lib/hooks";
import { useToast } from "@/lib/toast";
import { daysAgo, fmtBytes, fmtInt, fmtRelative, fmtTs, splitList, today } from "@/lib/format";
import { Banner, Card, ErrorState, Field, PageHeader, StatusBadge } from "@/components/ui";
import { DataTable } from "@/components/DataTable";
import { JsonView } from "@/components/JsonView";

export default function ExportsPage() {
  const toast = useToast();
  const datasets = useAsync((s) => api.get<{ data: Dataset[] }>("/catalog/datasets", undefined, s), []);
  const list = useAsync((s) => api.get<{ data: ExportRow[] }>("/exports", undefined, s), []);
  const live = useMemo(() => (list.data?.data ?? []).some((e) => e.status === "queued" || e.status === "running"), [list.data]);
  useInterval(list.reload, live ? 3000 : null);

  const [datasetId, setDatasetId] = useState("market_bars.stock.1m.raw");
  const [symbols, setSymbols] = useState("");
  const [start, setStart] = useState(daysAgo(365));
  const [end, setEnd] = useState(today());
  const [adjustment, setAdjustment] = useState<"raw" | "split" | "split_div">("raw");
  const [format, setFormat] = useState<"parquet" | "csv">("parquet");
  const [busy, setBusy] = useState(false);

  // Prefill from the Bars explorer (range too large)
  useEffect(() => {
    const p = new URLSearchParams(window.location.search);
    if (p.get("symbols")) setSymbols(p.get("symbols")!.replace(/,/g, "\n"));
    if (p.get("start")) setStart(p.get("start")!);
    if (p.get("end")) setEnd(p.get("end")!);
    const a = p.get("adjustment");
    if (a === "raw" || a === "split" || a === "split_div") setAdjustment(a);
  }, []);

  const syms = splitList(symbols);

  async function submit(e: FormEvent) {
    e.preventDefault();
    setBusy(true);
    try {
      const out = await api.post<{ id: string; status: string; poll: string }>("/exports", { dataset_id: datasetId, symbols: syms, start, end, adjustment, format });
      toast.success("Export queued", out.id);
      list.reload();
    } catch (err) {
      toast.error(err);
    } finally {
      setBusy(false);
    }
  }

  return (
    <>
      <PageHeader
        title="Exports"
        subtitle="Asynchronous Parquet/CSV extracts for ranges larger than the live API allows. Dataset version is pinned at submission."
        actions={
          <button className="btn btn-sm" onClick={list.reload}>
            <RefreshCw className="h-3.5 w-3.5" /> Refresh{live ? " (auto 3 s)" : ""}
          </button>
        }
      />
      <div className="grid gap-4 lg:grid-cols-[360px_minmax(0,1fr)]">
        <Card title="New export">
          <form onSubmit={submit} className="flex flex-col gap-3">
            <Field label="Dataset">
              <select className="input font-mono text-xs" value={datasetId} onChange={(e) => setDatasetId(e.target.value)}>
                {!(datasets.data?.data ?? []).some((d) => d.id === datasetId) && <option value={datasetId}>{datasetId}</option>}
                {(datasets.data?.data ?? []).filter((d) => d.status === "active").map((d) => (
                  <option key={d.id} value={d.id}>
                    {d.id}
                  </option>
                ))}
              </select>
            </Field>
            <Field label={`Symbols (${syms.length}/500)`} hint="comma, space or newline separated">
              <textarea className="input min-h-24 font-mono uppercase" value={symbols} onChange={(e) => setSymbols(e.target.value)} placeholder={"AAPL\nMSFT\nSPY"} required />
            </Field>
            <div className="grid grid-cols-2 gap-2">
              <Field label="Start">
                <input type="date" className="input" value={start} max={end} onChange={(e) => setStart(e.target.value)} required />
              </Field>
              <Field label="End">
                <input type="date" className="input" value={end} min={start} onChange={(e) => setEnd(e.target.value)} required />
              </Field>
              <Field label="Adjustment">
                <select className="input" value={adjustment} onChange={(e) => setAdjustment(e.target.value as typeof adjustment)}>
                  <option value="raw">raw</option>
                  <option value="split">split</option>
                  <option value="split_div">split + dividend</option>
                </select>
              </Field>
              <Field label="Format">
                <select className="input" value={format} onChange={(e) => setFormat(e.target.value as typeof format)}>
                  <option value="parquet">Parquet (zstd)</option>
                  <option value="csv">CSV</option>
                </select>
              </Field>
            </div>
            <button className="btn btn-primary" disabled={busy || syms.length === 0 || syms.length > 500}>
              {busy ? "Submitting…" : "Queue export"}
            </button>
            <p className="text-[11px] text-ink-3">Limits: 500 symbols, 12 years, 3 concurrent exports per principal. Files expire after ~72 h. Private use only — do not redistribute.</p>
          </form>
        </Card>

        <Card title={`Exports (${list.data?.data.length ?? 0})`}>
          {list.error && <ErrorState error={list.error} retry={list.reload} />}
          <DataTable
            rows={list.data?.data}
            loading={list.loading}
            rowKey={(e) => e.id}
            mobile="cards"
            columns={[
              { key: "created_at", header: "Created", render: (e) => <span className="tnum text-xs" title={fmtTs(e.created_at)}>{fmtRelative(e.created_at)}</span> },
              { key: "status", header: "Status", render: (e) => <StatusBadge status={isExpired(e) ? "expired" : e.status} label={isExpired(e) ? "expired" : e.status} /> },
              {
                key: "request",
                header: "Request",
                render: (e) => (
                  <div className="text-xs">
                    <div className="font-mono">{e.request.dataset_id}{e.request.version !== undefined ? ` v${e.request.version}` : ""}</div>
                    <div className="text-ink-2">
                      {e.request.symbols.length} symbol{e.request.symbols.length === 1 ? "" : "s"} · {e.request.start} → {e.request.end} · {e.request.adjustment} · {e.format}
                    </div>
                    <div className="line-clamp-1 font-mono text-[11px] text-ink-3">{e.request.symbols.join(", ")}</div>
                  </div>
                ),
              },
              { key: "row_count", header: "Rows", num: true, hideSm: true, render: (e) => fmtInt(e.row_count) },
              { key: "bytes", header: "Size", num: true, render: (e) => fmtBytes(e.bytes) },
              { key: "expires_at", header: "Expires", hideSm: true, render: (e) => <span className="tnum text-xs">{e.expires_at ? fmtRelative(e.expires_at) : "—"}</span> },
              {
                key: "download",
                header: "",
                render: (e) =>
                  e.status === "ready" && !isExpired(e) ? (
                    <a className="btn btn-sm btn-primary" href={`/api/v1/exports/${e.id}/download`} target="_blank" rel="noopener">
                      <Download className="h-3.5 w-3.5" /> Download
                    </a>
                  ) : e.status === "failed" && e.error ? (
                    <JsonView value={e.error} collapsed />
                  ) : null,
              },
            ]}
            empty="No exports yet."
          />
        </Card>
      </div>
      <Banner tone="warn" className="mt-4">
        Exported files contain FirstRate Data bars licensed for <strong>private use by the subscriber only</strong>. Do not share, publish or re-host them.
      </Banner>
    </>
  );
}

function isExpired(e: ExportRow): boolean {
  return e.status === "expired" || (!!e.expires_at && new Date(e.expires_at).getTime() < Date.now());
}