// Panel de Administración - Esperiency
// Interfaz moderna e intuitiva para gestión del sistema

// Componente Switch moderno reutilizable
const ModernSwitch = ({ checked, onChange, disabled = false }) => {
  return (
    <label className="modern-switch" style={{ opacity: disabled ? 0.5 : 1, pointerEvents: disabled ? 'none' : 'auto' }}>
      <input 
        type="checkbox" 
        checked={checked} 
        onChange={(e) => onChange(e.target.checked)}
        disabled={disabled}
      />
      <span className="slider">
        <svg className="slider-icon" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation">
          <path fill="none" d="m4 16.5 8 8 16-16" />
        </svg>
      </span>
    </label>
  );
};

// Estilos CSS para el Switch (estilo iOS)
const SwitchStyles = () => (
  <style>{`
    .modern-switch {
      position: relative;
      display: inline-block;
      width: 42px;
      height: 24px;
      flex-shrink: 0;
    }
    .modern-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    .modern-switch .slider {
      position: absolute;
      cursor: pointer;
      inset: 0;
      background-color: #39393D;
      transition: background-color 0.2s;
      border-radius: 24px;
    }
    .modern-switch .slider:before {
      position: absolute;
      content: "";
      height: 20px;
      width: 20px;
      border-radius: 50%;
      left: 2px;
      top: 2px;
      background-color: #fff;
      transition: transform 0.2s;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    .modern-switch .slider-icon {
      display: none;
    }
    .modern-switch input:checked + .slider {
      background-color: #34C759;
    }
    .modern-switch input:checked + .slider:before {
      transform: translateX(18px);
    }
  `}</style>
);

const Skeleton = ({ className }) => (
  <div className={`animate-pulse bg-gray-200 rounded ${className}`}></div>
);

