// app/admin/dashboard/audit-logs/AuditLogsClient.tsx
'use client';

import { useState, useCallback, useEffect } from 'react';
import AuditLogsTable from '@/app/components/admin/audit-logs/AuditLogsTable';
import AuditLogModal from '@/app/components/admin/audit-logs/AuditLogModal';
import { AuditLog } from '@/types/audit-log';
import { FilterValues } from '@/types/admin-table';

interface AuditLogsClientProps {
  initialLogs: AuditLog[];
  initialPagination: {
    page: number;
    limit: number;
    total: number;
    pages: number;
  };
  filterOptions: {
    actions: string[];
    resourceTypes: string[];
  };
}

export default function AuditLogsClient({
  initialLogs,
  initialPagination,
  filterOptions,
}: AuditLogsClientProps) {
  const [logs, setLogs] = useState<AuditLog[]>(initialLogs);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [selectedLog, setSelectedLog] = useState<AuditLog | null>(null);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [pagination, setPagination] = useState(initialPagination);
  const [currentFilters, setCurrentFilters] = useState<FilterValues>({
    action: '',
    resourceType: '',
    userId: '',
    startDate: '',
    endDate: '',
  });

  const fetchLogs = useCallback(async (page: number, filters: FilterValues) => {
    try {
      setLoading(true);
      setError('');
      
      const params = new URLSearchParams({
        page: page.toString(),
        limit: pagination.limit.toString(),
      });
      
      if (filters.action && filters.action !== '') params.set('action', filters.action);
      if (filters.resourceType && filters.resourceType !== '') params.set('resourceType', filters.resourceType);
      if (filters.userId && filters.userId !== '') params.set('userId', filters.userId);
      if (filters.startDate && filters.startDate !== '') params.set('startDate', filters.startDate);
      if (filters.endDate && filters.endDate !== '') params.set('endDate', filters.endDate);
      
      const response = await fetch(`/api/backend/admin/audit-logs?${params}`);
      
      if (response.status === 403) {
        setError('You do not have permission to view audit logs');
        return;
      }
      
      if (!response.ok) throw new Error('Failed to fetch audit logs');
      
      const data = await response.json();
      setLogs(data.logs);
      setPagination(data.pagination);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to fetch audit logs');
    } finally {
      setLoading(false);
    }
  }, [pagination.limit]);

  const handleFilterChange = useCallback((newFilters: FilterValues) => {
    setCurrentFilters(newFilters);
    fetchLogs(1, newFilters);
  }, [fetchLogs]);

  const handlePageChange = useCallback((newPage: number) => {
    fetchLogs(newPage, currentFilters);
  }, [fetchLogs, currentFilters]);

  const handleViewLog = (log: AuditLog) => {
    setSelectedLog(log);
    setIsModalOpen(true);
  };

  useEffect(() => {
    const interval = setInterval(() => {
      if (!loading) fetchLogs(pagination.page, currentFilters);
    }, 30000);
    return () => clearInterval(interval);
  }, [fetchLogs, pagination.page, currentFilters, loading]);

  if (error) {
    return (
      <div className="min-h-screen bg-var-bg p-6">
        <div className="max-w-7xl mx-auto">
          <div className="bg-var-danger-bg border border-var-danger-border rounded-lg p-4">
            <div className="flex">
              <div className="shrink-0">
                <svg className="h-5 w-5 text-var-danger" viewBox="0 0 20 20" fill="currentColor">
                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
                </svg>
              </div>
              <div className="ml-3">
                <h3 className="text-sm font-medium text-var-danger-text">Error</h3>
                <p className="text-sm text-var-danger-text mt-1">{error}</p>
                <button
                  onClick={() => fetchLogs(pagination.page, currentFilters)}
                  className="mt-2 px-3 py-1 bg-var-danger-bg text-var-danger-text rounded text-sm hover:bg-var-danger-bg transition-colors"
                >
                  Try Again
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-var-bg p-6">
      <div className="mx-auto">
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-var-text">Audit Logs</h1>
          <p className="text-var-text-secondary mt-2">Monitor all system activities and changes</p>
        </div>

        <AuditLogsTable
          logs={logs}
          loading={loading}
          pagination={pagination}
          filterOptions={filterOptions}
          onPageChange={handlePageChange}
          onFilterChange={handleFilterChange}
          onViewLog={handleViewLog}
        />

        <AuditLogModal
          log={selectedLog}
          isOpen={isModalOpen}
          onClose={() => {
            setIsModalOpen(false);
            setSelectedLog(null);
          }}
        />
      </div>
    </div>
  );
}