import { useAuth } from "@/_core/hooks/useAuth";
import DashboardLayout from "@/components/DashboardLayout";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { trpc } from "@/lib/trpc";
import { Calendar, MapPin, Users } from "lucide-react";
import { Link } from "wouter";

export default function FormateurHistorique() {
  const { user } = useAuth();
  const formateurId = 1; // TODO: Récupérer depuis la base de données

  const { data: historique, isLoading } = trpc.formateur.historique.useQuery({
    formateurId,
    limit: 50,
  });

  const formatDate = (date: Date) => {
    return new Date(date).toLocaleDateString("fr-FR", {
      day: "numeric",
      month: "long",
      year: "numeric",
    });
  };

  const calculerTauxPresence = (nbPresents: number, nbInscrits: number) => {
    if (nbInscrits === 0) return 0;
    return Math.round((nbPresents / nbInscrits) * 100);
  };

  return (
    <DashboardLayout>
      <div className="space-y-6">
        <div>
          <h1 className="page-title">Historique de mes formations</h1>
          <p className="text-muted-foreground">
            Toutes vos formations passées
          </p>
        </div>

        {isLoading ? (
          <div className="flex items-center justify-center py-12">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
          </div>
        ) : !historique || historique.length === 0 ? (
          <Card>
            <CardContent className="py-12">
              <div className="text-center text-muted-foreground">
                <Calendar className="mx-auto h-12 w-12 mb-4 opacity-50" />
                <p>Aucune formation dans l'historique</p>
              </div>
            </CardContent>
          </Card>
        ) : (
          <Card>
            <CardHeader>
              <CardTitle>Formations passées</CardTitle>
              <CardDescription>
                {historique.length} formation(s) dans l'historique
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Formation</TableHead>
                    <TableHead>Séquence</TableHead>
                    <TableHead>Période</TableHead>
                    <TableHead>Lieu</TableHead>
                    <TableHead className="text-center">Inscrits</TableHead>
                    <TableHead className="text-center">Présents</TableHead>
                    <TableHead className="text-center">Taux</TableHead>
                    <TableHead></TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {historique.map((formation) => {
                    const tauxPresence = calculerTauxPresence(formation.nbPresents, formation.nbInscrits);
                    return (
                      <TableRow key={formation.sequenceId}>
                        <TableCell className="font-medium">{formation.formationNom}</TableCell>
                        <TableCell>{formation.sequenceNom}</TableCell>
                        <TableCell>
                          <div className="flex items-center gap-1 text-sm">
                            <Calendar className="h-3 w-3 text-muted-foreground" />
                            <span>
                              {formatDate(formation.dateDebut)}
                              {formation.dateFin && formation.dateDebut !== formation.dateFin && (
                                <> - {formatDate(formation.dateFin)}</>
                              )}
                            </span>
                          </div>
                        </TableCell>
                        <TableCell>
                          {formation.lieu && (
                            <div className="flex items-center gap-1 text-sm">
                              <MapPin className="h-3 w-3 text-muted-foreground" />
                              <span>{formation.lieu}</span>
                            </div>
                          )}
                        </TableCell>
                        <TableCell className="text-center">
                          <div className="flex items-center justify-center gap-1">
                            <Users className="h-3 w-3 text-muted-foreground" />
                            <span>{formation.nbInscrits}</span>
                          </div>
                        </TableCell>
                        <TableCell className="text-center">{formation.nbPresents}</TableCell>
                        <TableCell className="text-center">
                          <span
                            className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
                              tauxPresence >= 80
                                ? "bg-green-100 text-green-800"
                                : tauxPresence >= 60
                                ? "bg-yellow-100 text-yellow-800"
                                : "bg-red-100 text-red-800"
                            }`}
                          >
                            {tauxPresence}%
                          </span>
                        </TableCell>
                        <TableCell>
                          <Link href={`/formateur/sequence/${formation.sequenceId}`}>
                            <Button variant="outline" size="sm">
                              Détails
                            </Button>
                          </Link>
                        </TableCell>
                      </TableRow>
                    );
                  })}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        )}
      </div>
    </DashboardLayout>
  );
}
