"use client";

import * as React from "react";
import Link from "next/link";
import { X } from "lucide-react";
import { useAdminQuery } from "@/components/admin/use-query";
import type { SecurityEventRow, SecurityEventsResponse } from "@/components/admin/types";
import { PageHeader, RefreshButton, Panel, DataTable, ErrorState, TableSkeleton, DenseInput, DenseSelect, SeverityPill, JsonToggle, Mono, type Column } from "@/components/admin/primitives";
import { dateTime, int, num } from "@/components/admin/format";
import { cn } from "@/lib/utils";

const SEVERITIES = ["", "info", "warn", "high"] as const;
const LIMITS = [50, 100, 200] as const;

const cols: Column<SecurityEventRow>[] = [
  { key: "at", header: "Time", render: (e) => <span className="whitespace-nowrap text-fg-3">{dateTime(e.createdAt)}</span> },
  { key: "type", header: "Type", mono: true, render: (e) => <Mono className="text-fg">{e.type}</Mono> },
  { key: "sev", header: "Severity", render: (e) => <SeverityPill severity={e.severity} /> },
  { key: "user", header: "User", render: (e) => (e.userId ? <Link href={`/admin/users/${e.userId}`} className="hover:text-accent-2">{e.username ?? e.userId.slice(0, 8)}</Link> : e.adminId ? <span className="text-fg-3">admin</span> : <span className="text-fg-4">—</span>) },
  { key: "ip", header: "IP", mono: true, render: (e) => <Mono>{e.ip ?? "—"}</Mono> },
  { key: "ua", header: "Agent", render: (e) => <span className="block max-w-[220px] truncate text-fg-3" title={e.userAgent ?? ""}>{e.userAgent ?? "—"}</span> },
  { key: "meta", header: "Meta", render: (e) => <JsonToggle value={e.meta} /> },
];

export default function AdminSecurityPage() {
  const [type, setType] = React.useState("");
  const [severity, setSeverity] = React.useState<(typeof SEVERITIES)[number]>("");
  const [limit, setLimit] = React.useState<(typeof LIMITS)[number]>(100);

  const params = new URLSearchParams({ limit: String(limit) });
  if (type) params.set("type", type);
  if (severity) params.set("severity", severity);
  const q = useAdminQuery<SecurityEventsResponse>(`/api/admin/security/events?${params.toString()}`, { refreshMs: 30_000 });
  const d = q.data;

  const high = d?.events.filter((e) => e.severity === "high").length ?? 0;
  const total24h = d?.summary24h.reduce((a, s) => a + num(s.n), 0) ?? 0;

  return (
    <>
      <PageHeader title="Security" description="Authentication, admin actions, CSRF rejections and rate-limit hits. Newest first." actions={<RefreshButton onClick={() => void q.refresh()} loading={q.refreshing} />} />

      {d ? (
        <div className="mb-3 flex flex-wrap items-center gap-1.5">
          <span className="mr-1 text-[11px] font-semibold uppercase tracking-wider text-fg-4">Last 24 h · {int(total24h)}</span>
          {d.summary24h.length === 0 ? <span className="text-[12px] text-fg-4">quiet — no events</span> : null}
          {d.summary24h.map((s) => (
            <button key={s.type} type="button" onClick={() => setType((t) => (t === s.type ? "" : s.type))} className={cn("inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 font-mono text-[11px] transition-colors focus-ring", type === s.type ? "border-accent/50 bg-accent-soft text-accent-2" : "border-line bg-surface text-fg-2 hover:bg-surface-2")}>
              {s.type} <span className="text-fg-4">{int(s.n)}</span>
            </button>
          ))}
        </div>
      ) : null}

      <div className="mb-3 flex flex-wrap items-center gap-2">
        <div className="relative w-full sm:w-72">
          <DenseInput placeholder="Filter by exact type (e.g. login.failed)" value={type} onChange={(e) => setType(e.target.value.trim())} aria-label="Event type" list="security-types" className={type ? "pr-8" : undefined} />
          {type ? (
            <button type="button" onClick={() => setType("")} className="absolute right-2 top-1/2 -translate-y-1/2 text-fg-4 hover:text-fg" aria-label="Clear type filter">
              <X className="h-3.5 w-3.5" />
            </button>
          ) : null}
          <datalist id="security-types">{d?.summary24h.map((s) => <option key={s.type} value={s.type} />)}</datalist>
        </div>
        <DenseSelect value={severity} onChange={(e) => setSeverity(e.target.value as (typeof SEVERITIES)[number])} aria-label="Severity">
          {SEVERITIES.map((s) => (
            <option key={s} value={s}>
              {s ? s : "All severities"}
            </option>
          ))}
        </DenseSelect>
        <DenseSelect value={limit} onChange={(e) => setLimit(Number(e.target.value) as (typeof LIMITS)[number])} aria-label="Limit">
          {LIMITS.map((l) => (
            <option key={l} value={l}>
              Last {l}
            </option>
          ))}
        </DenseSelect>
        {d ? (
          <span className="ml-auto text-[12px] text-fg-3 tabular">
            {int(d.events.length)} shown · <span className={high ? "text-danger" : ""}>{int(high)} high</span>
          </span>
        ) : null}
      </div>

      <Panel padded={false}>
        {q.error && !d ? (
          <div className="p-4">
            <ErrorState error={q.error} onRetry={() => void q.refresh()} />
          </div>
        ) : !d ? (
          <TableSkeleton rows={10} cols={7} />
        ) : (
          <DataTable columns={cols} rows={d.events} rowKey={(e) => e.id} dense stale={q.stale} empty={type || severity ? "No events match these filters." : "No security events recorded."} rowClassName={(e) => (e.severity === "high" ? "bg-danger/5" : undefined)} />
        )}
      </Panel>
    </>
  );
}