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, PenTool } from "lucide-react";
import { useEffect, useState } from "react";
import { useParams } from "wouter";
import { toast } from "sonner";
import SignaturePadComponent from "@/components/SignaturePad";

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 [selectedPeriode, setSelectedPeriode] = useState<"matin" | "apres_midi">("matin");
  const [success, setSuccess] = useState(false);
  const [heureEnregistrement, setHeureEnregistrement] = useState<Date | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [showSignaturePad, setShowSignaturePad] = useState(false);
  const [signatureDataUrl, setSignatureDataUrl] = 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: () => {
      const now = new Date();
      setHeureEnregistrement(now);
      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 handleSaveSignature = (dataUrl: string) => {
    setSignatureDataUrl(dataUrl);
    setShowSignaturePad(false);
    // Valider automatiquement après la signature
    handleValiderWithSignature(dataUrl);
  };

  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;
    }

    // Afficher le pad de signature au lieu de valider directement
    setShowSignaturePad(true);
  };

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

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

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

  if (success) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-green-50 via-emerald-50 to-green-100 p-4">
        <Card className="max-w-md w-full shadow-2xl border-2 border-green-200 animate-in fade-in zoom-in duration-500">
          <CardHeader className="text-center">
            <div className="mx-auto mb-4 w-20 h-20 bg-gradient-to-br from-green-500 to-emerald-600 rounded-full flex items-center justify-center shadow-lg animate-in zoom-in duration-700 delay-150">
              <CheckCircle2 className="h-12 w-12 text-white animate-in zoom-in duration-500 delay-300" />
            </div>
            <CardTitle className="text-3xl font-bold text-green-700 animate-in slide-in-from-bottom duration-500 delay-200">
              Présence validée !
            </CardTitle>
            <CardDescription className="text-base mt-2 animate-in slide-in-from-bottom duration-500 delay-300">
              Votre présence a été enregistrée avec succès
            </CardDescription>
          </CardHeader>
          <CardContent className="text-center space-y-4 animate-in slide-in-from-bottom duration-500 delay-400">
            {heureEnregistrement && (
              <div className="p-4 bg-green-50 border-2 border-green-200 rounded-lg">
                <p className="text-sm font-medium text-green-800 mb-1">
                  🕒 Heure d'enregistrement
                </p>
                <p className="text-2xl font-bold text-green-700">
                  {heureEnregistrement.toLocaleTimeString("fr-FR", {
                    hour: "2-digit",
                    minute: "2-digit",
                    second: "2-digit",
                  })}
                </p>
                <p className="text-xs text-green-600 mt-1">
                  {heureEnregistrement.toLocaleDateString("fr-FR", {
                    weekday: "long",
                    year: "numeric",
                    month: "long",
                    day: "numeric",
                  })}
                </p>
              </div>
            )}
            <p className="text-sm text-muted-foreground">
              Merci d'avoir confirmé votre présence. Vous pouvez maintenant fermer cette page.
            </p>
            <Button
              variant="outline"
              className="w-full"
              onClick={() => {
                setSuccess(false);
                setHeureEnregistrement(null);
                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>

                      <div>
                        <Label>Période de la journée</Label>
                        <Select
                          value={selectedPeriode}
                          onValueChange={(value) => setSelectedPeriode(value as "matin" | "apres_midi")}
                        >
                          <SelectTrigger>
                            <SelectValue />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="matin">🌅 Matin</SelectItem>
                            <SelectItem value="apres_midi">🌆 Après-midi</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                    </>
                  )}

                  <Button
                    onClick={handleValider}
                    disabled={!selectedInscriptionId || !selectedDateId || validating}
                    className="w-full h-14 text-lg bg-gradient-to-r from-blue-600 to-indigo-700 hover:from-blue-700 hover:to-indigo-800"
                  >
                    {validating ? (
                      <>
                        <Loader2 className="mr-2 h-5 w-5 animate-spin" />
                        Validation en cours...
                      </>
                    ) : (
                      <>
                        <PenTool className="mr-2 h-5 w-5" />
                        Signer et 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>

      {showSignaturePad && (
        <SignaturePadComponent
          onSave={handleSaveSignature}
          onCancel={() => setShowSignaturePad(false)}
        />
      )}
    </div>
  );
}