"use client";

import { useEffect, useState } from "react";

import { api, AuditEntry } from "@/lib/api";

export default function AuditPage() {

  const [rows, setRows] = useState<AuditEntry[]>([]);

  const [entityType, setEntityType] = useState("");

  const [err, setErr] = useState<string | null>(null);

  function load() {

    api.audit({ entity_type: entityType || undefined, limit: 200 })

      .then(setRows)

      .catch((e) => setErr(e.status === 401 ? "Sign in to view the audit log." : String(e)));

  }

  useEffect(load, [entityType]);

  const types = ["", "investigation", "import", "watchlist", "watchlist_entry", "user", "report", "enrichment_job", "alert"];

  return (

    <div>

      <h1>Audit Log</h1>

      <p className="muted">Immutable record of every mutation - actor, action, entity, and metadata.</p>

      <div className="row" style={{ margin: "10px 0" }}>

        <select value={entityType} onChange={(e) => setEntityType(e.target.value)}>

          {types.map((t) => <option key={t} value={t}>{t || "all entity types"}</option>)}

        </select>

        <button onClick={load}>Refresh</button>

      </div>

      {err && <div className="badge danger">{err}</div>}

      <div className="card">

        <table>

          <thead><tr><th>When</th><th>Action</th><th>Entity</th><th>Actor</th><th>Metadata</th></tr></thead>

          <tbody>

            {rows.map((r) => (

              <tr key={r.id}>

                <td className="muted" style={{ whiteSpace: "nowrap" }}>{new Date(r.at).toLocaleString()}</td>

                <td><span className="badge">{r.action}</span></td>

                <td className="muted">{r.entity_type}{r.entity_id ? ` · ${r.entity_id.slice(0, 8)}` : ""}</td>

                <td className="muted">{r.actor ? r.actor.slice(0, 8) : "-"}</td>

                <td className="muted" style={{ fontSize: 12, maxWidth: 320, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>

                  {r.metadata && Object.keys(r.metadata).length ? JSON.stringify(r.metadata) : "-"}

                </td>

              </tr>

            ))}

            {!rows.length && !err && <tr><td colSpan={5} className="muted">No audit entries.</td></tr>}

          </tbody>

        </table>

      </div>

    </div>

  );

}