"use client";
import { useState } from "react";
import { RefreshCw } from "lucide-react";
import { api, type AuditRow } from "@/lib/api";
import { useAsync, useDebounced } from "@/lib/hooks";
import { useAuth } from "@/lib/auth";
import { fmtInt, fmtTs } from "@/lib/format";
import { Banner, Card, ErrorState, Field, PageHeader, StatusBadge } from "@/components/ui";
import { DataTable } from "@/components/DataTable";
import { JsonView } from "@/components/JsonView";

const ACTIONS = ["", "auth.", "auth.login", "auth.mfa", "admin.", "admin.enqueue", "admin.key_create", "admin.key_revoke", "export.", "query.sql"];
const HIDDEN = new Set(["id", "at", "action", "actor", "principal", "target", "outcome", "ip", "request_id", "detail", "user_agent"]);

export default function AuditPage() {
  const { isOwner } = useAuth();
  const [action, setAction] = useState("");
  const [limit, setLimit] = useState(200);
  const da = useDebounced(action.trim(), 300);
  const { data, error, loading, reload } = useAsync((s) => api.get<{ data: AuditRow[] }>("/admin/audit", { action: da || undefined, limit }, s), [da, limit], { enabled: isOwner });

  if (!isOwner) return <Banner tone="warn">The audit log is restricted to the owner.</Banner>;

  return (
    <>
      <PageHeader
        title="Audit log"
        subtitle="Every authentication event, admin action, export and SQL query, with request ids."
        actions={
          <>
            <Field label="Action prefix" className="w-48">
              <input className="input py-1 font-mono text-xs" list="audit-actions" value={action} onChange={(e) => setAction(e.target.value)} placeholder="admin." />
              <datalist id="audit-actions">
                {ACTIONS.filter(Boolean).map((a) => (
                  <option key={a} value={a} />
                ))}
              </datalist>
            </Field>
            <Field label="Limit" className="w-24">
              <select className="input py-1 text-xs" value={limit} onChange={(e) => setLimit(Number(e.target.value))}>
                {[100, 200, 500, 1000, 2000].map((n) => (
                  <option key={n} value={n}>
                    {n}
                  </option>
                ))}
              </select>
            </Field>
            <button className="btn btn-sm self-end" onClick={reload}>
              <RefreshCw className="h-3.5 w-3.5" /> Refresh
            </button>
          </>
        }
      />
      {error && <ErrorState error={error} retry={reload} />}
      <Card>
        <DataTable
          rows={data?.data}
          loading={loading}
          rowKey={(r, i) => String(r.id ?? `${r.at}-${i}`)}
          mobile="cards"
          maxHeight="75dvh"
          columns={[
            { key: "at", header: "At (UTC)", render: (r) => <span className="tnum text-xs whitespace-nowrap">{fmtTs(r.at)}</span> },
            { key: "action", header: "Action", mono: true },
            { key: "actor", header: "Actor", render: (r) => <span className="text-xs">{String(r.actor ?? r.principal ?? "—")}</span> },
            { key: "target", header: "Target", render: (r) => <span className="font-mono text-xs break-all">{r.target ?? "—"}</span> },
            { key: "outcome", header: "Outcome", render: (r) => (r.outcome ? <StatusBadge status={r.outcome === "denied" ? "denied" : r.outcome === "ok" ? "ok" : r.outcome} label={r.outcome} /> : <span className="text-ink-3">—</span>) },
            { key: "ip", header: "IP", hideSm: true, mono: true },
            {
              key: "detail",
              header: "Detail",
              render: (r) => {
                const d = r.detail ?? Object.fromEntries(Object.entries(r).filter(([k]) => !HIDDEN.has(k)));
                return Object.keys(d).length ? <JsonView value={d} collapsed /> : <span className="text-ink-3">—</span>;
              },
            },
            { key: "request_id", header: "Request", hideSm: true, render: (r) => <span className="font-mono text-[11px] text-ink-3">{r.request_id ?? "—"}</span> },
          ]}
          empty="No audit entries match."
          footer={<span>{fmtInt(data?.data.length ?? 0)} entries</span>}
        />
      </Card>
    </>
  );
}