import React, { useState, useEffect, useCallback } from 'react';
import { AuditLogEntry, AuditLogFilter, AuditLogPage } from '../types/audit';
import { fetchAuditLogs } from '../api/audit';
import Pagination from './Pagination';
import EmptyState from './EmptyState';
import LoadingSpinner from './LoadingSpinner';
import FilterBar from './FilterBar';

interface AuditLogViewerProps {
  initialFilters?: AuditLogFilter;
}

const PAGE_SIZE = 25;

export default function AuditLogViewer({ initialFilters }: AuditLogViewerProps) {
  const [filters, setFilters] = useState<AuditLogFilter>(
    initialFilters ?? { user: '', action: '', dateFrom: '', dateTo: '' }
  );
  const [page, setPage] = useState(1);
  const [data, setData] = useState<AuditLogPage | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const loadPage = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const result = await fetchAuditLogs({
        user: filters.user || undefined,
        action: filters.action || undefined,
        dateFrom: filters.dateFrom || undefined,
        dateTo: filters.dateTo || undefined,
        page,
        pageSize: PAGE_SIZE,
      });
      setData(result);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to load audit logs');
      setData(null);
    } finally {
      setLoading(false);
    }
  }, [filters, page]);

  useEffect(() => {
    loadPage();
  }, [loadPage]);

  const handleFilterChange = (updated: AuditLogFilter) => {
    setFilters(updated);
    setPage(1);
  };

  const handlePageChange = (newPage: number) => {
    setPage(newPage);
  };

  if (loading) {
    return (
      <div className="audit-log-viewer" role="status" aria-live="polite">
        <FilterBar filters={filters} onChange={handleFilterChange} disabled={true} />
        <LoadingSpinner label="Loading audit log…" />
      </div>
    );
  }

  if (error) {
    return (
      <div className="audit-log-viewer" role="