/**
 * Document error modal component
 */

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { AlertCircle } from 'lucide-react';
import { DocumentErrorModalState } from '../../types/createRequest.types';
import { DocumentPolicy } from '@/hooks/useCreateRequestForm';

interface DocumentErrorModalProps {
  modal: DocumentErrorModalState;
  documentPolicy: DocumentPolicy;
  onClose: () => void;
}

export function DocumentErrorModal({
  modal,
  documentPolicy,
  onClose,
}: DocumentErrorModalProps) {
  return (
    <Dialog
      open={modal.open}
      onOpenChange={(open) => !open && onClose()}
      data-testid="create-request-document-error-modal"
    >
      <DialogContent className="sm:max-w-lg">
        <DialogHeader>
          <DialogTitle
            className="flex items-center gap-2"
            data-testid="document-error-modal-title"
          >
            <AlertCircle className="w-5 h-5 text-red-600" />
            Document Upload Policy Violation
          </DialogTitle>
          <DialogDescription asChild>
            <div className="space-y-3">
              <p className="text-gray-700">
                The following file(s) could not be uploaded due to policy
                violations:
              </p>
              <div className="space-y-2 max-h-60 overflow-y-auto">
                {modal.errors.map((error, index) => (
                  <div
                    key={index}
                    className="bg-red-50 border border-red-200 rounded-lg p-3"
                    data-testid={`document-error-${index}`}
                  >
                    <p className="font-medium text-red-900 text-sm">
                      {error.fileName}
                    </p>
                    <p className="text-xs text-red-700 mt-1">{error.reason}</p>
                  </div>
                ))}
              </div>
              <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
                <p className="text-sm text-blue-800 font-semibold mb-1">
                  Document Policy:
                </p>
                <ul className="text-xs text-blue-700 space-y-1 list-disc list-inside">
                  <li>Maximum file size: {documentPolicy.maxFileSizeMB}MB</li>
                  <li>
                    Allowed file types:{' '}
                    {documentPolicy.allowedFileTypes.join(', ')}
                  </li>
                </ul>
              </div>
            </div>
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <Button
            onClick={onClose}
            className="w-full sm:w-auto"
            data-testid="document-error-modal-ok-button"
          >
            OK
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

