"use client";
import { useMemo, useState, type FormEvent } from "react";
import { KeyRound, Plus, Trash2 } from "lucide-react";
import { api, type ApiKey, type UsageRow } from "@/lib/api";
import { useAsync } from "@/lib/hooks";
import { useAuth } from "@/lib/auth";
import { useToast } from "@/lib/toast";
import { fmtBytes, fmtCompact, fmtInt, fmtRelative, fmtTs } from "@/lib/format";
import { Banner, Card, ErrorState, Field, PageHeader, StatusBadge } from "@/components/ui";
import { DataTable } from "@/components/DataTable";
import { ConfirmDialog, Modal } from "@/components/ConfirmDialog";
import { CopyButton } from "@/components/CopyButton";

const SCOPES: { id: string; help: string }[] = [
  { id: "read:market", help: "bars, sessions, coverage, catalog, instruments" },
  { id: "read:fundamentals", help: "point-in-time fundamentals" },
  { id: "query", help: "SQL playground (DuckDB, read-only)" },
  { id: "export", help: "async Parquet/CSV exports" },
  { id: "admin", help: "jobs, keys, storage, settings — owner only" },
];

export default function KeysPage() {
  const { isOwner } = useAuth();
  const toast = useToast();
  const { data, error, loading, reload } = useAsync((s) => api.get<{ data: ApiKey[]; usage: UsageRow[] }>("/admin/keys", undefined, s), [], { enabled: isOwner });
  const [create, setCreate] = useState(false);
  const [revoke, setRevoke] = useState<ApiKey | null>(null);
  const [busy, setBusy] = useState(false);
  const [token, setToken] = useState<{ token: string; name: string } | null>(null);

  const usageByPrincipal = useMemo(() => {
    const m = new Map<string, { requests: number; rows: number; bytes: number; last: string }>();
    for (const u of data?.usage ?? []) {
      const e = m.get(u.principal) ?? { requests: 0, rows: 0, bytes: 0, last: u.day };
      e.requests += Number(u.requests);
      e.rows += Number(u.rows_returned);
      e.bytes += Number(u.bytes_exported);
      if (u.day > e.last) e.last = u.day;
      m.set(u.principal, e);
    }
    return m;
  }, [data]);

  if (!isOwner) return <Banner tone="warn">API keys are managed by the owner.</Banner>;

  async function doRevoke() {
    if (!revoke) return;
    setBusy(true);
    try {
      await api.del(`/admin/keys/${revoke.id}`);
      toast.success("Key revoked", revoke.name);
      setRevoke(null);
      reload();
    } catch (e) {
      toast.error(e);
    } finally {
      setBusy(false);
    }
  }

  return (
    <>
      <PageHeader
        title="API keys"
        subtitle="Bearer tokens for the SDK and scripts. Usage is aggregated per day (last 14 days)."
        actions={
          <button className="btn btn-sm btn-primary" onClick={() => setCreate(true)}>
            <Plus className="h-3.5 w-3.5" /> New key
          </button>
        }
      />
      {error && <ErrorState error={error} retry={reload} />}
      <Card>
        <DataTable
          rows={data?.data}
          loading={loading}
          rowKey={(k) => k.id}
          mobile="cards"
          columns={[
            { key: "name", header: "Name", render: (k) => (<div><div className="font-medium">{k.name}</div><div className="font-mono text-[11px] text-ink-3">{k.prefix}…</div></div>) },
            { key: "scopes", header: "Scopes", render: (k) => <div className="flex flex-wrap gap-1">{k.scopes.map((s) => <span key={s} className="pill bg-surface-2 text-ink-2">{s}</span>)}</div> },
            { key: "rate_limit_per_minute", header: "Rate/min", num: true, hideSm: true, render: (k) => fmtInt(k.rate_limit_per_minute) },
            { key: "last_used_at", header: "Last used", render: (k) => <span className="tnum text-xs" title={fmtTs(k.last_used_at)}>{k.last_used_at ? fmtRelative(k.last_used_at) : "never"}</span> },
            {
              key: "usage",
              header: "Usage (14 d)",
              render: (k) => {
                const u = usageByPrincipal.get(`api_key:${k.id}`) ?? usageByPrincipal.get(`key:${k.prefix}`);
                return u ? <span className="tnum text-xs">{fmtInt(u.requests)} req · {fmtCompact(u.rows)} rows · {fmtBytes(u.bytes)}</span> : <span className="text-ink-3">—</span>;
              },
            },
            { key: "expires_at", header: "Expires", hideSm: true, render: (k) => <span className="tnum text-xs">{k.expires_at ? fmtTs(k.expires_at) : "never"}</span> },
            { key: "status", header: "Status", render: (k) => <StatusBadge status={k.revoked_at ? "error" : k.expires_at && new Date(k.expires_at) < new Date() ? "expired" : "active"} label={k.revoked_at ? "revoked" : k.expires_at && new Date(k.expires_at) < new Date() ? "expired" : "active"} /> },
            { key: "actions", header: "", render: (k) => (!k.revoked_at ? (<button className="btn btn-sm" onClick={() => setRevoke(k)}><Trash2 className="h-3.5 w-3.5" /> Revoke</button>) : null) },
          ]}
          empty="No API keys yet."
        />
      </Card>

      <Card title="Daily usage (all principals, 14 days)" className="mt-4">
        <DataTable
          rows={data?.usage}
          loading={loading}
          rowKey={(u) => `${u.principal}-${u.day}`}
          mobile="scroll"
          maxHeight="20rem"
          columns={[
            { key: "day", header: "Day", render: (u) => <span className="tnum">{u.day}</span> },
            { key: "principal", header: "Principal", mono: true },
            { key: "requests", header: "Requests", num: true, render: (u) => fmtInt(u.requests) },
            { key: "rows_returned", header: "Rows", num: true, render: (u) => fmtInt(u.rows_returned) },
            { key: "bytes_exported", header: "Exported", num: true, render: (u) => fmtBytes(u.bytes_exported) },
          ]}
          empty="No usage recorded."
        />
      </Card>

      <Modal open={create} title="Create API key" onClose={() => setCreate(false)}>
        <CreateKeyForm
          onCreated={(t, name) => {
            setCreate(false);
            setToken({ token: t, name });
            reload();
          }}
        />
      </Modal>

      <Modal open={!!token} title="Key created — copy it now" onClose={() => setToken(null)}>
        {token && (
          <div className="flex flex-col gap-3">
            <Banner tone="warn">This token is shown <strong>once</strong>. Store it in a password manager; the server keeps only a hash.</Banner>
            <div className="flex items-center gap-2 rounded-md border border-border bg-surface-2 p-2">
              <KeyRound className="h-4 w-4 shrink-0 text-ink-3" />
              <code className="flex-1 break-all text-xs">{token.token}</code>
              <CopyButton text={token.token} />
            </div>
            <pre className="overflow-auto rounded-md border border-hairline bg-surface-2 p-2 text-xs">{`export FINDATA_API_KEY="${token.token}"\ncurl -H "Authorization: Bearer $FINDATA_API_KEY" "${typeof window !== "undefined" ? window.location.origin : ""}/api/v1/health"`}</pre>
            <button className="btn btn-primary self-end" onClick={() => setToken(null)}>Done</button>
          </div>
        )}
      </Modal>

      <ConfirmDialog open={!!revoke} title={`Revoke “${revoke?.name}”?`} confirmLabel="Revoke" danger busy={busy} onCancel={() => setRevoke(null)} onConfirm={() => void doRevoke()}>
        Every client using this key will start receiving 401 immediately. This cannot be undone.
      </ConfirmDialog>
    </>
  );
}

