import { useState } from "react";
import { useFetch } from "../../hooks";
import { fmtDate, useT } from "../../i18n";

interface Entry {
  ts: number;
  user: string;
  action: string;
  detail: string;
  ip: string;
}

/** Admin: audit log and backup download. */
export function Audit() {
  const t = useT();
  const [filter, setFilter] = useState("");
  const { data, reload } = useFetch<Entry[]>(`/audit?limit=500${filter ? `&action=${encodeURIComponent(filter)}` : ""}`);
  return (
    <>
      <div className="panel">
        <h3>{t("audit.backup")}</h3>
        <div style={{ fontSize: 13, color: "var(--fg3)", marginBottom: 8 }}>{t("audit.backupHint")}</div>
        <a className="button primary" href="/api/backup">
          {t("audit.download")}
        </a>
      </div>
      <div className="panel">
        <h3>
          {t("audit.title")}
          <span className="spacer" />
          <select value={filter} onChange={(e) => setFilter(e.target.value)}>
            <option value="">{t("audit.all")}</option>
            {["login", "permission", "config", "user", "folder", "session", "git", "backup"].map((a) => (
              <option key={a} value={a}>
                {a}
              </option>
            ))}
          </select>
          <button className="small" onClick={reload}>
            ↻
          </button>
        </h3>
        <div style={{ overflowX: "auto" }}>
          <table className="grid">
            <thead>
              <tr>
                <th>{t("audit.time")}</th>
                <th>{t("stats.user")}</th>
                <th>{t("audit.action")}</th>
                <th>{t("audit.detail")}</th>
                <th>IP</th>
              </tr>
            </thead>
            <tbody>
              {data?.map((e, i) => (
                <tr key={i} className={e.action.includes("failed") || e.action.includes("blocked") || e.action.includes("reject") ? "audit-warn" : ""}>
                  <td style={{ whiteSpace: "nowrap" }}>{fmtDate(e.ts)}</td>
                  <td>{e.user || "–"}</td>
                  <td>
                    <code>{e.action}</code>
                  </td>
                  <td style={{ wordBreak: "break-word" }}>{e.detail}</td>
                  <td>{e.ip}</td>
                </tr>
              ))}
            </tbody>
          </table>
          {data?.length === 0 && <div className="empty">–</div>}
        </div>
      </div>
    </>
  );
}