import { Component, ReactNode } from 'react';
import { useAdminGuard } from '@/hooks/useAdminGuard';
import { AdminLayout } from '@/components/layout/AdminLayout';
import { logger } from '@/lib/logger';
import { SystemActivityLog } from '@/components/admin/SystemActivityLog';
import { Skeleton } from '@/components/ui/skeleton';
import { Card, CardContent } from '@/components/ui/card';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { AlertCircle } from 'lucide-react';
import { useDocumentTitle } from '@/hooks/useDocumentTitle';

interface ErrorBoundaryProps {
  children: ReactNode;
}

interface ErrorBoundaryState {
  hasError: boolean;
  error: Error | null;
}

class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
  constructor(props: ErrorBoundaryProps) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error: Error) {
    return { hasError: true, error };
  }

  componentDidCatch(error: Error, errorInfo: any) {
    logger.error('System Activity Log Error', { error, errorInfo });
  }

  render() {
    if (this.state.hasError) {
      return (
        <Alert variant="destructive">
          <AlertCircle className="h-4 w-4" />
          <AlertTitle>Error loading system activity log</AlertTitle>
          <AlertDescription>
            {this.state.error?.message || 'An unexpected error occurred'}
          </AlertDescription>
        </Alert>
      );
    }

    return this.props.children;
  }
}

export default function AdminSystemLog() {
  useDocumentTitle('System Activity Log - Admin');
  const { isLoading, isAuthorized } = useAdminGuard(false); // No MFA required for viewing logs

  if (isLoading) {
    return (
      <AdminLayout>
        <div className="space-y-6">
          <div>
            <h1 className="text-2xl font-bold tracking-tight">System Activity Log</h1>
            <p className="text-muted-foreground mt-1">
              Complete audit trail of all system changes and administrative actions
            </p>
          </div>

          <Card>
            <CardContent className="p-6 space-y-3">
              {[1, 2, 3, 4, 5].map((i) => (
                <div key={i} className="flex items-start gap-4 p-3 border-l-2 border-l-muted">
                  <div className="flex-1 space-y-2">
                    <Skeleton className="h-4 w-2/3" />
                    <Skeleton className="h-3 w-1/2" />
                  </div>
                  <Skeleton className="h-3 w-24" />
                </div>
              ))}
            </CardContent>
          </Card>
        </div>
      </AdminLayout>
    );
  }

  if (!isAuthorized) {
    return null;
  }

  return (
    <AdminLayout>
      <div className="space-y-6">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">System Activity Log</h1>
          <p className="text-muted-foreground mt-1">
            Complete audit trail of all system changes and administrative actions
          </p>
        </div>

        <ErrorBoundary>
          <SystemActivityLog limit={100} showFilters={true} />
        </ErrorBoundary>
      </div>
    </AdminLayout>
  );
}