"use client";

/**
 * TASK-0133 — Audit tab: the org audit viewer.
 *
 *   - filters: action (autocomplete from the catalog), actor id, resource
 *     type, workspace, date range (≤90 days, server-enforced)
 *   - paged table (newest first), immutable (the API exposes NO audit
 *     mutation route — the integration router-walk test asserts it)
 *   - detail drawer: the FULL metadata JSON + ip + user-agent + a deep link
 *     when the resource still exists
 *   - CSV export: ≤10k matching rows → synchronous inline download; >10k →
 *     `202 {exportId}` (a worker job streams it to S3, capped at 500k rows
 *     `truncated`), then poll + a SINGLE-USE 15-minute download URL.
 */
import { useMemo, useState } from "react";
import { useMutation, useQuery } from "@tanstack/react-query";
import { Download, Search, X } from "lucide-react";
import { orgAdminApi, type AuditRow } from "@/lib/org-admin";
import { isApiError } from "@/lib/api";
import { toast } from "@/stores/ui-store";
import { Section, Field, inputCls } from "@/components/settings/settings-shell";

const PAGE_SIZE = 25;

const RESOURCE_TYPES = ["page", "database", "record", "user", "file", "share", "api_key", "webhook", "automation", "organization", "session", "integration"];

interface Filters {
  action: string;
  actorId: string;
  resourceType: string;
  workspaceId: string;
  from: string; // yyyy-mm-dd
  to: string; // yyyy-mm-dd
}

const EMPTY: Filters = { action: "", actorId: "", resourceType: "", workspaceId: "", from: "", to: "" };

function downloadCsv(csv: string, filename: string) {
  const blob = new Blob([csv], { type: "text/csv;charset=utf-8" });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  a.remove();
  URL.revokeObjectURL(url);
}

