brief-20/frontend/app/projects/[id]/groups/auto-create/page.tsx

"use client";

import { useState, useEffect } from "react";
import { useParams, useRouter } from "next/navigation";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Slider } from "@/components/ui/slider";
import { Switch } from "@/components/ui/switch";
import { 
  ArrowLeft,
  Loader2,
  Wand2,
  Save,
  RefreshCw,
  Users
} from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { toast } from "sonner";
import { useSocket } from "@/lib/socket-context";

// Mock project data (same as in the groups page)
const getProjectData = (id: string) => {
  return {
    id: parseInt(id),
    name: "Projet Formation Dev Web",
    description: "Création de groupes pour la formation développement web",
    date: "2025-05-15",
    persons: [
      { id: 1, name: "Jean Dupont", tags: ["Frontend", "React", "Junior"] },
      { id: 2, name: "Marie Martin", tags: ["Backend", "Node.js", "Senior"] },
      { id: 3, name: "Pierre Durand", tags: ["Fullstack", "JavaScript", "Medior"] },
      { id: 4, name: "Sophie Lefebvre", tags: ["UX/UI", "Design", "Senior"] },
      { id: 5, name: "Thomas Bernard", tags: ["Backend", "Java", "Senior"] },
      { id: 6, name: "Julie Petit", tags: ["Frontend", "Vue", "Junior"] },
      { id: 7, name: "Nicolas Moreau", tags: ["DevOps", "Docker", "Medior"] },
      { id: 8, name: "Emma Dubois", tags: ["Frontend", "Angular", "Junior"] },
      { id: 9, name: "Lucas Leroy", tags: ["Backend", "Python", "Medior"] },
      { id: 10, name: "Camille Roux", tags: ["Fullstack", "TypeScript", "Senior"] },
      { id: 11, name: "Hugo Fournier", tags: ["Frontend", "React", "Medior"] },
      { id: 12, name: "Léa Girard", tags: ["UX/UI", "Figma", "Junior"] },
      { id: 13, name: "Mathis Bonnet", tags: ["Backend", "PHP", "Junior"] },
      { id: 14, name: "Chloé Lambert", tags: ["Frontend", "CSS", "Senior"] },
      { id: 15, name: "Nathan Mercier", tags: ["DevOps", "Kubernetes", "Senior"] },
      { id: 16, name: "Zoé Faure", tags: ["Fullstack", "MERN", "Medior"] },
    ]
  };
};

// Type definitions
interface Person {
  id: number;
  name: string;
  tags: string[];
}

interface ProjectWithPersons {
  id: number;
  name: string;
  description: string;
  date: string;
  persons: Person[];
}

interface Group {
  id: number;
  name: string;
  persons: Person[];
}

