"use client";

import { useState, useEffect } from "react";
import { useParams } from "next/navigation";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { 
  PlusCircle, 
  Users, 
  Wand2, 
  ArrowLeft,
  Loader2
} from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { toast } from "sonner";

// Mock project data
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",
    groups: [
      {
        id: 1,
        name: "Groupe A",
        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: 2,
        name: "Groupe B",
        persons: [
          { 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: 3,
        name: "Groupe C",
        persons: [
          { 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: 4,
        name: "Groupe D",
        persons: [
          { 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"] },
        ]
      }
    ],
    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"] },
    ]
  };
};

export default function ProjectGroupsPage() {
  const params = useParams();
  const projectId = params.id as string;
  const [project, setProject] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [activeTab, setActiveTab] = useState("existing");

  useEffect(() => {
    // Simulate API call to fetch project data
    const fetchProject = async () => {
      setLoading(true);
      try {
        // In a real app, this would be an API call
        await new Promise(resolve => setTimeout(resolve, 1000));
        const data = getProjectData(projectId);
        setProject(data);
      } catch (error) {
        console.error("Error fetching project:", error);
        toast.error("Erreur lors du chargement du projet");
      } finally {
        setLoading(false);
      }
    };

    fetchProject();
  }, [projectId]);

  const handleCreateGroups = async () => {
    toast.success("Redirection vers la page de création de groupes");
    // In a real app, this would redirect to the group creation page
  };

  const handleAutoCreateGroups = async () => {
    toast.success("Redirection vers l'assistant de création automatique de groupes");
    // In a real app, this would redirect to the automatic group creation page
  };

  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 gap-2">
        <Button variant="outline" size="icon" asChild>
          <Link href={`/projects/${projectId}`}>
            <ArrowLeft className="h-4 w-4" />
          </Link>
        </Button>
        <h1 className="text-3xl font-bold">{project.name} - Groupes</h1>
      </div>

      <Tabs defaultValue="existing" className="space-y-4" onValueChange={setActiveTab}>
        <TabsList>
          <TabsTrigger value="existing">Groupes existants</TabsTrigger>
          <TabsTrigger value="create">Créer des groupes</TabsTrigger>
        </TabsList>
        
        <TabsContent value="existing" className="space-y-4">
          {project.groups.length === 0 ? (
            <Card>
              <CardHeader>
                <CardTitle>Aucun groupe</CardTitle>
                <CardDescription>
                  Ce projet ne contient pas encore de groupes. Créez-en un maintenant.
                </CardDescription>
              </CardHeader>
              <CardContent className="flex justify-center py-6">
                <Button onClick={handleCreateGroups}>
                  <PlusCircle className="mr-2 h-4 w-4" />
                  Créer un groupe
                </Button>
              </CardContent>
            </Card>
          ) : (
            <div className="grid gap-4 md:grid-cols-2">
              {project.groups.map((group: any) => (
                <Card key={group.id}>
                  <CardHeader>
                    <CardTitle>{group.name}</CardTitle>
                    <CardDescription>
                      {group.persons.length} personnes
                    </CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-2">
                      {group.persons.map((person: any) => (
                        <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: string, index: number) => (
                                <Badge key={index} variant="outline" className="text-xs">
                                  {tag}
                                </Badge>
                              ))}
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          )}
        </TabsContent>
        
        <TabsContent value="create" className="space-y-4">
          <div className="grid gap-4 md:grid-cols-2">
            <Card>
              <CardHeader>
                <CardTitle>Création manuelle</CardTitle>
                <CardDescription>
                  Créez des groupes manuellement en glissant-déposant les personnes
                </CardDescription>
              </CardHeader>
              <CardContent className="flex flex-col items-center justify-center py-6">
                <Users className="h-12 w-12 text-muted-foreground mb-4" />
                <p className="text-center text-muted-foreground mb-4">
                  Utilisez l'interface de glisser-déposer pour créer vos groupes selon vos critères
                </p>
                <Button onClick={handleCreateGroups}>
                  <PlusCircle className="mr-2 h-4 w-4" />
                  Créer manuellement
                </Button>
              </CardContent>
            </Card>
            
            <Card>
              <CardHeader>
                <CardTitle>Création automatique</CardTitle>
                <CardDescription>
                  Laissez l'assistant créer des groupes équilibrés automatiquement
                </CardDescription>
              </CardHeader>
              <CardContent className="flex flex-col items-center justify-center py-6">
                <Wand2 className="h-12 w-12 text-muted-foreground mb-4" />
                <p className="text-center text-muted-foreground mb-4">
                  L'assistant prendra en compte les tags et niveaux pour créer des groupes équilibrés
                </p>
                <Button onClick={handleAutoCreateGroups}>
                  <Wand2 className="mr-2 h-4 w-4" />
                  Utiliser l'assistant
                </Button>
              </CardContent>
            </Card>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  );
}