import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/dialog';
import { useFhirPractitioners } from '../../hooks/useFhirPractitioners';
import { useAuthServiceContext } from '../../services/AuthService';
import { STAFF_WORKSPACES, getWorkspaceFormValue } from '../../utils/staffRoleCatalog';
import { setOnboardingReturn } from '../../utils/onboardingReturn';
import { formatFhirHumanName } from '../../utils/fhirHumanName';

export type RoleSetupModalProps = {
  open: boolean;
  targetRole: 'receptionist' | 'practitioner';
  onClose: () => void;
};

// Reusable "fill a role" launcher: asks self / existing staff member / new user for a target role,
// resolves a target practitioner id, stashes the onboarding return-context, and navigates to a
// canonical staff page. It never writes FHIR - the destination page owns the actual assignment/create.
const RoleSetupModal = ({ open, targetRole, onClose }: RoleSetupModalProps) => {
  const navigate = useNavigate();
  const { practitionersList } = useFhirPractitioners({ autoLoad: open });
  const { currentUser } = useAuthServiceContext();
  const [selectedExistingId, setSelectedExistingId] = useState<string>('');

  useEffect(() => {
    setSelectedExistingId('');
  }, [open, targetRole]);

  const workspaceCanonical =
    targetRole === 'receptionist' ? STAFF_WORKSPACES.RECEPTIONIST : STAFF_WORKSPACES.PRACTITIONER;
  const workspaceFormKey = getWorkspaceFormValue(workspaceCanonical);

  const myPractitionerId =
    currentUser?.fhir?.resourceType === 'Practitioner' ? currentUser.fhir.id : undefined;

  // Existing staff other than "myself" (self is offered separately).
  const otherStaff = practitionersList.filter(
    (p) => p.practitioner.id && p.practitioner.id !== myPractitionerId,
  );

  const startReturn = () => {
    setOnboardingReturn({ returnTo: '/dashboard/organization', task: targetRole });
  };

  const goAssignExisting = (practitionerId: string) => {
    startReturn();
    onClose();
    navigate(`/dashboard/staff/${practitionerId}/workspaces`, {
      state: { preselectWorkspace: workspaceCanonical },
    });
  };

  const goAddNew = () => {
    startReturn();
    onClose();
    navigate('/dashboard/staff/new', {
      state: {
        presetWorkspaceFormKey: workspaceFormKey,
        presetPrimaryRoleCode: targetRole === 'receptionist' ? 'receptionist' : undefined,
      },
    });
  };

  return (
    <Dialog open={open} onOpenChange={(next) => { if (!next) onClose(); }}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Who will be your {targetRole}?</DialogTitle>
          <DialogDescription className="sr-only">Choose who will hold this role.</DialogDescription>
        </DialogHeader>
        <div className="flex flex-col gap-3 py-2">
          {myPractitionerId && (
            <button type="button" className="btn btn-blue" onClick={() => goAssignExisting(myPractitionerId)}>
              Myself
            </button>
          )}
          {otherStaff.length > 0 && (
            <div className="flex flex-col gap-2">
              <label className="text-sm font-medium">An existing team member</label>
              <select
                className="rounded-md border px-2 py-2 text-sm"
                value={selectedExistingId}
                onChange={(e) => setSelectedExistingId(e.target.value)}
              >
                <option value="">Select a team member…</option>
                {otherStaff.map((p) => (
                  <option key={p.practitioner.id} value={p.practitioner.id as string}>
                    {formatFhirHumanName(p.practitioner.name) || p.practitioner.id}
                  </option>
                ))}
              </select>
              <button
                type="button"
                className="btn btn-blue"
                disabled={!selectedExistingId}
                onClick={() => goAssignExisting(selectedExistingId)}
              >
                Continue
              </button>
            </div>
          )}
          <button type="button" className="btn btn-blue" onClick={goAddNew}>
            Add a new user
          </button>
        </div>
      </DialogContent>
    </Dialog>
  );
};

export default RoleSetupModal;