function AdminPage() {
  const [activeSection, setActiveSection] = React.useState('tenants');
  const [loading, setLoading] = React.useState(true);
  
  // Estados para datos
  const [tenants, setTenants] = React.useState([]);
  const [archivedTenants, setArchivedTenants] = React.useState([]);
  const [users, setUsers] = React.useState([]);
  const [activityLogs, setActivityLogs] = React.useState([]);
  const [tasks, setTasks] = React.useState([]);
  const [searchTerm, setSearchTerm] = React.useState('');
  
  // Estados para historial de pagos
  const [payments, setPayments] = React.useState([]);
  const [selectedPayment, setSelectedPayment] = React.useState(null);
  const [paymentsSearchTerm, setPaymentsSearchTerm] = React.useState('');
  const [paymentsFilter, setPaymentsFilter] = React.useState('all'); // all, completed, pending, cancelled
  const [apartments, setApartments] = React.useState([]);
  
  // Estados para solicitudes de devolución
  const [refundRequests, setRefundRequests] = React.useState([]);
  const [selectedRefundRequest, setSelectedRefundRequest] = React.useState(null);
  const [refundRequestsSearchTerm, setRefundRequestsSearchTerm] = React.useState('');
  const [showRefundActionModal, setShowRefundActionModal] = React.useState(false);
  const [refundActionType, setRefundActionType] = React.useState(null); // 'approve' or 'reject'
  const [refundRejectReason, setRefundRejectReason] = React.useState('');
  
  // Sub-tab para inquilinos (activos o archivados)
  const [tenantsView, setTenantsView] = React.useState('active');
  
  // Estados para configuración
  const [settings, setSettings] = React.useState({
    paymentDays: [1, 15],
    maxAdvanceMonths: 1,
    // Eliminación automática
    autoDeleteExpired: true,
    autoDeleteWeeks: 3,
    // Cobro por retardo
    latePaymentEnabled: true,
    latePaymentType: 'percentage', // 'percentage' o 'fixed'
    latePaymentAmount: 5,
    latePaymentIncrease: false,
    latePaymentIncreaseRate: 1, // % adicional por semana
    // Funcionalidades
    chatEnabled: true,
    analyticsEnabled: true,
    maintenanceEnabled: true,
    intensiveLoggingEnabled: true,
    // Esperiency Protect
    protectEnabled: true,
    protectModel: 'gemini-2.5-flash',
    // Facturación: 'free', 'payAsYouGo', 'unlimited'
    billingModel: 'free'
  });
  
  // Estados para modales y acciones
  const [showDeleteConfirm, setShowDeleteConfirm] = React.useState(false);
  const [showDeletePaymentConfirm, setShowDeletePaymentConfirm] = React.useState(false);
  const [showReceiptModal, setShowReceiptModal] = React.useState(false);
  const [actionType, setActionType] = React.useState(null);
  const [selectedTenantForAction, setSelectedTenantForAction] = React.useState(null);
  const [showUserModal, setShowUserModal] = React.useState(false);
  const [selectedUser, setSelectedUser] = React.useState(null);
  const [showTaskModal, setShowTaskModal] = React.useState(false);
  const [selectedTask, setSelectedTask] = React.useState(null);
  
  // Estados para acciones de usuario
  const [showUserActionConfirm, setShowUserActionConfirm] = React.useState(false);
  const [userActionType, setUserActionType] = React.useState(null);
  const [selectedUserForAction, setSelectedUserForAction] = React.useState(null);
  const [showNotifyModal, setShowNotifyModal] = React.useState(false);
  const [notifyMessage, setNotifyMessage] = React.useState('');
  
  // Para actividades - usuario seleccionado
  const [selectedLogUser, setSelectedLogUser] = React.useState(null);
  
  // Para motivo de bloqueo
  const [blockReason, setBlockReason] = React.useState('');
  
  // Funciones de utilidad
  const getJWTFromStorage = () => {
    if (window.getJWTFromStorage) return window.getJWTFromStorage();
    return localStorage.getItem('authToken') || sessionStorage.getItem('authToken') || 
           localStorage.getItem('jwt') || sessionStorage.getItem('jwt');
  };
  
  const getOrganizationId = () => {
    // Primero, intentar obtener de variable global
    if (window.currentOrganizationId) return window.currentOrganizationId;
    
    // Segundo, intentar obtener del token JWT
    const token = getJWTFromStorage();
    if (token) {
      const decoded = parseJWT(token);
      if (decoded?.organizationId) return decoded.organizationId;
    }
    
    // Fallback a localStorage
    return localStorage.getItem('organizationId');
  };
  
  const parseJWT = (token) => {
    try {
      if (!token) return null;
      const base64Url = token.split('.')[1];
      const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
      return JSON.parse(atob(base64));
    } catch (e) {
      return null;
    }
  };
  
  // Cargar datos al montar
  React.useEffect(() => {
    console.log('🔄 [AdminPage] useEffect - iniciando carga de datos');
    console.log('🔄 [AdminPage] window.currentOrganizationId:', window.currentOrganizationId);
    console.log('🔄 [AdminPage] getOrganizationId():', getOrganizationId());
    
    // Pequeño delay para asegurar que las variables globales estén listas
    const timer = setTimeout(() => {
      loadAllData();
    }, 100);
    
    return () => clearTimeout(timer);
  }, []);
  
  const loadAllData = async () => {
    setLoading(true);
    try {
      await Promise.all([
        loadTenants(),
        loadUsers(),
        loadActivityLogs(),
        loadSettings(),
        loadPayments(),
        loadApartments(),
        loadRefundRequests()
      ]);
    } catch (error) {
      console.error('Error cargando datos:', error);
    }
    setLoading(false);
  };
  
  const loadApartments = async () => {
    try {
      const organizationId = getOrganizationId();
      if (!organizationId) return;
      
      const response = await fetch(`http://localhost:3000/api/apartments`, {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${getJWTFromStorage()}`
        }
      });
      
      if (response.ok) {
        const result = await response.json();
        setApartments(result.data || []);
      }
    } catch (error) {
      console.error('Error cargando departamentos:', error);
    }
  };
  
  // Cargar solicitudes de devolución
  const loadRefundRequests = async () => {
    try {
      const organizationId = getOrganizationId();
      if (!organizationId) return;
      
      const response = await fetch(`http://localhost:3000/api/refund-requests?organizationId=${organizationId}`, {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${getJWTFromStorage()}`
        }
      });
      
      if (response.ok) {
        const result = await response.json();
        console.log('📤 Solicitudes de devolución cargadas:', result.data?.length || 0);
        setRefundRequests(result.data || []);
      }
    } catch (error) {
      console.error('Error cargando solicitudes de devolución:', error);
      setRefundRequests([]);
    }
  };

  // Aprobar solicitud de devolución
  const approveRefundRequest = async (request) => {
    try {
      const organizationId = getOrganizationId();
      const response = await fetch(`http://localhost:3000/api/refund-requests/${request.id}?organizationId=${organizationId}`, {
        method: 'PATCH',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${getJWTFromStorage()}`
        },
        body: JSON.stringify({ 
          status: 'approved',
          resolvedAt: new Date().toISOString(),
          resolvedBy: parseJWT(getJWTFromStorage())?.name || 'Admin'
        })
      });

      if (response.ok) {
        // Actualizar la lista local
        setRefundRequests(prev => prev.map(r => 
          r.id === request.id 
            ? { ...r, status: 'approved', resolvedAt: new Date().toISOString() }
            : r
        ));
        setShowRefundActionModal(false);
        setSelectedRefundRequest(null);
        window.showSuccess('Solicitud aprobada');
        
        // Recargar para obtener datos actualizados del servidor
        loadRefundRequests();
      }
    } catch (error) {
      console.error('Error aprobando solicitud:', error);
      window.showError('Error al aprobar la solicitud');
    }
  };

  // Rechazar solicitud de devolución
  const rejectRefundRequest = async (request) => {
    try {
      const organizationId = getOrganizationId();
      const response = await fetch(`http://localhost:3000/api/refund-requests/${request.id}?organizationId=${organizationId}`, {
        method: 'PATCH',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${getJWTFromStorage()}`
        },
        body: JSON.stringify({ 
          status: 'rejected',
          rejectReason: refundRejectReason || 'Sin razón especificada',
          resolvedAt: new Date().toISOString(),
          resolvedBy: parseJWT(getJWTFromStorage())?.name || 'Admin'
        })
      });

      if (response.ok) {
        setRefundRequests(prev => prev.map(r => 
          r.id === request.id 
            ? { ...r, status: 'rejected', resolvedAt: new Date().toISOString(), rejectReason: refundRejectReason }
            : r
        ));
        setShowRefundActionModal(false);
        setSelectedRefundRequest(null);
        setRefundRejectReason('');
        window.showSuccess('Solicitud rechazada');
        loadRefundRequests();
      }
    } catch (error) {
      console.error('Error rechazando solicitud:', error);
      window.showError('Error al rechazar la solicitud');
    }
  };
  
  const loadPayments = async () => {
    try {
      const organizationId = getOrganizationId();
      console.log('📦 [loadPayments] organizationId:', organizationId);
      if (!organizationId) {
        console.warn('⚠️ No hay organizationId disponible');
        return;
      }
      
      const token = getJWTFromStorage();
      let allPayments = [];
      
      // 1. Cargar pagos del historial global
      try {
        const response = await fetch(`http://localhost:3000/api/payments`, {
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}`
          }
        });
        
        if (response.ok) {
          const result = await response.json();
          allPayments = result.data || [];
          console.log('📦 [loadPayments] pagos globales:', allPayments.length);
        }
      } catch (e) {
        console.log('⚠️ No se pudieron cargar pagos globales');
      }
      
      // 2. Cargar pagos del historial de cada inquilino
      try {
        const tenantsResponse = await fetch(`http://localhost:3000/api/tenants`, {
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}`
          }
        });
        
        if (tenantsResponse.ok) {
          const tenantsResult = await tenantsResponse.json();
          const tenantsData = tenantsResult.data || [];
          
          // Extraer pagos del historial de cada inquilino
          tenantsData.forEach(tenant => {
            if (tenant.paymentHistory && Array.isArray(tenant.paymentHistory)) {
              tenant.paymentHistory.forEach(payment => {
                // Verificar que no esté duplicado (comparar por fecha y monto)
                const isDuplicate = allPayments.some(p => 
                  p.tenantId === tenant.id && 
                  p.amount === payment.amount && 
                  Math.abs(new Date(p.createdAt).getTime() - new Date(payment.date).getTime()) < 60000 // 1 minuto de diferencia
                );
                
                if (!isDuplicate) {
                  allPayments.push({
                    id: payment.id || `legacy_${tenant.id}_${payment.date}`,
                    amount: payment.amount,
                    tenantId: tenant.id,
                    tenantName: tenant.name,
                    apartmentId: tenant.apartmentId || '',
                    apartmentName: tenant.apartment || '',
                    concept: 'rent',
                    paymentMethod: 'cash', // Pagos desde inquilinos siempre son en efectivo
                    notes: payment.notes || 'Pago mensual',
                    status: 'completed',
                    createdAt: payment.date,
                    createdBy: payment.registeredBy || 'Sistema'
                  });
                }
              });
            }
          });
          
          console.log('📦 [loadPayments] total pagos (globales + inquilinos):', allPayments.length);
        }
      } catch (e) {
        console.log('⚠️ No se pudieron cargar pagos de inquilinos:', e);
      }
      
      // Ordenar por fecha más reciente
      allPayments.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
      
      setPayments(allPayments);
    } catch (error) {
      console.error('Error cargando pagos:', error);
      setPayments([]);
    }
  };
  
  const loadTenants = async () => {
    try {
      const organizationId = getOrganizationId();
      if (!organizationId) return;
      
      const response = await fetch(`http://localhost:3000/api/tenants?organizationId=${organizationId}`, {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${getJWTFromStorage()}`
        }
      });
      
      if (response.ok) {
        const result = await response.json();
        const allTenants = result.data || [];
        setTenants(allTenants.filter(t => t.status !== 'archived'));
        setArchivedTenants(allTenants.filter(t => t.status === 'archived'));
      }
    } catch (error) {
      console.error('Error cargando inquilinos:', error);
    }
  };
  
  const loadUsers = async () => {
    try {
      const organizationId = getOrganizationId();
      if (!organizationId) return;
      
      // Cargar usuarios del servidor desde organizations/workers
      const response = await fetch(`http://localhost:3000/api/users?organizationId=${organizationId}`, {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${getJWTFromStorage()}`
        }
      });
      
      if (response.ok) {
        const result = await response.json();
        if (result.success && result.data && result.data.length > 0) {
          setUsers(result.data);
          return;
        }
      }
      
      // Si no hay usuarios en workers, crear usuario actual del JWT como fallback
      const token = getJWTFromStorage();
      const payload = parseJWT(token);
      
      if (payload) {
        const currentUser = {
          id: payload.uid || payload.userId || payload.sub || payload.firebaseUid,
          name: payload.name || payload.displayName || 'Administrador',
          email: payload.email || '',
          role: 'admin',
          permissions: {
            dashboard: true,
            tenants: true,
            reports: true,
            analytics: true,
            admin: true
          },
          lastLogin: new Date().toISOString()
        };
        setUsers([currentUser]);
      }
    } catch (error) {
      console.error('Error cargando usuarios:', error);
      
      // Fallback con usuario del JWT
      const token = getJWTFromStorage();
      const payload = parseJWT(token);
      if (payload) {
        setUsers([{
          id: payload.uid || payload.userId || payload.sub,
          name: payload.name || payload.displayName || 'Administrador',
          email: payload.email || '',
          role: 'admin',
          permissions: { dashboard: true, tenants: true, reports: true, analytics: true, admin: true },
          lastLogin: new Date().toISOString()
        }]);
      }
    }
  };
  
  const loadActivityLogs = async () => {
    // TODO: Implementar endpoint /api/activity-logs cuando sea necesario
    // Por ahora, generar logs de ejemplo basados en actividad reciente
    try {
      const sampleLogs = [
        { id: '1', userId: 'system', userName: 'Sistema', action: 'Inicio de sesión', details: 'Acceso exitoso al sistema', timestamp: new Date().toISOString(), type: 'auth' },
        { id: '2', userId: 'system', userName: 'Sistema', action: 'Datos cargados', details: 'Información del panel actualizada', timestamp: new Date(Date.now() - 3600000).toISOString(), type: 'system' }
      ];
      setActivityLogs(sampleLogs);
    } catch (error) {
      console.error('Error cargando logs:', error);
    }
  };
  
  const loadSettings = async () => {
    try {
      const organizationId = getOrganizationId();
      const response = await fetch(`http://localhost:3000/api/settings?organizationId=${organizationId}`, {
        headers: {
          'Authorization': `Bearer ${getJWTFromStorage()}`
        }
      });
      
      if (response.ok) {
        const result = await response.json();
        if (result.success && result.data) {
          setSettings(prev => ({ ...prev, ...result.data }));
        }
      }
    } catch (error) {
      console.error('Error cargando configuración:', error);
    }
  };
  
  // Acciones de inquilinos
  const handleTenantAction = (tenant, action) => {
    setSelectedTenantForAction(tenant);
    setActionType(action);
    setShowDeleteConfirm(true);
  };
  
  const confirmTenantAction = async () => {
    if (!selectedTenantForAction || !actionType) return;
    
    try {
      const organizationId = getOrganizationId();
      let endpoint = `http://localhost:3000/api/tenants/${selectedTenantForAction.id}`;
      let method = 'PUT';
      let body = { organizationId };
      
      switch (actionType) {
        case 'delete':
          method = 'DELETE';
          endpoint += `?organizationId=${organizationId}&permanent=true`;
          break;
        case 'archive':
          body.status = 'archived';
          body.archivedAt = new Date().toISOString();
          break;
        case 'block':
          body.status = 'blocked';
          body.blockedAt = new Date().toISOString();
          // Guardar motivo de bloqueo (siempre, aunque esté vacío para sobrescribir valores anteriores)
          body.blockReason = blockReason.trim() || null;
          console.log('📝 Enviando bloqueo con motivo:', body.blockReason);
          break;
        case 'restore':
          body.status = 'active';
          // Limpiar motivo de bloqueo al restaurar
          body.blockReason = null;
          body.blockedAt = null;
          break;
        case 'unblock':
          body.status = 'active';
          // Limpiar motivo de bloqueo al desbloquear
          body.blockReason = null;
          body.blockedAt = null;
          break;
      }
      
      const response = await fetch(endpoint, {
        method,
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${getJWTFromStorage()}`
        },
        ...(method !== 'DELETE' && { body: JSON.stringify(body) })
      });
      
      if (response.ok) {
        await loadTenants();
        const messages = {
          delete: 'Inquilino eliminado permanentemente',
          archive: 'Inquilino archivado correctamente',
          block: 'Inquilino bloqueado',
          unblock: 'Inquilino desbloqueado',
          restore: 'Inquilino restaurado'
        };
        window.showSuccess && window.showSuccess(messages[actionType]);
      }
    } catch (error) {
      console.error('Error:', error);
      window.showError && window.showError('Error al realizar la acción');
    }
    
    setShowDeleteConfirm(false);
    setSelectedTenantForAction(null);
    setActionType(null);
    setBlockReason(''); // Limpiar motivo de bloqueo
  };
  
  const saveSettings = async () => {
    try {
      const organizationId = getOrganizationId();
      const response = await fetch(`http://localhost:3000/api/settings`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${getJWTFromStorage()}`
        },
        body: JSON.stringify({ organizationId, settings })
      });
      
      window.showSuccess && window.showSuccess('Configuración guardada correctamente');
    } catch (error) {
      console.error('Error:', error);
    }
  };
  
  const updateUserPermission = (userId, permission, value) => {
    setUsers(prev => prev.map(u => {
      if (u.id === userId) {
        return {
          ...u,
          permissions: {
            ...u.permissions,
            [permission]: value
          }
        };
      }
      return u;
    }));
  };
  
  // Acciones de usuario
  const handleUserAction = (user, action) => {
    setSelectedUserForAction(user);
    setUserActionType(action);
    if (action === 'notify') {
      setShowNotifyModal(true);
    } else {
      setShowUserActionConfirm(true);
    }
  };
  
  const confirmUserAction = async () => {
    if (!selectedUserForAction || !userActionType) return;
    
    try {
      const organizationId = getOrganizationId();
      
      if (userActionType === 'delete') {
        const response = await fetch(`http://localhost:3000/api/users/${selectedUserForAction.id}?organizationId=${organizationId}`, {
          method: 'DELETE',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${getJWTFromStorage()}`
          }
        });
        
        if (response.ok) {
          setUsers(prev => prev.filter(u => u.id !== selectedUserForAction.id));
          window.showSuccess && window.showSuccess('Usuario eliminado correctamente');
        }
      } else if (userActionType === 'report') {
        // Reportar usuario (guardar en logs o enviar al admin principal)
        const response = await fetch(`http://localhost:3000/api/users/${selectedUserForAction.id}/report`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${getJWTFromStorage()}`
          },
          body: JSON.stringify({ organizationId, reason: 'Reporte desde panel de admin' })
        });
        
        window.showSuccess && window.showSuccess('Usuario reportado correctamente');
      }
    } catch (error) {
      console.error('Error:', error);
      window.showError && window.showError('Error al realizar la acción');
    }
    
    setShowUserActionConfirm(false);
    setSelectedUserForAction(null);
    setUserActionType(null);
  };
  
  const sendNotification = async () => {
    if (!selectedUserForAction || !notifyMessage.trim()) return;
    
    try {
      const organizationId = getOrganizationId();
      const response = await fetch(`http://localhost:3000/api/users/${selectedUserForAction.id}/notify`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${getJWTFromStorage()}`
        },
        body: JSON.stringify({ organizationId, message: notifyMessage })
      });
      
      window.showSuccess && window.showSuccess('Notificación enviada correctamente');
    } catch (error) {
      console.error('Error:', error);
      window.showError && window.showError('Error al enviar notificación');
    }
    
    setShowNotifyModal(false);
    setSelectedUserForAction(null);
    setNotifyMessage('');
  };
  
  // Eliminar pago
  const confirmDeletePayment = async () => {
    if (!selectedPayment) return;
    
    console.log('🗑️ [DELETE PAYMENT] Iniciando eliminación:', selectedPayment);
    
    try {
      let globalDeleteSuccess = false;
      let deletedPaymentData = null;
      
      // 1. Intentar eliminar el pago de la lista global de pagos
      try {
        const response = await fetch(`http://localhost:3000/api/payments/${selectedPayment.id}`, {
          method: 'DELETE',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${getJWTFromStorage()}`
          }
        });
        
        const result = await response.json();
        console.log('🗑️ [DELETE PAYMENT] Respuesta del servidor:', result);
        
        if (response.ok && result.success) {
          globalDeleteSuccess = true;
          deletedPaymentData = result.deletedPayment;
          console.log('✅ Pago eliminado de lista global');
        } else {
          console.log('⚠️ Pago no encontrado en lista global:', result.error);
        }
      } catch (e) {
        console.log('⚠️ Error al intentar eliminar de lista global:', e);
      }
      
      // 2. SIEMPRE actualizar el estado del inquilino
      let tenantUpdateSuccess = false;
      const tenantId = selectedPayment.tenantId || deletedPaymentData?.tenantId;
      
      console.log('🔄 [DELETE PAYMENT] TenantId para actualizar:', tenantId);
      
      if (tenantId) {
        try {
          // Obtener el inquilino actual
          console.log('📋 [DELETE PAYMENT] Obteniendo inquilino:', tenantId);
          const tenantResponse = await fetch(`http://localhost:3000/api/tenants/${tenantId}`, {
            headers: {
              'Authorization': `Bearer ${getJWTFromStorage()}`
            }
          });
          
          console.log('📋 [DELETE PAYMENT] Respuesta GET tenant:', tenantResponse.status);
          
          if (tenantResponse.ok) {
            const tenantData = await tenantResponse.json();
            const tenant = tenantData.data;
            console.log('📋 [DELETE PAYMENT] Inquilino obtenido:', tenant?.name);
            
            // Eliminar el pago del historial del inquilino
            const updatedPaymentHistory = (tenant.paymentHistory || []).filter(p => {
              if (p.id === selectedPayment.id) return false;
              if (p.transactionId === selectedPayment.id) return false;
              if (p.amount === selectedPayment.amount) {
                const pDate = new Date(p.date || p.createdAt).getTime();
                const selectedDate = new Date(selectedPayment.createdAt || selectedPayment.date).getTime();
                if (Math.abs(pDate - selectedDate) < 86400000) return false;
              }
              return true;
            });
            
            console.log('📋 [DELETE PAYMENT] Historial antes:', tenant.paymentHistory?.length || 0);
            console.log('📋 [DELETE PAYMENT] Historial después:', updatedPaymentHistory.length);
            
            // Preparar datos de actualización
            // refundWarning = dinero que DEBES devolver al inquilino
            // pendingAmount = dinero que el inquilino TE DEBE (no aplica aquí)
            const updateData = {
              paymentHistory: updatedPaymentHistory,
              refundWarning: {
                active: true,
                amount: selectedPayment.amount,
                deletedAt: new Date().toISOString(),
                deletedBy: localStorage.getItem('userName') || 'Admin'
              }
            };
            
            console.log('🔄 [DELETE PAYMENT] Enviando PATCH con:', updateData);
            
            // Actualizar inquilino con nuevo estado
            const updateResponse = await fetch(`http://localhost:3000/api/tenants/${tenantId}`, {
              method: 'PATCH',
              headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${getJWTFromStorage()}`
              },
              body: JSON.stringify(updateData)
            });
            
            const updateResult = await updateResponse.json();
            console.log('🔄 [DELETE PAYMENT] Respuesta PATCH:', updateResponse.status, updateResult);
            
            if (updateResponse.ok && updateResult.success) {
              tenantUpdateSuccess = true;
              console.log('✅ Inquilino actualizado con refundWarning');
              
              // Actualizar lista local de inquilinos
              setTenants(prev => prev.map(t => 
                t.id === tenantId 
                  ? { 
                      ...t, 
                      refundWarning: { active: true, amount: selectedPayment.amount },
                      paymentHistory: updatedPaymentHistory
                    }
                  : t
              ));
            } else {
              console.error('❌ Error al actualizar inquilino:', updateResult.error);
            }
          } else {
            const errorData = await tenantResponse.json();
            console.error('❌ Error al obtener inquilino:', errorData);
          }
        } catch (tenantError) {
          console.error('❌ Error actualizando inquilino:', tenantError);
        }
      } else {
        console.log('⚠️ No hay tenantId disponible para actualizar');
      }
      
      // 3. Actualizar UI si al menos una operación tuvo éxito
      if (globalDeleteSuccess || tenantUpdateSuccess) {
        setPayments(prev => prev.filter(p => p.id !== selectedPayment.id));
        setSelectedPayment(null);
        setShowDeletePaymentConfirm(false);
        window.showSuccess?.('Pago eliminado. El inquilino ahora aparece como deudor.');
        window.showWarning?.(`⚠️ Recuerda devolver $${selectedPayment.amount?.toLocaleString()} a ${selectedPayment.tenantName}`);
      } else {
        window.showError?.('No se pudo eliminar el pago. Revisa la consola para más detalles.');
      }
    } catch (error) {
      console.error('Error eliminando pago:', error);
      window.showError?.('Error de conexión al eliminar pago');
    }
  };
  
  const getUserActionInfo = () => {
    const info = {
      delete: { icon: 'fa-trash-alt', color: 'red', title: 'Eliminar Usuario', message: 'Esta acción eliminará al usuario de la organización.' },
      report: { icon: 'fa-flag', color: 'orange', title: 'Reportar Usuario', message: 'Se enviará un reporte sobre este usuario.' }
    };
    return info[userActionType] || {};
  };
  
  // Formateo
  const formatDate = (dateString) => {
    if (!dateString) return 'Sin fecha';
    const date = new Date(dateString);
    if (isNaN(date.getTime())) return 'Sin fecha';
    return date.toLocaleDateString('es-MX', { day: '2-digit', month: 'short', year: 'numeric' });
  };
  
  const formatDateTime = (dateString) => {
    if (!dateString) return '';
    const date = new Date(dateString);
    if (isNaN(date.getTime())) return '';
    return date.toLocaleDateString('es-MX', { day: '2-digit', month: 'short', hour: '2-digit', minute: '2-digit' });
  };
  
  const formatMoney = (amount) => {
    return new Intl.NumberFormat('es-MX', { style: 'currency', currency: 'MXN' }).format(amount || 0);
  };
  
  const formatCreatedBy = (createdBy) => {
    if (!createdBy) return 'Sistema';
    if (createdBy.length > 15 && /^[a-zA-Z0-9]+$/.test(createdBy)) return 'Admin';
    if (createdBy.includes('@')) return createdBy.split('@')[0];
    return createdBy;
  };
  
  // Filtros
  const filteredTenants = (tenantsView === 'active' ? tenants : archivedTenants).filter(t => 
    t.name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
    t.apartment?.toLowerCase().includes(searchTerm.toLowerCase()) ||
    t.phone?.includes(searchTerm)
  );
  
  const userLogs = selectedLogUser 
    ? activityLogs.filter(log => log.userId === selectedLogUser)
    : [];
  
  const getLogIcon = (type) => {
    const icons = { auth: 'fa-sign-in-alt', payment: 'fa-dollar-sign', report: 'fa-file-alt', tenant: 'fa-user-plus', settings: 'fa-cog' };
    return icons[type] || 'fa-history';
  };
  
  const getLogColor = (type) => {
    const colors = { auth: 'text-blue-400 bg-blue-500/10', payment: 'text-green-400 bg-green-500/10', report: 'text-purple-400 bg-purple-500/10', tenant: 'text-orange-400 bg-orange-500/10', settings: 'text-gray-400 bg-gray-500/10' };
    return colors[type] || 'text-gray-400 bg-gray-500/10';
  };
  
  const getActionInfo = () => {
    const info = {
      delete: { icon: 'fa-trash-alt', color: 'red', title: 'Eliminar Permanentemente', message: 'Esta acción eliminará todos los datos y no se puede deshacer.' },
      archive: { icon: 'fa-archive', color: 'orange', title: 'Archivar Inquilino', message: 'El inquilino será movido a archivados.' },
      block: { icon: 'fa-ban', color: 'yellow', title: 'Bloquear Inquilino', message: 'El inquilino será bloqueado temporalmente.' },
      unblock: { icon: 'fa-unlock', color: 'green', title: 'Desbloquear Inquilino', message: 'El inquilino volverá a estar activo y podrá realizar pagos.' },
      restore: { icon: 'fa-undo', color: 'green', title: 'Restaurar Inquilino', message: 'El inquilino volverá a estar activo.' }
    };
    return info[actionType] || {};
  };
  
  // Componente Tooltip
  const ActionButton = ({ icon, label, color, onClick }) => (
    <div className="relative group">
      <button
        onClick={onClick}
        className={`p-2.5 rounded-lg text-gray-500 hover:text-${color}-400 hover:bg-${color}-500/10 transition-all`}
      >
        <i className={`fas ${icon}`}></i>
      </button>
      <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-gray-900 text-white text-xs rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-10">
        {label}
        <div className="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-900"></div>
      </div>
    </div>
  );
  
  if (loading) {
    return (
      <div className="space-y-6 w-full p-6">
        <div className="flex items-center gap-4 mb-8">
          <div className="skeleton-loader h-10 w-10 rounded-xl"></div>
          <div className="skeleton-loader h-8 w-1/4"></div>
        </div>
        <div className="flex gap-2 mb-8">
          {[1, 2, 3, 4, 5].map(i => (
            <div key={i} className="skeleton-loader h-12 w-32 rounded-xl"></div>
          ))}
        </div>
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
          {[1, 2, 3, 4].map(i => (
            <div key={i} className="bg-[#1b1c20] p-4 rounded-xl border border-[#252628]">
              <div className="flex items-center gap-3">
                <div className="skeleton-loader h-10 w-10 rounded-lg"></div>
                <div className="flex-1">
                  <div className="skeleton-loader h-4 w-1/2 mb-2"></div>
                  <div className="skeleton-loader h-6 w-1/3"></div>
                </div>
              </div>
            </div>
          ))}
        </div>
        <div className="mt-8 space-y-4">
          {[1, 2, 3].map(i => (
            <div key={i} className="skeleton-loader h-20 w-full rounded-xl"></div>
          ))}
        </div>
      </div>
    );
  }
  
  return (
    <div className="space-y-6">
      {/* Estilos del Switch moderno */}
      <SwitchStyles />
      
      {/* Header */}
      <div>
        <h1 className="text-2xl font-bold text-white flex items-center gap-3">
          <div className="w-10 h-10 rounded-xl bg-blue-500/20 flex items-center justify-center">
            <i className="fas fa-shield-alt text-blue-400"></i>
          </div>
          Panel de Administración
        </h1>
        <p className="text-gray-500 mt-1 ml-13">Gestiona inquilinos, usuarios y configuración</p>
      </div>
      
      {/* Tabs principales */}
      <div className="flex items-center gap-2 bg-[#1b1c20] p-2 rounded-2xl overflow-x-auto">
        {[
          { id: 'tenants', label: 'Inquilinos', icon: 'fa-users', count: tenants.length + archivedTenants.length },
          { id: 'payments', label: 'Historial de Pagos', icon: 'fa-receipt', count: payments.length },
          { id: 'refunds', label: 'Devoluciones', icon: 'fa-hand-holding-usd', count: refundRequests.filter(r => r.status === 'pending').length },
          { id: 'users', label: 'Usuarios', icon: 'fa-user-shield', count: users.length },
          { id: 'settings', label: 'Configuración', icon: 'fa-sliders-h' },
          { id: 'logs', label: 'Actividad', icon: 'fa-history' }
        ].map(tab => (
          <button
            key={tab.id}
            onClick={() => setActiveSection(tab.id)}
            className={`flex items-center gap-2 px-5 py-3 rounded-xl font-medium transition-all ${
              activeSection === tab.id
                ? 'bg-blue-500 text-white shadow-lg shadow-blue-500/25'
                : 'text-gray-400 hover:text-white hover:bg-[#252628]'
            }`}
          >
            <i className={`fas ${tab.icon}`}></i>
            <span>{tab.label}</span>
            {tab.count !== undefined && (
              <span className={`px-2 py-0.5 rounded-full text-xs ${activeSection === tab.id ? 'bg-white/20' : 'bg-[#252628]'}`}>
                {tab.count}
              </span>
            )}
          </button>
        ))}
      </div>
      
      {/* ==================== INQUILINOS ==================== */}
      {activeSection === 'tenants' && (
        <div className="bg-[#1b1c20] rounded-2xl p-6 space-y-4">
          {/* Sub-tabs: Activos / Archivados */}
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2 bg-[#252628] p-1 rounded-xl">
              <button
                onClick={() => setTenantsView('active')}
                className={`px-4 py-2 rounded-lg font-medium transition-all ${
                  tenantsView === 'active' ? 'bg-[#1b1c20] text-white' : 'text-gray-500 hover:text-white'
                }`}
              >
                <i className="fas fa-users mr-2"></i>
                Activos
                <span className="ml-2 px-2 py-0.5 rounded-full text-xs bg-green-500/20 text-green-400">{tenants.length}</span>
              </button>
              <button
                onClick={() => setTenantsView('archived')}
                className={`px-4 py-2 rounded-lg font-medium transition-all ${
                  tenantsView === 'archived' ? 'bg-[#1b1c20] text-white' : 'text-gray-500 hover:text-white'
                }`}
              >
                <i className="fas fa-archive mr-2"></i>
                Archivados
                <span className="ml-2 px-2 py-0.5 rounded-full text-xs bg-orange-500/20 text-orange-400">{archivedTenants.length}</span>
              </button>
            </div>
            
            {/* Buscador */}
            <div className="relative w-72 flex items-center">
              <i className="fas fa-search absolute left-3 text-gray-500 pointer-events-none"></i>
              <input
                type="text"
                placeholder="Buscar..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="w-full bg-[#252628] border border-gray-700/50 rounded-xl px-4 py-2.5 pl-10 text-white placeholder-gray-500 focus:outline-none focus:border-blue-500/50"
              />
            </div>
          </div>
          
          {/* Lista de inquilinos */}
          {filteredTenants.length === 0 ? (
            <div className="text-center py-16">
              <i className={`fas ${tenantsView === 'active' ? 'fa-users' : 'fa-archive'} text-5xl text-gray-700 mb-4`}></i>
              <p className="text-gray-500 text-lg">
                {tenantsView === 'active' ? 'No hay inquilinos activos' : 'No hay inquilinos archivados'}
              </p>
            </div>
          ) : (
            <div className="space-y-2">
              {filteredTenants.map(tenant => (
                <div key={tenant.id} className="bg-[#252628] rounded-xl p-4 hover:bg-[#2a2b2f] transition-all">
                  <div className="flex items-center gap-4">
                    {/* Avatar */}
                    <div className={`w-12 h-12 rounded-full flex items-center justify-center text-white font-bold text-lg flex-shrink-0 ${
                      tenantsView === 'archived' ? 'bg-gray-600' : 'bg-gradient-to-br from-blue-500 to-purple-600'
                    }`}>
                      {tenant.name?.charAt(0)?.toUpperCase() || '?'}
                    </div>
                    
                    {/* Info */}
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-3 mb-1">
                        <h3 className="text-white font-semibold truncate">{tenant.name}</h3>
                        {tenantsView === 'active' && (
                          <span className={`px-2 py-0.5 rounded-full text-xs ${
                            tenant.status === 'blocked' ? 'bg-red-500/20 text-red-400' :
                            tenant.paymentStatus === 'current' || tenant.paymentStatus === 'advanced'
                              ? 'bg-green-500/20 text-green-400'
                              : tenant.paymentStatus === 'overdue' ? 'bg-red-500/20 text-red-400'
                              : 'bg-yellow-500/20 text-yellow-400'
                          }`}>
                            {tenant.status === 'blocked' ? 'Bloqueado' :
                             tenant.paymentStatus === 'current' ? 'Al día' : 
                             tenant.paymentStatus === 'advanced' ? 'Adelantado' :
                             tenant.paymentStatus === 'overdue' ? 'Atrasado' : 'Pendiente'}
                          </span>
                        )}
                      </div>
                      <div className="flex items-center gap-4 text-sm text-gray-500">
                        <span><i className="fas fa-building mr-1"></i>{tenant.apartment || 'N/A'}</span>
                        <span><i className="fas fa-phone mr-1"></i>{tenant.phone || 'Sin tel.'}</span>
                        <span><i className="fas fa-dollar-sign mr-1"></i>{formatMoney(tenant.rentAmount)}</span>
                        <span><i className="fas fa-calendar mr-1"></i>{formatDate(tenant.endDate || tenant.contractEnd)}</span>
                      </div>
                    </div>
                    
                    {/* Info extra */}
                    <div className="hidden xl:flex items-center gap-6 text-sm px-4">
                      <div className="text-center">
                        <div className="text-gray-600 text-xs">Creado por</div>
                        <div className="text-gray-400">{formatCreatedBy(tenant.createdBy)}</div>
                      </div>
                      <div className="text-center">
                        <div className="text-gray-600 text-xs">Contrato</div>
                        {tenant.contractDocument ? (
                          <button onClick={() => window.open(tenant.contractDocument, '_blank')} className="text-blue-400 hover:text-blue-300">
                            <i className="fas fa-file-pdf mr-1"></i>Ver
                          </button>
                        ) : (
                          <span className="text-gray-600">Sin doc.</span>
                        )}
                      </div>
                    </div>
                    
                    {/* Acciones con tooltips */}
                    <div className="flex items-center gap-1">
                      {tenantsView === 'active' ? (
                        <>
                          <ActionButton icon="fa-archive" label="Archivar" color="orange" onClick={() => handleTenantAction(tenant, 'archive')} />
                          {tenant.status === 'blocked' ? (
                            <ActionButton icon="fa-unlock" label="Desbloquear" color="green" onClick={() => handleTenantAction(tenant, 'unblock')} />
                          ) : (
                            <ActionButton icon="fa-ban" label="Bloquear" color="yellow" onClick={() => handleTenantAction(tenant, 'block')} />
                          )}
                          <ActionButton icon="fa-trash-alt" label="Eliminar" color="red" onClick={() => handleTenantAction(tenant, 'delete')} />
                        </>
                      ) : (
                        <>
                          <ActionButton icon="fa-undo" label="Restaurar" color="green" onClick={() => handleTenantAction(tenant, 'restore')} />
                          <ActionButton icon="fa-trash-alt" label="Eliminar definitivamente" color="red" onClick={() => handleTenantAction(tenant, 'delete')} />
                        </>
                      )}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      )}
      
      {/* ==================== HISTORIAL DE PAGOS ==================== */}
      {activeSection === 'payments' && (
        <div className="space-y-4">
          {/* Header con filtros */}
          <div className="bg-[#1b1c20] rounded-2xl p-6">
            <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
              <div>
                <h2 className="text-lg font-semibold text-white flex items-center gap-2">
                  <i className="fas fa-receipt text-green-400"></i>
                  Historial de Pagos
                </h2>
                <p className="text-gray-500 text-sm mt-1">Registro completo de todos los pagos realizados</p>
              </div>
              
              <div className="flex items-center gap-3">
                {/* Filtros */}
                <div className="flex items-center gap-1 bg-[#252628] p-1 rounded-xl">
                  {[
                    { id: 'all', label: 'Todos' },
                    { id: 'completed', label: 'Completados' },
                    { id: 'pending', label: 'Pendientes' },
                    { id: 'cancelled', label: 'Cancelados' }
                  ].map(filter => (
                    <button
                      key={filter.id}
                      onClick={() => setPaymentsFilter(filter.id)}
                      className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-all ${
                        paymentsFilter === filter.id
                          ? 'bg-[#1b1c20] text-white'
                          : 'text-gray-500 hover:text-white'
                      }`}
                    >
                      {filter.label}
                    </button>
                  ))}
                </div>
                
                {/* Buscador */}
                <div className="relative w-64 flex items-center">
                  <i className="fas fa-search absolute left-3 text-gray-500 pointer-events-none"></i>
                  <input
                    type="text"
                    placeholder="Buscar pago..."
                    value={paymentsSearchTerm}
                    onChange={(e) => setPaymentsSearchTerm(e.target.value)}
                    className="w-full bg-[#252628] border border-gray-700/50 rounded-xl px-4 py-2.5 pl-10 text-white placeholder-gray-500 focus:outline-none focus:border-blue-500/50"
                  />
                </div>
                
              </div>
            </div>
          </div>
          
          {/* Grid de pagos */}
          {payments.length === 0 ? (
            <div className="bg-[#1b1c20] rounded-2xl p-16 text-center">
              <div className="w-20 h-20 mx-auto mb-4 rounded-full bg-gray-800 flex items-center justify-center">
                <i className="fas fa-receipt text-4xl text-gray-600"></i>
              </div>
              <h3 className="text-xl font-semibold text-white mb-2">Sin pagos registrados</h3>
              <p className="text-gray-400">Aún no hay pagos en el historial. Los pagos se registran desde la sección de Inquilinos.</p>
            </div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              {payments
                .filter(payment => {
                  // Filtro por estado
                  if (paymentsFilter !== 'all' && payment.status !== paymentsFilter) return false;
                  // Filtro por búsqueda
                  if (paymentsSearchTerm) {
                    const search = paymentsSearchTerm.toLowerCase();
                    return (
                      payment.tenantName?.toLowerCase().includes(search) ||
                      payment.apartmentName?.toLowerCase().includes(search) ||
                      payment.notes?.toLowerCase().includes(search) ||
                      payment.id?.toLowerCase().includes(search)
                    );
                  }
                  return true;
                })
                .sort((a, b) => new Date(b.createdAt || b.date) - new Date(a.createdAt || a.date))
                .map(payment => (
                  <div 
                    key={payment.id} 
                    onClick={() => setSelectedPayment(payment)}
                    className="bg-[#1b1c20] rounded-2xl p-5 cursor-pointer hover:bg-[#252628] transition-all border border-transparent hover:border-green-500/30 group"
                  >
                    {/* Header del card */}
                    <div className="flex items-start justify-between mb-4">
                      <div className="flex items-center gap-3">
                        <div className={`w-12 h-12 rounded-xl flex items-center justify-center ${
                          payment.status === 'completed' ? 'bg-green-500/20' :
                          payment.status === 'pending' ? 'bg-yellow-500/20' :
                          'bg-red-500/20'
                        }`}>
                          <i className={`fas ${
                            payment.status === 'completed' ? 'fa-check-circle text-green-400' :
                            payment.status === 'pending' ? 'fa-clock text-yellow-400' :
                            'fa-times-circle text-red-400'
                          } text-xl`}></i>
                        </div>
                        <div>
                          <p className="text-white font-semibold text-lg">
                            ${(payment.amount || 0).toLocaleString('es-MX')}
                          </p>
                          <p className={`text-xs font-medium ${
                            payment.status === 'completed' ? 'text-green-400' :
                            payment.status === 'pending' ? 'text-yellow-400' :
                            'text-red-400'
                          }`}>
                            {payment.status === 'completed' ? 'Completado' :
                             payment.status === 'pending' ? 'Pendiente' : 'Cancelado'}
                          </p>
                        </div>
                      </div>
                      
                      {/* Fecha */}
                      <div className="text-right">
                        <p className="text-gray-500 text-xs">
                          {new Date(payment.createdAt || payment.date).toLocaleDateString('es-MX', { day: '2-digit', month: 'short' })}
                        </p>
                        <p className="text-gray-600 text-xs">
                          {new Date(payment.createdAt || payment.date).getFullYear()}
                        </p>
                      </div>
                    </div>
                    
                    {/* Info del inquilino y departamento */}
                    <div className="space-y-2 mb-4">
                      <div className="flex items-center gap-2 text-sm">
                        <i className="fas fa-user text-gray-600 w-4"></i>
                        <span className="text-gray-400">{payment.tenantName || 'Sin asignar'}</span>
                      </div>
                      <div className="flex items-center gap-2 text-sm">
                        <i className="fas fa-building text-gray-600 w-4"></i>
                        <span className="text-gray-400">{payment.apartmentName || 'Sin departamento'}</span>
                      </div>
                    </div>
                    
                    {/* Footer con método y concepto */}
                    <div className="flex items-center justify-between pt-3 border-t border-gray-800">
                      <div className="flex items-center gap-2">
                        <span className={`px-2 py-1 rounded-lg text-xs ${
                          ['cash', 'efectivo', 'Efectivo'].includes(payment.paymentMethod || payment.method) ? 'bg-green-500/20 text-green-400' :
                          ['transfer', 'transferencia', 'Transferencia'].includes(payment.paymentMethod || payment.method) ? 'bg-blue-500/20 text-blue-400' :
                          ['card', 'tarjeta', 'Tarjeta'].includes(payment.paymentMethod || payment.method) ? 'bg-purple-500/20 text-purple-400' :
                          'bg-green-500/20 text-green-400'
                        }`}>
                          <i className={`fas ${
                            ['cash', 'efectivo', 'Efectivo'].includes(payment.paymentMethod || payment.method) ? 'fa-money-bill' :
                            ['transfer', 'transferencia', 'Transferencia'].includes(payment.paymentMethod || payment.method) ? 'fa-university' :
                            ['card', 'tarjeta', 'Tarjeta'].includes(payment.paymentMethod || payment.method) ? 'fa-credit-card' :
                            'fa-money-bill'
                          } mr-1`}></i>
                          {['cash', 'efectivo', 'Efectivo'].includes(payment.paymentMethod || payment.method) ? 'Efectivo' :
                           ['transfer', 'transferencia', 'Transferencia'].includes(payment.paymentMethod || payment.method) ? 'Transferencia' :
                           ['card', 'tarjeta', 'Tarjeta'].includes(payment.paymentMethod || payment.method) ? 'Tarjeta' : 'Efectivo'}
                        </span>
                        <span className="text-xs text-gray-600">
                          {payment.concept === 'rent' ? 'Renta' :
                           payment.concept === 'deposit' ? 'Depósito' :
                           payment.concept === 'maintenance' ? 'Mantenimiento' :
                           payment.concept === 'utilities' ? 'Servicios' : 'Otro'}
                        </span>
                      </div>
                      
                      {payment.receiptUrl && (
                        <div className="text-blue-400 text-xs">
                          <i className="fas fa-file-pdf"></i>
                        </div>
                      )}
                    </div>
                    
                    {/* Indicador de ver más */}
                    <div className="mt-3 text-center opacity-0 group-hover:opacity-100 transition-opacity">
                      <span className="text-xs text-gray-500">Click para ver detalles</span>
                    </div>
                  </div>
                ))}
            </div>
          )}
        </div>
      )}
      
      {/* Modal de detalle/edición de pago */}
      {selectedPayment && (
        <div className="fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
          <div className="bg-[#1b1c20] rounded-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
            {/* Header del modal */}
            <div className="sticky top-0 bg-[#1b1c20] p-6 border-b border-gray-800 flex items-center justify-between">
              <div className="flex items-center gap-4">
                <div className={`w-14 h-14 rounded-xl flex items-center justify-center ${
                  selectedPayment.status === 'completed' ? 'bg-green-500/20' :
                  selectedPayment.status === 'pending' ? 'bg-yellow-500/20' :
                  'bg-red-500/20'
                }`}>
                  <i className={`fas fa-receipt text-2xl ${
                    selectedPayment.status === 'completed' ? 'text-green-400' :
                    selectedPayment.status === 'pending' ? 'text-yellow-400' :
                    'text-red-400'
                  }`}></i>
                </div>
                <div>
                  <h2 className="text-xl font-bold text-white">
                    {selectedPayment.id ? 'Detalle del Pago' : 'Registrar Nuevo Pago'}
                  </h2>
                  {selectedPayment.id && (
                    <p className="text-gray-500 text-sm">ID: {selectedPayment.id}</p>
                  )}
                </div>
              </div>
              <button
                onClick={() => setSelectedPayment(null)}
                className="p-2 hover:bg-gray-800 rounded-lg text-gray-400 hover:text-white transition-all"
              >
                <i className="fas fa-times text-xl"></i>
              </button>
            </div>
            
            {/* Contenido del modal */}
            <div className="p-6 space-y-6">
              {/* Monto grande */}
              <div className="text-center py-4">
                {selectedPayment.id ? (
                  <p className="text-4xl font-bold text-white">
                    ${(selectedPayment.amount || 0).toLocaleString('es-MX')}
                  </p>
                ) : (
                  <div className="relative max-w-xs mx-auto">
                    <span className="absolute left-4 top-1/2 -translate-y-1/2 text-3xl text-gray-500">$</span>
                    <input
                      type="number"
                      value={selectedPayment.amount}
                      onChange={(e) => setSelectedPayment(prev => ({ ...prev, amount: e.target.value }))}
                      className="w-full bg-[#252628] border border-gray-700/50 rounded-xl px-4 py-4 pl-12 text-3xl font-bold text-white text-center placeholder-gray-600 focus:outline-none focus:border-green-500/50"
                      placeholder="0"
                    />
                  </div>
                )}
                <div className={`mt-2 inline-flex items-center gap-2 px-3 py-1 rounded-full text-sm ${
                  selectedPayment.status === 'completed' ? 'bg-green-500/20 text-green-400' :
                  selectedPayment.status === 'pending' ? 'bg-yellow-500/20 text-yellow-400' :
                  'bg-red-500/20 text-red-400'
                }`}>
                  <i className={`fas ${
                    selectedPayment.status === 'completed' ? 'fa-check-circle' :
                    selectedPayment.status === 'pending' ? 'fa-clock' :
                    'fa-times-circle'
                  }`}></i>
                  {selectedPayment.status === 'completed' ? 'Completado' :
                   selectedPayment.status === 'pending' ? 'Pendiente' : 'Cancelado'}
                </div>
              </div>
              
              {/* Grid de información */}
              <div className="grid grid-cols-2 gap-4">
                {/* Inquilino */}
                <div className="bg-[#252628] rounded-xl p-4">
                  <label className="text-gray-500 text-xs uppercase tracking-wider block mb-2">Inquilino</label>
                  {selectedPayment.id ? (
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 rounded-full bg-blue-500/20 flex items-center justify-center">
                        <i className="fas fa-user text-blue-400"></i>
                      </div>
                      <span className="text-white font-medium">{selectedPayment.tenantName || 'No asignado'}</span>
                    </div>
                  ) : (
                    <select
                      value={selectedPayment.tenantId}
                      onChange={(e) => {
                        const tenant = tenants.find(t => t.id === e.target.value);
                        setSelectedPayment(prev => ({
                          ...prev,
                          tenantId: e.target.value,
                          tenantName: tenant?.name || '',
                          apartmentId: tenant?.apartmentId || '',
                          apartmentName: tenant?.apartment || ''
                        }));
                      }}
                      className="w-full bg-[#1b1c20] border border-gray-700/50 rounded-lg px-3 py-2.5 text-white focus:outline-none focus:border-green-500/50"
                    >
                      <option value="">Seleccionar inquilino...</option>
                      {tenants.map(tenant => (
                        <option key={tenant.id} value={tenant.id}>{tenant.name} - {tenant.apartment}</option>
                      ))}
                    </select>
                  )}
                </div>
                
                {/* Departamento */}
                <div className="bg-[#252628] rounded-xl p-4">
                  <label className="text-gray-500 text-xs uppercase tracking-wider block mb-2">Departamento</label>
                  {selectedPayment.id ? (
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 rounded-full bg-purple-500/20 flex items-center justify-center">
                        <i className="fas fa-building text-purple-400"></i>
                      </div>
                      <span className="text-white font-medium">{selectedPayment.apartmentName || 'No asignado'}</span>
                    </div>
                  ) : (
                    <select
                      value={selectedPayment.apartmentId}
                      onChange={(e) => {
                        const apt = apartments.find(a => a.id === e.target.value);
                        setSelectedPayment(prev => ({
                          ...prev,
                          apartmentId: e.target.value,
                          apartmentName: apt?.name || ''
                        }));
                      }}
                      className="w-full bg-[#1b1c20] border border-gray-700/50 rounded-lg px-3 py-2.5 text-white focus:outline-none focus:border-green-500/50"
                    >
                      <option value="">Seleccionar departamento...</option>
                      {apartments.map(apt => (
                        <option key={apt.id} value={apt.id}>{apt.name}</option>
                      ))}
                    </select>
                  )}
                </div>
                
                {/* Fecha */}
                <div className="bg-[#252628] rounded-xl p-4">
                  <label className="text-gray-500 text-xs uppercase tracking-wider block mb-2">Fecha del Pago</label>
                  {selectedPayment.id ? (
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 rounded-full bg-orange-500/20 flex items-center justify-center">
                        <i className="fas fa-calendar text-orange-400"></i>
                      </div>
                      <span className="text-white font-medium">
                        {new Date(selectedPayment.createdAt || selectedPayment.date).toLocaleDateString('es-MX', { 
                          weekday: 'long', 
                          day: 'numeric', 
                          month: 'long', 
                          year: 'numeric' 
                        })}
                      </span>
                    </div>
                  ) : (
                    <input
                      type="date"
                      value={selectedPayment.date || new Date().toISOString().split('T')[0]}
                      onChange={(e) => setSelectedPayment(prev => ({ ...prev, date: e.target.value }))}
                      className="w-full bg-[#1b1c20] border border-gray-700/50 rounded-lg px-3 py-2.5 text-white focus:outline-none focus:border-green-500/50"
                    />
                  )}
                </div>
                
                {/* Método de pago */}
                <div className="bg-[#252628] rounded-xl p-4">
                  <label className="text-gray-500 text-xs uppercase tracking-wider block mb-2">Método de Pago</label>
                  {selectedPayment.id ? (
                    <div className="flex items-center gap-3">
                      <div className={`w-10 h-10 rounded-full flex items-center justify-center ${
                        ['cash', 'efectivo', 'Efectivo'].includes(selectedPayment.paymentMethod || selectedPayment.method) ? 'bg-green-500/20' :
                        ['transfer', 'transferencia', 'Transferencia'].includes(selectedPayment.paymentMethod || selectedPayment.method) ? 'bg-blue-500/20' :
                        'bg-green-500/20'
                      }`}>
                        <i className={`fas ${
                          ['cash', 'efectivo', 'Efectivo'].includes(selectedPayment.paymentMethod || selectedPayment.method) ? 'fa-money-bill text-green-400' :
                          ['transfer', 'transferencia', 'Transferencia'].includes(selectedPayment.paymentMethod || selectedPayment.method) ? 'fa-university text-blue-400' :
                          'fa-money-bill text-green-400'
                        }`}></i>
                      </div>
                      <span className="text-white font-medium">
                        {['cash', 'efectivo', 'Efectivo'].includes(selectedPayment.paymentMethod || selectedPayment.method) ? 'Efectivo' :
                         ['transfer', 'transferencia', 'Transferencia'].includes(selectedPayment.paymentMethod || selectedPayment.method) ? 'Transferencia Bancaria' :
                         ['card', 'tarjeta', 'Tarjeta'].includes(selectedPayment.paymentMethod || selectedPayment.method) ? 'Tarjeta' : 'Efectivo'}
                      </span>
                    </div>
                  ) : (
                    <select
                      value={selectedPayment.method || 'transfer'}
                      onChange={(e) => setSelectedPayment(prev => ({ ...prev, method: e.target.value }))}
                      className="w-full bg-[#1b1c20] border border-gray-700/50 rounded-lg px-3 py-2.5 text-white focus:outline-none focus:border-green-500/50"
                    >
                      <option value="transfer">Transferencia Bancaria</option>
                      <option value="cash">Efectivo</option>
                      <option value="card">Tarjeta</option>
                      <option value="other">Otro</option>
                    </select>
                  )}
                </div>
                
                {/* Concepto */}
                <div className="bg-[#252628] rounded-xl p-4">
                  <label className="text-gray-500 text-xs uppercase tracking-wider block mb-2">Concepto</label>
                  {selectedPayment.id ? (
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 rounded-full bg-cyan-500/20 flex items-center justify-center">
                        <i className="fas fa-tag text-cyan-400"></i>
                      </div>
                      <span className="text-white font-medium">
                        {selectedPayment.concept === 'rent' ? 'Pago de Renta' :
                         selectedPayment.concept === 'deposit' ? 'Depósito' :
                         selectedPayment.concept === 'maintenance' ? 'Mantenimiento' :
                         selectedPayment.concept === 'utilities' ? 'Servicios' : 'Otro'}
                      </span>
                    </div>
                  ) : (
                    <select
                      value={selectedPayment.concept || 'rent'}
                      onChange={(e) => setSelectedPayment(prev => ({ ...prev, concept: e.target.value }))}
                      className="w-full bg-[#1b1c20] border border-gray-700/50 rounded-lg px-3 py-2.5 text-white focus:outline-none focus:border-green-500/50"
                    >
                      <option value="rent">Pago de Renta</option>
                      <option value="deposit">Depósito</option>
                      <option value="maintenance">Mantenimiento</option>
                      <option value="utilities">Servicios</option>
                      <option value="other">Otro</option>
                    </select>
                  )}
                </div>
                
                {/* Estado (solo para edición/nuevo) */}
                {!selectedPayment.id && (
                  <div className="bg-[#252628] rounded-xl p-4">
                    <label className="text-gray-500 text-xs uppercase tracking-wider block mb-2">Estado</label>
                    <select
                      value={selectedPayment.status || 'completed'}
                      onChange={(e) => setSelectedPayment(prev => ({ ...prev, status: e.target.value }))}
                      className="w-full bg-[#1b1c20] border border-gray-700/50 rounded-lg px-3 py-2.5 text-white focus:outline-none focus:border-green-500/50"
                    >
                      <option value="completed">Completado</option>
                      <option value="pending">Pendiente</option>
                      <option value="cancelled">Cancelado</option>
                    </select>
                  </div>
                )}
              </div>
              
              {/* Recibo */}
              {selectedPayment.receiptUrl && (
                <div className="bg-[#252628] rounded-xl p-4">
                  <label className="text-gray-500 text-xs uppercase tracking-wider block mb-3">Recibo / Comprobante</label>
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <div className="w-12 h-12 rounded-xl bg-red-500/20 flex items-center justify-center">
                        <i className="fas fa-file-pdf text-red-400 text-xl"></i>
                      </div>
                      <div>
                        <p className="text-white font-medium">Recibo de Pago</p>
                        <p className="text-gray-500 text-sm">PDF disponible</p>
                      </div>
                    </div>
                    <div className="flex items-center gap-2">
                      <button
                        onClick={() => window.open(selectedPayment.receiptUrl, '_blank')}
                        className="px-4 py-2 bg-blue-500/20 text-blue-400 rounded-lg hover:bg-blue-500/30 transition-all flex items-center gap-2"
                      >
                        <i className="fas fa-eye"></i>
                        Ver
                      </button>
                      <button
                        onClick={() => {
                          const link = document.createElement('a');
                          link.href = selectedPayment.receiptUrl;
                          link.download = `recibo-${selectedPayment.id}.pdf`;
                          link.click();
                        }}
                        className="px-4 py-2 bg-green-500/20 text-green-400 rounded-lg hover:bg-green-500/30 transition-all flex items-center gap-2"
                      >
                        <i className="fas fa-download"></i>
                        Descargar
                      </button>
                    </div>
                  </div>
                </div>
              )}
              
              {/* Subir recibo (solo nuevo) */}
              {!selectedPayment.id && (
                <div className="bg-[#252628] rounded-xl p-4">
                  <label className="text-gray-500 text-xs uppercase tracking-wider block mb-3">Adjuntar Recibo (opcional)</label>
                  <label className="flex items-center justify-center gap-3 p-6 border-2 border-dashed border-gray-700 rounded-xl cursor-pointer hover:border-green-500/50 transition-all">
                    <i className="fas fa-cloud-upload-alt text-2xl text-gray-500"></i>
                    <span className="text-gray-400">Click para subir PDF o imagen</span>
                    <input type="file" accept=".pdf,image/*" className="hidden" />
                  </label>
                </div>
              )}
              
              {/* Notas */}
              <div className="bg-[#252628] rounded-xl p-4">
                <label className="text-gray-500 text-xs uppercase tracking-wider block mb-2">Notas</label>
                {selectedPayment.id ? (
                  <p className="text-gray-300">{selectedPayment.notes || 'Sin notas adicionales'}</p>
                ) : (
                  <textarea
                    value={selectedPayment.notes}
                    onChange={(e) => setSelectedPayment(prev => ({ ...prev, notes: e.target.value }))}
                    className="w-full bg-[#1b1c20] border border-gray-700/50 rounded-lg px-3 py-2.5 text-white min-h-[100px] focus:outline-none focus:border-green-500/50 resize-none"
                    placeholder="Agregar notas o comentarios sobre este pago..."
                  />
                )}
              </div>
              
              {/* Info de creación (solo para pagos existentes) */}
              {selectedPayment.id && selectedPayment.createdBy && (
                <div className="flex items-center justify-between text-sm text-gray-500 pt-4 border-t border-gray-800">
                  <span>
                    <i className="fas fa-user-edit mr-2"></i>
                    Registrado por: {selectedPayment.createdBy}
                  </span>
                  {selectedPayment.createdAt && (
                    <span>
                      {new Date(selectedPayment.createdAt).toLocaleString('es-MX')}
                    </span>
                  )}
                </div>
              )}
            </div>
            
            {/* Footer con acciones */}
            <div className="sticky bottom-0 bg-[#1b1c20] p-6 border-t border-gray-800 flex items-center justify-between">
              <button
                onClick={() => setSelectedPayment(null)}
                className="px-6 py-3 text-gray-400 hover:text-white transition-all"
              >
                Cerrar
              </button>
              
              <div className="flex items-center gap-3">
                <button
                  onClick={() => setShowDeletePaymentConfirm(true)}
                  className="px-4 py-3 bg-red-500/20 text-red-400 rounded-xl hover:bg-red-500/30 transition-all flex items-center gap-2"
                >
                  <i className="fas fa-trash"></i>
                  Eliminar
                </button>
                <button
                  onClick={() => setShowReceiptModal(true)}
                  className="px-6 py-3 bg-gradient-to-r from-green-500 to-emerald-600 text-white rounded-xl hover:from-green-600 hover:to-emerald-700 transition-all flex items-center gap-2 shadow-lg shadow-green-500/20"
                >
                  <i className="fas fa-receipt"></i>
                  Ver Recibo
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
      
      {/* ==================== DEVOLUCIONES ==================== */}
      {activeSection === 'refunds' && (
        <div className="bg-[#1b1c20] rounded-2xl p-6 space-y-6">
          <div className="flex items-center justify-between">
            <div>
              <h2 className="text-lg font-semibold text-white">Solicitudes de Devolución</h2>
              <p className="text-gray-500 text-sm">Gestiona las solicitudes de devolución de los usuarios</p>
            </div>
            <div className="flex items-center gap-4">
              {/* Filtros */}
              <div className="flex items-center gap-2 bg-[#252628] p-1 rounded-xl">
                {['all', 'pending', 'approved', 'rejected'].map(filter => (
                  <button
                    key={filter}
                    onClick={() => setRefundRequestsSearchTerm(filter === 'all' ? '' : filter)}
                    className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-all ${
                      (refundRequestsSearchTerm === filter || (filter === 'all' && !refundRequestsSearchTerm))
                        ? 'bg-[#1b1c20] text-white'
                        : 'text-gray-500 hover:text-white'
                    }`}
                  >
                    {filter === 'all' && 'Todas'}
                    {filter === 'pending' && 'Pendientes'}
                    {filter === 'approved' && 'Aprobadas'}
                    {filter === 'rejected' && 'Rechazadas'}
                  </button>
                ))}
              </div>
            </div>
          </div>

          {/* Lista de solicitudes */}
          <div className="space-y-3">
            {refundRequests
              .filter(request => {
                if (!refundRequestsSearchTerm || refundRequestsSearchTerm === 'all') return true;
                return request.status === refundRequestsSearchTerm;
              })
              .sort((a, b) => {
                // Pendientes primero
                if (a.status === 'pending' && b.status !== 'pending') return -1;
                if (b.status === 'pending' && a.status !== 'pending') return 1;
                // Luego por fecha más reciente
                return new Date(b.requestedAt) - new Date(a.requestedAt);
              })
              .length === 0 ? (
              <div className="text-center py-12">
                <i className="fas fa-hand-holding-usd text-4xl text-gray-600 mb-4"></i>
                <p className="text-gray-500">No hay solicitudes de devolución</p>
              </div>
            ) : (
              refundRequests
                .filter(request => {
                  if (!refundRequestsSearchTerm || refundRequestsSearchTerm === 'all') return true;
                  return request.status === refundRequestsSearchTerm;
                })
                .sort((a, b) => {
                  if (a.status === 'pending' && b.status !== 'pending') return -1;
                  if (b.status === 'pending' && a.status !== 'pending') return 1;
                  return new Date(b.requestedAt) - new Date(a.requestedAt);
                })
                .map(request => (
                  <div 
                    key={request.id}
                    className={`bg-[#252628] rounded-xl p-4 border-l-4 transition-all hover:bg-[#2a2b2e] ${
                      request.status === 'pending' ? 'border-orange-500' :
                      request.status === 'approved' ? 'border-green-500' : 'border-red-500'
                    }`}
                  >
                    <div className="flex items-start justify-between">
                      <div className="flex items-start gap-4">
                        <div className={`w-10 h-10 rounded-full flex items-center justify-center ${
                          request.status === 'pending' ? 'bg-orange-500/20' :
                          request.status === 'approved' ? 'bg-green-500/20' : 'bg-red-500/20'
                        }`}>
                          <i className={`fas ${
                            request.status === 'pending' ? 'fa-clock text-orange-400' :
                            request.status === 'approved' ? 'fa-check text-green-400' : 'fa-times text-red-400'
                          }`}></i>
                        </div>
                        <div className="space-y-1">
                          <div className="flex items-center gap-2">
                            <span className="text-white font-medium">{request.tenantName}</span>
                            <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${
                              request.status === 'pending' ? 'bg-orange-500/20 text-orange-400' :
                              request.status === 'approved' ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400'
                            }`}>
                              {request.status === 'pending' ? 'Pendiente' :
                               request.status === 'approved' ? 'Aprobada' : 'Rechazada'}
                            </span>
                          </div>
                          <p className="text-gray-400 text-sm">
                            <i className="fas fa-building mr-1"></i>
                            Departamento: {request.apartmentNumber}
                          </p>
                          <p className="text-gray-400 text-sm">
                            <i className="fas fa-comment mr-1"></i>
                            Razón: {request.reason}
                          </p>
                          <div className="flex items-center gap-4 text-xs text-gray-500">
                            <span>
                              <i className="fas fa-user mr-1"></i>
                              Solicitado por: {request.requestedBy}
                            </span>
                            <span>
                              <i className="fas fa-calendar mr-1"></i>
                              {new Date(request.requestedAt).toLocaleDateString('es-MX')}
                            </span>
                            <span>
                              <i className="fas fa-money-bill mr-1"></i>
                              Fecha pago: {request.paymentDate ? new Date(request.paymentDate).toLocaleDateString('es-MX') : 'N/A'}
                            </span>
                          </div>
                          {request.status === 'rejected' && request.rejectReason && (
                            <p className="text-red-400 text-xs mt-2">
                              <i className="fas fa-info-circle mr-1"></i>
                              Motivo rechazo: {request.rejectReason}
                            </p>
                          )}
                        </div>
                      </div>
                      <div className="flex items-center gap-2">
                        <span className="text-green-400 font-bold text-lg">
                          ${(request.amount || 0).toLocaleString()}
                        </span>
                        {request.status === 'pending' && (
                          <div className="flex items-center gap-2 ml-4">
                            <button
                              onClick={() => {
                                setSelectedRefundRequest(request);
                                setRefundActionType('approve');
                                setShowRefundActionModal(true);
                              }}
                              className="px-3 py-1.5 bg-green-500/20 text-green-400 rounded-lg hover:bg-green-500/30 transition-all text-sm"
                            >
                              <i className="fas fa-check mr-1"></i>
                              Aprobar
                            </button>
                            <button
                              onClick={() => {
                                setSelectedRefundRequest(request);
                                setRefundActionType('reject');
                                setShowRefundActionModal(true);
                              }}
                              className="px-3 py-1.5 bg-red-500/20 text-red-400 rounded-lg hover:bg-red-500/30 transition-all text-sm"
                            >
                              <i className="fas fa-times mr-1"></i>
                              Rechazar
                            </button>
                          </div>
                        )}
                      </div>
                    </div>
                  </div>
                ))
            )}
          </div>
        </div>
      )}

      {/* Modal de acción para solicitud de devolución */}
      {showRefundActionModal && selectedRefundRequest && (
        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50">
          <div className="bg-[#1b1c20] rounded-xl p-6 w-full max-w-md mx-4">
            <h3 className={`text-xl font-semibold mb-4 ${
              refundActionType === 'approve' ? 'text-green-400' : 'text-red-400'
            }`}>
              <i className={`fas ${refundActionType === 'approve' ? 'fa-check-circle' : 'fa-times-circle'} mr-2`}></i>
              {refundActionType === 'approve' ? 'Aprobar Solicitud' : 'Rechazar Solicitud'}
            </h3>
            
            <div className="space-y-4">
              <div className="bg-[#252628] rounded-lg p-3 space-y-2">
                <div className="flex justify-between">
                  <span className="text-gray-400">Inquilino:</span>
                  <span className="text-white">{selectedRefundRequest.tenantName}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-400">Monto:</span>
                  <span className="text-green-400 font-bold">${selectedRefundRequest.amount?.toLocaleString()}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-400">Razón:</span>
                  <span className="text-white text-sm">{selectedRefundRequest.reason}</span>
                </div>
              </div>

              {refundActionType === 'reject' && (
                <div>
                  <label className="block text-gray-400 text-sm mb-2">Motivo del rechazo</label>
                  <textarea
                    value={refundRejectReason}
                    onChange={(e) => setRefundRejectReason(e.target.value)}
                    placeholder="Explica por qué rechazas esta solicitud..."
                    className="w-full bg-[#252628] text-white rounded-lg px-4 py-3 border border-gray-700 focus:border-red-500 focus:outline-none resize-none"
                    rows={3}
                  />
                </div>
              )}

              {refundActionType === 'approve' && (
                <p className="text-gray-400 text-sm">
                  Al aprobar esta solicitud, confirmas que procederás con la devolución del dinero al inquilino.
                </p>
              )}

              <div className="flex gap-4 pt-2">
                <button
                  onClick={() => {
                    setShowRefundActionModal(false);
                    setSelectedRefundRequest(null);
                    setRefundRejectReason('');
                  }}
                  className="flex-1 px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-lg font-medium transition-colors"
                >
                  Cancelar
                </button>
                <button
                  onClick={() => {
                    if (refundActionType === 'approve') {
                      approveRefundRequest(selectedRefundRequest);
                    } else {
                      rejectRefundRequest(selectedRefundRequest);
                    }
                  }}
                  className={`flex-1 px-4 py-2 rounded-lg font-medium transition-colors ${
                    refundActionType === 'approve' 
                      ? 'bg-green-600 hover:bg-green-700 text-white'
                      : 'bg-red-600 hover:bg-red-700 text-white'
                  }`}
                >
                  <i className={`fas ${refundActionType === 'approve' ? 'fa-check' : 'fa-times'} mr-2`}></i>
                  {refundActionType === 'approve' ? 'Aprobar' : 'Rechazar'}
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
      
      {/* ==================== USUARIOS ==================== */}
      {activeSection === 'users' && (
        <div className="bg-[#1b1c20] rounded-2xl p-6 space-y-6">
          <div className="flex items-center justify-between">
            <div>
              <h2 className="text-lg font-semibold text-white">Usuarios del Sistema</h2>
              <p className="text-gray-500 text-sm">Gestiona los permisos de acceso de cada usuario</p>
            </div>
            <button
              onClick={() => { setSelectedUser(null); setShowUserModal(true); }}
              className="px-4 py-2 bg-blue-500 text-white rounded-xl hover:bg-blue-600 transition-all flex items-center gap-2"
            >
              <i className="fas fa-user-plus"></i>
              Invitar Usuario
            </button>
          </div>
          
          {users.map(user => (
            <div key={user.id} className="bg-[#252628] rounded-xl p-5">
              <div className="flex items-start gap-4">
                {/* Avatar y info */}
                <div className="w-14 h-14 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white font-bold text-xl flex-shrink-0">
                  {user.name?.charAt(0)?.toUpperCase() || '?'}
                </div>
                <div className="flex-1">
                  <div className="flex items-center gap-3 mb-1">
                    <h3 className="text-white font-semibold text-lg">{user.name}</h3>
                    <span className={`px-2 py-1 rounded-lg text-xs font-medium ${
                      user.role === 'admin' ? 'bg-purple-500/20 text-purple-400' : 'bg-gray-500/20 text-gray-400'
                    }`}>
                      {user.role === 'admin' ? 'Administrador' : 'Usuario'}
                    </span>
                  </div>
                  <p className="text-gray-500 text-sm">{user.email}</p>
                  {user.lastLogin && (
                    <p className="text-gray-600 text-xs mt-1">Último acceso: {formatDateTime(user.lastLogin)}</p>
                  )}
                </div>
                
                {/* Acciones de usuario */}
                <div className="flex items-center gap-1">
                  <ActionButton icon="fa-bell" label="Notificar" color="blue" onClick={() => handleUserAction(user, 'notify')} />
                  <ActionButton icon="fa-flag" label="Reportar" color="orange" onClick={() => handleUserAction(user, 'report')} />
                  <ActionButton icon="fa-trash-alt" label="Eliminar" color="red" onClick={() => handleUserAction(user, 'delete')} />
                </div>
              </div>
              
              {/* Permisos con checkboxes */}
              <div className="mt-5 pt-4 border-t border-gray-700/30">
                <p className="text-gray-400 text-sm mb-3">Permisos de acceso:</p>
                <div className="flex flex-wrap gap-3">
                  {[
                    { id: 'dashboard', label: 'Dashboard', icon: 'fa-home' },
                    { id: 'tenants', label: 'Inquilinos', icon: 'fa-users' },
                    { id: 'reports', label: 'Reportes', icon: 'fa-file-alt' },
                    { id: 'analytics', label: 'Analíticas', icon: 'fa-chart-line' },
                    { id: 'admin', label: 'Administración', icon: 'fa-shield-alt' }
                  ].map(perm => (
                    <label
                      key={perm.id}
                      className={`flex items-center gap-2 px-4 py-2 rounded-xl cursor-pointer transition-all ${
                        user.permissions?.[perm.id]
                          ? 'bg-blue-500/20 text-blue-400 border border-blue-500/30'
                          : 'bg-[#1b1c20] text-gray-500 border border-transparent hover:border-gray-700'
                      }`}
                    >
                      <input
                        type="checkbox"
                        checked={user.permissions?.[perm.id] || false}
                        onChange={(e) => updateUserPermission(user.id, perm.id, e.target.checked)}
                        className="sr-only"
                      />
                      <i className={`fas ${perm.icon}`}></i>
                      <span className="text-sm font-medium">{perm.label}</span>
                      {user.permissions?.[perm.id] && <i className="fas fa-check text-xs ml-1"></i>}
                    </label>
                  ))}
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
      
      {/* ==================== CONFIGURACIÓN ==================== */}
      {activeSection === 'settings' && (
        <div className="space-y-6">
          {/* Primera fila: Días de cobro + Adelanto */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            {/* Días de cobro */}
            <div className="bg-[#1b1c20] rounded-2xl p-6">
              <div className="flex items-center gap-3 mb-6">
                <div className="w-12 h-12 rounded-xl bg-blue-500/20 flex items-center justify-center">
                  <i className="fas fa-calendar-day text-blue-400 text-xl"></i>
                </div>
                <div>
                  <h3 className="text-white font-semibold text-lg">Días de Cobro</h3>
                  <p className="text-gray-500 text-sm">Selecciona los días del mes para cobrar rentas</p>
                </div>
              </div>
              
              <div className="grid grid-cols-7 gap-2">
                {Array.from({ length: 31 }, (_, i) => i + 1).map(day => (
                  <button
                    key={day}
                    onClick={() => {
                      const newDays = settings.paymentDays.includes(day)
                        ? settings.paymentDays.filter(d => d !== day)
                        : [...settings.paymentDays, day].sort((a, b) => a - b);
                      setSettings({ ...settings, paymentDays: newDays });
                    }}
                    className={`aspect-square rounded-lg font-medium text-sm transition-all ${
                      settings.paymentDays.includes(day)
                        ? 'bg-blue-500 text-white shadow-lg shadow-blue-500/25'
                        : 'bg-[#252628] text-gray-500 hover:text-white hover:bg-[#35383d]'
                    }`}
                  >
                    {day}
                  </button>
                ))}
              </div>
              
              <div className="mt-4 p-3 bg-[#252628] rounded-xl">
                <p className="text-gray-400 text-sm">
                  <i className="fas fa-info-circle mr-2 text-blue-400"></i>
                  Días seleccionados: <span className="text-blue-400 font-medium">{settings.paymentDays.length > 0 ? settings.paymentDays.join(', ') : 'Ninguno'}</span>
                </p>
              </div>
            </div>
            
            {/* Meses de adelanto */}
            <div className="bg-[#1b1c20] rounded-2xl p-6">
              <div className="flex items-center gap-3 mb-6">
                <div className="w-12 h-12 rounded-xl bg-green-500/20 flex items-center justify-center">
                  <i className="fas fa-calendar-plus text-green-400 text-xl"></i>
                </div>
                <div>
                  <h3 className="text-white font-semibold text-lg">Adelanto de Pagos</h3>
                  <p className="text-gray-500 text-sm">Permite a los inquilinos adelantar meses de pago</p>
                </div>
              </div>
              
              <div className="space-y-6">
                <div className="flex items-center justify-center gap-3">
                  {[1, 2, 3, 4, 5, 6].map(num => (
                    <button
                      key={num}
                      onClick={() => setSettings({ ...settings, maxAdvanceMonths: num })}
                      className={`w-14 h-14 rounded-xl font-bold text-xl transition-all ${
                        settings.maxAdvanceMonths === num
                          ? 'bg-green-500 text-white shadow-lg shadow-green-500/25 scale-110'
                          : 'bg-[#252628] text-gray-500 hover:text-white hover:bg-[#35383d]'
                      }`}
                    >
                      {num}
                    </button>
                  ))}
                </div>
                
                <div className="p-4 bg-[#252628] rounded-xl text-center">
                  <p className="text-gray-400">Los inquilinos pueden adelantar hasta</p>
                  <p className="text-2xl font-bold text-green-400 mt-2">
                    {settings.maxAdvanceMonths} {settings.maxAdvanceMonths === 1 ? 'mes' : 'meses'}
                  </p>
                </div>
              </div>
            </div>
          </div>

          {/* Segunda fila: Eliminación automática + Cobro por retardo */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            {/* Eliminación automática de contratos */}
            <div className="bg-[#1b1c20] rounded-2xl p-6">
              <div className="flex items-center justify-between mb-6">
                <div className="flex items-center gap-3">
                  <div className="w-12 h-12 rounded-xl bg-red-500/20 flex items-center justify-center">
                    <i className="fas fa-trash-alt text-red-400 text-xl"></i>
                  </div>
                  <div>
                    <h3 className="text-white font-semibold text-lg">Eliminación Automática</h3>
                    <p className="text-gray-500 text-sm">Contratos vencidos y finalizados</p>
                  </div>
                </div>
                <ModernSwitch 
                  checked={settings.autoDeleteExpired} 
                  onChange={(val) => setSettings({ ...settings, autoDeleteExpired: val })} 
                />
              </div>
              
              <div className="p-4 bg-[#252628] rounded-xl space-y-4">
                <p className="text-gray-400 text-sm">
                  <i className="fas fa-info-circle mr-2 text-red-400"></i>
                  Eliminaremos automáticamente los contratos que ya vencieron y fueron marcados como finalizados después de:
                </p>
                <div className="flex items-center justify-center gap-3">
                  {[1, 2, 3, 4].map(weeks => (
                    <button
                      key={weeks}
                      onClick={() => setSettings({ ...settings, autoDeleteWeeks: weeks })}
                      disabled={!settings.autoDeleteExpired}
                      className={`px-4 py-2 rounded-lg font-medium transition-all ${
                        settings.autoDeleteWeeks === weeks && settings.autoDeleteExpired
                          ? 'bg-red-500 text-white'
                          : 'bg-[#1b1c20] text-gray-500 hover:text-white'
                      } ${!settings.autoDeleteExpired ? 'opacity-50 cursor-not-allowed' : ''}`}
                    >
                      {weeks} {weeks === 1 ? 'semana' : 'semanas'}
                    </button>
                  ))}
                </div>
              </div>
            </div>

            {/* Cobro por retardo */}
            <div className="bg-[#1b1c20] rounded-2xl p-6">
              <div className="flex items-center justify-between mb-6">
                <div className="flex items-center gap-3">
                  <div className="w-12 h-12 rounded-xl bg-orange-500/20 flex items-center justify-center">
                    <i className="fas fa-clock text-orange-400 text-xl"></i>
                  </div>
                  <div>
                    <h3 className="text-white font-semibold text-lg">Cobro por Retardo</h3>
                    <p className="text-gray-500 text-sm">Cargo adicional por pagos tardíos</p>
                  </div>
                </div>
                <ModernSwitch 
                  checked={settings.latePaymentEnabled} 
                  onChange={(val) => setSettings({ ...settings, latePaymentEnabled: val })} 
                />
              </div>
              
              <div className={`space-y-4 ${!settings.latePaymentEnabled ? 'opacity-50 pointer-events-none' : ''}`}>
                {/* Tipo de cobro */}
                <div className="flex gap-2">
                  <button
                    onClick={() => setSettings({ ...settings, latePaymentType: 'percentage' })}
                    className={`flex-1 py-2 rounded-lg font-medium transition-all ${
                      settings.latePaymentType === 'percentage'
                        ? 'bg-orange-500 text-white'
                        : 'bg-[#252628] text-gray-400 hover:text-white'
                    }`}
                  >
                    <i className="fas fa-percent mr-2"></i>Porcentaje
                  </button>
                  <button
                    onClick={() => setSettings({ ...settings, latePaymentType: 'fixed' })}
                    className={`flex-1 py-2 rounded-lg font-medium transition-all ${
                      settings.latePaymentType === 'fixed'
                        ? 'bg-orange-500 text-white'
                        : 'bg-[#252628] text-gray-400 hover:text-white'
                    }`}
                  >
                    <i className="fas fa-dollar-sign mr-2"></i>Cantidad Fija
                  </button>
                </div>
                
                {/* Monto */}
                <div className="flex items-center gap-3">
                  <span className="text-gray-400">Cobrar:</span>
                  <input
                    type="number"
                    value={settings.latePaymentAmount}
                    onChange={(e) => setSettings({ ...settings, latePaymentAmount: parseFloat(e.target.value) || 0 })}
                    className="flex-1 bg-[#252628] text-white px-4 py-2 rounded-lg border border-gray-700 focus:border-orange-500 focus:outline-none"
                  />
                  <span className="text-orange-400 font-bold">
                    {settings.latePaymentType === 'percentage' ? '%' : 'MXN'}
                  </span>
                </div>

                {/* Aumento progresivo - solo para porcentaje */}
                {settings.latePaymentType === 'percentage' && (
                  <div className="p-3 bg-[#252628] rounded-xl">
                    <div className="flex items-center justify-between mb-2">
                      <span className="text-gray-400 text-sm">Aumentar según tiempo de retardo</span>
                      <ModernSwitch 
                        checked={settings.latePaymentIncrease} 
                        onChange={(val) => setSettings({ ...settings, latePaymentIncrease: val })} 
                      />
                    </div>
                    {settings.latePaymentIncrease && (
                      <div className="flex items-center gap-2 mt-2">
                        <span className="text-gray-500 text-xs">+</span>
                        <input
                          type="number"
                          value={settings.latePaymentIncreaseRate}
                          onChange={(e) => setSettings({ ...settings, latePaymentIncreaseRate: parseFloat(e.target.value) || 0 })}
                          className="w-16 bg-[#1b1c20] text-white px-2 py-1 rounded text-sm border border-gray-700"
                        />
                        <span className="text-gray-500 text-xs">% por cada semana adicional</span>
                      </div>
                    )}
                  </div>
                )}
              </div>
            </div>
          </div>

          {/* Tercera fila: Funcionalidades */}
          <div className="bg-[#1b1c20] rounded-2xl p-6">
            <div className="flex items-center gap-3 mb-6">
              <div className="w-12 h-12 rounded-xl bg-purple-500/20 flex items-center justify-center">
                <i className="fas fa-cogs text-purple-400 text-xl"></i>
              </div>
              <div>
                <h3 className="text-white font-semibold text-lg">Funcionalidades</h3>
                <p className="text-gray-500 text-sm">Activa o desactiva módulos del sistema</p>
              </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
              {/* Chat Inteligente */}
              <div className="bg-[#252628] rounded-xl p-4">
                <div className="flex items-center justify-between mb-3">
                  <div className="w-10 h-10 rounded-lg bg-blue-500/20 flex items-center justify-center">
                    <i className="fas fa-comment-dots text-blue-400"></i>
                  </div>
                  <ModernSwitch 
                    checked={settings.chatEnabled} 
                    onChange={(val) => setSettings({ ...settings, chatEnabled: val })} 
                  />
                </div>
                <h4 className="text-white font-medium">Chat Inteligente</h4>
                <p className="text-gray-500 text-xs mt-1">Asistente con IA para consultas</p>
              </div>

              {/* Analítica */}
              <div className="bg-[#252628] rounded-xl p-4">
                <div className="flex items-center justify-between mb-3">
                  <div className="w-10 h-10 rounded-lg bg-green-500/20 flex items-center justify-center">
                    <i className="fas fa-chart-line text-green-400"></i>
                  </div>
                  <ModernSwitch 
                    checked={settings.analyticsEnabled} 
                    onChange={(val) => setSettings({ ...settings, analyticsEnabled: val })} 
                  />
                </div>
                <h4 className="text-white font-medium">Analítica</h4>
                <p className="text-gray-500 text-xs mt-1">Reportes y estadísticas avanzadas</p>
              </div>

              {/* Mantenimiento */}
              <div className="bg-[#252628] rounded-xl p-4">
                <div className="flex items-center justify-between mb-3">
                  <div className="w-10 h-10 rounded-lg bg-yellow-500/20 flex items-center justify-center">
                    <i className="fas fa-tools text-yellow-400"></i>
                  </div>
                  <ModernSwitch 
                    checked={settings.maintenanceEnabled} 
                    onChange={(val) => setSettings({ ...settings, maintenanceEnabled: val })} 
                  />
                </div>
                <h4 className="text-white font-medium">Mantenimiento</h4>
                <p className="text-gray-500 text-xs mt-1">Gestión de reparaciones</p>
              </div>

              {/* Registro Intensivo */}
              <div className="bg-[#252628] rounded-xl p-4">
                <div className="flex items-center justify-between mb-3">
                  <div className="w-10 h-10 rounded-lg bg-red-500/20 flex items-center justify-center">
                    <i className="fas fa-file-alt text-red-400"></i>
                  </div>
                  <ModernSwitch 
                    checked={settings.intensiveLoggingEnabled} 
                    onChange={(val) => setSettings({ ...settings, intensiveLoggingEnabled: val })} 
                  />
                </div>
                <h4 className="text-white font-medium">Registro Intensivo</h4>
                <p className="text-gray-500 text-xs mt-1">Logs detallados del sistema</p>
              </div>
            </div>
          </div>

          {/* Cuarta fila: Seguridad y Esperiency Protect */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            {/* Seguridad */}
            <div className="bg-[#1b1c20] rounded-2xl p-6">
              <div className="flex items-center gap-3 mb-6">
                <div className="w-12 h-12 rounded-xl bg-cyan-500/20 flex items-center justify-center">
                  <i className="fas fa-shield-alt text-cyan-400 text-xl"></i>
                </div>
                <div>
                  <h3 className="text-white font-semibold text-lg">Seguridad</h3>
                  <p className="text-gray-500 text-sm">Configuración de protección del sistema</p>
                </div>
              </div>

              <div className="space-y-3">
                <div className="flex items-center justify-between p-3 bg-[#252628] rounded-xl">
                  <div className="flex items-center gap-3">
                    <i className="fas fa-lock text-cyan-400"></i>
                    <span className="text-gray-300">Autenticación de dos factores</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <span className="px-2 py-1 bg-red-500/20 text-red-400 text-xs rounded-full">Desactivado</span>
                    <button className="px-3 py-1 bg-cyan-500/20 text-cyan-400 text-xs rounded-full hover:bg-cyan-500/30 transition-colors">Configurar</button>
                  </div>
                </div>
                <div className="flex items-center justify-between p-3 bg-[#252628] rounded-xl">
                  <div className="flex items-center gap-3">
                    <i className="fas fa-key text-cyan-400"></i>
                    <span className="text-gray-300">Encriptación de datos</span>
                  </div>
                  <span className="px-2 py-1 bg-green-500/20 text-green-400 text-xs rounded-full">AES-256</span>
                </div>
                <div className="flex items-center justify-between p-3 bg-[#252628] rounded-xl">
                  <div className="flex items-center gap-3">
                    <i className="fas fa-user-shield text-cyan-400"></i>
                    <span className="text-gray-300">Sesiones activas</span>
                  </div>
                  <span className="text-white font-medium">1 dispositivo</span>
                </div>
              </div>
            </div>

            {/* Esperiency Protect */}
            <div className="bg-[#1b1c20] rounded-2xl p-6">
              <div className="flex items-center justify-between mb-6">
                <div className="flex items-center gap-3">
                  <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center">
                    <i className="fas fa-robot text-violet-400 text-xl"></i>
                  </div>
                  <div>
                    <h3 className="text-white font-semibold text-lg">Esperiency Protect</h3>
                    <p className="text-gray-500 text-sm">Revisión de contratos con IA</p>
                  </div>
                </div>
                <ModernSwitch 
                  checked={settings.protectEnabled} 
                  onChange={(val) => setSettings({ ...settings, protectEnabled: val })} 
                />
              </div>

              <p className="text-gray-400 text-sm mb-4">
                <i className="fas fa-info-circle mr-2 text-violet-400"></i>
                Revisamos los contratos en busca de irregularidades en los contratos subidos por los usuarios de Esperiency Management.
              </p>

              <div className={`space-y-4 ${!settings.protectEnabled ? 'opacity-50 pointer-events-none' : ''}`}>
                {/* Subir plantilla de contrato */}
                <div className="p-4 bg-[#252628] rounded-xl">
                  <p className="text-gray-400 text-sm mb-3">
                    <i className="fas fa-file-contract mr-2 text-violet-400"></i>
                    Plantilla de Contrato
                  </p>
                  <div className="border-2 border-dashed border-gray-600 rounded-xl p-6 text-center hover:border-violet-500 transition-colors cursor-pointer">
                    <input type="file" accept=".pdf,.doc,.docx" className="hidden" id="contract-template" />
                    <label htmlFor="contract-template" className="cursor-pointer">
                      <i className="fas fa-cloud-upload-alt text-3xl text-gray-500 mb-3"></i>
                      <p className="text-gray-400 text-sm">Arrastra tu plantilla aquí o</p>
                      <span className="text-violet-400 font-medium">haz clic para subir</span>
                      <p className="text-gray-600 text-xs mt-2">PDF, DOC, DOCX (máx. 10MB)</p>
                    </label>
                  </div>
                </div>

                <p className="text-gray-500 text-xs uppercase tracking-wider">Seleccionar modelo de IA</p>
                
                {[
                  { id: 'gemini-2.5-flash', name: 'Gemini 2.5 Flash', desc: 'Rápido y eficiente. Ideal para análisis en tiempo real.', icon: 'fa-bolt', color: 'blue' },
                  { id: 'gpt-4', name: 'GPT-4', desc: 'Alta precisión. Mejor comprensión de contexto legal.', icon: 'fa-brain', color: 'green' },
                  { id: 'perplexity', name: 'Perplexity', desc: 'Búsqueda avanzada. Incluye referencias actualizadas.', icon: 'fa-search', color: 'purple' }
                ].map(model => (
                  <button
                    key={model.id}
                    onClick={() => setSettings({ ...settings, protectModel: model.id })}
                    className={`w-full p-3 rounded-xl text-left transition-all flex items-start gap-3 ${
                      settings.protectModel === model.id
                        ? 'bg-violet-500/20 border border-violet-500/50'
                        : 'bg-[#252628] hover:bg-[#2a2b2e]'
                    }`}
                  >
                    <div className={`w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5 ${
                      model.color === 'blue' ? 'bg-blue-500/20' : model.color === 'green' ? 'bg-green-500/20' : 'bg-purple-500/20'
                    }`}>
                      <i className={`fas ${model.icon} text-sm ${
                        model.color === 'blue' ? 'text-blue-400' : model.color === 'green' ? 'text-green-400' : 'text-purple-400'
                      }`}></i>
                    </div>
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2">
                        <span className={`font-medium ${settings.protectModel === model.id ? 'text-white' : 'text-gray-300'}`}>
                          {model.name}
                        </span>
                        {settings.protectModel === model.id && (
                          <i className="fas fa-check-circle text-violet-400 text-xs"></i>
                        )}
                      </div>
                      <p className="text-gray-500 text-xs mt-0.5">{model.desc}</p>
                    </div>
                  </button>
                ))}
              </div>
            </div>
          </div>
          
          {/* Botón guardar */}
          <div className="flex justify-end">
            <button
              onClick={saveSettings}
              className="px-8 py-3 bg-blue-500 text-white rounded-xl hover:bg-blue-600 transition-all flex items-center gap-2 font-medium"
            >
              <i className="fas fa-save"></i>
              Guardar Configuración
            </button>
          </div>
        </div>
      )}
      
      {/* ==================== ACTIVIDAD ==================== */}
      {activeSection === 'logs' && (
        <div className="flex gap-6">
          {/* Lista de usuarios (lado izquierdo) */}
          <div className="w-72 bg-[#1b1c20] rounded-2xl p-4 space-y-2 flex-shrink-0">
            <h3 className="text-white font-semibold mb-4 px-2">Seleccionar Usuario</h3>
            
            {/* Opción: Todos */}
            <button
              onClick={() => setSelectedLogUser(null)}
              className={`w-full flex items-center gap-3 px-3 py-3 rounded-xl transition-all ${
                !selectedLogUser ? 'bg-blue-500/20 text-blue-400 border border-blue-500/30' : 'text-gray-400 hover:bg-[#252628] hover:text-white'
              }`}
            >
              <div className="w-10 h-10 rounded-full bg-[#252628] flex items-center justify-center">
                <i className="fas fa-users"></i>
              </div>
              <div className="text-left">
                <div className="font-medium">Todos</div>
                <div className="text-xs text-gray-500">{activityLogs.length} acciones</div>
              </div>
            </button>
            
            {users.map(user => (
              <button
                key={user.id}
                onClick={() => setSelectedLogUser(user.id)}
                className={`w-full flex items-center gap-3 px-3 py-3 rounded-xl transition-all ${
                  selectedLogUser === user.id ? 'bg-blue-500/20 text-blue-400 border border-blue-500/30' : 'text-gray-400 hover:bg-[#252628] hover:text-white'
                }`}
              >
                <div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white font-bold">
                  {user.name?.charAt(0)?.toUpperCase() || '?'}
                </div>
                <div className="text-left flex-1 min-w-0">
                  <div className="font-medium truncate">{user.name}</div>
                  <div className="text-xs text-gray-500">{activityLogs.filter(l => l.userId === user.id).length} acciones</div>
                </div>
              </button>
            ))}
          </div>
          
          {/* Historial de actividades (lado derecho) */}
          <div className="flex-1 bg-[#1b1c20] rounded-2xl p-6">
            <div className="flex items-center justify-between mb-6">
              <h3 className="text-white font-semibold text-lg">
                {selectedLogUser ? `Actividad de ${users.find(u => u.id === selectedLogUser)?.name}` : 'Toda la Actividad'}
              </h3>
              <span className="text-gray-500 text-sm">
                {(selectedLogUser ? userLogs : activityLogs).length} registros
              </span>
            </div>
            
            {(selectedLogUser ? userLogs : activityLogs).length === 0 ? (
              <div className="text-center py-16">
                <i className="fas fa-history text-5xl text-gray-700 mb-4"></i>
                <p className="text-gray-500">No hay registros de actividad</p>
              </div>
            ) : (
              <div className="space-y-3">
                {(selectedLogUser ? userLogs : activityLogs).map(log => (
                  <div key={log.id} className="flex items-start gap-4 p-4 bg-[#252628] rounded-xl hover:bg-[#2a2b2f] transition-all">
                    <div className={`w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0 ${getLogColor(log.type)}`}>
                      <i className={`fas ${getLogIcon(log.type)}`}></i>
                    </div>
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2 mb-1">
                        <span className="text-white font-medium">{log.action}</span>
                        {!selectedLogUser && (
                          <>
                            <span className="text-gray-600">•</span>
                            <span className="text-gray-500 text-sm">{log.userName}</span>
                          </>
                        )}
                      </div>
                      <p className="text-gray-500 text-sm">{log.details}</p>
                    </div>
                    <span className="text-gray-600 text-sm whitespace-nowrap">{formatDateTime(log.timestamp)}</span>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      )}
      
      {/* ==================== MODALES ==================== */}
      
      {/* Modal de confirmación de acción */}
      {showDeleteConfirm && (
        <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4">
          <div className="bg-[#1b1c20] rounded-2xl p-6 max-w-md w-full">
            <div className="text-center mb-6">
              <div className={`w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 ${
                actionType === 'delete' ? 'bg-red-500/20' :
                actionType === 'archive' ? 'bg-orange-500/20' :
                actionType === 'block' ? 'bg-yellow-500/20' : 'bg-green-500/20'
              }`}>
                <i className={`fas ${getActionInfo().icon} text-3xl ${
                  actionType === 'delete' ? 'text-red-400' :
                  actionType === 'archive' ? 'text-orange-400' :
                  actionType === 'block' ? 'text-yellow-400' : 'text-green-400'
                }`}></i>
              </div>
              <h3 className="text-xl font-bold text-white mb-2">{getActionInfo().title}</h3>
              <p className="text-gray-500">{getActionInfo().message}</p>
              {selectedTenantForAction && (
                <div className="mt-4 p-3 bg-[#252628] rounded-xl">
                  <p className="text-white font-medium">{selectedTenantForAction.name}</p>
                  <p className="text-gray-500 text-sm">{selectedTenantForAction.apartment}</p>
                </div>
              )}
              
              {/* Campo de motivo de bloqueo - solo aparece al bloquear */}
              {actionType === 'block' && (
                <div className="mt-4">
                  <label className="text-gray-400 text-sm block mb-2">
                    <i className="fas fa-comment-alt mr-2"></i>
                    Motivo del bloqueo (opcional)
                  </label>
                  <textarea
                    value={blockReason}
                    onChange={(e) => setBlockReason(e.target.value)}
                    placeholder="Ej: Adeudo de 3 meses, Comportamiento inadecuado..."
                    className="w-full bg-[#252628] border border-gray-700/50 rounded-xl px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:border-yellow-500/50 resize-none"
                    rows="3"
                  />
                  <p className="text-xs text-gray-500 mt-1">
                    Este motivo se mostrará al inquilino si intenta realizar un pago
                  </p>
                </div>
              )}
            </div>
            
            <div className="flex gap-3">
              <button
                onClick={() => { setShowDeleteConfirm(false); setSelectedTenantForAction(null); setActionType(null); setBlockReason(''); }}
                className="flex-1 px-4 py-3 bg-[#252628] text-gray-400 rounded-xl hover:text-white transition-all"
              >
                Cancelar
              </button>
              <button
                onClick={confirmTenantAction}
                className={`flex-1 px-4 py-3 rounded-xl text-white font-medium transition-all ${
                  actionType === 'delete' ? 'bg-red-500 hover:bg-red-600' :
                  actionType === 'archive' ? 'bg-orange-500 hover:bg-orange-600' :
                  actionType === 'block' ? 'bg-yellow-500 hover:bg-yellow-600' :
                  'bg-green-500 hover:bg-green-600'
                }`}
              >
                Confirmar
              </button>
            </div>
          </div>
        </div>
      )}
      
      {/* Modal de Usuario */}
      {showUserModal && (
        <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4">
          <div className="bg-[#1b1c20] rounded-2xl p-6 max-w-lg w-full">
            <div className="flex items-center justify-between mb-6">
              <h3 className="text-xl font-bold text-white">Invitar Usuario</h3>
              <button onClick={() => setShowUserModal(false)} className="text-gray-500 hover:text-white">
                <i className="fas fa-times text-xl"></i>
              </button>
            </div>
            
            <div className="space-y-4">
              <div>
                <label className="text-gray-400 text-sm block mb-2">Correo electrónico</label>
                <input
                  type="email"
                  className="w-full bg-[#252628] border border-gray-700/50 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-blue-500/50"
                  placeholder="correo@ejemplo.com"
                />
              </div>
              
              <div>
                <label className="text-gray-400 text-sm block mb-2">Rol</label>
                <select className="w-full bg-[#252628] border border-gray-700/50 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-blue-500/50">
                  <option value="user">Usuario</option>
                  <option value="admin">Administrador</option>
                </select>
              </div>
              
              <p className="text-gray-500 text-sm">
                <i className="fas fa-info-circle mr-2 text-blue-400"></i>
                Se enviará un correo de invitación al usuario para que se registre.
              </p>
              
              <div className="flex gap-3 pt-4">
                <button onClick={() => setShowUserModal(false)} className="flex-1 px-4 py-3 bg-[#252628] text-gray-400 rounded-xl hover:text-white transition-all">
                  Cancelar
                </button>
                <button className="flex-1 px-4 py-3 bg-blue-500 text-white rounded-xl hover:bg-blue-600 transition-all">
                  Enviar Invitación
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
      
      {/* Modal de confirmación de acción de usuario */}
      {showUserActionConfirm && (
        <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4">
          <div className="bg-[#1b1c20] rounded-2xl p-6 max-w-md w-full">
            <div className="text-center mb-6">
              <div className={`w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 ${
                userActionType === 'delete' ? 'bg-red-500/20' : 'bg-orange-500/20'
              }`}>
                <i className={`fas ${getUserActionInfo().icon} text-3xl ${
                  userActionType === 'delete' ? 'text-red-400' : 'text-orange-400'
                }`}></i>
              </div>
              <h3 className="text-xl font-bold text-white mb-2">{getUserActionInfo().title}</h3>
              <p className="text-gray-500">{getUserActionInfo().message}</p>
              {selectedUserForAction && (
                <div className="mt-4 p-3 bg-[#252628] rounded-xl">
                  <p className="text-white font-medium">{selectedUserForAction.name}</p>
                  <p className="text-gray-500 text-sm">{selectedUserForAction.email}</p>
                </div>
              )}
            </div>
            
            <div className="flex gap-3">
              <button
                onClick={() => { setShowUserActionConfirm(false); setSelectedUserForAction(null); setUserActionType(null); }}
                className="flex-1 px-4 py-3 bg-[#252628] text-gray-400 rounded-xl hover:text-white transition-all"
              >
                Cancelar
              </button>
              <button
                onClick={confirmUserAction}
                className={`flex-1 px-4 py-3 rounded-xl text-white font-medium transition-all ${
                  userActionType === 'delete' ? 'bg-red-500 hover:bg-red-600' : 'bg-orange-500 hover:bg-orange-600'
                }`}
              >
                Confirmar
              </button>
            </div>
          </div>
        </div>
      )}
      
      {/* Modal de notificación a usuario */}
      {showNotifyModal && (
        <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4">
          <div className="bg-[#1b1c20] rounded-2xl p-6 max-w-lg w-full">
            <div className="flex items-center justify-between mb-6">
              <div className="flex items-center gap-3">
                <div className="w-12 h-12 rounded-full bg-blue-500/20 flex items-center justify-center">
                  <i className="fas fa-bell text-blue-400 text-xl"></i>
                </div>
                <div>
                  <h3 className="text-xl font-bold text-white">Enviar Notificación</h3>
                  <p className="text-gray-500 text-sm">A: {selectedUserForAction?.name}</p>
                </div>
              </div>
              <button onClick={() => { setShowNotifyModal(false); setSelectedUserForAction(null); setNotifyMessage(''); }} className="text-gray-500 hover:text-white">
                <i className="fas fa-times text-xl"></i>
              </button>
            </div>
            
            <div className="space-y-4">
              <div>
                <label className="text-gray-400 text-sm block mb-2">Mensaje</label>
                <textarea
                  value={notifyMessage}
                  onChange={(e) => setNotifyMessage(e.target.value)}
                  className="w-full bg-[#252628] border border-gray-700/50 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-blue-500/50 min-h-[120px] resize-none"
                  placeholder="Escribe el mensaje que deseas enviar..."
                />
              </div>
              
              <div className="flex gap-3 pt-2">
                <button 
                  onClick={() => { setShowNotifyModal(false); setSelectedUserForAction(null); setNotifyMessage(''); }} 
                  className="flex-1 px-4 py-3 bg-[#252628] text-gray-400 rounded-xl hover:text-white transition-all"
                >
                  Cancelar
                </button>
                <button 
                  onClick={sendNotification}
                  disabled={!notifyMessage.trim()}
                  className={`flex-1 px-4 py-3 rounded-xl text-white font-medium transition-all flex items-center justify-center gap-2 ${
                    notifyMessage.trim() ? 'bg-blue-500 hover:bg-blue-600' : 'bg-gray-600 cursor-not-allowed'
                  }`}
                >
                  <i className="fas fa-paper-plane"></i>
                  Enviar
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Modal de Confirmación para Eliminar Pago */}
      {showDeletePaymentConfirm && (
        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-[60]">
          <div className="bg-[#1b1c20] rounded-2xl p-6 w-full max-w-md mx-4 border border-red-500/50">
            <div className="flex items-center justify-between mb-6">
              <h3 className="text-xl font-semibold text-red-400 flex items-center">
                <i className="fas fa-exclamation-triangle mr-2"></i>
                Eliminar Pago
              </h3>
              <button 
                onClick={() => setShowDeletePaymentConfirm(false)}
                className="text-gray-400 hover:text-white"
              >
                <i className="fas fa-times"></i>
              </button>
            </div>
            
            <div className="space-y-4">
              {/* Info del pago a eliminar */}
              <div className="bg-[#252628] border border-[#3a3b3e] rounded-lg p-4">
                {selectedPayment && (
                  <div className="text-sm text-gray-300 space-y-2">
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white font-bold">
                        {selectedPayment.tenantName?.charAt(0)?.toUpperCase() || '?'}
                      </div>
                      <div>
                        <p className="text-white font-medium">{selectedPayment.tenantName || 'Sin nombre'}</p>
                        <p className="text-gray-500 text-xs">{selectedPayment.apartment || 'Sin departamento'}</p>
                      </div>
                    </div>
                    <div className="grid grid-cols-2 gap-2 mt-3 pt-3 border-t border-gray-700">
                      <div>
                        <p className="text-gray-500 text-xs">Monto</p>
                        <p className="text-green-400 font-bold text-lg">${selectedPayment.amount?.toLocaleString()}</p>
                      </div>
                      <div>
                        <p className="text-gray-500 text-xs">Fecha</p>
                        <p className="text-white">{formatDate(selectedPayment.date || selectedPayment.createdAt)}</p>
                      </div>
                    </div>
                  </div>
                )}
              </div>
              
              {/* Advertencia importante */}
              <div className="bg-orange-900/30 border border-orange-500/30 rounded-lg p-4">
                <div className="flex items-start gap-3">
                  <div className="w-10 h-10 rounded-full bg-orange-500/20 flex items-center justify-center flex-shrink-0">
                    <i className="fas fa-hand-holding-usd text-orange-400"></i>
                  </div>
                  <div>
                    <p className="text-orange-300 font-semibold mb-1">⚠️ Devolución de Dinero</p>
                    <p className="text-orange-200/80 text-sm">
                      Al eliminar este pago, deberás <strong>devolver ${selectedPayment?.amount?.toLocaleString() || 0}</strong> al inquilino <strong>{selectedPayment?.tenantName}</strong>.
                    </p>
                  </div>
                </div>
              </div>
              
              {/* Consecuencias */}
              <div className="bg-red-900/30 border border-red-500/30 rounded-lg p-4">
                <p className="text-red-300 font-semibold mb-2 flex items-center">
                  <i className="fas fa-exclamation-circle mr-2"></i>
                  Consecuencias:
                </p>
                <ul className="text-red-200/80 text-sm space-y-1">
                  <li className="flex items-center gap-2">
                    <i className="fas fa-circle text-[4px]"></i>
                    El inquilino volverá a estado <span className="text-red-400 font-medium">DEUDOR</span>
                  </li>
                  <li className="flex items-center gap-2">
                    <i className="fas fa-circle text-[4px]"></i>
                    Se eliminará del historial de pagos
                  </li>
                  <li className="flex items-center gap-2">
                    <i className="fas fa-circle text-[4px]"></i>
                    Esta acción <span className="font-medium">NO se puede deshacer</span>
                  </li>
                </ul>
              </div>
              
              <div className="flex gap-4">
                <button
                  onClick={() => setShowDeletePaymentConfirm(false)}
                  className="flex-1 px-4 py-3 bg-gray-600 hover:bg-gray-700 text-white rounded-lg font-medium transition-colors"
                >
                  Cancelar
                </button>
                <button
                  onClick={confirmDeletePayment}
                  className="flex-1 px-4 py-3 bg-red-600 hover:bg-red-700 text-white rounded-lg font-medium transition-colors flex items-center justify-center gap-2"
                >
                  <i className="fas fa-trash"></i>
                  Eliminar Pago
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Modal de Recibo */}
      {showReceiptModal && selectedPayment && (
        <div className="fixed inset-0 bg-black/60 backdrop-blur-md flex items-center justify-center z-[60]">
          <div className="bg-white rounded-lg w-full max-w-2xl mx-4 shadow-2xl overflow-hidden max-h-[90vh] flex flex-col">
            {/* Recibo estilo email */}
            <div className="p-6 overflow-y-auto flex-1" style={{fontFamily: "'Inter', sans-serif"}}>
              
              {/* Header con Esperiency */}
              <div className="relative mb-6">
                <div className="absolute top-0 left-0">
                  <p className="text-sm font-semibold text-gray-500">Esperiency</p>
                </div>
                <div className="text-center">
                  <h1 className="text-2xl font-bold text-black">{selectedPayment.organizationName || localStorage.getItem('organizationName') || 'Mi Organización'}</h1>
                  <p className="text-gray-500">Recibo de Pago</p>
                </div>
              </div>

              {/* Información del Recibo */}
              <div className="mb-6">
                <div className="flex justify-between items-center mb-4">
                  <h2 className="text-xl font-semibold text-black">
                    Recibo #{selectedPayment.receiptNumber || `REC-${selectedPayment.id?.toString().slice(-8) || Date.now()}`}
                  </h2>
                  <div className="text-right">
                    <p className="text-sm text-gray-500">Fecha de pago</p>
                    <p className="font-semibold text-black">
                      {new Date(selectedPayment.date || selectedPayment.createdAt).toLocaleDateString('es-ES', {
                        year: 'numeric',
                        month: 'long',
                        day: 'numeric'
                      })}
                    </p>
                  </div>
                </div>
                <hr className="border-gray-300" />
              </div>

              {/* Información del Inquilino */}
              <div className="mb-6">
                <h3 className="text-lg font-semibold text-black mb-3">Información del Inquilino</h3>
                <table className="w-full">
                  <tbody>
                    <tr>
                      <td className="py-2 text-sm text-gray-500 w-32">Inquilino:</td>
                      <td className="py-2 font-semibold text-black">{selectedPayment.tenantName || 'Sin nombre'}</td>
                    </tr>
                    <tr>
                      <td className="py-2 text-sm text-gray-500">Apartamento:</td>
                      <td className="py-2 font-semibold text-black">{selectedPayment.apartment || selectedPayment.apartmentName || 'Sin departamento'}</td>
                    </tr>
                  </tbody>
                </table>
              </div>

              {/* Detalles del Pago */}
              <div className="mb-6">
                <h3 className="text-lg font-semibold text-black mb-3">Detalles del Pago</h3>
                <table className="w-full">
                  <tbody>
                    <tr>
                      <td className="py-2 text-sm text-gray-500 w-32">Concepto:</td>
                      <td className="py-2 font-semibold text-black">
                        {selectedPayment.description?.includes('adelantado') ? 'Pago Adelantado - Próximo Mes' :
                         selectedPayment.concept === 'rent' ? 'Pago de Renta' :
                         selectedPayment.description || 'Pago de Renta'}
                      </td>
                    </tr>
                    <tr>
                      <td className="py-2 text-sm text-gray-500">Monto Pagado:</td>
                      <td className="py-2 text-xl font-bold text-black">${selectedPayment.amount?.toLocaleString() || '0'}</td>
                    </tr>
                    {selectedPayment.change > 0 && (
                      <tr>
                        <td className="py-2 text-sm text-gray-500">Cambio:</td>
                        <td className="py-2 font-semibold text-orange-500">${selectedPayment.change?.toLocaleString()}</td>
                      </tr>
                    )}
                    {selectedPayment.pendingAmount > 0 && (
                      <tr>
                        <td className="py-2 text-sm text-gray-500">Monto Pendiente:</td>
                        <td className="py-2 font-semibold text-red-600">${selectedPayment.pendingAmount?.toLocaleString()}</td>
                      </tr>
                    )}
                  </tbody>
                </table>
              </div>

              {/* Procesado Por */}
              <div className="mb-6">
                <p className="text-sm text-gray-500">
                  Pago procesado por: <span className="font-semibold text-black">{selectedPayment.registeredBy || 'Sistema'}</span>
                </p>
                {(selectedPayment.notes || selectedPayment.note) && (
                  <div className="mt-4 p-4 bg-gray-100 border-l-4 border-blue-500 rounded">
                    <p className="text-sm text-gray-600 italic">
                      <strong>Nota:</strong> {selectedPayment.notes || selectedPayment.note}
                    </p>
                  </div>
                )}
              </div>

              {/* Estado del Pago */}
              <div className="text-center mb-6 p-5 border-2 border-black">
                <p className="text-sm text-gray-500 uppercase tracking-wider mb-1">Estado del Pago</p>
                <p className="text-2xl font-bold text-green-500">PAGADO</p>
              </div>

              {/* Footer */}
              <div className="text-center pt-4 border-t border-gray-300">
                <p className="text-xs text-gray-500">
                  Este recibo es un comprobante oficial de pago generado por {selectedPayment.organizationName || localStorage.getItem('organizationName') || 'la organización'}
                </p>
                <p className="text-xs text-gray-400 mt-2">
                  Powered by Esperiency • {new Date().getFullYear()}
                </p>
              </div>
            </div>
            
            {/* Botones */}
            <div className="p-4 bg-gray-100 border-t flex gap-3 flex-shrink-0">
              <button
                onClick={() => setShowReceiptModal(false)}
                className="flex-1 px-4 py-3 bg-gray-500 hover:bg-gray-600 text-white rounded-lg font-medium transition-colors"
              >
                Cerrar
              </button>
              <button
                className="flex-1 px-4 py-3 bg-green-600 hover:bg-green-700 text-white rounded-lg font-medium transition-colors flex items-center justify-center gap-2"
              >
                <i className="fas fa-download"></i>
                Descargar PDF
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

window.AdminPage = AdminPage;