import Link from 'next/link';
import { requireAdmin } from '@/lib/admin/auth';
import { eventsLog } from '@/lib/admin/queries';
import { AdminShell, fmtTs, n } from '@/components/admin/shell';
import { Table, th, td } from '@/components/ui/primitives';

export default async function EventsPage({ searchParams }: { searchParams: Promise<{ type?: string }> }) {
  await requireAdmin();
  const sp = await searchParams;
  const { rows, types } = await eventsLog({ type: sp.type || undefined });
  return (
    <AdminShell current="/admin/events" title="Domain events" subtitle="page_crawled, listing_created, sale_detected, entity_matched, valuation_updated, index_updated… (last 200)" actions={<div className="flex flex-wrap gap-1 text-xs"><Link href="/admin/events" className={`rounded-md border px-2 py-1 ${!sp.type ? 'border-accent bg-accent text-accent-fg' : 'border-border hover:bg-inset'}`}>all</Link>{types.map((t) => <Link key={String(t.type)} href={`/admin/events?type=${String(t.type)}`} className={`rounded-md border px-2 py-1 ${sp.type === t.type ? 'border-accent bg-accent text-accent-fg' : 'border-border hover:bg-inset'}`}>{String(t.type)} <span className="text-subtle">{n(t.n)}</span></Link>)}</div>}>
      <div className="card">
        <Table>
          <thead><tr><th className={th}>When</th><th className={th}>Type</th><th className={th}>Entity</th><th className={th}>Payload</th></tr></thead>
          <tbody>
            {rows.length === 0 ? <tr><td className={td} colSpan={4}><span className="text-subtle">No events recorded yet.</span></td></tr> : null}
            {rows.map((r) => (
              <tr key={String(r.id)} className="align-top">
                <td className={td}>{fmtTs(r.created_at)}</td>
                <td className={`${td} font-mono text-[11px]`}>{String(r.type)}</td>
                <td className={`${td} font-mono text-[11px]`}>{String(r.entity_type ?? '')} {String(r.entity_id ?? '')}</td>
                <td className={`${td} max-w-[520px] whitespace-normal font-mono text-[10px] text-muted`}>{JSON.stringify(r.payload)}</td>
              </tr>
            ))}
          </tbody>
        </Table>
      </div>
    </AdminShell>
  );
}