"use client";

import { type AuditEntry } from "@/lib/api";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Skeleton } from "@/components/ui/skeleton";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

const AUDIT_PAGE_SIZE = 25;

interface AuditTabProps {
  auditEntries: AuditEntry[];
  auditTotal: number;
  auditPage: number;
  auditLoading: boolean;
  onLoadAudit: (page: number) => void;
}

export function AuditTab({
  auditEntries,
  auditTotal,
  auditPage,
  auditLoading,
  onLoadAudit,
}: AuditTabProps) {
  const auditTotalPages = Math.ceil(auditTotal / AUDIT_PAGE_SIZE);

  return (
    <div className="mt-4">
      <h2 className="mb-4 text-lg font-semibold">Audit-Log</h2>

      {auditLoading ? (
        <Card>
          <CardContent className="p-4 space-y-3">
            {Array.from({ length: 5 }).map((_, i) => (
              <Skeleton key={i} className="h-10 w-full" />
            ))}
          </CardContent>
        </Card>
      ) : auditEntries.length === 0 ? (
        <Card>
          <CardContent className="p-8 text-center text-muted-foreground">
            Keine Audit-Eintraege vorhanden.
          </CardContent>
        </Card>
      ) : (
        <>
          <Card>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Zeitstempel</TableHead>
                  <TableHead>Ereignis</TableHead>
                  <TableHead>Benutzer</TableHead>
                  <TableHead>Details</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {auditEntries.map((entry) => (
                  <TableRow key={entry.id}>
                    <TableCell className="whitespace-nowrap">
                      {new Date(entry.timestamp).toLocaleString("de-DE")}
                    </TableCell>
                    <TableCell>
                      <Badge variant="outline">
                        {entry.event_type}
                      </Badge>
                    </TableCell>
                    <TableCell>{entry.username}</TableCell>
                    <TableCell className="max-w-xs truncate">
                      {entry.detail}
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </Card>

          {auditTotalPages > 1 && (
            <div className="mt-4 flex items-center justify-center gap-2">
              <Button
                variant="outline"
                size="sm"
                disabled={auditPage <= 1}
                onClick={() => onLoadAudit(auditPage - 1)}
              >
                Zurueck
              </Button>
              <span className="text-sm text-muted-foreground">
                Seite {auditPage} von {auditTotalPages}
              </span>
              <Button
                variant="outline"
                size="sm"
                disabled={auditPage >= auditTotalPages}
                onClick={() => onLoadAudit(auditPage + 1)}
              >
                Weiter
              </Button>
            </div>
          )}
        </>
      )}
    </div>
  );
}
