import { AdminPageHeader } from "@/components/admin/admin-ui";
import { formatAdminDate } from "@/lib/admin-format";
import { getAdminAuditLogs } from "@/lib/admin-data";

export default async function AdminAuditPage({ searchParams }: { searchParams: Promise<{ entity?: string; action?: string; search?: string }> }) {
  const filters = await searchParams;
  const logs = await getAdminAuditLogs(filters);
  return (
    <div className="min-h-[42rem] pb-8">
      <AdminPageHeader eyebrow="Accountability" title="Audit log" description="A read-only record of sensitive administrative changes. Passwords and exported data are never recorded here." />
      <form className="mt-6 grid gap-3 rounded-[1.5rem] bg-white/58 p-4 shadow-[0_18px_55px_rgba(39,65,76,0.055)] sm:grid-cols-[1.2fr_0.7fr_0.7fr_auto]">
        <input name="search" defaultValue={filters.search} placeholder="Search action, ID or email" className="h-10 rounded-xl bg-white px-3 text-xs font-medium outline-none ring-1 ring-[#adc0c8]/30 focus:ring-[#ef7d00]/45" />
        <input name="entity" defaultValue={filters.entity} placeholder="Entity (e.g. refund)" className="h-10 rounded-xl bg-white px-3 text-xs font-medium outline-none ring-1 ring-[#adc0c8]/30 focus:ring-[#ef7d00]/45" />
        <input name="action" defaultValue={filters.action} placeholder="Action" className="h-10 rounded-xl bg-white px-3 text-xs font-medium outline-none ring-1 ring-[#adc0c8]/30 focus:ring-[#ef7d00]/45" />
        <button className="h-10 rounded-xl bg-[#102630] px-4 text-xs font-extrabold text-white">Filter</button>
      </form>
      <section className="mt-5 overflow-hidden rounded-[1.75rem] bg-white/58 shadow-[0_18px_55px_rgba(39,65,76,0.055)]">
        {logs.length === 0 ? <p className="p-8 text-sm text-[#708087]">No audit records match these filters.</p> : (
          <div className="overflow-x-auto"><table className="w-full min-w-[52rem] text-left"><thead className="bg-[#e7f0f2]/70 text-[10px] uppercase tracking-[0.13em] text-[#718289]"><tr><th className="px-5 py-4">When</th><th className="px-5 py-4">Action</th><th className="px-5 py-4">Admin</th><th className="px-5 py-4">Target</th><th className="px-5 py-4">Context</th></tr></thead><tbody className="divide-y divide-[#b8c9cf]/25">{logs.map((log) => <tr key={log.id} className="align-top"><td className="px-5 py-4 text-xs text-[#65777e]">{formatAdminDate(log.createdAt, true)}</td><td className="px-5 py-4"><p className="text-xs font-extrabold capitalize text-[#263d47]">{log.action.replaceAll("_", " ")}</p><p className="mt-1 text-[11px] text-[#7a8a91]">{log.entityType}{log.entityId ? ` #${log.entityId}` : ""}</p></td><td className="px-5 py-4 text-xs font-bold text-[#405760]">{log.adminName}</td><td className="px-5 py-4 text-xs text-[#65777e]">{log.targetName || "—"}</td><td className="max-w-sm px-5 py-4 text-[11px] leading-5 text-[#718289]">{log.details ? JSON.stringify(log.details) : "—"}</td></tr>)}</tbody></table></div>
        )}
      </section>
    </div>
  );
}