"use client";
import Link from "next/link";
import { useEffect, useState } from "react";
import { Search } from "lucide-react";
import { api, type Instrument } from "@/lib/api";
import { useAsync, useDebounced } from "@/lib/hooks";
import { useToast } from "@/lib/toast";
import { fmtInt } from "@/lib/format";
import { Card, ErrorState, Field, PageHeader, StatusBadge } from "@/components/ui";
import { DataTable } from "@/components/DataTable";

interface Out {
  data: Instrument[];
  meta: { total_instruments: number; active: number };
  next_cursor: string | null;
}

export default function SymbolsPage() {
  const [q, setQ] = useState("");
  const [status, setStatus] = useState("");
  const [assetClass, setAssetClass] = useState("");
  const dq = useDebounced(q.trim(), 300);
  const [rows, setRows] = useState<Instrument[]>([]);
  const [cursor, setCursor] = useState<string | null>(null);
  const [more, setMore] = useState(false);
  const toast = useToast();

  const { data, error, loading, reload } = useAsync((s) => api.get<Out>("/instruments", { query: dq, status, asset_class: assetClass, limit: 100 }, s), [dq, status, assetClass]);

  useEffect(() => {
    if (data) {
      setRows(data.data);
      setCursor(data.next_cursor);
    }
  }, [data]);

  async function loadMore() {
    if (!cursor) return;
    setMore(true);
    try {
      const out = await api.get<Out>("/instruments", { query: dq, status, asset_class: assetClass, limit: 100, cursor });
      setRows((r) => [...r, ...out.data]);
      setCursor(out.next_cursor);
    } catch (e) {
      toast.error(e);
    } finally {
      setMore(false);
    }
  }

  return (
    <>
      <PageHeader title="Symbols" subtitle={data ? <>{fmtInt(data.meta.total_instruments)} instruments · {fmtInt(data.meta.active)} active</> : "Instrument master"} />
      <Card className="mb-4">
        <div className="flex flex-col gap-2 sm:flex-row sm:items-end">
          <Field label="Search" className="flex-1">
            <div className="relative">
              <Search className="pointer-events-none absolute left-2.5 top-2.5 h-4 w-4 text-ink-3" />
              <input className="input pl-8" placeholder="Symbol prefix or name…" value={q} onChange={(e) => setQ(e.target.value)} autoFocus />
            </div>
          </Field>
          <Field label="Status" className="sm:w-40">
            <select className="input" value={status} onChange={(e) => setStatus(e.target.value)}>
              <option value="">any</option>
              <option value="active">active</option>
              <option value="delisted">delisted</option>
              <option value="inactive">inactive</option>
            </select>
          </Field>
          <Field label="Asset class" className="sm:w-40">
            <select className="input" value={assetClass} onChange={(e) => setAssetClass(e.target.value)}>
              <option value="">any</option>
              <option value="stock">stock</option>
              <option value="etf">etf</option>
              <option value="index">index</option>
              <option value="crypto">crypto</option>
              <option value="fx">fx</option>
              <option value="futures">futures</option>
            </select>
          </Field>
        </div>
      </Card>
      {error && <ErrorState error={error} retry={reload} />}
      <Card>
        <DataTable
          rows={rows}
          loading={loading}
          rowKey={(r) => r.instrument_id}
          mobile="scroll"
          columns={[
            {
              key: "symbol",
              header: "Symbol",
              render: (r) => (
                <Link href={`/symbols/detail/?symbol=${encodeURIComponent(r.symbol)}`} className="font-mono font-semibold text-accent-ink hover:underline">
                  {r.symbol}
                </Link>
              ),
            },
            { key: "name", header: "Name", render: (r) => <span className="line-clamp-1">{r.name ?? "—"}</span> },
            { key: "asset_class", header: "Class", hideSm: true },
            { key: "status", header: "Status", render: (r) => <StatusBadge status={r.status} /> },
            { key: "first_date", header: "First", hideSm: true, render: (r) => <span className="tnum">{r.first_date ?? "—"}</span> },
            { key: "last_date", header: "Last", hideSm: true, render: (r) => <span className="tnum">{r.last_date ?? "—"}</span> },
            { key: "currency", header: "Ccy", hideSm: true },
          ]}
          empty={dq ? `No instrument matches “${dq}”.` : "No instruments yet — run a metadata job."}
          footer={
            <>
              <span>{fmtInt(rows.length)} shown</span>
              {cursor && (
                <button className="btn btn-sm" onClick={loadMore} disabled={more}>
                  {more ? "Loading…" : "Load more"}
                </button>
              )}
            </>
          }
        />
      </Card>
    </>
  );
}