"use client";

import { useState, useEffect } from "react";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Plus, MoreHorizontal, Trash, Edit, Users } from "lucide-react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Label } from "@/components/ui/label";
import { toast } from "@/components/ui/use-toast";

interface Group {
  id: string;
  name: string;
  path: string;
  membersCount: number;
}

interface User {
  id: string;
  username: string;
  email: string;
  lastName: string;
  firstName: string;
}

interface ApiError {
  message: string;
}

interface GroupsTableProps {
  userRole?: string[];
}

export function GroupsTable({ userRole = [] }: GroupsTableProps) {
  const [groups, setGroups] = useState<Group[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState("");
  const [newGroupDialog, setNewGroupDialog] = useState(false);
  const [newGroupName, setNewGroupName] = useState("");
  const [modifyGroupDialog, setModifyGroupDialog] = useState(false);
  const [selectedGroup, setSelectedGroup] = useState<Group | null>(null);
  const [modifiedGroupName, setModifiedGroupName] = useState("");
  const [manageMembersDialog, setManageMembersDialog] = useState(false);
  const [groupMembers, setGroupMembers] = useState<User[]>([]);
  const [availableUsers, setAvailableUsers] = useState<User[]>([]);

  useEffect(() => {
    fetchGroups();
  }, []);

  const fetchGroups = async () => {
    try {
      setLoading(true);
      const response = await fetch("/api/groups");
      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.message || "Erreur lors de la récupération des groupes");
      }

      const groupsWithCounts = await Promise.all(
        (Array.isArray(data) ? data : []).map(async (group) => {
          try {
            const membersResponse = await fetch(`/api/groups/${group.id}/members`);
            if (membersResponse.ok) {
              const members = await membersResponse.json();
              return {
                ...group,
                membersCount: Array.isArray(members) ? members.length : 0
              };
            }
            return group;
          } catch (error) {
            console.error(`Error fetching members for group ${group.id}:`, error);
            return group;
          }
        })
      );

      setGroups(groupsWithCounts);
    } catch (error) {
      toast({
        title: "Erreur",
        description: error instanceof Error ? error.message : "Une erreur est survenue",
        variant: "destructive",
      });
    } finally {
      setLoading(false);
    }
  };

  const handleCreateGroup = async () => {
    try {
      if (!newGroupName.trim()) {
        throw new Error("Le nom du groupe est requis");
      }

      const response = await fetch("/api/groups", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ name: newGroupName }),
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.message || "Erreur lors de la création du groupe");
      }

      setGroups(prev => [...prev, data]);
      setNewGroupDialog(false);
      setNewGroupName("");
      toast({
        title: "Succès",
        description: "Le groupe a été créé avec succès",
      });
    } catch (error) {
      toast({
        title: "Erreur",
        description: error instanceof Error ? error.message : "Une erreur est survenue",
        variant: "destructive",
      });
    }
  };

  const handleDeleteGroup = async (groupId: string) => {
    try {
      const response = await fetch(`/api/groups/${groupId}`, {
        method: "DELETE",
      });

      if (!response.ok) {
        throw new Error("Erreur lors de la suppression du groupe");
      }

      setGroups(prev => prev.filter(group => group.id !== groupId));
      toast({
        title: "Succès",
        description: "Le groupe a été supprimé avec succès",
      });
    } catch (error) {
      toast({
        title: "Erreur",
        description: error instanceof Error ? error.message : "Une erreur est survenue",
        variant: "destructive",
      });
    }
  };

  const handleModifyGroup = async (groupId: string) => {
    try {
      const group = groups.find(g => g.id === groupId);
      if (!group) return;

      setSelectedGroup(group);
      setModifiedGroupName(group.name);
      setModifyGroupDialog(true);
    } catch (error) {
      toast({
        title: "Erreur",
        description: error instanceof Error ? error.message : "Une erreur est survenue",
        variant: "destructive",
      });
    }
  };

  const handleUpdateGroup = async () => {
    try {
      if (!selectedGroup || !modifiedGroupName.trim()) {
        throw new Error("Le nom du groupe est requis");
      }

      const response = await fetch(`/api/groups/${selectedGroup.id}`, {
        method: "PUT",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ name: modifiedGroupName }),
      });

      if (!response.ok) {
        throw new Error("Erreur lors de la modification du groupe");
      }

      setGroups(prev => prev.map(group => 
        group.id === selectedGroup.id 
          ? { ...group, name: modifiedGroupName }
          : group
      ));
      
      setModifyGroupDialog(false);
      setSelectedGroup(null);
      setModifiedGroupName("");
      
      toast({
        title: "Succès",
        description: "Le groupe a été modifié avec succès",
      });
    } catch (error) {
      toast({
        title: "Erreur",
        description: error instanceof Error ? error.message : "Une erreur est survenue",
        variant: "destructive",
      });
    }
  };

  const handleManageMembers = async (groupId: string) => {
    const group = groups.find(g => g.id === groupId);
    if (!group) return;

    setSelectedGroup(group);
    
    try {
      const membersResponse = await fetch(`/api/groups/${groupId}/members`);
      if (!membersResponse.ok) throw new Error("Failed to fetch group members");
      const members = await membersResponse.json();
      setGroupMembers(members);

      setGroups(prev => prev.map(g => 
        g.id === groupId 
          ? { ...g, membersCount: members.length }
          : g
      ));

      const usersResponse = await fetch("/api/users");
      if (!usersResponse.ok) throw new Error("Failed to fetch users");
      const users = await usersResponse.json();
      setAvailableUsers(users.filter((user: User) => !members.some((m: User) => m.id === user.id)));

      setManageMembersDialog(true);
    } catch (error) {
      toast({
        title: "Erreur",
        description: "Erreur lors de la récupération des membres",
        variant: "destructive",
      });
    }
  };

  const handleAddMember = async (userId: string) => {
    if (!selectedGroup) return;

    try {
      const response = await fetch(`/api/groups/${selectedGroup.id}/members`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ userId }),
      });

      if (!response.ok) {
        throw new Error("Failed to add member");
      }

      const updatedMember = availableUsers.find(u => u.id === userId);
      if (updatedMember) {
        setGroupMembers(prev => [...prev, updatedMember]);
        setAvailableUsers(prev => prev.filter(u => u.id !== userId));
      }

      setGroups(prev => prev.map(group => 
        group.id === selectedGroup.id 
          ? { ...group, membersCount: group.membersCount + 1 }
          : group
      ));

      toast({
        title: "Success",
        description: "Member added successfully",
      });
    } catch (error) {
      toast({
        title: "Error",
        description: error instanceof Error ? error.message : "An error occurred",
        variant: "destructive",
      });
    }
  };

  const handleRemoveMember = async (userId: string) => {
    if (!selectedGroup) return;

    try {
      const response = await fetch(`/api/groups/${selectedGroup.id}/members/${userId}`, {
        method: "DELETE",
      });

      if (!response.ok) {
        throw new Error("Failed to remove member");
      }

      const removedMember = groupMembers.find(u => u.id === userId);
      if (removedMember) {
        setGroupMembers(prev => prev.filter(u => u.id !== userId));
        setAvailableUsers(prev => [...prev, removedMember]);
      }

      setGroups(prev => prev.map(group => 
        group.id === selectedGroup.id 
          ? { ...group, membersCount: Math.max(0, group.membersCount - 1) }
          : group
      ));

      toast({
        title: "Success",
        description: "Member removed successfully",
      });
    } catch (error) {
      toast({
        title: "Error",
        description: error instanceof Error ? error.message : "An error occurred",
        variant: "destructive",
      });
    }
  };

  const filteredGroups = groups.filter(group =>
    group.name.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div className='flex flex-col space-y-4'>
      <div className='flex justify-between items-center mb-6'>
        <h1 className='text-2xl font-semibold text-white'>Gestion des groupes</h1>
        <div className="flex items-center space-x-4">
          <div className="relative w-64">
            <Input
              type="text"
              placeholder="Rechercher un groupe..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full bg-black/20 border-0 text-white placeholder:text-gray-400"
            />
          </div>
          <Dialog open={newGroupDialog} onOpenChange={setNewGroupDialog}>
            <DialogTrigger asChild>
              <Button variant="outline" className="bg-blue-600 text-white hover:bg-blue-700 border-0">
                <Plus className="mr-2 h-4 w-4" />
                Nouveau groupe
              </Button>
            </DialogTrigger>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>Créer un nouveau groupe</DialogTitle>
              </DialogHeader>
              <div className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="name">Nom du groupe</Label>
                  <Input
                    id="name"
                    value={newGroupName}
                    onChange={(e) => setNewGroupName(e.target.value)}
                    placeholder="Entrez le nom du groupe"
                  />
                </div>
                <Button onClick={handleCreateGroup} className="w-full">
                  Créer le groupe
                </Button>
              </div>
            </DialogContent>
          </Dialog>
        </div>
      </div>

      <div className="rounded-lg overflow-hidden">
        <Table>
          <TableHeader>
            <TableRow className="bg-black/20 border-0">
              <TableHead className="text-gray-400">Nom du groupe</TableHead>
              <TableHead className="text-gray-400">Chemin</TableHead>
              <TableHead className="text-gray-400">Nombre de membres</TableHead>
              <TableHead className="text-gray-400 text-right">Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {filteredGroups.map((group) => (
              <TableRow 
                key={group.id}
                className="border-0 bg-black/10 hover:bg-black/20"
              >
                <TableCell className="text-white">{group.name}</TableCell>
                <TableCell className="text-white">{group.path}</TableCell>
                <TableCell className="text-white">{group.membersCount}</TableCell>
                <TableCell className="text-right">
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button variant="ghost" className="h-8 w-8 p-0 text-white hover:bg-black/20">
                        <span className="sr-only">Open menu</span>
                        <MoreHorizontal className="h-4 w-4" />
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end" className="bg-black/90 border-gray-700">
                      <DropdownMenuLabel className="text-gray-400">Actions</DropdownMenuLabel>
                      <DropdownMenuItem 
                        onClick={() => handleModifyGroup(group.id)}
                        className="text-white hover:bg-black/50"
                      >
                        <Edit className="mr-2 h-4 w-4" />
                        Modifier
                      </DropdownMenuItem>
                      <DropdownMenuItem 
                        onClick={() => handleManageMembers(group.id)}
                        className="text-white hover:bg-black/50"
                      >
                        <Users className="mr-2 h-4 w-4" />
                        Gérer les membres
                      </DropdownMenuItem>
                      <DropdownMenuSeparator className="bg-gray-700" />
                      <DropdownMenuItem
                        className="text-red-400 hover:bg-black/50"
                        onClick={() => handleDeleteGroup(group.id)}
                      >
                        <Trash className="mr-2 h-4 w-4" />
                        Supprimer
                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>

      <Dialog open={modifyGroupDialog} onOpenChange={setModifyGroupDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Modifier le groupe</DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="name">Nom du groupe</Label>
              <Input
                id="name"
                value={modifiedGroupName}
                onChange={(e) => setModifiedGroupName(e.target.value)}
                placeholder="Entrez le nouveau nom du groupe"
              />
            </div>
            <Button 
              onClick={handleUpdateGroup}
              className="w-full"
            >
              Modifier
            </Button>
          </div>
        </DialogContent>
      </Dialog>

      <Dialog open={manageMembersDialog} onOpenChange={setManageMembersDialog}>
        <DialogContent className="max-h-[80vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>Gérer les membres du groupe {selectedGroup?.name}</DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
            <div className="space-y-2">
              <Label>Current Members</Label>
              <div className="max-h-[200px] overflow-y-auto border rounded-md p-2">
                {groupMembers.length === 0 ? (
                  <p className="text-sm text-muted-foreground">No members</p>
                ) : (
                  <div className="space-y-2">
                    {groupMembers.map((member) => (
                      <div key={member.id} className="flex items-center justify-between p-2 hover:bg-muted rounded-md">
                        <div>
                          <p className="font-medium">{member.lastName} {member.firstName}</p>
                          <p className="text-sm text-muted-foreground">{member.email}</p>
                        </div>
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => handleRemoveMember(member.id)}
                        >
                          <Trash className="h-4 w-4" />
                        </Button>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            </div>
            <div className="space-y-2">
              <Label>Add Member</Label>
              <div className="max-h-[200px] overflow-y-auto border rounded-md p-2">
                {availableUsers.length === 0 ? (
                  <p className="text-sm text-muted-foreground">No users available</p>
                ) : (
                  <div className="space-y-2">
                    {availableUsers
                      .sort((a, b) => (a.lastName + a.firstName).localeCompare(b.lastName + b.firstName))
                      .map((user) => (
                        <div key={user.id} className="flex items-center justify-between p-2 hover:bg-muted rounded-md">
                          <div>
                            <p className="font-medium">{user.lastName} {user.firstName}</p>
                            <p className="text-sm text-muted-foreground">{user.email}</p>
                          </div>
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => handleAddMember(user.id)}
                          >
                            <Plus className="h-4 w-4" />
                          </Button>
                        </div>
                    ))}
                  </div>
                )}
              </div>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  );
}