"use client";

import { useEffect, useState } from "react";
import { PageHeader } from "@/components/layout/PageHeader";
import { EmptyState } from "@/components/layout/EmptyState";
import { ErrorState } from "@/components/layout/ErrorState";
import { Badge } from "@/components/ui/badge";
import { Skeleton } from "@/components/ui/skeleton";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { apiFetch, errorMessageForUi } from "@/lib/api";

type Log = {
  id: string;
  action: string;
  summary?: string | null;
  entityType?: string | null;
  entityId?: string | null;
  createdAt: string;
  user?: { email: string } | null;
  tenant?: { name: string } | null;
};

export default function AuditPage() {
  const [rows, setRows] = useState<Log[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    apiFetch<Log[]>("/audit")
      .then(setRows)
      .catch((err) => setError(errorMessageForUi(err, "Failed")))
      .finally(() => setLoading(false));
  }, []);

  return (
    <TooltipProvider>
      <PageHeader title="Audit logs" description="Recent authentication and platform events." />
      {error ? <ErrorState message={error} /> : null}
      {loading ? (
        <Skeleton className="h-48 w-full" />
      ) : !rows.length ? (
        <EmptyState title="No audit events" description="Events will appear after logins and admin actions." />
      ) : (
        <div className="overflow-hidden rounded-lg border bg-card">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Timestamp</TableHead>
                <TableHead>Actor</TableHead>
                <TableHead>Action</TableHead>
                <TableHead className="hidden md:table-cell">Tenant</TableHead>
                <TableHead className="hidden lg:table-cell">Details</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {rows.map((log) => (
                <TableRow key={log.id}>
                  <TableCell className="whitespace-nowrap text-xs text-muted-foreground">
                    {new Date(log.createdAt).toLocaleString()}
                  </TableCell>
                  <TableCell>{log.user?.email || "system"}</TableCell>
                  <TableCell>
                    <Badge variant="outline">{log.action}</Badge>
                  </TableCell>
                  <TableCell className="hidden md:table-cell">{log.tenant?.name || "platform"}</TableCell>
                  <TableCell className="hidden max-w-xs truncate lg:table-cell">
                    <Tooltip>
                      <TooltipTrigger asChild>
                        <span className="cursor-help">{log.summary || "—"}</span>
                      </TooltipTrigger>
                      <TooltipContent className="max-w-sm">
                        <p>{log.summary || "No summary"}</p>
                        {log.entityType ? (
                          <p className="text-xs opacity-80">
                            {log.entityType}:{log.entityId}
                          </p>
                        ) : null}
                      </TooltipContent>
                    </Tooltip>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      )}
    </TooltipProvider>
  );
}