import { ReactNode } from 'react';
import { SidebarProvider } from '@/components/ui/sidebar';
import { AdminSidebar } from './AdminSidebar';
import { AdminTopBar } from './AdminTopBar';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { AlertTriangle } from 'lucide-react';
import { useSessionMonitor } from '@/hooks/useSessionMonitor';

interface AdminLayoutProps {
  children: ReactNode;
  onRefresh?: () => void;
  refreshMode?: 'auto' | 'manual';
  pollInterval?: number;
  lastUpdated?: Date;
  isRefreshing?: boolean;
}

export function AdminLayout({ 
  children, 
  onRefresh,
  refreshMode,
  pollInterval,
  lastUpdated,
  isRefreshing
}: AdminLayoutProps) {
  const { aalWarning } = useSessionMonitor();

  return (
    <SidebarProvider defaultOpen={true}>
      <div className="flex min-h-screen w-full">
        <AdminSidebar />
        <main className="flex-1 flex flex-col">
          <AdminTopBar 
            onRefresh={onRefresh}
            refreshMode={refreshMode}
            pollInterval={pollInterval}
            lastUpdated={lastUpdated}
            isRefreshing={isRefreshing}
          />
          <div className="flex-1 overflow-y-auto bg-muted/30">
            <div className="container mx-auto px-6 py-8 max-w-7xl">
              {aalWarning && (
                <Alert variant="destructive" className="mb-6">
                  <AlertTriangle className="h-4 w-4" />
                  <AlertTitle>Session Verification Required</AlertTitle>
                  <AlertDescription>
                    Your session requires re-verification. You will be redirected to verify your identity in 30 seconds.
                  </AlertDescription>
                </Alert>
              )}
              {children}
            </div>
          </div>
        </main>
      </div>
    </SidebarProvider>
  );
}