/**
 * Validation error modal component
 */

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

interface ValidationErrorModalProps {
  modal: ValidationModalState;
  onClose: () => void;
}

export function ValidationErrorModal({
  modal,
  onClose,
}: ValidationErrorModalProps) {
  return (
    <Dialog
      open={modal.open}
      onOpenChange={(open) => !open && onClose()}
      data-testid="create-request-validation-modal"
    >
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle
            className="flex items-center gap-2"
            data-testid="validation-modal-title"
          >
            {modal.type === 'self-assign' && (
              <>
                <AlertCircle className="w-5 h-5 text-amber-600" />
                Cannot Add Yourself
              </>
            )}
            {modal.type === 'not-found' && (
              <>
                <AlertCircle className="w-5 h-5 text-red-600" />
                User Not Found
              </>
            )}
            {modal.type === 'error' && (
              <>
                <AlertCircle className="w-5 h-5 text-red-600" />
                Validation Error
              </>
            )}
          </DialogTitle>
          <DialogDescription asChild>
            <div className="space-y-3">
              {modal.type === 'self-assign' && (
                <>
                  <p className="text-gray-700">
                    You cannot add yourself (<strong>{modal.email}</strong>) as
                    an approver.
                  </p>
                  <div className="bg-amber-50 border border-amber-200 rounded-lg p-3">
                    <p className="text-sm text-amber-800">
                      <strong>Why?</strong> The initiator creates the request and
                      cannot approve their own request. Please select a different
                      user.
                    </p>
                  </div>
                </>
              )}

              {modal.type === 'not-found' && (
                <>
                  <p className="text-gray-700">
                    User <strong>{modal.email}</strong> was not found in the
                    organization directory.
                  </p>
                  <div className="bg-red-50 border border-red-200 rounded-lg p-3 space-y-2">
                    <p className="text-sm text-red-800 font-semibold">
                      Please verify:
                    </p>
                    <ul className="text-sm text-red-700 space-y-1 list-disc list-inside">
                      <li>Email address is spelled correctly</li>
                      <li>User exists in Okta/SSO system</li>
                      <li>User has an active account</li>
                    </ul>
                  </div>
                  <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
                    <p className="text-sm text-blue-800 flex items-center gap-1">
                      <Lightbulb className="w-4 h-4" />
                      <strong>Tip:</strong> Use{' '}
                      <span className="font-mono bg-blue-100 px-1 rounded">
                        @
                      </span>{' '}
                      sign to search and select users from the directory for
                      guaranteed results.
                    </p>
                  </div>
                </>
              )}

              {modal.type === 'error' && (
                <>
                  <p className="text-gray-700">
                    {modal.email && (
                      <>
                        Failed to validate <strong>{modal.email}</strong>.
                      </>
                    )}
                    {!modal.email && <>An error occurred during validation.</>}
                  </p>
                  {modal.message && (
                    <div className="bg-gray-50 border border-gray-200 rounded-lg p-3">
                      <p className="text-sm text-gray-700">{modal.message}</p>
                    </div>
                  )}
                </>
              )}
            </div>
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <Button
            onClick={onClose}
            className="w-full sm:w-auto"
            data-testid="validation-modal-ok-button"
          >
            {modal.type === 'not-found' ? 'Fix Email' : 'OK'}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

