import React, { useState, useMemo } from 'react';
import { Users, Plus, Search, Mail, Phone, Shield, Trash2, Crown, X, UserCheck } from 'lucide-react';
import { Button, Card, Badge, Input, StatusCard, getStatusColor } from '../../../../components/ui';
import { PageHeader } from '../../../../components/layout';
import { useTeamMembers, useAddTeamMember, useRemoveTeamMember, useUpdateMemberRole } 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 currentTenant = useCurrentTenant();
  const currentTenantAccess = useCurrentTenantAccess();
  const tenantId = currentTenant?.id || '';
  
  const { data: teamMembers = [], isLoading } = useTeamMembers(tenantId, false, { enabled: !!tenantId }); // Show all members including inactive
  const { data: allUsers = [] } = useAllUsers();
  
  // 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 }
  ];

  // Permission checks
  const isOwner = currentTenantAccess?.role === TENANT_ROLES.OWNER;
  const canManageTeam = isOwner || currentTenantAccess?.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)
  );

  // Member action handlers
  const handleAddMember = async () => {
    if (!selectedUserToAdd || !selectedRoleToAdd || !tenantId) return;

    try {
      await addMemberMutation.mutateAsync({
        tenantId,
        userId: selectedUserToAdd,
        role: selectedRoleToAdd,
      });
      
      addToast('Miembro agregado exitosamente', { type: 'success' });
      setShowAddForm(false);
      setSelectedUserToAdd('');
      setSelectedRoleToAdd(TENANT_ROLES.MEMBER);
    } catch (error) {
      addToast('Error al agregar miembro', { type: 'error' });
    }
  };

  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 && availableUsers.length > 0 ? [{
            id: 'add-member',
            label: 'Agregar Miembro',
            icon: Plus,
            onClick: () => setShowAddForm(true)
          }] : undefined
        }
      />

      {/* Team Stats */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <Card className="p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-[var(--text-secondary)]">Total Equipo</p>
              <p className="text-3xl font-bold text-[var(--text-primary)]">{teamStats.total}</p>
            </div>
            <div className="h-12 w-12 bg-[var(--color-info)]/10 rounded-full flex items-center justify-center">
              <Users className="h-6 w-6 text-[var(--color-info)]" />
            </div>
          </div>
        </Card>

        <Card className="p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-[var(--text-secondary)]">Activos</p>
              <p className="text-3xl font-bold text-[var(--color-success)]">{teamStats.active}</p>
            </div>
            <div className="h-12 w-12 bg-[var(--color-success)]/10 rounded-full flex items-center justify-center">
              <UserCheck className="h-6 w-6 text-[var(--color-success)]" />
            </div>
          </div>
        </Card>

        <Card className="p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-[var(--text-secondary)]">Administradores</p>
              <p className="text-3xl font-bold text-[var(--color-primary)]">{teamStats.admins}</p>
            </div>
            <div className="h-12 w-12 bg-[var(--color-primary)]/10 rounded-full flex items-center justify-center">
              <Shield className="h-6 w-6 text-[var(--color-primary)]" />
            </div>
          </div>
        </Card>

        <Card className="p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-[var(--text-secondary)]">Propietarios</p>
              <p className="text-3xl font-bold text-purple-600">{teamStats.owners}</p>
            </div>
            <div className="h-12 w-12 bg-purple-100 rounded-full flex items-center justify-center">
              <Crown className="h-6 w-6 text-purple-600" />
            </div>
          </div>
        </Card>
      </div>

      {/* 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>

      {/* 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 && (
        <StatusCard
          id="empty-state"
          statusIndicator={{
            color: getStatusColor('pending'),
            text: searchTerm || selectedRole !== 'all' ? 'Sin coincidencias' : 'Equipo vacío',
            icon: Users,
            isCritical: false,
            isHighlight: false
          }}
          title="No se encontraron miembros"
          subtitle={searchTerm || selectedRole !== 'all' 
            ? "No hay miembros que coincidan con los filtros seleccionados"
            : "Este tenant aún no tiene miembros del equipo"
          }
          primaryValue="0"
          primaryValueLabel="Miembros"
          actions={canManageTeam && availableUsers.length > 0 ? [{
            label: 'Agregar Primer Miembro',
            icon: Plus,
            onClick: () => setShowAddForm(true),
            priority: 'primary' as const,
          }] : []}
          className="col-span-full"
        />
      )}

      {/* Add Member Modal */}
      {showAddForm && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <Card className="p-6 max-w-md w-full mx-4">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-lg font-semibold text-[var(--text-primary)]">Agregar Miembro al Equipo</h3>
              <Button 
                size="sm" 
                variant="ghost" 
                onClick={() => setShowAddForm(false)}
              >
                <X className="w-4 h-4" />
              </Button>
            </div>
            
            <div className="space-y-4">
              {/* User Selection */}
              <div>
                <label className="block text-sm font-medium text-[var(--text-primary)] mb-2">
                  Usuario
                </label>
                <select
                  value={selectedUserToAdd}
                  onChange={(e) => setSelectedUserToAdd(e.target.value)}
                  className="w-full px-3 py-2 border border-border-secondary rounded-lg bg-bg-primary focus:outline-none focus:ring-2 focus:ring-color-primary focus:ring-opacity-20"
                  required
                >
                  <option value="">Seleccionar usuario...</option>
                  {availableUsers.map(user => (
                    <option key={user.id} value={user.id}>
                      {user.full_name} ({user.email})
                    </option>
                  ))}
                </select>
                {availableUsers.length === 0 && (
                  <p className="text-sm text-[var(--text-tertiary)] mt-1">
                    No hay usuarios disponibles para agregar
                  </p>
                )}
              </div>

              {/* Role Selection */}
              <div>
                <label className="block text-sm font-medium text-[var(--text-primary)] mb-2">
                  Rol
                </label>
                <select
                  value={selectedRoleToAdd}
                  onChange={(e) => setSelectedRoleToAdd(e.target.value)}
                  className="w-full px-3 py-2 border border-border-secondary rounded-lg bg-bg-primary focus:outline-none focus:ring-2 focus:ring-color-primary focus:ring-opacity-20"
                >
                  <option value={TENANT_ROLES.MEMBER}>Miembro - Acceso estándar</option>
                  <option value={TENANT_ROLES.ADMIN}>Administrador - Gestión de equipo</option>
                  <option value={TENANT_ROLES.VIEWER}>Observador - Solo lectura</option>
                </select>
              </div>

              {/* Role Description */}
              <div className="p-3 bg-bg-secondary rounded-lg">
                <p className="text-xs text-[var(--text-secondary)]">
                  {selectedRoleToAdd === TENANT_ROLES.ADMIN && 
                    'Los administradores pueden gestionar miembros del equipo y configuraciones.'}
                  {selectedRoleToAdd === TENANT_ROLES.MEMBER && 
                    'Los miembros tienen acceso completo para trabajar con datos y funcionalidades.'}
                  {selectedRoleToAdd === TENANT_ROLES.VIEWER && 
                    'Los observadores solo pueden ver datos, sin realizar cambios.'}
                </p>
              </div>
            </div>

            <div className="flex space-x-2 mt-6">
              <Button 
                onClick={handleAddMember}
                disabled={!selectedUserToAdd || addMemberMutation.isPending}
                className="flex-1"
              >
                {addMemberMutation.isPending ? 'Agregando...' : 'Agregar Miembro'}
              </Button>
              <Button 
                variant="outline" 
                onClick={() => {
                  setShowAddForm(false);
                  setSelectedUserToAdd('');
                  setSelectedRoleToAdd(TENANT_ROLES.MEMBER);
                }}
              >
                Cancelar
              </Button>
            </div>
          </Card>
        </div>
      )}
    </div>
  );
};

export default TeamPage;