import { Shield, Unlock } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { 
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@/components/ui/alert-dialog';

interface SuperuserQueueControlsProps {
  activeLocksCount: number;
  onClearAllLocks: () => Promise<void>;
  isLoading: boolean;
}

export const SuperuserQueueControls = ({
  activeLocksCount,
  onClearAllLocks,
  isLoading
}: SuperuserQueueControlsProps) => {
  if (activeLocksCount === 0) return null;

  return (
    <Alert className="border-purple-500/50 bg-purple-500/5">
      <Shield className="h-4 w-4 text-purple-600" />
      <AlertTitle className="text-purple-900 dark:text-purple-100">
        Superuser Queue Management
      </AlertTitle>
      <AlertDescription className="text-purple-800 dark:text-purple-200">
        <div className="flex items-center justify-between mt-2">
          <span className="text-sm">
            {activeLocksCount} active lock{activeLocksCount !== 1 ? 's' : ''} in queue
          </span>
          
          <AlertDialog>
            <AlertDialogTrigger asChild>
              <Button
                size="sm"
                variant="outline"
                className="border-purple-500 text-purple-700 hover:bg-purple-50 dark:hover:bg-purple-950"
                disabled={isLoading}
              >
                <Unlock className="w-4 h-4 mr-2" />
                Clear All Locks
              </Button>
            </AlertDialogTrigger>
            <AlertDialogContent>
              <AlertDialogHeader>
                <AlertDialogTitle>Clear All Active Locks?</AlertDialogTitle>
                <AlertDialogDescription>
                  This will release {activeLocksCount} active lock{activeLocksCount !== 1 ? 's' : ''}, 
                  making all submissions available for claiming again. 
                  This action will be logged in the audit trail.
                  <br /><br />
                  <strong>Use this for:</strong>
                  <ul className="list-disc list-inside mt-2 space-y-1">
                    <li>Clearing stale locks after system issues</li>
                    <li>Resetting queue after team changes</li>
                    <li>Emergency queue management</li>
                  </ul>
                </AlertDialogDescription>
              </AlertDialogHeader>
              <AlertDialogFooter>
                <AlertDialogCancel>Cancel</AlertDialogCancel>
                <AlertDialogAction
                  onClick={onClearAllLocks}
                  className="bg-purple-600 hover:bg-purple-700"
                >
                  Clear All Locks
                </AlertDialogAction>
              </AlertDialogFooter>
            </AlertDialogContent>
          </AlertDialog>
        </div>
      </AlertDescription>
    </Alert>
  );
};