"use client";

import { useState, useEffect } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { GraduationCap, Users, ChevronRight } from "lucide-react";
import Link from "next/link";

// Couleurs prédéfinies pour les référents
const REFERENT_COLORS: Record<string, string> = {
  "Emmanuel WATHELE": "#3B82F6", // Bleu
  "IHECS": "#10B981",            // Vert
};

interface ReferentData {
  nom: string;
  couleur: string;
  cours: string[];
  nombreEtudiants: number;
}

export default function ReferentsPage() {
  const [referents, setReferents] = useState<ReferentData[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchReferents = async () => {
      try {
        // Récupérer tous les users pour compter par référent
        const response = await fetch(
          "/api/collections/users?page=1&limit=1000&filter={}"
        );
        const result = await response.json();

        if (result.data) {
          // Grouper par référent
          const referentsMap = new Map<string, ReferentData>();

          result.data.forEach((user: any) => {
            if (user.referent) {
              if (!referentsMap.has(user.referent)) {
                referentsMap.set(user.referent, {
                  nom: user.referent,
                  couleur: REFERENT_COLORS[user.referent] || "#6B7280", // Gris par défaut
                  cours: [],
                  nombreEtudiants: 0,
                });
              }

              const ref = referentsMap.get(user.referent)!;
              ref.nombreEtudiants++;

              // Ajouter le cours s'il n'existe pas déjà
              if (user.cours && !ref.cours.includes(user.cours)) {
                ref.cours.push(user.cours);
              }
            }
          });

          setReferents(Array.from(referentsMap.values()));
        }
      } catch (error) {
        console.error("Erreur lors du chargement des référents:", error);
      } finally {
        setLoading(false);
      }
    };

    fetchReferents();
  }, []);

  if (loading) {
    return (
      <div className="space-y-6">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Référents</h1>
          <p className="text-muted-foreground">
            Gestion des référents et leurs cours
          </p>
        </div>
        <Card>
          <CardContent className="p-6">
            <div className="space-y-4">
              {Array.from({ length: 3 }).map((_, i) => (
                <div key={i} className="h-24 bg-muted animate-pulse rounded" />
              ))}
            </div>
          </CardContent>
        </Card>
      </div>
    );
  }

  if (referents.length === 0) {
    return (
      <div className="space-y-6">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Référents</h1>
          <p className="text-muted-foreground">
            Gestion des référents et leurs cours
          </p>
        </div>
        <Card>
          <CardContent className="p-6">
            <div className="text-center py-12">
              <GraduationCap className="mx-auto h-12 w-12 text-gray-400" />
              <h3 className="mt-2 text-sm font-semibold text-gray-900">
                Aucun référent
              </h3>
              <p className="mt-1 text-sm text-gray-500">
                Importez des utilisateurs avec référents pour commencer.
              </p>
            </div>
          </CardContent>
        </Card>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold tracking-tight">Référents</h1>
        <p className="text-muted-foreground">
          Gestion des référents et leurs cours
        </p>
      </div>

      <div className="grid gap-4">
        {referents.map((referent) => (
          <Card key={referent.nom} className="hover:shadow-md transition-shadow">
            <CardHeader>
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-3">
                  {/* Point coloré */}
                  <div
                    className="w-4 h-4 rounded-full flex-shrink-0"
                    style={{ backgroundColor: referent.couleur }}
                  />
                  <div>
                    <CardTitle className="text-xl">{referent.nom}</CardTitle>
                    <div className="flex items-center gap-2 mt-1">
                      <Users className="h-4 w-4 text-gray-500" />
                      <span className="text-sm text-gray-500">
                        {referent.nombreEtudiants} étudiant
                        {referent.nombreEtudiants > 1 ? "s" : ""}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                <h4 className="text-sm font-semibold text-gray-700">Cours :</h4>
                <div className="space-y-2">
                  {referent.cours.map((cours) => (
                    <Link
                      key={cours}
                      href={`/referents/${encodeURIComponent(referent.nom)}/${encodeURIComponent(cours)}`}
                    >
                      <div className="flex items-center justify-between p-3 bg-gray-50 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer">
                        <div className="flex items-center gap-2">
                          <div
                            className="w-2 h-2 rounded-full"
                            style={{ backgroundColor: referent.couleur }}
                          />
                          <span className="text-sm font-medium">{cours}</span>
                        </div>
                        <ChevronRight className="h-4 w-4 text-gray-400" />
                      </div>
                    </Link>
                  ))}
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}