export default function AutoCreateGroupsPage() {
  const params = useParams();
  const router = useRouter();
  const projectId = params.id as string;

  const [project, setProject] = useState<ProjectWithPersons | null>(null);
  const [loading, setLoading] = useState(true);
  const [generating, setGenerating] = useState(false);
  const [saving, setSaving] = useState(false);

  // Socket connection for real-time updates
  const { isConnected, joinProject, leaveProject, onGroupCreated } = useSocket();

  // State for auto-generation parameters
  const [numberOfGroups, setNumberOfGroups] = useState(4);
  const [balanceTags, setBalanceTags] = useState(true);
  const [balanceLevels, setBalanceLevels] = useState(true);
  const [groups, setGroups] = useState<Group[]>([]);
  const [availableTags, setAvailableTags] = useState<string[]>([]);
  const [availableLevels, setAvailableLevels] = useState<string[]>([]);

  // Join project room for real-time updates when connected
  useEffect(() => {
    if (!isConnected) return;

    // Join the project room to receive updates
    joinProject(projectId);

    // Clean up when component unmounts
    return () => {
      leaveProject(projectId);
    };
  }, [isConnected, joinProject, leaveProject, projectId]);

  // Listen for group created events
  useEffect(() => {
    if (!isConnected || groups.length === 0) return;

    const unsubscribe = onGroupCreated((data) => {
      console.log("Group created:", data);

      if (data.action === "created" && data.group) {
        toast.info(`Nouveau groupe créé par un collaborateur: ${data.group.name}`);
      }
    });

    return () => {
      unsubscribe();
    };
  }, [isConnected, onGroupCreated, groups]);

  useEffect(() => {
    // Fetch project data from API
    const fetchProject = async () => {
      setLoading(true);
      try {
        // Use the API service to get project data
        const { projectsAPI, personsAPI } = await import('@/lib/api');
        const projectData = await projectsAPI.getProject(projectId);
        const personsData = await personsAPI.getPersons(projectId);

        // Combine project data with persons data
        const data: ProjectWithPersons = {
          ...projectData,
          persons: personsData || []
        };

        setProject(data);

        // Extract unique tags and levels
        const tags = new Set<string>();
        const levels = new Set<string>();

        data.persons.forEach(person => {
          person.tags.forEach(tag => {
            // Assuming the last tag is the level (Junior, Medior, Senior)
            if (["Junior", "Medior", "Senior"].includes(tag)) {
              levels.add(tag);
            } else {
              tags.add(tag);
            }
          });
        });

        setAvailableTags(Array.from(tags));
        setAvailableLevels(Array.from(levels));

      } catch (error) {
        console.error("Error fetching project:", error);
        toast.error("Erreur lors du chargement du projet");

        // Fallback to mock data for development
        try {
          const data = getProjectData(projectId);
          setProject(data);

          // Extract unique tags and levels from mock data
          const tags = new Set<string>();
          const levels = new Set<string>();

          data.persons.forEach(person => {
            person.tags.forEach(tag => {
              if (["Junior", "Medior", "Senior"].includes(tag)) {
                levels.add(tag);
              } else {
                tags.add(tag);
              }
            });
          });

          setAvailableTags(Array.from(tags));
          setAvailableLevels(Array.from(levels));
        } catch (fallbackError) {
          console.error("Error with fallback data:", fallbackError);
        }
      } finally {
        setLoading(false);
      }
    };

    fetchProject();
  }, [projectId]);

  const generateGroups = async () => {
    if (!project) return;

    setGenerating(true);
    try {
      // Notify users that groups are being generated
      if (isConnected) {
        toast.info("Génération de groupes en cours...", {
          description: "Les autres utilisateurs seront notifiés lorsque les groupes seront générés."
        });
      }
      // Use the API service to generate groups
      const { groupsAPI } = await import('@/lib/api');

      // Prepare the request data
      const requestData = {
        projectId: projectId,
        numberOfGroups: numberOfGroups,
        balanceTags: balanceTags,
        balanceLevels: balanceLevels
      };

      try {
        // Call the API to generate groups
        const generatedGroups = await groupsAPI.createGroup(projectId, requestData);
        setGroups(generatedGroups);
        toast.success("Groupes générés avec succès");
      } catch (apiError) {
        console.error("API error generating groups:", apiError);
        toast.error("Erreur lors de la génération des groupes via l'API");

        // Fallback to local algorithm for development
        console.log("Falling back to local algorithm");

        // Simple algorithm to create balanced groups
        const persons = [...project.persons];
        const newGroups: Group[] = [];

        // Create empty groups
        for (let i = 0; i < numberOfGroups; i++) {
          newGroups.push({
            id: i + 1,
            name: `Groupe ${String.fromCharCode(65 + i)}`, // A, B, C, ...
            persons: []
          });
        }

        // Sort persons by level if balancing levels
        if (balanceLevels) {
          persons.sort((a, b) => {
            const aLevel = a.tags.find((tag: string) => ["Junior", "Medior", "Senior"].includes(tag)) || "";
            const bLevel = b.tags.find((tag: string) => ["Junior", "Medior", "Senior"].includes(tag)) || "";

            // Order: Senior, Medior, Junior
            const levelOrder: Record<string, number> = { "Senior": 0, "Medior": 1, "Junior": 2 };
            return levelOrder[aLevel] - levelOrder[bLevel];
          });
        }

        // Sort persons by tags if balancing tags
        if (balanceTags) {
          // Group persons by their primary skill tag
          const personsByTag: Record<string, Person[]> = {};

          persons.forEach(person => {
            // Get first tag that's not a level
            const primaryTag = person.tags.find((tag: string) => !["Junior", "Medior", "Senior"].includes(tag));
            if (primaryTag) {
              if (!personsByTag[primaryTag]) {
                personsByTag[primaryTag] = [];
              }
              personsByTag[primaryTag].push(person);
            }
          });

          // Distribute persons from each tag group evenly
          let currentGroupIndex = 0;

          Object.values(personsByTag).forEach(tagPersons => {
            tagPersons.forEach(person => {
              newGroups[currentGroupIndex].persons.push(person);
              currentGroupIndex = (currentGroupIndex + 1) % numberOfGroups;
            });
          });
        } else {
          // Simple distribution without balancing tags
          persons.forEach((person, index) => {
            const groupIndex = index % numberOfGroups;
            newGroups[groupIndex].persons.push(person);
          });
        }

        setGroups(newGroups);
        toast.success("Groupes générés localement avec succès");
      }
    } catch (error) {
      console.error("Error generating groups:", error);
      toast.error("Erreur lors de la génération des groupes");
    } finally {
      setGenerating(false);
    }
  };

  const handleSaveGroups = async () => {
    if (groups.length === 0) {
      toast.error("Veuillez d'abord générer des groupes");
      return;
    }

    setSaving(true);
    try {
      // Use the API service to save the groups
      const { groupsAPI } = await import('@/lib/api');

      // Save each group to the backend
      const savePromises = groups.map(group => {
        // Prepare the group data for saving
        const groupData = {
          name: group.name,
          projectId: projectId,
          persons: group.persons.map(person => person.id)
        };

        // If the group already has an ID from the API, update it, otherwise create a new one
        if (group.id && typeof group.id === 'string') {
          return groupsAPI.updateGroup(group.id, groupData);
        } else {
          return groupsAPI.createGroup(projectId, groupData);
        }
      });

      try {
        // Wait for all groups to be saved
        await Promise.all(savePromises);
        toast.success("Groupes enregistrés avec succès");

        // Navigate back to the groups page
        router.push(`/projects/${projectId}/groups`);
      } catch (apiError) {
        console.error("API error saving groups:", apiError);
        toast.error("Erreur lors de l'enregistrement des groupes via l'API");

        // Simulate successful save for development
        console.log("Simulating successful save for development");
        toast.success("Groupes enregistrés localement avec succès (mode développement)");

        // Navigate back to the groups page
        router.push(`/projects/${projectId}/groups`);
      }
    } catch (error) {
      console.error("Error saving groups:", error);
      toast.error("Erreur lors de l'enregistrement des groupes");
    } finally {
      setSaving(false);
    }
  };

  if (loading) {
    return (
      <div className="flex h-[50vh] items-center justify-center">
        <Loader2 className="h-8 w-8 animate-spin text-primary" />
      </div>
    );
  }

  if (!project) {
    return (
      <div className="flex h-[50vh] flex-col items-center justify-center">
        <p className="text-lg font-medium">Projet non trouvé</p>
        <Button asChild className="mt-4">
          <Link href="/projects">Retour aux projets</Link>
        </Button>
      </div>
    );
  }

  return (
    <div className="flex flex-col gap-6">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Button variant="outline" size="icon" asChild>
            <Link href={`/projects/${projectId}/groups`}>
              <ArrowLeft className="h-4 w-4" />
            </Link>
          </Button>
          <h1 className="text-3xl font-bold">Assistant de création de groupes</h1>
          {isConnected && (
            <div className="flex items-center gap-2 ml-4 text-sm text-muted-foreground">
              <div className="h-2 w-2 rounded-full bg-green-500"></div>
              <span>Collaboration en temps réel active</span>
            </div>
          )}
        </div>
        <Button onClick={handleSaveGroups} disabled={saving || groups.length === 0}>
          {saving ? (
            <>
              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
              Enregistrement...
            </>
          ) : (
            <>
              <Save className="mr-2 h-4 w-4" />
              Enregistrer les groupes
            </>
          )}
        </Button>
      </div>

      <div className="grid gap-6 md:grid-cols-[1fr_2fr]">
        {/* Parameters */}
        <Card>
          <CardHeader>
            <CardTitle>Paramètres</CardTitle>
            <CardDescription>
              Configurez les paramètres pour la génération automatique de groupes
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="space-y-2">
              <Label htmlFor="number-of-groups">Nombre de groupes: {numberOfGroups}</Label>
              <Slider
                id="number-of-groups"
                min={2}
                max={Math.min(8, Math.floor(project.persons.length / 2))}
                step={1}
                value={[numberOfGroups]}
                onValueChange={(value) => setNumberOfGroups(value[0])}
              />
              <p className="text-xs text-muted-foreground">
                {Math.ceil(project.persons.length / numberOfGroups)} personnes par groupe en moyenne
              </p>
            </div>

            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <div className="space-y-0.5">
                  <Label htmlFor="balance-tags">Équilibrer les compétences</Label>
                  <p className="text-xs text-muted-foreground">
                    Répartir équitablement les compétences dans chaque groupe
                  </p>
                </div>
                <Switch
                  id="balance-tags"
                  checked={balanceTags}
                  onCheckedChange={setBalanceTags}
                />
              </div>

              <div className="flex items-center justify-between">
                <div className="space-y-0.5">
                  <Label htmlFor="balance-levels">Équilibrer les niveaux</Label>
                  <p className="text-xs text-muted-foreground">
                    Répartir équitablement les niveaux (Junior, Medior, Senior) dans chaque groupe
                  </p>
                </div>
                <Switch
                  id="balance-levels"
                  checked={balanceLevels}
                  onCheckedChange={setBalanceLevels}
                />
              </div>
            </div>

            <div className="space-y-2">
              <Label>Compétences disponibles</Label>
              <div className="flex flex-wrap gap-1">
                {availableTags.map((tag, index) => (
                  <Badge key={index} variant="outline">
                    {tag}
                  </Badge>
                ))}
              </div>
            </div>

            <div className="space-y-2">
              <Label>Niveaux disponibles</Label>
              <div className="flex flex-wrap gap-1">
                {availableLevels.map((level, index) => (
                  <Badge key={index} variant="outline">
                    {level}
                  </Badge>
                ))}
              </div>
            </div>
          </CardContent>
          <CardFooter>
            <Button 
              onClick={generateGroups} 
              disabled={generating} 
              className="w-full"
            >
              {generating ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Génération en cours...
                </>
              ) : (
                <>
                  <Wand2 className="mr-2 h-4 w-4" />
                  Générer les groupes
                </>
              )}
            </Button>
          </CardFooter>
        </Card>

        {/* Generated Groups */}
        <div className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Groupes générés</CardTitle>
              <CardDescription>
                {groups.length > 0 
                  ? `${groups.length} groupes avec ${project.persons.length} personnes au total` 
                  : "Utilisez les paramètres à gauche pour générer des groupes"}
              </CardDescription>
            </CardHeader>
            <CardContent>
              {groups.length === 0 ? (
                <div className="flex flex-col items-center justify-center py-8">
                  <Wand2 className="h-12 w-12 text-muted-foreground mb-4" />
                  <p className="text-center text-muted-foreground">
                    Aucun groupe généré. Cliquez sur "Générer les groupes" pour commencer.
                  </p>
                  {isConnected && (
                    <div className="mt-4 flex items-center gap-2 text-sm text-muted-foreground">
                      <div className="h-2 w-2 rounded-full bg-green-500"></div>
                      <span>Collaboration en temps réel active</span>
                    </div>
                  )}
                </div>
              ) : (
                <div className="space-y-4">
                  {groups.map((group) => (
                    <Card key={group.id}>
                      <CardHeader className="pb-2">
                        <CardTitle>{group.name}</CardTitle>
                        <CardDescription>
                          {group.persons.length} personnes
                        </CardDescription>
                      </CardHeader>
                      <CardContent>
                        <div className="space-y-2">
                          {group.persons.map((person) => (
                            <div key={person.id} className="flex items-center justify-between border-b pb-2 last:border-0 last:pb-0">
                              <div>
                                <p className="font-medium">{person.name}</p>
                                <div className="flex flex-wrap gap-1 mt-1">
                                  {person.tags.map((tag, index) => (
                                    <Badge key={index} variant="outline" className="text-xs">
                                      {tag}
                                    </Badge>
                                  ))}
                                </div>
                              </div>
                            </div>
                          ))}
                        </div>
                      </CardContent>
                    </Card>
                  ))}
                </div>
              )}
            </CardContent>
            {groups.length > 0 && (
              <CardFooter>
                <Button 
                  variant="outline" 
                  onClick={generateGroups} 
                  disabled={generating} 
                  className="w-full"
                >
                  <RefreshCw className="mr-2 h-4 w-4" />
                  Régénérer les groupes
                </Button>
              </CardFooter>
            )}
          </Card>
        </div>
      </div>
    </div>
  );
}