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

export default function EmargementFormateurScan() {
  const { token } = useParams<{ token: string }>();
  const [email, setEmail] = useState("");
  const [selectedDateFormationId, setSelectedDateFormationId] = 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 les dates de formation pour cette séquence
  const { data: sequenceData, isLoading: loadingDates } = trpc.sequences.getDatesByFormateurToken.useQuery(
    { token: token || "" },
    { enabled: !!token }
  );

  // Valider la présence formateur
  const { mutate: validerPresence, isPending: validating } = trpc.presences.valider.useMutation({
    onSuccess: (data) => {
      // Vérifier si la validation a réussi
      if (data.success === false) {
        // Cas d'un doublon : afficher le message sans passer par l'erreur
        setError(data.message || "Erreur lors de la validation");
        toast.error(data.message || "Erreur lors de la validation");
        return;
      }
      
      // Succès normal
      const now = new Date();
      setHeureEnregistrement(now);
      setSuccess(true);
      toast.success("Présence formateur 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 handleValider = () => {
    if (!email) {
      toast.error("Veuillez saisir votre email");
      return;
    }

    if (!selectedDateFormationId) {
      toast.error("Veuillez sélectionner une date de formation");
      return;
    }

    // Afficher le pad de signature
    setShowSignaturePad(true);
  };

  const handleValiderWithSignature = (dataUrl: string) => {
    if (!email) {
      toast.error("Veuillez saisir votre email");
      return;
    }

    if (!selectedDateFormationId) {
      toast.error("Veuillez sélectionner une date de formation");
      return;
    }

    validerPresence({
      token: token || "",
      email,
      dateFormationId: selectedDateFormationId,
      periode: selectedPeriode,
      modeValidation: "qrcode",
      signatureDataUrl: dataUrl,
    });
  };

  if (success) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-indigo-50 to-blue-100 p-4">
        <Card className="max-w-md w-full shadow-2xl border-2 border-blue-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-blue-500 to-indigo-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-blue-700 animate-in slide-in-from-bottom duration-500 delay-200">
              Présence formateur validée !
            </CardTitle>
            <CardDescription className="text-base mt-2 animate-in slide-in-from-bottom duration-500 delay-300">
              Votre présence en tant que formateur 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-blue-50 border-2 border-blue-200 rounded-lg">
                <p className="text-sm font-medium text-blue-800 mb-1">
                  🕒 Heure d'enregistrement
                </p>
                <p className="text-2xl font-bold text-blue-700">
                  {heureEnregistrement.toLocaleTimeString("fr-FR", {
                    hour: "2-digit",
                    minute: "2-digit",
                    second: "2-digit",
                  })}
                </p>
                <p className="text-xs text-blue-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);
                setEmail("");
                setSignatureDataUrl(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 via-rose-50 to-red-100 p-4">
        <Card className="max-w-md w-full shadow-2xl border-2 border-red-200">
          <CardHeader className="text-center">
            <div className="mx-auto mb-4 w-20 h-20 bg-gradient-to-br from-red-500 to-rose-600 rounded-full flex items-center justify-center shadow-lg">
              <XCircle className="h-12 w-12 text-white" />
            </div>
            <CardTitle className="text-3xl font-bold text-red-700">
              Erreur
            </CardTitle>
            <CardDescription className="text-base mt-2">
              {error}
            </CardDescription>
          </CardHeader>
          <CardContent className="text-center">
            <Button
              variant="outline"
              className="w-full"
              onClick={() => {
                setError(null);
                setEmail("");
                setSignatureDataUrl(null);
              }}
            >
              Réessayer
            </Button>
          </CardContent>
        </Card>
      </div>
    );
  }

  if (showSignaturePad) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-purple-50 via-violet-50 to-purple-100 p-4">
        <Card className="max-w-2xl w-full shadow-2xl">
          <CardHeader className="text-center">
            <div className="mx-auto mb-4 w-16 h-16 bg-gradient-to-br from-purple-500 to-violet-600 rounded-full flex items-center justify-center shadow-lg">
              <PenTool className="h-8 w-8 text-white" />
            </div>
            <CardTitle className="text-2xl font-bold text-purple-700">
              Signature formateur
            </CardTitle>
            <CardDescription className="text-base mt-2">
              Signez avec votre doigt ou votre souris pour valider votre présence
            </CardDescription>
          </CardHeader>
          <CardContent>
            <SignaturePadComponent
              onSave={handleSaveSignature}
              onCancel={() => setShowSignaturePad(false)}
            />
          </CardContent>
        </Card>
      </div>
    );
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 via-gray-50 to-slate-100 p-4">
      <Card className="max-w-md w-full shadow-2xl">
        <CardHeader className="text-center">
          <CardTitle className="text-2xl font-bold">
            Émargement Formateur
          </CardTitle>
          <CardDescription className="text-base mt-2">
            Validez votre présence en tant que formateur
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="space-y-2">
            <Label htmlFor="email">Email du formateur</Label>
            <Input
              id="email"
              type="email"
              placeholder="formateur@exemple.com"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              disabled={validating || loadingDates}
            />
          </div>

          {loadingDates ? (
            <div className="flex items-center justify-center p-4">
              <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
              <span className="ml-2 text-sm text-muted-foreground">Chargement des dates...</span>
            </div>
          ) : sequenceData && sequenceData.dates.length > 0 ? (
            <div className="space-y-2">
              <Label htmlFor="date">Date de formation</Label>
              <Select
                value={selectedDateFormationId?.toString() || ""}
                onValueChange={(value) => setSelectedDateFormationId(Number(value))}
                disabled={validating}
              >
                <SelectTrigger>
                  <SelectValue placeholder="Sélectionnez une date" />
                </SelectTrigger>
                <SelectContent>
                  {sequenceData.dates.map((date) => (
                    <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 className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
              <p className="text-sm text-yellow-800">
                Aucune date de formation disponible pour cette séquence.
              </p>
            </div>
          )}

          <div className="space-y-2">
            <Label htmlFor="periode">Période</Label>
            <Select
              value={selectedPeriode}
              onValueChange={(value: "matin" | "apres_midi") => setSelectedPeriode(value)}
              disabled={validating || loadingDates}
            >
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="matin">Matin</SelectItem>
                <SelectItem value="apres_midi">Après-midi</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <Button
            className="w-full"
            onClick={handleValider}
            disabled={validating || !email || !selectedDateFormationId || loadingDates}
          >
            {validating ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                Validation en cours...
              </>
            ) : (
              <>
                <PenTool className="mr-2 h-4 w-4" />
                Signer et valider
              </>
            )}
          </Button>
        </CardContent>
      </Card>
    </div>
  );
}
