import { Head } from '@inertiajs/react';
import AdminLayout from '@/Layouts/AdminLayout';

interface LogEntry {
    id: number;
    action: string;
    subject_type: string | null;
    changes: Record<string, unknown> | null;
    ip_address: string | null;
    created_at: string;
    user: { name: string } | null;
}

export default function Audit({ logs }: { logs: { data: LogEntry[] } }) {
    return (
        <AdminLayout>
            <Head title="Audit Logs" />
            <h1 className="mb-6 text-2xl font-bold">Audit Logs</h1>

            <div className="divide-y divide-white/10 rounded-lg bg-gray-900 text-sm ring-1 ring-white/10">
                {logs.data.map((log) => (
                    <div key={log.id} className="px-4 py-3">
                        <p className="text-gray-200">
                            <span className="font-medium">{log.user?.name ?? 'System'}</span> — {log.action}
                        </p>
                        <p className="text-xs text-gray-500">
                            {new Date(log.created_at).toLocaleString()} · {log.ip_address ?? 'unknown IP'}
                        </p>
                    </div>
                ))}
                {logs.data.length === 0 && <p className="px-4 py-4 text-gray-400">No audit entries yet.</p>}
            </div>
        </AdminLayout>
    );
}
