import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { AlertCircle } from 'lucide-react';

interface PolicyViolationModalProps {
  open: boolean;
  onClose: () => void;
  violations: Array<{
    type: string;
    message: string;
    currentValue?: number;
    maxValue?: number;
  }>;
  policyDetails?: {
    maxApprovalLevels?: number;
    maxParticipants?: number;
    allowSpectators?: boolean;
    maxSpectators?: number;
  };
}

export function PolicyViolationModal({
  open,
  onClose,
  violations,
  policyDetails
}: PolicyViolationModalProps) {
  return (
    <Dialog open={open} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-lg">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <AlertCircle className="w-5 h-5 text-red-600" />
            Policy Violation
          </DialogTitle>
          <DialogDescription asChild>
            <div className="space-y-3">
              <p className="text-gray-700">
                The following policy violations were detected:
              </p>
              <div className="space-y-2 max-h-60 overflow-y-auto">
                {violations.map((violation, index) => (
                  <div key={index} className="bg-red-50 border border-red-200 rounded-lg p-3">
                    <p className="font-medium text-red-900 text-sm">{violation.type}</p>
                    <p className="text-xs text-red-700 mt-1">{violation.message}</p>
                    {violation.currentValue !== undefined && violation.maxValue !== undefined && (
                      <p className="text-xs text-red-600 mt-1 font-semibold">
                        Current: {violation.currentValue} / Maximum: {violation.maxValue}
                      </p>
                    )}
                  </div>
                ))}
              </div>
              {policyDetails && (
                <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
                  <p className="text-sm text-blue-800 font-semibold mb-1">System Policy:</p>
                  <ul className="text-xs text-blue-700 space-y-1 list-disc list-inside">
                    {policyDetails.maxApprovalLevels !== undefined && (
                      <li>Maximum approval levels: {policyDetails.maxApprovalLevels}</li>
                    )}
                    {policyDetails.maxParticipants !== undefined && (
                      <li>Maximum participants per request: {policyDetails.maxParticipants}</li>
                    )}
                    {policyDetails.allowSpectators !== undefined && (
                      <li>Allow adding spectators: {policyDetails.allowSpectators ? 'Yes' : 'No'}</li>
                    )}
                    {policyDetails.maxSpectators !== undefined && (
                      <li>Maximum spectators per request: {policyDetails.maxSpectators}</li>
                    )}
                  </ul>
                </div>
              )}
            </div>
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <Button
            onClick={onClose}
            className="w-full sm:w-auto"
          >
            OK
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

