import {prisma} from "@/lib/db/prisma";

const actionColors: Record<string, string> = {
  CREATE: "bg-green-100 text-green-700",
  UPDATE: "bg-blue-100 text-blue-700",
  DELETE: "bg-red-100 text-red-700",
  LOGIN: "bg-slate-100 text-slate-600",
  LOGOUT: "bg-slate-100 text-slate-600",
  STATUS_CHANGE: "bg-amber-100 text-amber-700",
  EXPORT: "bg-violet-100 text-violet-700"
};

export default async function AuditLogsPage() {
  const logs = await prisma.auditLog.findMany({
    include: {
      user: {select: {firstName: true, lastName: true, email: true}},
      tenant: {select: {name: true}}
    },
    orderBy: {createdAt: "desc"},
    take: 100
  });

  return (
    <div className="space-y-6 p-6">
      <div>
        <h1 className="text-2xl font-bold text-slate-900">Audit Logs</h1>
        <p className="mt-1 text-slate-500">Sensitive operation history (last 100 entries)</p>
      </div>

      <div className="rounded-2xl border border-slate-200 bg-white shadow-sm overflow-x-auto">
        <table className="min-w-full text-sm">
          <thead>
            <tr className="border-b border-slate-200 bg-slate-50">
              <th className="px-4 py-3 text-left font-semibold text-slate-700">Action</th>
              <th className="px-4 py-3 text-left font-semibold text-slate-700">Entity</th>
              <th className="px-4 py-3 text-left font-semibold text-slate-700">User</th>
              <th className="px-4 py-3 text-left font-semibold text-slate-700">Tenant</th>
              <th className="px-4 py-3 text-left font-semibold text-slate-700">IP</th>
              <th className="px-4 py-3 text-left font-semibold text-slate-700">Date</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-slate-100">
            {logs.map((log) => (
              <tr key={log.id} className="hover:bg-slate-50 transition">
                <td className="px-4 py-3">
                  <span className={`rounded-full px-2 py-0.5 text-xs font-medium ${actionColors[log.action] ?? "bg-slate-100"}`}>
                    {log.action}
                  </span>
                </td>
                <td className="px-4 py-3">
                  <p className="font-medium text-slate-900">{log.entityType}</p>
                  <p className="font-mono text-xs text-slate-400">{log.entityId.slice(0, 12)}…</p>
                </td>
                <td className="px-4 py-3 text-slate-600">
                  {log.user
                    ? log.user.firstName
                      ? `${log.user.firstName} ${log.user.lastName ?? ""}`.trim()
                      : log.user.email
                    : "System"}
                </td>
                <td className="px-4 py-3 text-slate-500">{log.tenant?.name ?? "—"}</td>
                <td className="px-4 py-3 font-mono text-xs text-slate-400">{log.ipAddress ?? "—"}</td>
                <td className="px-4 py-3 text-slate-500 text-xs">{new Date(log.createdAt).toLocaleString()}</td>
              </tr>
            ))}
            {logs.length === 0 && (
              <tr>
                <td className="px-4 py-8 text-center text-slate-400" colSpan={6}>
                  No audit logs.
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}