"use client";
import { useEffect, useState } from "react";
import { api } from "@/lib/api";

export default function Audit() {
  const [logs, setLogs] = useState<any[]>([]);
  useEffect(() => { api("/admin/audit-logs").then(setLogs).catch(() => {}); }, []);
  return (
    <div className="space-y-5">
      <h2 className="text-xl font-bold">Audit Logs</h2>
      <div className="card overflow-x-auto">
        <table className="w-full text-sm">
          <thead className="bg-slate-50 text-slate-500 text-left">
            <tr><th className="px-4 py-3 font-medium">Time</th><th className="px-4 py-3 font-medium">User</th><th className="px-4 py-3 font-medium">Action</th><th className="px-4 py-3 font-medium">Module</th><th className="px-4 py-3 font-medium">Details</th></tr>
          </thead>
          <tbody className="divide-y divide-slate-100">
            {logs.map((l, i) => (
              <tr key={i}>
                <td className="px-4 py-3 text-slate-500">{l.at ? new Date(l.at).toLocaleString() : ""}</td>
                <td className="px-4 py-3">{l.user ?? "—"}</td>
                <td className="px-4 py-3">{l.action}</td>
                <td className="px-4 py-3">{l.module}</td>
                <td className="px-4 py-3 text-slate-500">{l.details}</td>
              </tr>
            ))}
            {logs.length === 0 && <tr><td colSpan={5} className="px-4 py-12 text-center text-slate-400">No audit logs.</td></tr>}
          </tbody>
        </table>
      </div>
    </div>
  );
}