import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { trpc } from "@/lib/trpc";
import { toast } from "sonner";

interface AddInscritFormProps {
  sequenceId: number;
  onSuccess: () => void;
  onCancel: () => void;
}

export function AddInscritForm({ sequenceId, onSuccess, onCancel }: AddInscritFormProps) {
  const [selectedApprenantId, setSelectedApprenantId] = useState<string>("");
  const [statut, setStatut] = useState<"confirme" | "liste_attente">("confirme");

  // Récupérer tous les apprenants
  const { data: apprenants, isLoading: loadingApprenants } = trpc.apprenants.list.useQuery();

  // Récupérer les inscrits actuels pour filtrer
  const { data: inscriptions } = trpc.inscriptions.listBySequence.useQuery({ sequenceId });

  // Mutation pour créer l'inscription
  const createInscription = trpc.inscriptions.create.useMutation({
    onSuccess: () => {
      onSuccess();
    },
    onError: (error) => {
      toast.error(`Erreur : ${error.message}`);
    },
  });

  // Filtrer les apprenants déjà inscrits
  const apprenantsDisponibles = apprenants?.filter(
    (apprenant) => !inscriptions?.some((inscription) => inscription.apprenantId === apprenant.id)
  ) || [];

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    
    if (!selectedApprenantId) {
      toast.error("Veuillez sélectionner un apprenant");
      return;
    }

    createInscription.mutate({
      sequenceId,
      apprenantId: parseInt(selectedApprenantId),
      statut,
    });
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      <div className="space-y-2">
        <Label htmlFor="apprenant">Apprenant *</Label>
        {loadingApprenants ? (
          <div className="text-sm text-muted-foreground">Chargement...</div>
        ) : apprenantsDisponibles.length === 0 ? (
          <div className="text-sm text-muted-foreground">
            Tous les apprenants sont déjà inscrits à cette séquence
          </div>
        ) : (
          <Select value={selectedApprenantId} onValueChange={setSelectedApprenantId}>
            <SelectTrigger id="apprenant">
              <SelectValue placeholder="Sélectionnez un apprenant" />
            </SelectTrigger>
            <SelectContent>
              {apprenantsDisponibles.map((apprenant) => (
                <SelectItem key={apprenant.id} value={apprenant.id.toString()}>
                  {apprenant.prenom} {apprenant.nom} ({apprenant.email})
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        )}
      </div>

      <div className="space-y-2">
        <Label htmlFor="statut">Statut *</Label>
        <Select value={statut} onValueChange={(value) => setStatut(value as "confirme" | "liste_attente")}>
          <SelectTrigger id="statut">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="confirme">Confirmé</SelectItem>
            <SelectItem value="liste_attente">Liste d'attente</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <div className="flex justify-end gap-2">
        <Button type="button" variant="outline" onClick={onCancel}>
          Annuler
        </Button>
        <Button 
          type="submit" 
          disabled={!selectedApprenantId || createInscription.isPending || apprenantsDisponibles.length === 0}
        >
          {createInscription.isPending ? "Inscription..." : "Inscrire"}
        </Button>
      </div>
    </form>
  );
}
