import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { trpc } from "@/lib/trpc";
import { CheckCircle2, Loader2, XCircle } from "lucide-react";
import { useEffect, useState } from "react";
import { useParams } from "wouter";
import { toast } from "sonner";

export default function EmargementScan() {
  const { token } = useParams<{ token: string }>();
  const [email, setEmail] = useState("");
  const [selectedInscriptionId, setSelectedInscriptionId] = useState<number | null>(null);
  const [selectedDateId, setSelectedDateId] = useState<number | null>(null);
  const [success, setSuccess] = useState(false);
  const [error, setError] = useState<string | null>(null);

  // Récupérer l'apprenant par email
  const { data: apprenant, refetch: refetchApprenant } = trpc.apprenants.getByEmail.useQuery(
    { email },
    { enabled: false }
  );

  // Récupérer les inscriptions de l'apprenant avec les dates
  const { data: inscriptions } = trpc.inscriptions.listByApprenantWithDates.useQuery(
    { apprenantId: apprenant?.id || 0 },
    { enabled: !!apprenant }
  );

  // Récupérer les dates de formation pour l'inscription sélectionnée
  const selectedInscription = inscriptions?.find((i) => i.inscription.id === selectedInscriptionId);

  // Valider la présence
  const { mutate: validerPresence, isPending: validating } = trpc.presences.valider.useMutation({
    onSuccess: () => {
      setSuccess(true);
      toast.success("Présence validée avec succès !");
    },
    onError: (error) => {
      setError(error.message);
      toast.error("Erreur lors de la validation", {
        description: error.message,
      });
    },
  });

  const handleSearchEmail = async () => {
    if (!email) {
      toast.error("Veuillez saisir votre email");
      return;
    }
    refetchApprenant();
  };

  const handleValider = () => {
    if (!selectedInscriptionId || !selectedDateId) {
      toast.error("Veuillez sélectionner une date de formation");
      return;
    }

    validerPresence({
      token,
      inscriptionId: selectedInscriptionId,
      dateFormationId: selectedDateId,
      modeValidation: "qrcode",
    });
  };

  // Déterminer les dates disponibles
  const datesDisponibles = selectedInscription?.sequence?.dates || [];

  if (success) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-green-50 to-green-100 p-4">
        <Card className="max-w-md w-full">
          <CardHeader className="text-center">
            <div className="mx-auto mb-4 w-16 h-16 bg-green-500 rounded-full flex items-center justify-center">
              <CheckCircle2 className="h-10 w-10 text-white" />
            </div>
            <CardTitle className="text-2xl text-green-700">Présence validée !</CardTitle>
            <CardDescription>
              Votre présence a été enregistrée avec succès
            </CardDescription>
          </CardHeader>
          <CardContent className="text-center">
            <p className="text-sm text-muted-foreground mb-4">
              Merci d'avoir confirmé votre présence. Vous pouvez maintenant fermer cette page.
            </p>
            <Button
              variant="outline"
              onClick={() => {
                setSuccess(false);
                setEmail("");
                setSelectedInscriptionId(null);
                setSelectedDateId(null);
                setError(null);
              }}
            >
              Valider une autre présence
            </Button>
          </CardContent>
        </Card>
      </div>
    );
  }

  if (error) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-red-50 to-red-100 p-4">
        <Card className="max-w-md w-full">
          <CardHeader className="text-center">
            <div className="mx-auto mb-4 w-16 h-16 bg-red-500 rounded-full flex items-center justify-center">
              <XCircle className="h-10 w-10 text-white" />
            </div>
            <CardTitle className="text-2xl text-red-700">Erreur</CardTitle>
            <CardDescription>{error}</CardDescription>
          </CardHeader>
          <CardContent className="text-center">
            <Button
              onClick={() => {
                setError(null);
                setEmail("");
                setSelectedInscriptionId(null);
                setSelectedDateId(null);
              }}
            >
              Réessayer
            </Button>
          </CardContent>
        </Card>
      </div>
    );
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 p-4">
      <Card className="max-w-md w-full">
        <CardHeader>
          <CardTitle className="text-2xl">Émargement numérique</CardTitle>
          <CardDescription>
            Validez votre présence en renseignant vos informations
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          {/* Étape 1: Recherche par email */}
          {!apprenant && (
            <div className="space-y-3">
              <div>
                <Label htmlFor="email">Votre email</Label>
                <Input
                  id="email"
                  type="email"
                  placeholder="prenom.nom@exemple.fr"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  onKeyDown={(e) => {
                    if (e.key === "Enter") {
                      handleSearchEmail();
                    }
                  }}
                />
              </div>
              <Button onClick={handleSearchEmail} className="w-full">
                Continuer
              </Button>
            </div>
          )}

          {/* Étape 2: Sélection de l'inscription et de la date */}
          {apprenant && !success && (
            <div className="space-y-4">
              <div className="p-3 bg-muted rounded-lg">
                <p className="text-sm font-medium">
                  {apprenant.prenom} {apprenant.nom}
                </p>
                <p className="text-xs text-muted-foreground">{apprenant.email}</p>
              </div>

              {inscriptions && inscriptions.length > 0 ? (
                <>
                  <div>
                    <Label>Sélectionnez votre formation</Label>
                    <Select
                      value={selectedInscriptionId?.toString() || ""}
                      onValueChange={(value) => {
                        setSelectedInscriptionId(parseInt(value));
                        setSelectedDateId(null);
                      }}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="Choisir une formation..." />
                      </SelectTrigger>
                      <SelectContent>
                        {inscriptions.map((inscr) => (
                          <SelectItem key={inscr.inscription.id} value={inscr.inscription.id.toString()}>
                            {inscr.sequence?.nom || "Formation"}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>

                  {selectedInscriptionId && datesDisponibles.length > 0 && (
                    <div>
                      <Label>Sélectionnez la date</Label>
                      <Select
                        value={selectedDateId?.toString() || ""}
                        onValueChange={(value) => setSelectedDateId(parseInt(value))}
                      >
                        <SelectTrigger>
                          <SelectValue placeholder="Choisir une date..." />
                        </SelectTrigger>
                        <SelectContent>
                          {datesDisponibles.map((date: any) => (
                            <SelectItem key={date.id} value={date.id.toString()}>
                              {new Date(date.dateDebut).toLocaleDateString("fr-FR", {
                                weekday: "long",
                                year: "numeric",
                                month: "long",
                                day: "numeric",
                              })}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                  )}

                  <Button
                    onClick={handleValider}
                    disabled={!selectedInscriptionId || !selectedDateId || validating}
                    className="w-full"
                  >
                    {validating ? (
                      <>
                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                        Validation en cours...
                      </>
                    ) : (
                      "Valider ma présence"
                    )}
                  </Button>
                </>
              ) : (
                <div className="text-center py-4">
                  <p className="text-sm text-muted-foreground">
                    Aucune inscription trouvée pour cet email
                  </p>
                  <Button
                    variant="outline"
                    onClick={() => {
                      setEmail("");
                      setSelectedInscriptionId(null);
                    }}
                    className="mt-4"
                  >
                    Essayer un autre email
                  </Button>
                </div>
              )}
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  );
}