function CreateKeyForm({ onCreated }: { onCreated: (token: string, name: string) => void }) {
  const toast = useToast();
  const [name, setName] = useState("");
  const [scopes, setScopes] = useState<string[]>(["read:market"]);
  const [rate, setRate] = useState(600);
  const [expires, setExpires] = useState("");
  const [busy, setBusy] = useState(false);

  async function submit(e: FormEvent) {
    e.preventDefault();
    setBusy(true);
    try {
      const out = await api.post<{ id: string; token: string }>("/admin/keys", {
        name: name.trim(),
        scopes,
        rate_limit_per_minute: rate,
        expires_at: expires ? new Date(expires).toISOString() : null,
      });
      onCreated(out.token, name.trim());
    } catch (err) {
      toast.error(err);
    } finally {
      setBusy(false);
    }
  }

  return (
    <form onSubmit={submit} className="flex flex-col gap-3">
      <Field label="Name">
        <input className="input" value={name} onChange={(e) => setName(e.target.value)} maxLength={60} required placeholder="research-laptop" autoFocus />
      </Field>
      <fieldset>
        <legend className="label">Scopes</legend>
        <div className="flex flex-col gap-1.5">
          {SCOPES.map((s) => (
            <label key={s.id} className="flex items-start gap-2 text-sm">
              <input type="checkbox" className="mt-0.5" checked={scopes.includes(s.id)} onChange={(e) => setScopes((cur) => (e.target.checked ? [...cur, s.id] : cur.filter((x) => x !== s.id)))} />
              <span>
                <code className="text-xs">{s.id}</code> <span className="text-xs text-ink-3">— {s.help}</span>
              </span>
            </label>
          ))}
        </div>
      </fieldset>
      <div className="grid grid-cols-2 gap-2">
        <Field label="Rate limit / minute">
          <input type="number" className="input" min={1} max={10000} value={rate} onChange={(e) => setRate(Number(e.target.value) || 600)} />
        </Field>
        <Field label="Expires (optional)">
          <input type="datetime-local" className="input" value={expires} onChange={(e) => setExpires(e.target.value)} />
        </Field>
      </div>
      <div className="flex justify-end pt-1">
        <button className="btn btn-primary" disabled={busy || !name.trim() || scopes.length === 0}>
          {busy ? "Creating…" : "Create key"}
        </button>
      </div>
    </form>
  );
}