/**
 * Manager Selection Modal
 * Shows when multiple managers are found or no manager is found
 * Allows user to select a manager from the list
 */

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

interface Manager {
  userId: string;
  email: string;
  displayName: string;
  firstName?: string;
  lastName?: string;
  department?: string;
}

interface ManagerSelectionModalProps {
  open: boolean;
  onClose: () => void;
  onSelect: (managerEmail: string) => void;
  managers?: Manager[];
  errorType: 'NO_MANAGER_FOUND' | 'MULTIPLE_MANAGERS_FOUND';
  message?: string;
  isLoading?: boolean;
}

export function ManagerSelectionModal({
  open,
  onClose,
  onSelect,
  managers = [],
  errorType,
  message,
  isLoading = false,
}: ManagerSelectionModalProps) {
  const handleSelect = (managerEmail: string) => {
    onSelect(managerEmail);
  };

  return (
    <Dialog open={open} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-[600px]">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            {errorType === 'NO_MANAGER_FOUND' ? (
              <>
                <AlertCircle className="w-5 h-5 text-amber-500" />
                Manager Not Found
              </>
            ) : (
              <>
                <CheckCircle2 className="w-5 h-5 text-blue-500" />
                Select Your Manager
              </>
            )}
          </DialogTitle>
          <DialogDescription>
            {errorType === 'NO_MANAGER_FOUND' ? (
              <div className="mt-2">
                <p className="text-sm text-gray-600">
                  {message || 'No reporting manager found in the system. Please ensure your manager is correctly configured in your profile.'}
                </p>
                <p className="text-sm text-gray-500 mt-2">
                  Please contact your administrator to update your manager information, or try again later.
                </p>
              </div>
            ) : (
              <div className="mt-2">
                <p className="text-sm text-gray-600">
                  {message || 'Multiple managers were found with the same name. Please select the correct manager from the list below.'}
                </p>
              </div>
            )}
          </DialogDescription>
        </DialogHeader>

        <div className="mt-4">
          {errorType === 'NO_MANAGER_FOUND' ? (
            <div className="bg-amber-50 border border-amber-200 rounded-lg p-4">
              <div className="flex items-start gap-3">
                <AlertCircle className="w-5 h-5 text-amber-600 flex-shrink-0 mt-0.5" />
                <div className="flex-1">
                  <p className="text-sm font-medium text-amber-900">
                    Unable to Proceed
                  </p>
                  <p className="text-sm text-amber-700 mt-1">
                    We couldn't find your reporting manager in the system. The claim request cannot be created without a valid manager assigned.
                  </p>
                </div>
              </div>
            </div>
          ) : (
            <div className="space-y-3 max-h-[400px] overflow-y-auto">
              {managers.map((manager) => (
                <div
                  key={manager.userId}
                  className="border rounded-lg p-4 hover:bg-gray-50 transition-colors cursor-pointer"
                  onClick={() => !isLoading && handleSelect(manager.email)}
                >
                  <div className="flex items-start justify-between gap-4">
                    <div className="flex items-start gap-3 flex-1">
                      <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
                        <User className="w-5 h-5 text-blue-600" />
                      </div>
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-2 mb-1">
                          <p className="font-medium text-gray-900">
                            {manager.displayName || `${manager.firstName || ''} ${manager.lastName || ''}`.trim() || 'Unknown'}
                          </p>
                        </div>
                        <div className="space-y-1">
                          <div className="flex items-center gap-2 text-sm text-gray-600">
                            <Mail className="w-4 h-4" />
                            <span className="truncate">{manager.email}</span>
                          </div>
                          {manager.department && (
                            <div className="flex items-center gap-2 text-sm text-gray-500">
                              <Building2 className="w-4 h-4" />
                              <span>{manager.department}</span>
                            </div>
                          )}
                        </div>
                      </div>
                    </div>
                    <Button
                      onClick={(e) => {
                        e.stopPropagation();
                        handleSelect(manager.email);
                      }}
                      disabled={isLoading}
                      className="flex-shrink-0"
                      size="sm"
                    >
                      Select
                    </Button>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>

        <div className="flex justify-end gap-3 mt-6">
          {errorType === 'NO_MANAGER_FOUND' ? (
            <Button onClick={onClose} variant="outline">
              Close
            </Button>
          ) : (
            <>
              <Button onClick={onClose} variant="outline" disabled={isLoading}>
                Cancel
              </Button>
            </>
          )}
        </div>
      </DialogContent>
    </Dialog>
  );
}

