"use client";

import React, { useState, useEffect } from "react";
import { logger } from '@/lib/logger';
import { Input } from "../ui/input";
import { Button } from "../ui/button";
import { Badge } from "../ui/badge";
import { X, Search, UserPlus, Users, PlusCircle, AlertCircle, Check } from "lucide-react";
import { toast } from "../ui/use-toast";
import { 
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger
} from "../ui/dropdown-menu";

// Define interfaces for user and group data
export interface User {
  id: string;
  username: string;
  firstName: string;
  lastName: string;
  email: string;
  roles?: string[];
  enabled?: boolean;
}

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

// User role types in mission
export type GuardienRole = 'temps' | 'parole' | 'memoire';
export type UserRole = GuardienRole | 'volontaire';

interface MissionMembersPanelProps {
  gardienDuTemps: string | null;
  gardienDeLaParole: string | null;
  gardienDeLaMemoire: string | null;
  volontaires: string[];
  onGardienDuTempsChange: (userId: string | null) => void;
  onGardienDeLaParoleChange: (userId: string | null) => void;
  onGardienDeLaMemoireChange: (userId: string | null) => void;
  onVolontairesChange: (userIds: string[]) => void;
}

export function MissionMembersPanel({
  gardienDuTemps,
  gardienDeLaParole,
  gardienDeLaMemoire,
  volontaires,
  onGardienDuTempsChange,
  onGardienDeLaParoleChange,
  onGardienDeLaMemoireChange,
  onVolontairesChange,
}: MissionMembersPanelProps) {
  const [searchTerm, setSearchTerm] = useState("");
  const [selectedTab, setSelectedTab] = useState<'users' | 'groups'>('users');
  const [users, setUsers] = useState<User[]>([]);
  const [groups, setGroups] = useState<Group[]>([]);
  const [loading, setLoading] = useState(true);

  // Check if mission is valid (has all required guardiens)
  const isMissionValid = gardienDuTemps !== null && gardienDeLaParole !== null && gardienDeLaMemoire !== null;

  // Fetch users and groups on component mount
  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        await Promise.all([fetchUsers(), fetchGroups()]);
      } catch (error) {
        logger.error("Error fetching data", { error: error instanceof Error ? error.message : String(error) });
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  // Function to fetch users from API
  const fetchUsers = async () => {
    try {
      const response = await fetch("/api/users");
      if (!response.ok) {
        throw new Error("Failed to fetch users");
      }
      const data = await response.json();
      setUsers(data);
    } catch (error) {
      logger.error("Error fetching users", { error: error instanceof Error ? error.message : String(error) });
      toast({
        title: "Erreur",
        description: "Erreur lors de la récupération des utilisateurs",
        variant: "destructive",
      });
    }
  };

  // Function to fetch groups from API
  const fetchGroups = async () => {
    try {
      const response = await fetch("/api/groups");
      if (!response.ok) {
        throw new Error("Failed to fetch groups");
      }
      const data = await response.json();

      // Fetch member counts for groups
      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, membersCount: 0};
          } catch (error) {
            logger.error(`Error fetching members for group ${group.id}`, { error: error instanceof Error ? error.message : String(error) });
            return {...group, membersCount: 0};
          }
        })
      );

      setGroups(groupsWithCounts);
    } catch (error) {
      logger.error("Error fetching groups", { error: error instanceof Error ? error.message : String(error) });
      toast({
        title: "Erreur",
        description: "Erreur lors de la récupération des groupes",
        variant: "destructive",
      });
    }
  };

  // Filtered users based on search term
  const filteredUsers = users.filter(user => 
    (user.username?.toLowerCase() || "").includes(searchTerm.toLowerCase()) ||
    (user.email?.toLowerCase() || "").includes(searchTerm.toLowerCase()) ||
    (user.firstName?.toLowerCase() || "").includes(searchTerm.toLowerCase()) ||
    (user.lastName?.toLowerCase() || "").includes(searchTerm.toLowerCase())
  );
  
  // Filtered groups based on search term
  const filteredGroups = groups.filter(group => 
    (group.name?.toLowerCase() || "").includes(searchTerm.toLowerCase())
  );

  // Function to check if a user is already assigned to any role
  const isUserAssigned = (userId: string) => {
    return gardienDuTemps === userId || 
           gardienDeLaParole === userId || 
           gardienDeLaMemoire === userId ||
           volontaires.includes(userId);
  };
  
  // Function to get user's roles (can now have multiple)
  const getUserRoles = (userId: string): UserRole[] => {
    const roles: UserRole[] = [];
    if (gardienDuTemps === userId) roles.push('temps');
    if (gardienDeLaParole === userId) roles.push('parole');
    if (gardienDeLaMemoire === userId) roles.push('memoire');
    if (volontaires.includes(userId)) roles.push('volontaire');
    return roles;
  };
  
  // Function to get role display name
  const getRoleDisplayName = (role: UserRole | null): string => {
    switch(role) {
      case 'temps': return "Gardien du Temps";
      case 'parole': return "Gardien de la Parole";
      case 'memoire': return "Gardien de la Mémoire";
      case 'volontaire': return "Volontaire";
      default: return "";
    }
  };
  
  // Function to assign a user to a specific guardian role
  const assignGuardienRole = (userId: string, role: GuardienRole) => {
    // Only remove from volunteers if they're currently a volunteer
    if (volontaires.includes(userId)) {
      onVolontairesChange(volontaires.filter(id => id !== userId));
    }
    
    // Assign to new role
    if (role === 'temps') {
      onGardienDuTempsChange(userId);
    } else if (role === 'parole') {
      onGardienDeLaParoleChange(userId);
    } else if (role === 'memoire') {
      onGardienDeLaMemoireChange(userId);
    }
    
    toast({
      title: "Rôle assigné",
      description: `L'utilisateur a été assigné comme ${getRoleDisplayName(role)}`,
    });
  };
  
  // Function to assign a user as volunteer
  const assignVolontaire = (userId: string) => {
    // Remove from any existing role first
    removeUserFromAllRoles(userId);
    
    // Add to volunteers
    onVolontairesChange([...volontaires, userId]);
    
    toast({
      title: "Rôle assigné",
      description: "L'utilisateur a été assigné comme Volontaire",
    });
  };
  
  // Function to remove a user from all roles
  const removeUserFromAllRoles = (userId: string) => {
    if (gardienDuTemps === userId) onGardienDuTempsChange(null);
    if (gardienDeLaParole === userId) onGardienDeLaParoleChange(null);
    if (gardienDeLaMemoire === userId) onGardienDeLaMemoireChange(null);
    if (volontaires.includes(userId)) {
      onVolontairesChange(volontaires.filter(id => id !== userId));
    }
  };

  // Function to fetch group members
  const fetchGroupMembers = async (groupId: string) => {
    try {
      const response = await fetch(`/api/groups/${groupId}/members`);
      if (!response.ok) {
        throw new Error("Failed to fetch group members");
      }
      const data = await response.json();
      return data;
    } catch (error) {
      logger.error(`Error fetching members for group ${groupId}`, { error: error instanceof Error ? error.message : String(error) });
      toast({
        title: "Erreur",
        description: "Erreur lors de la récupération des membres du groupe",
        variant: "destructive",
      });
      return [];
    }
  };

  // Handler for viewing group members
  const handleViewGroupMembers = async (groupId: string, groupName: string) => {
    try {
      setLoading(true);
      const members = await fetchGroupMembers(groupId);
      
      // Update the users list with the group members and switch to users tab
      if (Array.isArray(members) && members.length > 0) {
        setUsers(members);
        setSelectedTab('users');
        setSearchTerm(''); // Clear any existing search
        
        toast({
          title: `Membres de ${groupName}`,
          description: `${members.length} membres trouvés et affichés ci-dessous`,
        });
      } else {
        toast({
          title: `Membres de ${groupName}`,
          description: "Aucun membre trouvé dans ce groupe",
        });
      }
    } catch (error) {
      logger.error("Error handling group members", { error: error instanceof Error ? error.message : String(error) });
      toast({
        title: "Erreur",
        description: "Erreur lors de l'affichage des membres du groupe",
        variant: "destructive",
      });
    } finally {
      setLoading(false);
    }
  };

  // Helper component for Guardian card
  const GuardianCard = ({ 
    title, 
    userId, 
    onRemove 
  }: { 
    title: string; 
    userId: string | null; 
    onRemove: () => void;
  }) => {
    const user = userId ? users.find(u => u.id === userId) : null;
    
    return (
      <div className="border rounded-md p-4 bg-white">
        <div className="flex justify-between items-center mb-2">
          <h4 className="font-medium text-gray-800">{title}</h4>
          {userId && (
            <Button 
              variant="outline" 
              size="sm" 
              onClick={onRemove}
              className="text-red-600 hover:bg-red-50 hover:text-red-700 border-red-200 h-8 bg-white"
              disabled={loading}
            >
              <X size={16} className="mr-1" />
              Supprimer
            </Button>
          )}
        </div>
        {loading ? (
          <div className="flex items-center py-2 px-3 bg-gray-50 border border-gray-200 rounded-md">
            <div className="animate-pulse w-full flex items-center">
              <div className="h-10 w-10 bg-gray-300 rounded-full mr-3"></div>
              <div className="flex-1 space-y-2">
                <div className="h-3 bg-gray-300 rounded w-1/3"></div>
                <div className="h-3 bg-gray-300 rounded w-1/2"></div>
              </div>
            </div>
          </div>
        ) : user ? (
          <div className="bg-blue-50 border border-blue-100 rounded-md p-3">
            <div className="flex items-center">
              <div className="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-medium mr-3">
                {user.firstName?.[0] || ""}{user.lastName?.[0] || ""}
              </div>
              <div>
                <div className="font-medium text-gray-900">{user.firstName} {user.lastName}</div>
                <div className="text-sm text-gray-500">{user.email}</div>
              </div>
            </div>
          </div>
        ) : (
          <div className="flex items-center text-gray-500 bg-gray-50 border border-gray-200 rounded-md py-2 px-3">
            <div className="h-8 w-8 rounded-full bg-gray-200 flex items-center justify-center mr-3">
              <Users size={14} className="text-gray-400" />
            </div>
            <span className="text-sm">Aucun utilisateur sélectionné</span>
          </div>
        )}
      </div>
    );
  };

  return (
    <div className="space-y-6">
      <div>
        <div className="mb-6">
          <div className="flex justify-between items-center mb-4">
            <h3 className="text-lg font-medium text-gray-700">Les Gardiens de l'Intention</h3>
            
            <div className="flex items-center">
              {!isMissionValid && (
                <div className="flex items-center text-amber-600 mr-3 text-sm">
                  <AlertCircle size={16} className="mr-1" />
                  Les 3 gardiens doivent être assignés
                </div>
              )}
              {isMissionValid && (
                <div className="flex items-center text-green-600 mr-3 text-sm">
                  <Check size={16} className="mr-1" />
                  Tous les gardiens sont assignés
                </div>
              )}
            </div>
          </div>
          
          <div className="space-y-4">
            <GuardianCard
              title="Gardien du Temps"
              userId={gardienDuTemps}
              onRemove={() => removeUserFromAllRoles(gardienDuTemps!)}
            />
            
            <GuardianCard
              title="Gardien de la Parole"
              userId={gardienDeLaParole}
              onRemove={() => removeUserFromAllRoles(gardienDeLaParole!)}
            />
            
            <GuardianCard
              title="Gardien de la Mémoire"
              userId={gardienDeLaMemoire}
              onRemove={() => removeUserFromAllRoles(gardienDeLaMemoire!)}
            />
          </div>
        </div>
        
        <div className="bg-white border rounded-md p-4">
          <div className="mb-4">
            <div className="flex items-center justify-between mb-4">
              <h4 className="font-medium text-gray-800">Sélectionner des membres</h4>
              <div className="flex space-x-2">
                <Button 
                  variant={selectedTab === 'users' ? 'default' : 'outline'} 
                  size="sm"
                  onClick={() => setSelectedTab('users')}
                  className={selectedTab === 'users' 
                    ? 'bg-blue-600 text-white hover:bg-blue-700' 
                    : 'text-gray-700 bg-white hover:bg-gray-50 border border-gray-300'}
                  disabled={loading}
                >
                  <Users size={16} className="mr-1" />
                  Utilisateurs
                </Button>
                <Button 
                  variant={selectedTab === 'groups' ? 'default' : 'outline'} 
                  size="sm"
                  onClick={() => setSelectedTab('groups')}
                  className={selectedTab === 'groups' 
                    ? 'bg-blue-600 text-white hover:bg-blue-700' 
                    : 'text-gray-700 bg-white hover:bg-gray-50 border border-gray-300'}
                  disabled={loading}
                >
                  <Users size={16} className="mr-1" />
                  Groupes
                </Button>
              </div>
            </div>
            
            <div className="mb-4">
              <h5 className="text-sm font-medium text-gray-700 mb-2">Volontaires ({volontaires.length})</h5>
              {volontaires.length > 0 ? (
                <div className="flex flex-wrap gap-2 mb-3">
                  {volontaires.map(userId => {
                    const user = users.find(u => u.id === userId);
                    if (!user) return null;
                    return (
                      <Badge key={userId} className="bg-gray-100 text-gray-800 hover:bg-gray-200 px-2 py-1 flex items-center">
                        {user.firstName} {user.lastName}
                        <Button 
                          variant="ghost" 
                          size="sm" 
                          onClick={() => removeUserFromAllRoles(userId)}
                          className="ml-1 h-5 w-5 p-0 text-gray-500 hover:text-red-600 hover:bg-transparent"
                        >
                          <X size={12} />
                        </Button>
                      </Badge>
                    );
                  })}
                </div>
              ) : (
                <div className="text-sm text-gray-500 mb-3">Aucun volontaire assigné</div>
              )}
            </div>
            
            <div className="relative mb-4">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-500" />
              <Input
                type="text"
                placeholder={`Rechercher ${selectedTab === 'users' ? 'un utilisateur' : 'un groupe'}...`}
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-9 bg-white text-gray-900 border-gray-300"
                disabled={loading}
              />
            </div>
            
            {loading ? (
              <div className="border rounded-md p-6 flex flex-col items-center justify-center text-gray-500">
                <div className="animate-pulse space-y-4 w-full">
                  {[1, 2, 3].map((i) => (
                    <div key={i} className="flex items-center py-3 px-4">
                      <div className="h-10 w-10 bg-gray-300 rounded-full mr-3"></div>
                      <div className="flex-1 space-y-2">
                        <div className="h-3 bg-gray-300 rounded w-1/3"></div>
                        <div className="h-3 bg-gray-300 rounded w-1/2"></div>
                      </div>
                      <div className="h-7 w-16 bg-gray-300 rounded"></div>
                    </div>
                  ))}
                </div>
              </div>
            ) : (
              <div className="border rounded-md max-h-[300px] overflow-y-auto">
                {selectedTab === 'users' ? (
                  filteredUsers.length > 0 ? (
                    <div className="divide-y divide-gray-200">
                      {filteredUsers.map(user => {
                        const displayName = (user.firstName && user.lastName) 
                          ? `${user.firstName} ${user.lastName}`
                          : user.firstName || user.lastName || user.username || user.email || 'Utilisateur';
                        const initials = (user.firstName?.[0] || "") + (user.lastName?.[0] || "") || user.username?.[0]?.toUpperCase() || user.email?.[0]?.toUpperCase() || "?";
                        
                        return (
                        <div key={user.id} className="p-3 hover:bg-gray-50 flex items-center justify-between">
                          <div className="flex items-center">
                            <div className="h-10 w-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 font-medium mr-3">
                              {initials}
                            </div>
                            <div>
                              <div className="font-medium text-gray-900">{displayName}</div>
                              <div className="text-sm text-gray-500">{user.email || user.username || ''}</div>
                              {isUserAssigned(user.id) && (
                                <div className="flex flex-wrap gap-1 mt-1">
                                  {getUserRoles(user.id).map((role) => (
                                    <Badge 
                                      key={role}
                                      className={`px-1.5 py-0.5 text-xs ${
                                        role === 'volontaire' 
                                          ? 'bg-gray-100 text-gray-800' 
                                          : 'bg-blue-100 text-blue-800'
                                      }`}
                                    >
                                      {getRoleDisplayName(role)}
                                    </Badge>
                                  ))}
                                </div>
                              )}
                            </div>
                          </div>
                          
                          {/* User role controls always show dropdown */}
                          <div className="flex items-center">
                            <DropdownMenu>
                              <DropdownMenuTrigger asChild>
                                <Button 
                                  variant="outline" 
                                  size="sm"
                                  className="text-blue-600 bg-white hover:bg-blue-50 hover:text-blue-700 border-blue-200 h-8 mr-2"
                                  disabled={loading}
                                >
                                  <UserPlus size={16} className="mr-1" />
                                  Ajouter rôle
                                </Button>
                              </DropdownMenuTrigger>
                              <DropdownMenuContent align="end" className="bg-white border border-gray-200">
                                <DropdownMenuItem 
                                  onClick={() => assignGuardienRole(user.id, 'temps')}
                                  className="cursor-pointer"
                                >
                                  Gardien du Temps
                                </DropdownMenuItem>
                                <DropdownMenuItem 
                                  onClick={() => assignGuardienRole(user.id, 'parole')}
                                  className="cursor-pointer"
                                >
                                  Gardien de la Parole
                                </DropdownMenuItem>
                                <DropdownMenuItem 
                                  onClick={() => assignGuardienRole(user.id, 'memoire')}
                                  className="cursor-pointer"
                                >
                                  Gardien de la Mémoire
                                </DropdownMenuItem>
                              </DropdownMenuContent>
                            </DropdownMenu>
                            
                            <Button 
                              variant="outline" 
                              size="sm" 
                              onClick={() => assignVolontaire(user.id)}
                              className="text-gray-700 bg-white hover:bg-gray-50 border-gray-300 h-8"
                              disabled={loading}
                            >
                              <PlusCircle size={16} className="mr-1" />
                              Volontaire
                            </Button>
                            
                            {isUserAssigned(user.id) && (
                              <Button 
                                variant="outline" 
                                size="sm" 
                                onClick={() => removeUserFromAllRoles(user.id)}
                                className="ml-2 text-red-600 hover:bg-red-50 hover:text-red-700 border-red-200 h-8 bg-white"
                                disabled={loading}
                              >
                                <X size={14} className="mr-1" />
                                Supprimer
                              </Button>
                            )}
                          </div>
                        </div>
                        );
                      })}
                    </div>
                  ) : (
                    <div className="p-4 text-center text-gray-500">
                      Aucun utilisateur trouvé
                    </div>
                  )
                ) : (
                  filteredGroups.length > 0 ? (
                    <div className="divide-y divide-gray-200">
                      {filteredGroups.map(group => (
                        <div key={group.id} className="p-3 hover:bg-gray-50 flex items-center justify-between">
                          <div className="flex items-center">
                            <div className="h-10 w-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 font-medium mr-3">
                              <Users size={16} />
                            </div>
                            <div>
                              <div className="font-medium text-gray-900">{group.name}</div>
                              <div className="text-sm text-gray-500">{group.membersCount} membres</div>
                            </div>
                          </div>
                          <Button 
                            variant="outline" 
                            size="sm"
                            onClick={() => handleViewGroupMembers(group.id, group.name)}
                            className="text-blue-600 bg-white hover:bg-blue-50 hover:text-blue-700 border-blue-200 h-8"
                            disabled={loading}
                          >
                            <Users size={16} className="mr-1" />
                            Voir membres
                          </Button>
                        </div>
                      ))}
                    </div>
                  ) : (
                    <div className="p-4 text-center text-gray-500">
                      Aucun groupe trouvé
                    </div>
                  )
                )}
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}