import DashboardLayout from "@/components/DashboardLayout";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { trpc } from "@/lib/trpc";
import { GraduationCap, Calendar, Users, CheckCircle, PieChart as PieChartIcon, Building2 } from "lucide-react";
import { Skeleton } from "@/components/ui/skeleton";
import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from "recharts";
import { useMemo } from "react";

export default function Admin() {
  const { data: formations, isLoading: loadingFormations } = trpc.formations.list.useQuery();
  const { data: sequences, isLoading: loadingSessions } = trpc.sequences.list.useQuery();
  const { data: apprenants, isLoading: loadingApprenants } = trpc.apprenants.list.useQuery();

  // Statistiques par fonction
  const statsFonction = useMemo(() => {
    if (!apprenants) return [];
    
    const directeurs = apprenants.filter(a => a.fonction === "directeur").length;
    const chefsService = apprenants.filter(a => a.fonction === "chef_service").length;
    const autres = apprenants.filter(a => a.fonction === "autre").length;

    return [
      { name: "Directeurs", value: directeurs, color: "#3b82f6" },
      { name: "Chefs de service", value: chefsService, color: "#10b981" },
      { name: "Autres", value: autres, color: "#f59e0b" },
    ].filter(item => item.value > 0);
  }, [apprenants]);

  // Statistiques par établissement
  const statsEtablissement = useMemo(() => {
    if (!apprenants) return [];
    
    const etablissementCounts: Record<string, number> = {};
    apprenants.forEach(a => {
      const code = a.codeEtablissement || "Non renseigné";
      etablissementCounts[code] = (etablissementCounts[code] || 0) + 1;
    });

    const colors = ["#3b82f6", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6", "#ec4899", "#06b6d4", "#84cc16", "#f97316", "#6366f1"];
    
    return Object.entries(etablissementCounts)
      .map(([name, value], index) => ({
        name,
        value,
        color: colors[index % colors.length],
      }))
      .sort((a, b) => b.value - a.value)
      .slice(0, 10); // Top 10 établissements
  }, [apprenants]);

  const stats = [
    {
      title: "Formations actives",
      value: formations?.filter(f => f.actif).length || 0,
      icon: <GraduationCap className="w-8 h-8 text-blue-500" />,
      loading: loadingFormations,
    },
    {
      title: "Séquences ouvertes",
      value: sequences?.filter(s => s.statut === "ouverte").length || 0,
      icon: <Calendar className="w-8 h-8 text-green-500" />,
      loading: loadingSessions,
    },
    {
      title: "Apprenants inscrits",
      value: apprenants?.length || 0,
      icon: <Users className="w-8 h-8 text-purple-500" />,
      loading: loadingApprenants,
    },
    {
      title: "Séquences terminées",
      value: sequences?.filter(s => s.statut === "terminee").length || 0,
      icon: <CheckCircle className="w-8 h-8 text-orange-500" />,
      loading: loadingSessions,
    },
  ];

  return (
    <DashboardLayout>
      <div className="space-y-6">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Tableau de bord</h1>
          <p className="text-muted-foreground mt-2">
            Gestion des formations Manager Itinova
          </p>
        </div>

        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          {stats.map((stat, index) => (
            <Card key={index}>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">
                  {stat.title}
                </CardTitle>
                {stat.icon}
              </CardHeader>
              <CardContent>
                {stat.loading ? (
                  <Skeleton className="h-8 w-16" />
                ) : (
                  <div className="text-2xl font-bold">{stat.value}</div>
                )}
              </CardContent>
            </Card>
          ))}
        </div>

        {/* Graphiques de répartition */}
        <div className="grid gap-4 md:grid-cols-2">
          {/* Graphique de répartition par fonction */}
          {statsFonction.length > 0 && (
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <PieChartIcon className="w-5 h-5" />
                  Répartition des apprenants par fonction
                </CardTitle>
                <CardDescription>
                  Distribution des {apprenants?.length || 0} apprenants selon leur fonction
                </CardDescription>
              </CardHeader>
              <CardContent>
                {loadingApprenants ? (
                  <div className="h-80 flex items-center justify-center">
                    <Skeleton className="h-64 w-64 rounded-full" />
                  </div>
                ) : (
                  <div className="h-80">
                    <ResponsiveContainer width="100%" height="100%">
                      <PieChart>
                        <Pie
                          data={statsFonction}
                          cx="50%"
                          cy="50%"
                          labelLine={false}
                          label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
                          outerRadius={100}
                        fill="#8884d8"
                        dataKey="value"
                      >
                        {statsFonction.map((entry, index) => (
                          <Cell key={`cell-${index}`} fill={entry.color} />
                        ))}
                      </Pie>
                      <Tooltip />
                      <Legend />
                    </PieChart>
                  </ResponsiveContainer>
                </div>
              )}
            </CardContent>
          </Card>
        )}

          {/* Graphique de répartition par établissement */}
          {statsEtablissement.length > 0 && (
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Building2 className="w-5 h-5" />
                  Répartition des apprenants par établissement
                </CardTitle>
                <CardDescription>
                  Top 10 des établissements avec le plus d'apprenants
                </CardDescription>
              </CardHeader>
              <CardContent>
                {loadingApprenants ? (
                  <div className="h-80 flex items-center justify-center">
                    <Skeleton className="h-64 w-64 rounded-full" />
                  </div>
                ) : (
                  <div className="h-80">
                    <ResponsiveContainer width="100%" height="100%">
                      <PieChart>
                        <Pie
                          data={statsEtablissement}
                          cx="50%"
                          cy="50%"
                          labelLine={false}
                          label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
                          outerRadius={100}
                          fill="#8884d8"
                          dataKey="value"
                        >
                          {statsEtablissement.map((entry, index) => (
                            <Cell key={`cell-${index}`} fill={entry.color} />
                          ))}
                        </Pie>
                        <Tooltip />
                        <Legend />
                      </PieChart>
                    </ResponsiveContainer>
                  </div>
                )}
              </CardContent>
            </Card>
          )}
        </div>

        <Card>
          <CardHeader>
            <CardTitle>Bienvenue dans l'espace d'administration</CardTitle>
            <CardDescription>
              Gérez vos formations, sequences et apprenants depuis le menu de navigation.
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <h3 className="font-semibold">Fonctionnalités principales :</h3>
              <ul className="list-disc list-inside space-y-1 text-sm text-muted-foreground">
                <li>Créer et gérer les formations avec liens d'inscription uniques</li>
                <li>Organiser les sequences avec limitation à 12 participants</li>
                <li>Gérer les inscriptions avec blocage automatique à J-15</li>
                <li>Exporter les listes d'inscrits en PDF ou Excel</li>
                <li>Générer des invitations Outlook et envoyer des emails automatiques</li>
              </ul>
            </div>
          </CardContent>
        </Card>
      </div>
    </DashboardLayout>
  );
}
