formation-manager-itinova/client/src/pages/FormateurEmargement.tsx

import { useAuth } from "@/_core/hooks/useAuth";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { trpc } from "@/lib/trpc";
import { CheckCircle2, Circle, Loader2, QrCode, RefreshCw } from "lucide-react";
import { useState } from "react";
import { toast } from "sonner";
import { Badge } from "@/components/ui/badge";
import DashboardLayout from "@/components/DashboardLayout";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";

export default function FormateurEmargement() {
  const { user } = useAuth();
  const [selectedSequenceId, setSelectedSequenceId] = useState<number | null>(null);
  const [showQRDialog, setShowQRDialog] = useState(false);

  // Récupérer toutes les séquences (filtrées côté serveur pour les formateurs)
  const { data: sequences, isLoading: loadingSequences } = trpc.sequences.list.useQuery();

  // Générer le QR code
  const { data: qrData, mutate: generateQR, isPending: generatingQR } = trpc.presences.generateQRCode.useMutation({
    onSuccess: () => {
      setShowQRDialog(true);
    },
    onError: (error) => {
      toast.error("Erreur lors de la génération du QR code", {
        description: error.message,
      });
    },
  });

  // Récupérer les inscrits avec les dates de formation
  const { data: inscrits, isLoading: loadingInscrits, refetch: refetchInscrits } = trpc.inscriptions.listWithDates.useQuery(
    { sequenceId: selectedSequenceId || 0 },
    { enabled: !!selectedSequenceId }
  );

  // Récupérer les présences de la séquence
  const { data: presences, refetch: refetchPresences } = trpc.presences.listBySequence.useQuery(
    { sequenceId: selectedSequenceId || 0 },
    { enabled: !!selectedSequenceId }
  );

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

  const handleGenerateQR = () => {
    if (!selectedSequenceId) {
      toast.error("Veuillez sélectionner une séquence");
      return;
    }
    generateQR({ sequenceId: selectedSequenceId });
  };

  const handleValiderPresence = (inscriptionId: number, dateFormationId: number) => {
    validerPresence({
      inscriptionId,
      dateFormationId,
      modeValidation: "manuel",
      validateurId: user?.id,
    });
  };

  // Vérifier si un apprenant a validé sa présence pour une date
  const isPresent = (inscriptionId: number, dateFormationId: number) => {
    return presences?.some(
      (p) => p.inscriptionId === inscriptionId && p.dateFormationId === dateFormationId
    );
  };

  if (loadingSequences) {
    return (
      <div className="flex items-center justify-center min-h-[400px]">
        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
      </div>
    );
  }

  if (!sequences || sequences.length === 0) {
    return (
      <div className="container py-8">
        <Card>
          <CardHeader>
            <CardTitle>Aucune séquence</CardTitle>
            <CardDescription>
              Vous n'avez aucune séquence de formation assignée pour le moment.
            </CardDescription>
          </CardHeader>
        </Card>
      </div>
    );
  }

  return (
    <DashboardLayout>
      <div className="container py-8 space-y-6">
      <div>
        <h1 className="text-3xl font-bold">Émargement numérique</h1>
        <p className="text-muted-foreground mt-2">
          Gérez les présences de vos apprenants avec le QR code
        </p>
      </div>

      {/* Sélection de la séquence */}
      <Card>
        <CardHeader>
          <CardTitle>Sélectionner une séquence</CardTitle>
          <CardDescription>
            Choisissez la séquence pour laquelle vous souhaitez gérer les présences
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <Select
            value={selectedSequenceId?.toString() || ""}
            onValueChange={(value) => setSelectedSequenceId(parseInt(value))}
          >
            <SelectTrigger>
              <SelectValue placeholder="Choisir une séquence..." />
            </SelectTrigger>
            <SelectContent>
              {sequences.map((seq: any) => (
                <SelectItem key={seq.id} value={seq.id.toString()}>
                  {seq.nom} - {seq.lieu}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>

          {selectedSequenceId && (
            <div className="flex gap-2">
              <Button onClick={handleGenerateQR} disabled={generatingQR}>
                {generatingQR ? (
                  <>
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                    Génération...
                  </>
                ) : (
                  <>
                    <QrCode className="mr-2 h-4 w-4" />
                    Afficher le QR code
                  </>
                )}
              </Button>
              <Button
                variant="outline"
                onClick={() => {
                  refetchInscrits();
                  refetchPresences();
                }}
              >
                <RefreshCw className="mr-2 h-4 w-4" />
                Actualiser
              </Button>
            </div>
          )}
        </CardContent>
      </Card>

      {/* Liste des inscrits */}
      {selectedSequenceId && (
        <Card>
          <CardHeader>
            <CardTitle>Liste des inscrits</CardTitle>
            <CardDescription>
              Validez manuellement les présences si nécessaire
            </CardDescription>
          </CardHeader>
          <CardContent>
            {loadingInscrits ? (
              <div className="flex items-center justify-center py-8">
                <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
              </div>
            ) : !inscrits || inscrits.length === 0 ? (
              <p className="text-center text-muted-foreground py-8">
                Aucun inscrit pour cette séquence
              </p>
            ) : (
              <div className="space-y-4">
                {inscrits.map((inscrit: any) => (
                  <div
                    key={inscrit.inscription.id}
                    className="border rounded-lg p-4 space-y-3"
                  >
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="font-medium">
                          {inscrit.apprenant?.prenom} {inscrit.apprenant?.nom}
                        </p>
                        <p className="text-sm text-muted-foreground">
                          {inscrit.apprenant?.email}
                        </p>
                      </div>
                      <Badge variant={inscrit.inscription.statut === "confirmee" ? "default" : "secondary"}>
                        {inscrit.inscription.statut}
                      </Badge>
                    </div>

                    {/* Dates de formation */}
                    <div className="space-y-2">
                      {inscrit.dates && Array.isArray(inscrit.dates) && inscrit.dates.length > 0 ? inscrit.dates.map((date: any) => {
                        if (!date || !date.id) return null;
                        const present = isPresent(inscrit.inscription.id, date.id);
                        return (
                          <div
                            key={date.id}
                            className="flex items-center justify-between bg-muted/50 p-3 rounded"
                          >
                            <div className="flex items-center gap-3">
                              {present ? (
                                <CheckCircle2 className="h-5 w-5 text-green-600" />
                              ) : (
                                <Circle className="h-5 w-5 text-muted-foreground" />
                              )}
                              <div>
                                <p className="text-sm font-medium">
                                  Date {date.ordre}
                                </p>
                                <p className="text-xs text-muted-foreground">
                                  {new Date(date.dateDebut).toLocaleDateString("fr-FR", {
                                    weekday: "long",
                                    year: "numeric",
                                    month: "long",
                                    day: "numeric",
                                  })}
                                </p>
                              </div>
                            </div>
                            {!present && (
                              <Button
                                size="sm"
                                variant="outline"
                                onClick={() => handleValiderPresence(inscrit.inscription.id, date.id)}
                                disabled={validating}
                              >
                                {validating ? (
                                  <Loader2 className="h-4 w-4 animate-spin" />
                                ) : (
                                  "Valider"
                                )}
                              </Button>
                            )}
                          </div>
                        );
                      }) : (
                        <p className="text-sm text-muted-foreground py-2">
                          Aucune date de formation disponible
                        </p>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            )}
          </CardContent>
        </Card>
      )}

      {/* Dialog QR Code */}
      <Dialog open={showQRDialog} onOpenChange={setShowQRDialog}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle>QR Code d'émargement</DialogTitle>
            <DialogDescription>
              Les apprenants doivent scanner ce QR code pour valider leur présence
            </DialogDescription>
          </DialogHeader>
          {qrData && (
            <div className="flex flex-col items-center gap-4 py-4">
              <img
                src={qrData.qrCodeDataURL}
                alt="QR Code"
                className="w-full max-w-[300px] border rounded-lg"
              />
              <p className="text-sm text-muted-foreground text-center">
                Affichez ce QR code en plein écran pour faciliter le scan
              </p>
            </div>
          )}
        </DialogContent>
      </Dialog>
      </div>
    </DashboardLayout>
  );
}