export function AdminAuditTab({ orgId }: { orgId: string }) {
  const [draft, setDraft] = useState<Filters>(EMPTY);
  const [applied, setApplied] = useState<Filters>(EMPTY);
  const [page, setPage] = useState(1);
  const [detail, setDetail] = useState<AuditRow | null>(null);

  const actions = useQuery({
    queryKey: ["orgs", orgId, "admin", "audit", "actions"],
    queryFn: () => orgAdminApi.auditActions(orgId),
    retry: false,
  });

  const filters = useMemo(
    () => ({
      action: applied.action || null,
      actorId: applied.actorId || null,
      resourceType: applied.resourceType || null,
      workspaceId: applied.workspaceId || null,
      from: applied.from || null,
      to: applied.to || null,
      page,
      pageSize: PAGE_SIZE,
    }),
    [applied, page]
  );

  const list = useQuery({
    queryKey: ["orgs", orgId, "admin", "audit", filters],
    queryFn: () => orgAdminApi.audit(orgId, filters),
    retry: false,
  });

  const apply = (f: Filters) => {
    setApplied(f);
    setPage(1);
  };
  const set = (k: keyof Filters, v: string) => setDraft((d) => ({ ...d, [k]: v }));

  const exportMut = useMutation({
    mutationFn: async () => {
      const start = await orgAdminApi.auditExport(orgId, {
        action: applied.action || null,
        actorId: applied.actorId || null,
        resourceType: applied.resourceType || null,
        workspaceId: applied.workspaceId || null,
        from: applied.from || null,
        to: applied.to || null,
      });
      if (start.kind === "sync" && start.csv) {
        downloadCsv(start.csv, `audit-${orgId.slice(0, 8)}.csv`);
        toast("success", `Exported ${start.total} rows (CSV)`);
        return null;
      }
      if (start.kind === "async") return start.exportId as string;
      return null;
    },
    onError: (e) => toast("error", "Export failed", isApiError(e) ? e.message : undefined),
  });

  const exportId = exportMut.data as string | null;
  const exportStatus = useQuery({
    queryKey: ["orgs", orgId, "admin", "audit", "export", exportId],
    queryFn: () => orgAdminApi.auditExportStatus(orgId, exportId!, true),
    enabled: Boolean(exportId),
    refetchInterval: (q) => {
      const s = (q.state.data as { status?: string } | undefined)?.status;
      return s === "ready" || s === "failed" ? false : 1500;
    },
    retry: false,
  });
  const exp = exportStatus.data;

  const rows = list.data?.data ?? [];
  const total = list.data?.total ?? 0;
  const pages = Math.max(1, Math.ceil(total / PAGE_SIZE));

  return (
    <div className="space-y-4">
      <Section
        title="Audit log"
        description="Immutable, org-scoped (workspace rows + org-level rows). Read-only — there is no audit mutation endpoint."
      >
        <form
          className="grid grid-cols-2 gap-2 md:grid-cols-3 lg:grid-cols-6"
          onSubmit={(e) => {
            e.preventDefault();
            apply(draft);
          }}
        >
          <Field label="Action">
            <input list="audit-actions" value={draft.action} onChange={(e) => set("action", e.target.value)} placeholder="e.g. user.login" className={inputCls} aria-label="Filter by action" />
            <datalist id="audit-actions">
              {(actions.data?.data ?? []).map((a) => (
                <option key={a} value={a} />
              ))}
            </datalist>
          </Field>
          <Field label="Actor id">
            <input value={draft.actorId} onChange={(e) => set("actorId", e.target.value)} placeholder="user or key id" className={inputCls} aria-label="Filter by actor id" />
          </Field>
          <Field label="Resource type">
            <select value={draft.resourceType} onChange={(e) => set("resourceType", e.target.value)} className={inputCls} aria-label="Filter by resource type">
              <option value="">Any</option>
              {RESOURCE_TYPES.map((t) => (
                <option key={t} value={t}>
                  {t}
                </option>
              ))}
            </select>
          </Field>
          <Field label="Workspace">
            <input value={draft.workspaceId} onChange={(e) => set("workspaceId", e.target.value)} placeholder="workspace id" className={inputCls} aria-label="Filter by workspace id" />
          </Field>
          <Field label="From">
            <input type="date" value={draft.from} onChange={(e) => set("from", e.target.value)} className={inputCls} aria-label="From date" />
          </Field>
          <Field label="To">
            <input type="date" value={draft.to} onChange={(e) => set("to", e.target.value)} className={inputCls} aria-label="To date" />
          </Field>
          <div className="col-span-2 flex items-end gap-2 md:col-span-3 lg:col-span-6">
            <button type="submit" className="inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:opacity-90">
              <Search className="size-3.5" aria-hidden /> Apply
            </button>
            {(JSON.stringify(applied) !== JSON.stringify(EMPTY) || page > 1) && (
              <button type="button" onClick={() => apply(EMPTY)} className="text-sm text-muted-foreground hover:text-foreground hover:underline">
                Clear
              </button>
            )}
            <div className="ml-auto flex items-center gap-3">
              <span className="text-xs text-muted-foreground">
                {total} row{total === 1 ? "" : "s"}
                {exp?.truncated ? ` (showing first ${PAGE_SIZE})` : ""}
              </span>
              <button
                type="button"
                onClick={() => exportMut.mutate()}
                disabled={exportMut.isPending || exportStatus.isFetching || total === 0}
                className="inline-flex items-center gap-1.5 rounded-md border border-input px-3 py-1.5 text-sm font-medium hover:bg-muted disabled:opacity-50"
              >
                <Download className="size-3.5" aria-hidden /> Export CSV
              </button>
            </div>
          </div>
        </form>

        {/* async export progress (single-use URL on ready) */}
        {exportId && (
          <div className="mt-3 rounded-md border border-border p-3 text-sm" aria-live="polite">
            {exp ? (
              exp.status === "ready" ? (
                <div className="flex flex-wrap items-center gap-3">
                  <span>
                    Export ready ({exp.rows} rows{exp.truncated ? ", truncated at the 500k cap" : ""}).
                  </span>
                  {exp.downloadUrl && (
                    <a
                      href={exp.downloadUrl}
                      className="font-medium underline underline-offset-2"
                      onClick={() => exportMut.reset()}
                    >
                      Download (single-use, expires in {Math.max(0, Math.round((exp.urlTtlSec ?? 900) / 60))} min)
                    </a>
                  )}
                </div>
              ) : exp.status === "failed" ? (
                <span className="text-destructive">Export failed: {exp.error ?? "unknown error"}</span>
              ) : (
                <span className="text-muted-foreground">Exporting… ({exp.rows} of {exp.totalRows} rows so far)</span>
              )
            ) : (
              <span className="text-muted-foreground">Preparing export…</span>
            )}
          </div>
        )}
      </Section>

      <Section title="Events">
        {list.isLoading ? (
          <p className="text-sm text-muted-foreground" role="status">Loading…</p>
        ) : list.isError ? (
          <p className="text-sm text-destructive" role="alert">Could not load the audit log.</p>
        ) : rows.length === 0 ? (
          <p className="text-sm text-muted-foreground">No audit events match the filters.</p>
        ) : (
          <>
            <table className="w-full text-sm">
              <caption className="sr-only">Organization audit events</caption>
              <thead>
                <tr className="border-b border-border text-left text-xs text-muted-foreground">
                  <th className="py-2 pr-3 font-medium">Time</th>
                  <th className="py-2 pr-3 font-medium">Action</th>
                  <th className="py-2 pr-3 font-medium">Resource</th>
                  <th className="py-2 pr-3 font-medium">Actor</th>
                  <th className="py-2 font-medium">IP</th>
                </tr>
              </thead>
              <tbody>
                {rows.map((r) => (
                  <tr key={r.id} className="cursor-pointer border-b border-border/60 last:border-0 hover:bg-muted/40" onClick={() => setDetail(r)}>
                    <td className="whitespace-nowrap py-2 pr-3 text-xs text-muted-foreground">{new Date(r.createdAt).toLocaleString()}</td>
                    <td className="py-2 pr-3 font-mono text-xs">{r.action}</td>
                    <td className="py-2 pr-3 text-xs">
                      <span className="text-muted-foreground">{r.resourceType}</span>{" "}
                      <span className="font-mono">{r.resourceId ? r.resourceId.slice(0, 12) + "…" : "—"}</span>
                    </td>
                    <td className="py-2 pr-3 font-mono text-xs">{r.actorId?.slice(0, 12) ?? "—"}</td>
                    <td className="py-2 text-xs text-muted-foreground">{r.ipAddress ?? "—"}</td>
                  </tr>
                ))}
              </tbody>
            </table>
            <div className="mt-3 flex items-center justify-end gap-2 text-sm">
              <button
                type="button"
                onClick={() => setPage((p) => Math.max(1, p - 1))}
                disabled={page <= 1}
                className="rounded-md border border-input px-2.5 py-1 text-xs hover:bg-muted disabled:opacity-50"
              >
                ← Prev
              </button>
              <span className="text-xs text-muted-foreground">
                page {page} / {pages}
              </span>
              <button
                type="button"
                onClick={() => setPage((p) => Math.min(pages, p + 1))}
                disabled={page >= pages}
                className="rounded-md border border-input px-2.5 py-1 text-xs hover:bg-muted disabled:opacity-50"
              >
                Next →
              </button>
            </div>
          </>
        )}
      </Section>

      {/* detail drawer */}
      {detail && (
        <aside
          className="fixed inset-y-0 right-0 z-50 flex w-full max-w-md flex-col border-l border-border bg-background shadow-xl"
          role="dialog"
          aria-label="Audit event detail"
        >
          <div className="flex items-center justify-between border-b border-border p-4">
            <div>
              <div className="font-mono text-sm font-medium">{detail.action}</div>
              <div className="text-xs text-muted-foreground">{new Date(detail.createdAt).toLocaleString()}</div>
            </div>
            <button type="button" onClick={() => setDetail(null)} className="rounded-md p-1 hover:bg-muted" aria-label="Close detail">
              <X className="size-4" />
            </button>
          </div>
          <div className="flex-1 space-y-4 overflow-y-auto p-4 text-sm">
            <dl className="space-y-2">
              <DetailRow label="Resource" value={`${detail.resourceType} ${detail.resourceId ?? ""}`} />
              <DetailRow label="Actor" value={`${detail.actorId ?? "—"}`} />
              <DetailRow label="Workspace" value={detail.workspaceId ?? "org-level"} />
              <DetailRow label="IP" value={detail.ipAddress ?? "—"} />
              <DetailRow label="User agent" value={detail.userAgent ?? "—"} />
              <DetailRow label="Event id" value={detail.id} />
            </dl>
            <div>
              <div className="mb-1 text-xs font-medium text-muted-foreground">Metadata (full JSON)</div>
              <pre className="max-h-72 overflow-auto rounded-md border border-border bg-muted/30 p-2 text-xs">
                {JSON.stringify(detail.metadata ?? {}, null, 2)}
              </pre>
            </div>
          </div>
        </aside>
      )}
    </div>
  );
}

function DetailRow({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex justify-between gap-3 border-b border-border/40 pb-1">
      <dt className="text-xs text-muted-foreground">{label}</dt>
      <dd className="truncate font-mono text-xs" title={value}>
        {value}
      </dd>
    </div>
  );
}