import { Clock, Loader2, Trash2, UserCheck, UserMinus } from 'lucide-react'
import { Button, Modal } from '../../../components/ui'
import { useGroupDetail } from './GroupDetailProvider'

export function RemoveAttendeeModal() {
  const {
    attendeeToRemove,
    cancelRemoveAttendee,
    confirmRemoveAttendee,
    group,
    firstWaitlistEntry,
    waitlistTotal,
    isSubmittingRemoval,
  } = useGroupDetail()

  return (
    <Modal
      isOpen={attendeeToRemove !== null}
      onClose={cancelRemoveAttendee}
      title="Quitar del grupo"
      maxWidth="md"
    >
      {attendeeToRemove ? (
        <div className="space-y-4">
          <p className="text-sm text-foreground/70">
            {attendeeToRemove.fullName} dejará de ser miembro del grupo{' '}
            <strong className="text-primary">{group?.name}</strong>
            {firstWaitlistEntry ? ' y el cupo quedará libre.' : '.'}
            {attendeeToRemove.phone ? (
              <span className="mt-1 block text-xs text-foreground/50">Teléfono: {attendeeToRemove.phone}</span>
            ) : null}
          </p>

          {firstWaitlistEntry ? (
            <div className="space-y-3 rounded-xl border border-accent/20 bg-accent-soft p-4">
              <div className="flex items-center gap-2 text-xs font-semibold text-primary">
                <Clock className="size-4 text-accent" />
                <span>
                  Hay {waitlistTotal} persona{waitlistTotal === 1 ? '' : 's'} esperando un cupo
                </span>
              </div>
              <p className="text-sm text-foreground/80">
                ¿Quieres pasar a <strong className="text-primary">{firstWaitlistEntry.fullName}</strong>, el
                primero de la lista de espera, al grupo?
              </p>
              <div className="flex flex-col gap-2.5 pt-1">
                <Button
                  variant="primary"
                  onClick={() => confirmRemoveAttendee(true)}
                  disabled={isSubmittingRemoval}
                  className="gap-2"
                >
                  {isSubmittingRemoval ? (
                    <Loader2 className="size-4 animate-spin" />
                  ) : (
                    <UserCheck className="size-4" />
                  )}
                  <span>Quitar y pasar a {firstWaitlistEntry.fullName} al grupo</span>
                </Button>
                <Button
                  variant="outline"
                  onClick={() => confirmRemoveAttendee(false)}
                  disabled={isSubmittingRemoval}
                  className="gap-2"
                >
                  {isSubmittingRemoval ? (
                    <Loader2 className="size-4 animate-spin" />
                  ) : (
                    <UserMinus className="size-4" />
                  )}
                  <span>Solo quitar del grupo</span>
                </Button>
              </div>
            </div>
          ) : (
            <div className="flex items-center justify-end gap-2.5 border-t border-border pt-2">
              <Button variant="ghost" onClick={cancelRemoveAttendee}>
                Cancelar
              </Button>
              <Button
                variant="primary"
                onClick={() => confirmRemoveAttendee(false)}
                disabled={isSubmittingRemoval}
                className="gap-2"
              >
                {isSubmittingRemoval ? (
                  <Loader2 className="size-4 animate-spin" />
                ) : (
                  <Trash2 className="size-4" />
                )}
                <span>Quitar del grupo</span>
              </Button>
            </div>
          )}
        </div>
      ) : null}
    </Modal>
  )
}