// 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>
);

// Componente MiniLoader (reutilizable)
const MiniLoader = ({ size = 40, text = '' }) => {
  return (
    <div className="flex flex-col items-center justify-center gap-4">
      <style>{`
        @keyframes loaderFloat1 {
          0%, 100% { transform: translate(0, 0); }
          25% { transform: translate(2px, -2px); }
          50% { transform: translate(0, -3px); }
          75% { transform: translate(-2px, -2px); }
        }
        @keyframes loaderFloat2 {
          0%, 100% { transform: translate(0, 0); }
          25% { transform: translate(-2px, 2px); }
          50% { transform: translate(0, 3px); }
          75% { transform: translate(2px, 2px); }
        }
        @keyframes loaderPulse {
          0%, 100% { opacity: 0.6; }
          50% { opacity: 1; }
        }
        .admin-loader-svg-1 {
          animation: loaderFloat1 2s ease-in-out infinite, loaderPulse 2s ease-in-out infinite;
        }
        .admin-loader-svg-2 {
          animation: loaderFloat2 2s ease-in-out infinite, loaderPulse 2s ease-in-out infinite 0.5s;
        }
        @keyframes dotBounce {
          0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
          40% { opacity: 1; transform: translateY(-3px); }
        }
        .admin-loader-dot-1 { animation: dotBounce 1.4s ease-in-out infinite; }
        .admin-loader-dot-2 { animation: dotBounce 1.4s ease-in-out infinite 0.2s; }
        .admin-loader-dot-3 { animation: dotBounce 1.4s ease-in-out infinite 0.4s; }
      `}</style>
      <div style={{position: 'relative', width: size, height: size}}>
        <svg className="admin-loader-svg-1" xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 1024 1024" 
          style={{position: 'absolute', top: 0, left: 0}}>
          <path fill="#9ca3af" d="M 470.5,230.5 C 520.501,230.333 570.501,230.5 620.5,231C 641.629,238.423 649.129,252.923 643,274.5C 638.017,285.471 629.517,291.971 617.5,294C 572.5,294.333 527.5,294.667 482.5,295C 475.585,296.291 469.252,298.958 463.5,303C 434.031,330.134 404.865,357.634 376,385.5C 368.667,397.833 368.667,410.167 376,422.5C 387.839,435.57 401.672,438.07 417.5,430C 451.468,399.034 485.134,367.7 518.5,336C 537.119,325.206 552.952,328.372 566,345.5C 571.158,357.487 570.491,369.154 564,380.5C 530.167,412.333 496.333,444.167 462.5,476C 427.826,502.567 391.159,505.567 352.5,485C 311.585,455.627 298.752,416.794 314,368.5C 317.657,359.844 322.324,351.844 328,344.5C 359.167,314.667 390.333,284.833 421.5,255C 435.731,242.551 452.064,234.385 470.5,230.5 Z"/>
        </svg>
        <svg className="admin-loader-svg-2" xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 1024 1024" 
          style={{position: 'absolute', top: 0, left: 0}}>
          <path fill="#6b7280" d="M 606.5,416.5 C 648.301,412.155 680.468,427.488 703,462.5C 721.528,499.533 719.194,535.199 696,569.5C 661.789,603.378 626.623,636.211 590.5,668C 578.451,675.239 565.451,679.906 551.5,682C 501.5,682.667 451.5,682.667 401.5,682C 383.06,675.304 375.227,662.137 378,642.5C 382.007,629.828 390.507,621.995 403.5,619C 451.532,618.971 499.532,618.304 547.5,617C 552.945,615.112 557.945,612.445 562.5,609C 590.635,583.2 618.468,557.033 646,530.5C 655.961,514.422 654.461,499.588 641.5,486C 628.805,477.389 616.138,477.389 603.5,486C 568.768,519.402 533.434,552.069 497.5,584C 478.272,592.462 463.438,587.629 453,569.5C 447.086,553.242 450.919,539.742 464.5,529C 498.468,498.034 532.134,466.7 565.5,435C 578.021,426.069 591.688,419.902 606.5,416.5 Z"/>
        </svg>
      </div>
      {text && (
        <div className="text-gray-400 text-sm font-light tracking-wider flex items-center">
          {text}
          <span className="ml-1 flex">
            <span className="admin-loader-dot-1">.</span>
            <span className="admin-loader-dot-2">.</span>
            <span className="admin-loader-dot-3">.</span>
          </span>
        </div>
      )}
    </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="flex items-center justify-center min-h-[400px] w-full">
        <MiniLoader size={60} text="Cargando administración" />
      </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;