import { AdminLayout } from "./AdminLayout.tsx";

export const AuditLogPage = ({
  logs,
}: {
  logs: any[];
}) => {
  return (
    <AdminLayout title="System Audit Logs" currentPath="/admin/audit-logs">
      <div class="card">
        <h2>System Audit Logs</h2>
        <div class="table-container">
          <table>
            <thead>
              <tr>
                <th>Timestamp</th>
                <th>Action</th>
                <th>User</th>
                <th>Resource</th>
                <th>IP Address</th>
                <th>Details</th>
              </tr>
            </thead>
            <tbody>
              {logs.map((log) => (
                <tr>
                  <td>{new Date(log.created_at).toLocaleString()}</td>
                  <td>
                    <strong>{log.action}</strong>
                  </td>
                  <td>{log.user || "System"}</td>
                  <td>{log.resource || "-"}</td>
                  <td>{log.ip_address || "-"}</td>
                  <td>
                    <pre>{log.details ? JSON.stringify(log.details, null, 2) : "{}"}</pre>
                  </td>
                </tr>
              ))}
              {logs.length === 0 && (
                <tr>
                  <td colSpan={6} style={{ textAlign: "center" }}>
                    No audit logs found.
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    </AdminLayout>
  );
};