bakery-ia/frontend/src/pages/app/settings/team/TeamPage.tsx

import React, { useState, useMemo } from 'react';
import { Users, Plus, Search, Shield, Trash2, Crown, UserCheck } from 'lucide-react';
import { Button, Card, Input, StatusCard, getStatusColor, StatsGrid } from '../../../../components/ui';
import AddTeamMemberModal from '../../../../components/domain/team/AddTeamMemberModal';
import { PageHeader } from '../../../../components/layout';
import { useTeamMembers, useAddTeamMember, useRemoveTeamMember, useUpdateMemberRole, useTenantAccess } from '../../../../api/hooks/tenant';
import { useAllUsers } from '../../../../api/hooks/user';
import { useAuthUser } from '../../../../stores/auth.store';
import { useCurrentTenant, useCurrentTenantAccess } from '../../../../stores/tenant.store';
import { useToast } from '../../../../hooks/ui/useToast';
import { TENANT_ROLES } from '../../../../types/roles';

const TeamPage: React.FC = () => {
  const { addToast } = useToast();
  const currentUser = useAuthUser();
  const currentTenant = useCurrentTenant();
  const currentTenantAccess = useCurrentTenantAccess();
  const tenantId = currentTenant?.id || '';

  // Try to get tenant access directly via hook as fallback
  const { data: directTenantAccess } = useTenantAccess(
    tenantId,
    currentUser?.id || '',
    { enabled: !!tenantId && !!currentUser?.id && !currentTenantAccess }
  );
  
  const { data: teamMembers = [], isLoading } = useTeamMembers(tenantId, false, { enabled: !!tenantId }); // Show all members including inactive
  const { data: allUsers = [], error: allUsersError, isLoading: allUsersLoading } = useAllUsers({
    retry: false, // Don't retry on permission errors
    staleTime: 0 // Always fresh check for permissions
  });
  
  // Mutations
  const addMemberMutation = useAddTeamMember();
  const removeMemberMutation = useRemoveTeamMember();
  const updateRoleMutation = useUpdateMemberRole();
  
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedRole, setSelectedRole] = useState('all');
  const [showAddForm, setShowAddForm] = useState(false);
  const [selectedUserToAdd, setSelectedUserToAdd] = useState('');
  const [selectedRoleToAdd, setSelectedRoleToAdd] = useState<string>(TENANT_ROLES.MEMBER);


  // Enhanced team members that includes owner information
  const enhancedTeamMembers = useMemo(() => {
    const members = [...teamMembers];
    
    // If tenant owner is not in the members list, add them
    if (currentTenant?.owner_id) {
      const ownerInMembers = members.find(m => m.user_id === currentTenant.owner_id);
      if (!ownerInMembers) {
        // Find owner user data
        const ownerUser = allUsers.find(u => u.id === currentTenant.owner_id);
        if (ownerUser) {
          // Add owner as a member
          members.push({
            id: `owner-${currentTenant.owner_id}`,
            tenant_id: tenantId,
            user_id: currentTenant.owner_id,
            role: TENANT_ROLES.OWNER,
            is_active: true,
            joined_at: currentTenant.created_at,
            user_email: ownerUser.email,
            user_full_name: ownerUser.full_name,
            user: ownerUser, // Add full user object for compatibility
          } as any);
        }
      } else if (ownerInMembers.role !== TENANT_ROLES.OWNER) {
        // Update existing member to owner role
        ownerInMembers.role = TENANT_ROLES.OWNER;
      }
    }
    
    return members;
  }, [teamMembers, currentTenant, allUsers, tenantId]);

  const roles = [
    { value: 'all', label: 'Todos los Roles', count: enhancedTeamMembers.length },
    { value: TENANT_ROLES.OWNER, label: 'Propietario', count: enhancedTeamMembers.filter(m => m.role === TENANT_ROLES.OWNER).length },
    { value: TENANT_ROLES.ADMIN, label: 'Administrador', count: enhancedTeamMembers.filter(m => m.role === TENANT_ROLES.ADMIN).length },
    { value: TENANT_ROLES.MEMBER, label: 'Miembro', count: enhancedTeamMembers.filter(m => m.role === TENANT_ROLES.MEMBER).length },
    { value: TENANT_ROLES.VIEWER, label: 'Observador', count: enhancedTeamMembers.filter(m => m.role === TENANT_ROLES.VIEWER).length }
  ];

  // Use direct tenant access as fallback
  const effectiveTenantAccess = currentTenantAccess || directTenantAccess;

  // Check if current user is the tenant owner (fallback when access endpoint fails)
  const isCurrentUserOwner = currentUser?.id === currentTenant?.owner_id;

  // Permission checks
  const isOwner = effectiveTenantAccess?.role === TENANT_ROLES.OWNER || isCurrentUserOwner;
  const canManageTeam = isOwner || effectiveTenantAccess?.role === TENANT_ROLES.ADMIN;
  
  const teamStats = {
    total: enhancedTeamMembers.length,
    active: enhancedTeamMembers.filter(m => m.is_active).length,
    owners: enhancedTeamMembers.filter(m => m.role === TENANT_ROLES.OWNER).length,
    admins: enhancedTeamMembers.filter(m => m.role === TENANT_ROLES.ADMIN).length,
    members: enhancedTeamMembers.filter(m => m.role === TENANT_ROLES.MEMBER).length,
  };


  const getRoleLabel = (role: string) => {
    switch (role) {
      case TENANT_ROLES.OWNER: return 'Propietario';
      case TENANT_ROLES.ADMIN: return 'Administrador';
      case TENANT_ROLES.MEMBER: return 'Miembro';
      case TENANT_ROLES.VIEWER: return 'Observador';
      default: return role;
    }
  };

  // StatusCard configuration for team members
  const getMemberStatusConfig = (member: any) => {
    if (member.role === TENANT_ROLES.OWNER) {
      return {
        color: getStatusColor('completed'), // Purple/primary for owner
        text: getRoleLabel(member.role),
        icon: Crown,
        isCritical: false,
        isHighlight: true
      };
    }
    
    if (member.role === TENANT_ROLES.ADMIN) {
      return {
        color: getStatusColor('inProgress'), // Blue for admin
        text: getRoleLabel(member.role),
        icon: Shield,
        isCritical: false,
        isHighlight: false
      };
    }
    
    if (member.role === TENANT_ROLES.MEMBER) {
      return {
        color: getStatusColor('normal'), // Green for member
        text: getRoleLabel(member.role),
        icon: Users,
        isCritical: false,
        isHighlight: false
      };
    }
    
    // VIEWER or other roles
    return {
      color: getStatusColor('pending'), // Yellow for viewer
      text: getRoleLabel(member.role),
      icon: Users,
      isCritical: false,
      isHighlight: false
    };
  };

  const getMemberActions = (member: any) => {
    const actions = [];

    // Role change actions (only for non-owners and if user can manage team)
    if (canManageTeam && member.role !== TENANT_ROLES.OWNER) {
      if (member.role !== TENANT_ROLES.ADMIN) {
        actions.push({
          label: 'Hacer Admin',
          icon: Shield,
          onClick: () => handleUpdateRole(member.user_id, TENANT_ROLES.ADMIN),
          priority: 'secondary' as const,
        });
      }
      
      if (member.role !== TENANT_ROLES.MEMBER) {
        actions.push({
          label: 'Hacer Miembro',
          icon: Users,
          onClick: () => handleUpdateRole(member.user_id, TENANT_ROLES.MEMBER),
          priority: 'secondary' as const,
        });
      }
      
      if (member.role !== TENANT_ROLES.VIEWER) {
        actions.push({
          label: 'Hacer Observador',
          onClick: () => handleUpdateRole(member.user_id, TENANT_ROLES.VIEWER),
          priority: 'tertiary' as const,
        });
      }
    }

    // Remove member action (only for owners)
    if (isOwner && member.role !== TENANT_ROLES.OWNER) {
      actions.push({
        label: 'Remover',
        icon: Trash2,
        onClick: () => {
          if (confirm('¿Estás seguro de que deseas remover este miembro?')) {
            handleRemoveMember(member.user_id);
          }
        },
        priority: 'tertiary' as const,
        destructive: true,
      });
    }

    return actions;
  };

  const filteredMembers = enhancedTeamMembers.filter(member => {
    const matchesRole = selectedRole === 'all' || member.role === selectedRole;
    const userName = member.user?.full_name || member.user_full_name || '';
    const userEmail = member.user?.email || member.user_email || '';
    const matchesSearch = userName.toLowerCase().includes(searchTerm.toLowerCase()) ||
                         userEmail.toLowerCase().includes(searchTerm.toLowerCase());
    return matchesRole && matchesSearch;
  });

  // Available users for adding (exclude current members)
  const availableUsers = allUsers.filter(u =>
    !enhancedTeamMembers.some(m => m.user_id === u.id)
  );

  // Force reload tenant access if missing
  React.useEffect(() => {
    if (currentTenant?.id && !currentTenantAccess) {
      console.log('Forcing tenant access reload for tenant:', currentTenant.id);
      // You can trigger a manual reload here if needed
    }
  }, [currentTenant?.id, currentTenantAccess]);

  // Debug logging
  console.log('TeamPage Debug:', {
    canManageTeam,
    isOwner,
    isCurrentUserOwner,
    currentUser: currentUser?.id,
    currentTenant: currentTenant?.id,
    tenantOwner: currentTenant?.owner_id,
    currentTenantAccess,
    directTenantAccess,
    effectiveTenantAccess,
    tenantAccess: effectiveTenantAccess?.role,
    allUsers: allUsers.length,
    allUsersError,
    allUsersLoading,
    availableUsers: availableUsers.length,
    enhancedTeamMembers: enhancedTeamMembers.length
  });

  // Member action handlers - removed unused handleAddMember since modal handles it directly

  const handleRemoveMember = async (memberUserId: string) => {
    if (!tenantId) return;

    try {
      await removeMemberMutation.mutateAsync({
        tenantId,
        memberUserId,
      });
      
      addToast('Miembro removido exitosamente', { type: 'success' });
    } catch (error) {
      addToast('Error al remover miembro', { type: 'error' });
    }
  };

  const handleUpdateRole = async (memberUserId: string, newRole: string) => {
    if (!tenantId) return;

    try {
      await updateRoleMutation.mutateAsync({
        tenantId,
        memberUserId,
        newRole,
      });
      
      addToast('Rol actualizado exitosamente', { type: 'success' });
    } catch (error) {
      addToast('Error al actualizar rol', { type: 'error' });
    }
  };
  
  if (isLoading) {
    return (
      <div className="p-6 space-y-6">
        <PageHeader
          title="Gestión de Equipo"
          description="Administra los miembros del equipo, roles y permisos"
        />
        <div className="flex items-center justify-center min-h-[400px]">
          <div className="text-center">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
            <p>Cargando miembros del equipo...</p>
          </div>
        </div>
      </div>
    );
  }


  return (
    <div className="p-6 space-y-6">
      <PageHeader
        title="Gestión de Equipo"
        description="Administra los miembros del equipo, roles y permisos"
        actions={
          canManageTeam ? [{
            id: 'add-member',
            label: 'Agregar Miembro',
            icon: Plus,
            onClick: () => setShowAddForm(true)
          }] : undefined
        }
      />

      {/* Team Stats */}
      <StatsGrid
        stats={[
          {
            title: "Total Equipo",
            value: teamStats.total,
            icon: Users,
            variant: "info"
          },
          {
            title: "Activos",
            value: teamStats.active,
            icon: UserCheck,
            variant: "success"
          },
          {
            title: "Administradores",
            value: teamStats.admins,
            icon: Shield,
            variant: "info"
          },
          {
            title: "Propietarios",
            value: teamStats.owners,
            icon: Crown,
            variant: "purple"
          }
        ]}
        columns={4}
        gap="md"
      />

      {/* Filters and Search */}
      <Card className="p-6">
        <div className="flex flex-col sm:flex-row gap-4">
          <div className="flex-1">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[var(--text-tertiary)] h-4 w-4" />
              <Input
                placeholder="Buscar miembros del equipo..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-10"
              />
            </div>
          </div>
          
          <div className="flex gap-2 flex-wrap">
            {roles.map((role) => (
              <button
                key={role.value}
                onClick={() => setSelectedRole(role.value)}
                className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
                  selectedRole === role.value
                    ? 'bg-blue-600 text-white'
                    : 'bg-[var(--bg-tertiary)] text-[var(--text-secondary)] hover:bg-[var(--bg-quaternary)]'
                }`}
              >
                {role.label} ({role.count})
              </button>
            ))}
          </div>
        </div>
      </Card>

      {/* Add Member Button */}
      {canManageTeam && filteredMembers.length > 0 && (
        <div className="flex justify-end">
          <Button
            onClick={() => setShowAddForm(true)}
            variant="primary"
            size="md"
            className="font-medium px-4 py-2 shadow-sm hover:shadow-md transition-all duration-200"
          >
            <Plus className="w-4 h-4 mr-2 flex-shrink-0" />
            <span>Agregar Miembro</span>
          </Button>
        </div>
      )}

      {/* Team Members List - Responsive grid */}
      <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4 lg:gap-6">
        {filteredMembers.map((member) => (
          <StatusCard
            key={member.id}
            id={`team-member-${member.id}`}
            statusIndicator={getMemberStatusConfig(member)}
            title={member.user?.full_name || member.user_full_name}
            subtitle={member.user?.email || member.user_email}
            primaryValue={Math.floor((Date.now() - new Date(member.joined_at).getTime()) / (1000 * 60 * 60 * 24))}
            primaryValueLabel="días"
            secondaryInfo={{
              label: 'Estado',
              value: member.is_active ? 'Activo' : 'Inactivo'
            }}
            metadata={[
              `Email: ${member.user?.email || member.user_email}`,
              `Teléfono: ${member.user?.phone || 'No disponible'}`,
              ...(member.role === TENANT_ROLES.OWNER ? ['🏢 Propietario de la organización'] : [])
            ]}
            actions={getMemberActions(member)}
            className={`
              ${!member.is_active ? 'opacity-75' : ''} 
              transition-all duration-200 hover:scale-[1.02]
            `}
          />
        ))}
      </div>

      {filteredMembers.length === 0 && (
        <div className="text-center py-12">
          <Users className="mx-auto h-12 w-12 text-[var(--text-tertiary)] mb-4" />
          <h3 className="text-lg font-medium text-[var(--text-primary)] mb-2">
            No se encontraron miembros
          </h3>
          <p className="text-[var(--text-secondary)] mb-4">
            {searchTerm || selectedRole !== 'all' 
              ? "No hay miembros que coincidan con los filtros seleccionados"
              : "Este tenant aún no tiene miembros del equipo"
            }
          </p>
          {canManageTeam && (
            <Button
              onClick={() => setShowAddForm(true)}
              variant="primary"
              size="md"
              className="font-medium px-6 py-3 shadow-sm hover:shadow-md transition-all duration-200"
            >
              <Plus className="w-4 h-4 mr-2 flex-shrink-0" />
              <span>Agregar Primer Miembro</span>
            </Button>
          )}
        </div>
      )}

      {/* Add Member Modal - Using StatusModal */}
      <AddTeamMemberModal
        isOpen={showAddForm}
        onClose={() => {
          setShowAddForm(false);
          setSelectedUserToAdd('');
          setSelectedRoleToAdd(TENANT_ROLES.MEMBER);
        }}
        onAddMember={async (userData) => {
          if (!tenantId) return Promise.reject('No tenant ID available');
          
          return addMemberMutation.mutateAsync({
            tenantId,
            userId: userData.userId,
            role: userData.role,
          }).then(() => {
            addToast('Miembro agregado exitosamente', { type: 'success' });
            setShowAddForm(false);
            setSelectedUserToAdd('');
            setSelectedRoleToAdd(TENANT_ROLES.MEMBER);
          }).catch((error) => {
            addToast('Error al agregar miembro', { type: 'error' });
            throw error;
          });
        }}
        availableUsers={availableUsers}
      />
    </div>
  );
};

export default TeamPage;