import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { ShieldCheck } from "lucide-react";
import { formatDate } from "@/lib/utils";
import { type AdminMeetingDetail } from "@/lib/api/admin.api";

interface AuditTabProps {
  meeting: AdminMeetingDetail;
}

export function AuditTab({ meeting }: AuditTabProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2 text-base">
          <ShieldCheck className="h-4 w-4 text-red-500" />
          Audit trail
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-3">
        {meeting.audit_log.length > 0 ? (
          meeting.audit_log.map((entry) => (
            <div
              key={`${entry.time}-${entry.event}`}
              className="grid gap-2 rounded-lg border border-gray-200 p-3 text-sm dark:border-gray-800 md:grid-cols-[180px_1fr_140px]"
            >
              <span className="text-gray-500 dark:text-gray-400">{formatDate(entry.time)}</span>
              <span className="font-medium text-gray-900 dark:text-gray-100">{entry.event}</span>
              <span className="font-mono text-xs text-gray-500 dark:text-gray-400">{entry.ip}</span>
              <span className="text-xs text-gray-500 dark:text-gray-400 md:col-start-2">{entry.actor}</span>
            </div>
          ))
        ) : (
          <p className="text-sm text-gray-500 dark:text-gray-400 italic py-4 text-center">No audit trail entries recorded.</p>
        )}
      </CardContent>
    </Card>
  );
}