// Archivo codificado en UTF-8 para evitar errores de caracteres especiales

function TenantsPage() {
  // Configuracion de pagos adelantados (configurable por usuario en el futuro)
  const MAX_ADVANCE_MONTHS = 1; // Maximo numero de meses que se puede adelantar
  
  const [tenants, setTenants] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(null);

  const [searchTerm, setSearchTerm] = React.useState('');
  const [statusFilter, setStatusFilter] = React.useState('all');
  const [paymentFilter, setPaymentFilter] = React.useState('all');
  const [selectedTenant, setSelectedTenant] = React.useState(null);
  const [paymentAmount, setPaymentAmount] = React.useState('');
  const [newNote, setNewNote] = React.useState('');
  const [showPaymentConfirm, setShowPaymentConfirm] = React.useState(false);
  const [paymentData, setPaymentData] = React.useState(null);
  const [showChangeConfirm, setShowChangeConfirm] = React.useState(false);
  const [showAlreadyPaidConfirm, setShowAlreadyPaidConfirm] = React.useState(false);
  const [showMaxAdvanceError, setShowMaxAdvanceError] = React.useState(false);
  const [showRenewConfirm, setShowRenewConfirm] = React.useState(false);
  const [showTerminateConfirm, setShowTerminateConfirm] = React.useState(false);
  const [terminationType, setTerminationType] = React.useState(null);
  const [formData, setFormData] = React.useState({
    name: '',
    email: '',
    phone: '',
    apartment: '',
    rentAmount: '',
    endDate: '',
    status: 'active',
    paymentStatus: 'current'
  });
  const [paymentNote, setPaymentNote] = React.useState('');


  const [activeTab, setActiveTab] = React.useState('active');
  const [folders, setFolders] = React.useState([
    { id: 'default', name: 'General', color: '#3498db', parentId: null }
  ]);
  const [selectedFolder, setSelectedFolder] = React.useState('default');
  const [showCreateFolder, setShowCreateFolder] = React.useState(false);
  const [newFolderName, setNewFolderName] = React.useState('');
  const [showAddForm, setShowAddForm] = React.useState(false);
  const [newFolderColor, setNewFolderColor] = React.useState('#3498db');
  const [newFolderParent, setNewFolderParent] = React.useState(null);
  const [showContextMenu, setShowContextMenu] = React.useState(null);
  const [contextMenuPosition, setContextMenuPosition] = React.useState({ x: 0, y: 0 });
  const [folderFilter, setFolderFilter] = React.useState('all');

  // Funcion de debugging global para probar desde la consola
  window.debugCurrentTenant = () => {
    if (!selectedTenant) {
      console.log(' No hay inquilino seleccionado');
      return;
    }
    debugPaymentHistory(selectedTenant);
  };

  // Funcion para limpiar historial de pagos (solo para testing)
  window.clearPaymentHistory = () => {
    if (!selectedTenant) {
      console.log(' No hay inquilino seleccionado');
      return;
    }
    
    const confirmed = confirm(`Estas seguro de que quieres limpiar el historial de pagos de ${selectedTenant.name}? Esta accion no se puede deshacer.`);
    if (confirmed) {
      const updatedTenants = tenants.map(tenant => {
        if (tenant.id === selectedTenant.id) {
          const updatedTenant = {
            ...tenant,
            paymentHistory: [],
            lastPaymentDate: null,
            pendingAmount: 0,
            paymentStatus: 'current'
          };
          setSelectedTenant(updatedTenant);
          return updatedTenant;
        }
        return tenant;
      });
      setTenants(updatedTenants);
      console.log('Historial de pagos limpiado para testing');
    }
  };

  // Funcion de debugging para obtener JWT del localStorage - simplificada
  const getJWTFromStorage = () => {
    // Usar la funcion global si esta disponible
    if (window.getJWTFromStorage) {
      return window.getJWTFromStorage();
    }
    
    // Fallback simple
    return localStorage.getItem('authToken') || sessionStorage.getItem('authToken') || 
           localStorage.getItem('jwt') || sessionStorage.getItem('jwt');
  };

  // Funcion para parsear JWT - usar funcion global
  const parseJWT = (token) => {
    // Usar la funcion global si esta disponible
    if (window.parseJWT) {
      return window.parseJWT(token);
    }
    
    // Fallback a implementacion local
    try {
      if (!token) return null;
      const base64Url = token.split('.')[1];
      const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
      const jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
      }).join(''));
      return JSON.parse(jsonPayload);
    } catch (error) {
      console.error('Error parsing JWT:', error);
      return null;
    }
  };

  // Funci├│n para obtener el Organization ID - usar variable global
  const getOrganizationId = () => {
    // Primero, intentar usar la variable global del sistema principal
    if (window.currentOrganizationId) {
      console.log('­ƒîÉ OrgId obtenido de variable global:', window.currentOrganizationId);
      return window.currentOrganizationId;
    }

    // Fallback: intentar obtener de localStorage
    const storedOrgId = localStorage.getItem('organizationId');
    if (storedOrgId) {
      console.log('´┐¢ OrgId obtenido de localStorage:', storedOrgId);
      return storedOrgId;
    }

    // Último recurso: buscar en URL
    const urlParams = new URLSearchParams(window.location.search);
    for (const [key, value] of urlParams) {
      if (key.length > 15 && /^[a-zA-Z0-9]+$/.test(key)) {
        console.log('­ƒöì OrgId encontrado en URL:', key);
        return key;
      }
    }

    console.log('ÔØî No se pudo obtener orgId');
    return null;
  };

  // Helper para persistir cambios de un inquilino en el API
  const persistTenantUpdate = async (tenantId, updates) => {
    try {
      const token = getJWTFromStorage();
      if (!token) {
        console.error('No hay token para persistir cambios');
        return false;
      }
      const response = await fetch(`http://localhost:3000/api/tenants/${tenantId}`, {
        method: 'PATCH',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token}`
        },
        body: JSON.stringify(updates)
      });
      if (!response.ok) {
        console.error('Error persistiendo inquilino:', response.status);
        return false;
      }
      const result = await response.json();
      console.log('Inquilino persistido:', result.data?.name, Object.keys(updates));
      return result.data || true;
    } catch (error) {
      console.error('Error en persistTenantUpdate:', error);
      return false;
    }
  };

  // Funci├│n para descifrar datos
  const decryptData = async (encryptedData, key) => {
    try {
      const keyBuffer = await crypto.subtle.importKey(
        'raw',
        new TextEncoder().encode(key.padEnd(32, '0').slice(0, 32)),
        { name: 'AES-GCM' },
        false,
        ['decrypt']
      );

      const data = JSON.parse(encryptedData);
      const iv = new Uint8Array(data.iv);
      const encryptedBuffer = new Uint8Array(data.data);

      const decryptedBuffer = await crypto.subtle.decrypt(
        { name: 'AES-GCM', iv: iv },
        keyBuffer,
        encryptedBuffer
      );

      const decryptedText = new TextDecoder().decode(decryptedBuffer);
      return JSON.parse(decryptedText);
    } catch (error) {
      console.error('Error al descifrar datos:', error);
      throw error;
    }
  };

  // Funci├│n helper para normalizar notas (manejar string o array)
  const normalizeNotes = (notes) => {
    if (!notes) return [];
    
    // Si ya es un array, retornarlo
    if (Array.isArray(notes)) {
      return notes;
    }
    
    // Si es string, convertir a array con un elemento
    if (typeof notes === 'string' && notes.trim()) {
      return [{
        id: 'legacy-note',
        text: notes.trim(),
        date: new Date().toISOString()
      }];
    }
    
    return [];
  };

  // Funcion para cargar inquilinos desde Firestore
  const loadTenants = async () => {
    try {
      setLoading(true);
      setError(null);

      const organizationId = getOrganizationId();
      if (!organizationId) {
        throw new Error('No se pudo obtener el ID de la organizacion');
      }

      console.log('Cargando inquilinos para organizacion:', organizationId);

      const response = await fetch(`http://localhost:3000/api/tenants`, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${getJWTFromStorage()}`
        }
      });

      if (!response.ok) {
        throw new Error(`Error HTTP: ${response.status}`);
      }

      const result = await response.json();
      
      if (result.success && result.data) {
        console.log('Datos de inquilinos recibidos:', result.data.length, 'inquilinos');
        setTenants(result.data);
        console.log('Inquilinos cargados exitosamente:', result.data.length);
      } else {
        console.log('No se encontraron inquilinos');
        setTenants([]);
      }
    } catch (error) {
      console.error('Error cargando inquilinos:', error);
      setError(error.message);
      setTenants([]);
    } finally {
      setLoading(false);
    }
  };

  // Cargar inquilinos al montar el componente
  React.useEffect(() => {
    loadTenants();
  }, []);

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const handleAddTenant = async (e) => {
    e.preventDefault();
    if (formData.name && formData.email && formData.apartment) {
      try {
        setLoading(true);
        
        // Usar variable global para obtener el organizationId
        const organizationId = window.currentOrganizationId;
        if (!organizationId) {
          throw new Error('No se pudo obtener el ID de la organizaci├│n desde variables globales');
        }

        const newTenantData = {
          ...formData,
          organizationId: organizationId, // Incluir organizationId en los datos
          createdAt: new Date().toISOString(),
          pendingAmount: 0,
          notes: [],
          paymentHistory: [],
          lastPaymentDate: null,
          folder: 'default'
        };

        console.log('­ƒôØ Agregando nuevo inquilino:', newTenantData);

        const response = await fetch(`http://localhost:3000/api/tenants`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${getJWTFromStorage()}`
          },
          body: JSON.stringify(newTenantData)
        });

        if (!response.ok) {
          throw new Error(`Error HTTP: ${response.status}`);
        }

        const result = await response.json();
        
        if (result.success) {
          console.log(' Inquilino agregado exitosamente');
          
          // Recargar la lista de inquilinos
          await loadTenants();
          
          // Limpiar formulario
          setFormData({
            name: '',
            email: '',
            phone: '',
            apartment: '',
            rentAmount: '',
            endDate: '',
            status: 'active',
            paymentStatus: 'current'
          });
          
          setShowAddForm(false);
          
          // Mostrar notificaci├│n de ├®xito
          window.showSuccess('Inquilino agregado exitosamente');
        } else {
          throw new Error(result.message || 'Error al agregar inquilino');
        }
      } catch (error) {
        console.error('ÔØî Error agregando inquilino:', error);
        window.showError('Error al agregar inquilino: ' + error.message);
      } finally {
        setLoading(false);
      }
    }
  };

  const handleTenantClick = (tenant) => {
    setSelectedTenant(tenant);
    setPaymentAmount('');
    setNewNote('');
    setPaymentNote('');
  };

  // Funci├│n de debugging para analizar pagos
  const debugPaymentHistory = (tenant) => {
      console.log('=== DEBUGGING PAYMENT HISTORY ===');
      console.log('Inquilino:', tenant.name);
      console.log('Fecha actual:', new Date().toISOString());
      console.log('Mes actual:', new Date().getMonth() + 1);
      console.log('Ano actual:', new Date().getFullYear());
    
      if (!tenant.paymentHistory || tenant.paymentHistory.length === 0) {
        console.log('No hay historial de pagos');
        return { totalPayments: 0, thisMonthPayments: [] };
      }
    
      console.log('Total de pagos en historial:', tenant.paymentHistory.length);
      console.log('Historial completo:', tenant.paymentHistory);
    
      const now = new Date();
      const currentMonth = now.getMonth();
      const currentYear = now.getFullYear();
    
      const thisMonthPayments = tenant.paymentHistory.filter((payment, index) => {
        console.log(`\nAnalizando pago #${index + 1}:`, payment);
      
        // Verificar si la fecha existe y es valida
        if (!payment.date) {
          console.log('Pago sin fecha, saltando...');
          return false;
        }
      
        const paymentDate = new Date(payment.date);
        console.log('Fecha original del pago:', payment.date);
        console.log('Fecha parseada:', paymentDate.toISOString());
        console.log('Mes del pago:', paymentDate.getMonth() + 1);
        console.log('Ano del pago:', paymentDate.getFullYear());
        console.log('Es fecha valida?:', !isNaN(paymentDate.getTime()));
      
        const isThisMonth = paymentDate.getMonth() === currentMonth && 
                           paymentDate.getFullYear() === currentYear;
        console.log('Es del mes actual?:', isThisMonth);
      
        return isThisMonth;
      });
    
      console.log('\nRESUMEN:');
      console.log('Pagos del mes actual:', thisMonthPayments.length);
      console.log('Detalles de pagos del mes:', thisMonthPayments);
      console.log('=== FIN DEBUGGING ===\n');
    
      return {
        totalPayments: tenant.paymentHistory.length,
        thisMonthPayments: thisMonthPayments
      };
    };

  const handlePayment = () => {
    console.log('INICIANDO VALIDACION DE PAGO');
    console.log('Selected Tenant:', selectedTenant);
    console.log('Payment Amount:', paymentAmount);
    
    if (!paymentAmount || paymentAmount <= 0) {
      console.log('Pago invalido o vacio');
      window.showError('Por favor ingrese un monto valido mayor a $0');
      return;
    }
    
    // EJECUTAR DEBUGGING DETALLADO
    const debugInfo = debugPaymentHistory(selectedTenant);
    const paymentsThisMonth = debugInfo.thisMonthPayments;
    const paymentsThisMonthCount = paymentsThisMonth.length;
    
    const payment = parseFloat(paymentAmount);
    const rentAmount = parseFloat(selectedTenant.rentAmount || 0);
    const totalOwed = rentAmount + (selectedTenant.pendingAmount || 0);
    
    console.log('Informacion del pago:');
    console.log('Monto a pagar:', payment);
    console.log('Renta mensual:', rentAmount);
    console.log('Monto pendiente:', selectedTenant.pendingAmount || 0);
    console.log('Total adeudado:', totalOwed);
    
    // BLOQUEO ABSOLUTO Y FINAL: Maximo 2 pagos por mes
    if (paymentsThisMonthCount >= 2) {
      console.log('PAGO BLOQUEADO DEFINITIVAMENTE');
      console.log(`RAZON: Ya realizo ${paymentsThisMonthCount} pagos este mes`);
      console.log('Detalles de pagos del mes:', paymentsThisMonth);
      
      // Guardar informaci├│n adicional para el modal
      window.maxPaymentErrorInfo = {
        paymentsCount: paymentsThisMonthCount,
        paymentsDetails: paymentsThisMonth,
        maxAllowed: 2,
        monthName: new Intl.DateTimeFormat('es-ES', { month: 'long', year: 'numeric' }).format(new Date())
      };
      
      // Limpiar inmediatamente el formulario para evitar reintentos
      setPaymentAmount('');
      setPaymentNote('');
      
      // Mostrar modal de error
      setShowMaxAdvanceError(true);
      
      // RETORNO INMEDIATO - NO CONTINUAR CON NINGUNA VALIDACIÓN ADICIONAL
      return;
    }
    
    // VALIDACIÓN SECUNDARIA: Verificar status de adelantado
    if (selectedTenant.paymentStatus === 'advanced') {
      console.log('­ƒÜ¿ SEGUNDA VALIDACI├ôN: El inquilino ya est├í adelantado');
      
      // Guardar informaci├│n para el modal
      window.maxPaymentErrorInfo = {
        paymentsCount: 'advanced',
        paymentsDetails: [],
        maxAllowed: 2,
        monthName: new Intl.DateTimeFormat('es-ES', { month: 'long', year: 'numeric' }).format(now),
        isAdvanced: true
      };
      
      // Limpiar formulario
      setPaymentAmount('');
      setPaymentNote('');
      
      setShowMaxAdvanceError(true);
      return;
    }
    
    // Validar máximo de meses adelantado
    const maxAdvancePayment = rentAmount * MAX_ADVANCE_MONTHS;
    
    // Si el pago es mayor que lo que debe, verificar límites de adelanto
    if (payment > totalOwed) {
      const excessAmount = payment - totalOwed;
      console.log(`­el Pago excede monto adeudado. Exceso: ${excessAmount}, Límite adelanto: ${maxAdvancePayment}`);
      
      // Si el exceso supera el límite de adelanto, bloquear
      if (excessAmount > maxAdvancePayment) {
        console.log('­ƒÜ¿ BLOQUEANDO: Exceso supera l├¡mite de adelanto');
        window.showError(`BLOQUEADO: El exceso de $${excessAmount} supera el límite de adelanto de $${maxAdvancePayment}!`);
        setShowMaxAdvanceError(true);
        return;
      }
      
      console.log('Ô£à Permitiendo pago con cambio dentro del l├¡mite');
      setPaymentData({ payment, change: excessAmount, totalOwed });
      setShowChangeConfirm(true);
      return;
    }
    
    // Validación especial: si ya está al corriente y quiere pagar exacto o menos
    if (selectedTenant.pendingAmount === 0 && selectedTenant.lastPaymentDate) {
      const lastPayment = new Date(selectedTenant.lastPaymentDate);
      const now = new Date();
      const sameMonth = lastPayment.getMonth() === now.getMonth() && lastPayment.getFullYear() === now.getFullYear();
      
      if (sameMonth) {
        console.log('­ƒÜ¿ BLOQUEANDO: Ya pagó este mes y está al corriente');
        window.showError('BLOQUEADO: El inquilino ya pagó este mes y está al corriente!');
        setShowMaxAdvanceError(true);
        return;
      }
    }
    
    // Pagos normales
    if (payment < totalOwed) {
      const remaining = totalOwed - payment;
      console.log('­ƒÆ░ Pago parcial permitido');
      setPaymentData({ payment, remaining, totalOwed });
      setShowPaymentConfirm(true);
    } else {
      console.log(' Pago exacto permitido');
      updateTenantPayment(payment, 0);
    }
  };

  const confirmPartialPayment = () => {
    updateTenantPayment(paymentData.payment, paymentData.remaining);
    setShowPaymentConfirm(false);
    setPaymentData(null);
  };

  const cancelPartialPayment = () => {
    setShowPaymentConfirm(false);
    setPaymentData(null);
  };

  const confirmChangePayment = () => {
    // Validaci├│n adicional antes de procesar el pago
    const excessAmount = paymentData.change;
    const rentAmount = parseFloat(selectedTenant.rentAmount || 0);
    const maxAdvancePayment = rentAmount * MAX_ADVANCE_MONTHS;
    const isCurrentOnPayments = selectedTenant.pendingAmount === 0;
    const isAlreadyAdvanced = selectedTenant.paymentStatus === 'advanced';
    
    // Si ya está adelantado, NO puede hacer más pagos
    if (isAlreadyAdvanced) {
      setShowChangeConfirm(false);
      setPaymentData(null);
      setShowMaxAdvanceError(true);
      return;
    }
    
    if (isCurrentOnPayments && excessAmount > maxAdvancePayment) {
      setShowChangeConfirm(false);
      setPaymentData(null);
      setShowMaxAdvanceError(true);
      return;
    }
    
    updateTenantPayment(paymentData.totalOwed, 0);
    setShowChangeConfirm(false);
    setPaymentData(null);
  };

  const cancelChangePayment = () => {
    setShowChangeConfirm(false);
    setPaymentData(null);
  };

  const confirmNextMonthPayment = () => {
    const actualPayment = paymentData.maxAdvancePayment || paymentData.rentAmount;
    updateTenantPayment(actualPayment, 0, true);
    setShowAlreadyPaidConfirm(false);
    setPaymentData(null);
  };

  const cancelNextMonthPayment = () => {
    setShowAlreadyPaidConfirm(false);
    setPaymentData(null);
  };

  const closeMaxAdvanceError = () => {
    setShowMaxAdvanceError(false);
    setPaymentAmount('');
    // Limpiar información adicional del modal
    if (window.maxPaymentErrorInfo) {
      delete window.maxPaymentErrorInfo;
    }
  };

  const updateTenantPayment = async (payment, pendingAmount, isNextMonth = false) => {
    try {
      // Ôøö VALIDACIÓN DE SEGURIDAD ADICIONAL - SEGUNDA CAPA Ôøö
      console.log('­ƒöÆ VALIDACIÓN SECUNDARIA ANTES DE PROCESAR PAGO');
      
      const now = new Date();
      const currentMonth = now.getMonth();
      const currentYear = now.getFullYear();
      
      // Contar pagos del mes actual NUEVAMENTE antes de procesar
      const currentMonthPayments = selectedTenant.paymentHistory 
        ? selectedTenant.paymentHistory.filter(payment => {
            const paymentDate = new Date(payment.date);
            return paymentDate.getMonth() === currentMonth && 
                   paymentDate.getFullYear() === currentYear;
          })
        : [];
      
      console.log('­ƒöÆ VALIDACI├ôN SECUNDARIA - Pagos del mes actual:', currentMonthPayments.length);
      
      // BLOQUEO FINAL - Si ya hay 2 o más pagos, NO procesar
      if (currentMonthPayments.length >= 2) {
        console.error('­ƒÜ¿­ƒÜ¿­ƒÜ¿ BLOQUEO FINAL: Intento de bypass detectado');
        console.error('ÔØî NO SE PROCESAR├ü EL PAGO - Ya hay', currentMonthPayments.length, 'pagos este mes');
        
        window.showError(`PAGO BLOQUEADO: Ya hay ${currentMonthPayments.length} pagos registrados este mes. Máximo permitido: 2`);
        
        // Limpiar formulario
        setPaymentAmount('');
        setPaymentNote('');
        
        return; // NO procesar el pago
      }
      
      console.log('Ô£à VALIDACI├ôN SECUNDARIA PASADA - Procediendo con el pago');
      
      // Obtener organizationId
      const organizationId = window.currentOrganizationId;
      const token = sessionStorage.getItem('authToken') || sessionStorage.getItem('jwt') || 
                   localStorage.getItem('authToken') || localStorage.getItem('jwt');

      if (!organizationId || !token) {
        console.error('ÔØî Faltan datos para guardar el pago:', { organizationId, hasToken: !!token });
        return;
      }

      // Preparar datos del pago
      const paymentData = {
        amount: payment,
        paymentDate: new Date().toISOString(),
        paymentMethod: 'Efectivo', // Puedes hacer esto configurable
        notes: paymentNote || (isNextMonth ? 'Pago adelantado proximo mes' : 'Pago mensual')
      };

      console.log('­ƒÆ░ Registrando pago en API:', {
        tenantId: selectedTenant.id,
        organizationId,
        paymentData
      });

      // Enviar pago al API
      const response = await fetch(`http://localhost:3000/api/tenants/${selectedTenant.id}/payment`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token}`
        },
        body: JSON.stringify(paymentData)
      });

      if (!response.ok) {
        throw new Error(`Error del servidor: ${response.status}`);
      }

      const result = await response.json();
      console.log(' Pago registrado exitosamente:', result);

      // Actualizar estado local con los datos del servidor
      const updatedTenant = result.data.tenant;
      
      const updatedTenants = tenants.map(tenant => {
        if (tenant.id === selectedTenant.id) {
          setSelectedTenant(updatedTenant);
          return updatedTenant;
        }
        return tenant;
      });
      
      setTenants(updatedTenants);
      setPaymentAmount('');
      setPaymentNote('');
      
      // Enviar recibo por email
      sendPaymentReceipt(updatedTenant, payment, pendingAmount, isNextMonth);
      
    } catch (error) {
      console.error('ÔØî Error al registrar pago:', error);
      // Aún así actualizar el estado local como fallback
      const updatedTenants = tenants.map(tenant => {
        if (tenant.id === selectedTenant.id) {
          const currentDate = new Date().toISOString();
          let newPaymentStatus = 'current';
          
          if (pendingAmount > 0) {
            newPaymentStatus = 'overdue';
          } else if (isNextMonth) {
            newPaymentStatus = 'advanced';
          }
          
          const updatedTenant = {
            ...tenant,
            pendingAmount: pendingAmount,
            paymentStatus: newPaymentStatus,
            lastPaymentDate: currentDate,
            paymentHistory: [
              ...(tenant.paymentHistory || []),
              {
                id: Date.now(),
                amount: payment,
                date: currentDate,
                type: isNextMonth ? 'next-month-payment' : 'payment',
                description: isNextMonth ? 'Pago adelantado pr├│ximo mes' : 'Pago mensual',
                note: paymentNote || null
              }
            ]
          };
          setSelectedTenant(updatedTenant);
          return updatedTenant;
        }
        return tenant;
      });
      setTenants(updatedTenants);
      setPaymentAmount('');
      setPaymentNote('');
    }
  };

  const sendPaymentReceipt = async (tenant, amount, pendingAmount, isNextMonth = false) => {
    console.log('­ƒöä Starting sendPaymentReceipt...');
    console.log('­ƒôï Tenant:', tenant);
    console.log('­ƒÆ░ Amount:', amount);
    console.log('­ƒôè Pending Amount:', pendingAmount);
    console.log('­ƒôà Is Next Month:', isNextMonth);
    
    try {

  const token = getJWTFromStorage();
  let payerName = 'Sistema';
  let orgName = 'Mi Organizaci├│n';
      
      if (token) {
        console.log(' Token found, getting user info...');
        try {

          const tokenData = parseJWT(token);
          console.log('­ƒöì Token data:', tokenData);
          

          const firstName = fixUTF8String(tokenData.firstName) || '';
          const lastName = fixUTF8String(tokenData.lastName) || '';
          const fullName = `${firstName} ${lastName}`.trim();
          
          if (fullName && fullName !== '') {
            payerName = fullName;
            console.log('­ƒæñ Found user name in token:', payerName);
          } else if (tokenData.fullName) {
            payerName = fixUTF8String(tokenData.fullName);
            console.log('­ƒæñ Using fullName from token:', payerName);
          } else {
            console.log('ÔÜá´©Å No name found in token, checking email...');
            if (tokenData.email) {
              payerName = tokenData.email.split('@')[0];
              console.log('­ƒæñ Using email prefix as name:', payerName);
            }
          }
          
          // Obtener nombre de la organizaci├│n
          console.log('­ƒÅó === STARTING ORGANIZATION FETCH PROCESS ===');
          console.log('­ƒÅó Current orgName before fetch:', `"${orgName}"`);
          
          const organizationId = tokenData.organizationId;
          if (organizationId) {
            console.log('­ƒÅó Organization ID found:', organizationId);
            
            try {
              const response = await fetch(`http://localhost:3000/api/org-name/${organizationId}`, {
                method: 'GET',
                headers: {
                  'Content-Type': 'application/json',
                  'Authorization': `Bearer ${token}`
                }
              });
              
              console.log('­ƒÅó API response status:', response.status);
              
              if (response.ok) {
                const result = await response.json();
                console.log('­ƒÅó API result:', result);
                
                if (result && result.success && result.data) {
                  const fetchedOrgName = result.data.displayName || result.data.name;
                  console.log('­ƒÅó Organization name from API:', fetchedOrgName);
                  
                  if (fetchedOrgName && fetchedOrgName.trim() !== '') {
                    orgName = fetchedOrgName;
                    console.log(' Organization name updated:', orgName);
                  }
                }
              } else {
                console.log('ÔØî Failed to fetch organization name, status:', response.status);
              }
            } catch (apiError) {
              console.error('ÔØî Error fetching organization name:', apiError);
            }
          } else {
            console.log('ÔØî No organization ID in token');
          }
          
          console.log('­ƒÅó === ORGANIZATION FETCH PROCESS COMPLETE ===');
          
        } catch (tokenError) {
          console.error('ÔØî Error processing token:', tokenError);
        }
      } else {
        console.log('ÔÜá´©Å No token found, using default values');
      }
      
      console.log('­ƒæñ Final Payer Name:', payerName);
      console.log('­ƒÅó Final Organization Name:', orgName);

      // Determinar el tipo de pago y monto de cambio
      let paymentType = 'Pago de Renta';
      let change = 0;
      
      if (isNextMonth) {
        paymentType = 'Pago Adelantado - Pr├│ximo Mes';
      } else if (pendingAmount > 0) {
        paymentType = 'Pago Parcial de Renta';
      }

      // Calcular cambio si aplica
      const totalOwed = parseFloat(tenant.rentAmount || 0) + (tenant.pendingAmount || 0);
      if (amount > totalOwed) {
        change = amount - totalOwed;
      }

      const receiptData = {
        tenantName: tenant.name,
        tenantEmail: tenant.email,
        apartment: tenant.apartment,
        amount: parseFloat(amount),
        paymentType,
        organizationName: orgName,
        payerName: payerName,
        pendingAmount: parseFloat(pendingAmount),
        change: change,
        paymentNote: paymentNote || null // Agregar la nota del pago
      };

      console.log('­ƒôº Receipt data to send:', receiptData);

      // Enviar recibo
      console.log('­ƒÜÇ Sending request to Mail API...');
      const response = await fetch('http://localhost:3000/send-receipt', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(receiptData)
      });

      console.log('­ƒôí Response status:', response.status);
      
      const result = await response.json();
      console.log('­ƒôº API Response:', result);

      if (result.success) {
        console.log(' Recibo enviado exitosamente:', result.receiptNumber);
        // Opcional: Mostrar notificaci├│n de ├®xito
        window.showSuccess('Recibo enviado por correo electr├│nico');
      } else {
        console.error('ÔØî Error enviando recibo:', result.message);
        console.error('ÔØî Result errors:', result.errors);
        window.showError('Error al enviar recibo por correo');
      }

    } catch (error) {
      console.error('ÔØî Error sending receipt:', error);
      window.showError('Error al enviar recibo por correo');
    }
  };

  // Función para calcular días hasta expiración del contrato
  const getDaysUntilExpiration = (endDate) => {
    if (!endDate) return null;
    const contractEndDate = new Date(endDate);
    const currentDate = new Date();
    const daysUntilExpiration = Math.ceil((contractEndDate - currentDate) / (1000 * 60 * 60 * 24));
    return daysUntilExpiration;
  };

  // Funci├│n para obtener el indicador de contrato
  const getContractIndicator = (tenant) => {
    const daysUntilExpiration = getDaysUntilExpiration(tenant.endDate);
    if (!daysUntilExpiration) return null;
    
    if (daysUntilExpiration <= 0) {
      return {
        color: 'bg-red-900 text-red-300',
        icon: 'fas fa-exclamation-triangle',
        text: 'Expirado',
        priority: 3
      };
    } else if (daysUntilExpiration <= 30) {
      return {
        color: 'bg-orange-900 text-orange-300',
        icon: 'fas fa-clock',
        text: `${daysUntilExpiration}d`,
        priority: 2
      };
    } else if (daysUntilExpiration <= 60) {
      return {
        color: 'bg-yellow-900 text-yellow-300',
        icon: 'fas fa-calendar-alt',
        text: `${daysUntilExpiration}d`,
        priority: 1
      };
    }
    return null;
  };

  // Funciones para gestion de carpetas
  const getFolderDepth = (folderId, depth = 0) => {
    const folder = folders.find(f => f.id === folderId);
    if (!folder || !folder.parentId) return depth;
    return getFolderDepth(folder.parentId, depth + 1);
  };

  const getFolderPath = (folderId) => {
    const folder = folders.find(f => f.id === folderId);
    if (!folder) return '';
    if (!folder.parentId) return folder.name;
    return getFolderPath(folder.parentId) + ' / ' + folder.name;
  };

  const getSubfolders = (parentId) => {
    return folders.filter(f => f.parentId === parentId);
  };

  const createFolder = () => {
    if (!newFolderName.trim()) return;
    
    const newFolder = {
      id: Date.now().toString(),
      name: newFolderName.trim(),
      color: newFolderColor,
      parentId: newFolderParent
    };
    
    setFolders([...folders, newFolder]);
    setNewFolderName('');
    setNewFolderColor('#3498db');
    setNewFolderParent(null);
    setShowCreateFolder(false);
    window.showSuccess(`Carpeta "${newFolder.name}" creada exitosamente`);
  };

  const deleteFolder = (folderId) => {
    if (folderId === 'default') return; // No permitir eliminar la carpeta por defecto
    
    // Mover todos los inquilinos de esta carpeta a 'default'
    const updatedTenants = tenants.map(tenant => 
      tenant.folder === folderId ? { ...tenant, folder: 'default' } : tenant
    );
    
    setTenants(updatedTenants);
    setFolders(folders.filter(folder => folder.id !== folderId));
    
    if (selectedFolder === folderId) {
      setSelectedFolder('default');
    }
    
    window.showSuccess('Carpeta eliminada e inquilinos movidos a General');
  };

  const moveTenantToFolder = async (tenantId, folderId) => {
    const tenant = tenants.find(t => t.id === tenantId);
    const currentFolder = tenant.folder || 'default';
    
    const newFolder = currentFolder === folderId ? 'default' : folderId;
    
    const updatedTenants = tenants.map(t =>
      t.id === tenantId ? { ...t, folder: newFolder } : t
    );
    setTenants(updatedTenants);
    
    const folderName = newFolder === 'default' ? 'General' : (folders.find(f => f.id === newFolder)?.name || 'General');
    window.showSuccess(`Inquilino movido a ${folderName}`);
    
    await persistTenantUpdate(tenantId, { folder: newFolder });
  };

  // Funci├│n para verificar expiraci├│n del contrato
  const checkContractExpiration = async (tenant) => {
    if (!tenant.endDate) return;
    
    const contractEndDate = new Date(tenant.endDate);
    const currentDate = new Date();
    const daysUntilExpiration = Math.ceil((contractEndDate - currentDate) / (1000 * 60 * 60 * 24));
    
    // Si faltan 30 días o menos para que expire el contrato
    if (daysUntilExpiration <= 30 && daysUntilExpiration > 0) {
      try {
        const token = getJWTFromStorage();
        let orgName = 'Mi Organizaci├│n';
        
        if (token) {
          const tokenData = parseJWT(token);
          const organizationId = tokenData.organizationId;
          
          if (organizationId) {
            try {
              const response = await fetch(`http://localhost:3000/api/org-name/${organizationId}`, {
                method: 'GET',
                headers: {
                  'Content-Type': 'application/json',
                  'Authorization': `Bearer ${token}`
                }
              });
              
              if (response.ok) {
                const result = await response.json();
                if (result && result.success && result.data) {
                  orgName = result.data.displayName || result.data.name;
                }
              }
            } catch (error) {
              console.error('Error fetching organization name for contract expiration:', error);
            }
          }
        }

        // Enviar email de renovaci├│n de contrato
        const renewalData = {
          tenantName: tenant.name,
          tenantEmail: tenant.email,
          apartment: tenant.apartment,
          contractEndDate: tenant.endDate,
          daysUntilExpiration,
          organizationName: orgName
        };

        const response = await fetch('http://localhost:3000/send-contract-renewal', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(renewalData)
        });

        if (response.ok) {
          const result = await response.json();
          if (result.success) {
            console.log('Contract renewal email sent for:', tenant.name);
            return true; // Indica que se envi├│ el email
          }
        }
      } catch (error) {
        console.error('Error sending contract renewal email:', error);
      }
    }
    return false; // No se envi├│ email
  };

  // Funci├│n para verificar todos los contratos pr├│ximos a vencer
  const checkAllContractExpirations = async () => {
    console.log('­ƒöì Checking contract expirations for all tenants...');
    let emailsSent = 0;
    
    for (const tenant of tenants) {
      if (tenant.endDate && tenant.status === 'active') {
        const emailSent = await checkContractExpiration(tenant);
        if (emailSent) {
          emailsSent++;
        }
        // Esperar un poco entre emails para no sobrecargar el servidor
        await new Promise(resolve => setTimeout(resolve, 1000));
      }
    }
    
    if (emailsSent > 0) {
      window.showSuccess(`Se enviaron ${emailsSent} notificaciones de renovación de contrato`);
    }
  };

  React.useEffect(() => {
    if (tenants.length > 0) {
      // Verificar una sola vez después de que se carguen los inquilinos
      const timer = setTimeout(() => {
        checkAllContractExpirations();
        checkExpiredContracts(); // Nueva función para contratos expirados
      }, 5000); // Esperar 5 segundos después de cargar

      return () => clearTimeout(timer);
    }
  }, [tenants.length]); // Solo ejecutar cuando cambie la cantidad de inquilinos

  // Función para verificar contratos expirados y archivarlos automáticamente
  const checkExpiredContracts = async () => {
    console.log(' Checking for expired contracts to archive...');
    
    const tenantsToArchive = [];
    const updatedTenants = tenants.map(tenant => {
      if (tenant.endDate && tenant.status === 'active') {
        const daysUntilExpiration = getDaysUntilExpiration(tenant.endDate);
        
        if (daysUntilExpiration < 0 && tenant.contractStatus !== 'terminated') {
          console.log(` Auto-archiving expired contract for ${tenant.name}`);
          const updates = {
            status: 'archived',
            contractStatus: 'expired',
            archivedDate: new Date().toISOString(),
            archivedReason: 'Contrato expirado automáticamente'
          };
          tenantsToArchive.push({ id: tenant.id, updates });
          return { ...tenant, ...updates };
        }
      }
      return tenant;
    });
    
    setTenants(updatedTenants);
    
    // Persistir cada archivado
    for (const item of tenantsToArchive) {
      await persistTenantUpdate(item.id, item.updates);
    }
  };

  // Función para renovar contrato
  const handleRenewContract = () => {
    setShowRenewConfirm(true);
  };

  // Función para confirmar renovación
  const confirmRenewContract = async () => {
    const currentEndDate = new Date(selectedTenant.endDate);
    const today = new Date();
    const newEndDate = new Date();
    
    if (currentEndDate > today) {
      newEndDate.setTime(currentEndDate.getTime() + (365 * 24 * 60 * 60 * 1000));
    } else {
      newEndDate.setTime(today.getTime() + (365 * 24 * 60 * 60 * 1000));
    }
    
    const updates = {
      endDate: newEndDate.toISOString().split('T')[0],
      contractStatus: 'renewed',
      status: 'active',
      renewalHistory: [
        ...(selectedTenant.renewalHistory || []),
        {
          id: Date.now(),
          renewedDate: new Date().toISOString(),
          previousEndDate: selectedTenant.endDate,
          newEndDate: newEndDate.toISOString().split('T')[0],
          renewedBy: 'Sistema'
        }
      ]
    };

    const updatedTenants = tenants.map(tenant => {
      if (tenant.id === selectedTenant.id) {
        const updatedTenant = { ...tenant, ...updates };
        setSelectedTenant(updatedTenant);
        return updatedTenant;
      }
      return tenant;
    });
    
    setTenants(updatedTenants);
    setShowRenewConfirm(false);
    
    await persistTenantUpdate(selectedTenant.id, updates);
    window.showSuccess('Contrato renovado exitosamente por 1 año');
  };

  // Función para finalizar contrato
  const handleTerminateContract = () => {
    const daysUntilExpiration = getDaysUntilExpiration(selectedTenant.endDate);
    
    if (daysUntilExpiration > 0) {
      // El contrato aún no ha expirado, preguntar si quiere finalizar ahora o programar
      setShowTerminateConfirm(true);
    } else {
      // El contrato ya expiró, finalizar inmediatamente
      terminateContractImmediately();
    }
  };

  // Función para finalizar contrato inmediatamente
  const terminateContractImmediately = async () => {
    const updates = {
      status: 'archived',
      contractStatus: 'terminated',
      terminationDate: new Date().toISOString(),
      terminationReason: 'Finalizado manualmente',
      archivedDate: new Date().toISOString()
    };

    const updatedTenants = tenants.map(tenant => {
      if (tenant.id === selectedTenant.id) {
        const updatedTenant = { ...tenant, ...updates };
        setSelectedTenant(null);
        return updatedTenant;
      }
      return tenant;
    });
    
    setTenants(updatedTenants);
    setShowTerminateConfirm(false);
    
    await persistTenantUpdate(selectedTenant.id, updates);
    window.showSuccess('Contrato finalizado y archivado exitosamente');
  };

  // Función para programar finalización
  const scheduleContractTermination = async () => {
    const updates = {
      contractStatus: 'scheduled_termination',
      terminationScheduled: true,
      terminationDate: selectedTenant.endDate
    };

    const updatedTenants = tenants.map(tenant => {
      if (tenant.id === selectedTenant.id) {
        const updatedTenant = { ...tenant, ...updates };
        setSelectedTenant(updatedTenant);
        return updatedTenant;
      }
      return tenant;
    });
    
    setTenants(updatedTenants);
    setShowTerminateConfirm(false);
    
    await persistTenantUpdate(selectedTenant.id, updates);
    window.showSuccess('Finalización programada para la fecha de expiración');
  };

  // Verificar contratos al cargar la página
  React.useEffect(() => {
    if (tenants.length > 0) {
      // Verificar una sola vez después de que se carguen los inquilinos
      const timer = setTimeout(() => {
        checkAllContractExpirations();
      }, 5000); // Esperar 5 segundos después de cargar

      return () => clearTimeout(timer);
    }
  }, [tenants.length]); // Solo ejecutar cuando cambie la cantidad de inquilinos

  // Cerrar menú contextual al hacer clic fuera
  React.useEffect(() => {
    const handleClickOutside = (event) => {
      if (showContextMenu) {
        setShowContextMenu(null);
      }
    };

    document.addEventListener('click', handleClickOutside);
    return () => document.removeEventListener('click', handleClickOutside);
  }, [showContextMenu]);

  // Función de debug global para probar desde la consola
  window.debugOrganizationName = async () => {
    const token = getJWTFromStorage();
    console.log('­ Token exists:', !!token);
    
    if (!token) {
      console.log('ÔØî No token found');
      return 'NO_TOKEN';
    }
    
    const tokenData = parseJWT(token);
    console.log('­ƒôï Token data:', tokenData);
    
    const orgId = tokenData.organizationId;
    console.log('­ƒÅó Organization ID:', orgId);
    
    if (!orgId) {
      console.log('ÔØî No organization ID');
      return 'NO_ORG_ID';
    }
    
    try {
      const url = `http://localhost:3000/api/org-name/${orgId}`;
      console.log('­ƒîÉ Fetching from:', url);
      
      const response = await fetch(url);
      console.log('­ƒôí Response status:', response.status);
      
      const result = await response.json();
      console.log('­ƒôï API Response:', result);
      
      if (result && result.success && result.data) {
        const orgName = result.data.displayName || result.data.name;
        console.log(' Organization name:', orgName);
        return orgName;
      } else {
        console.log('ÔØî API response invalid');
        return 'API_INVALID';
      }
    } catch (error) {
      console.log('ÔØî Error:', error);
      return 'ERROR';
    }
  };



  const addNote = async () => {
    if (!newNote.trim()) return;
    
    try {
      // Obtener datos necesarios
      const organizationId = window.currentOrganizationId;
      const token = sessionStorage.getItem('authToken') || sessionStorage.getItem('jwt') || 
                   localStorage.getItem('authToken') || localStorage.getItem('jwt');

      if (!organizationId || !token) {
        console.error('ÔØî Faltan datos para guardar la nota:', { organizationId, hasToken: !!token });
        return;
      }

      console.log('­ƒôØ Guardando nota en API:', {
        tenantId: selectedTenant.id,
        notes: newNote
      });

      // Enviar nota al API
      const response = await fetch(`http://localhost:3000/api/tenants/${selectedTenant.id}/notes`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token}`
        },
        body: JSON.stringify({
          notes: newNote.trim()
        })
      });

      if (!response.ok) {
        throw new Error(`Error del servidor: ${response.status}`);
      }

      const result = await response.json();
      console.log(' Nota guardada exitosamente:', result);

      // Actualizar estado local con los datos del servidor
      const updatedTenant = result.data;
      
      const updatedTenants = tenants.map(tenant => {
        if (tenant.id === selectedTenant.id) {
          setSelectedTenant(updatedTenant);
          return updatedTenant;
        }
        return tenant;
      });
      
      setTenants(updatedTenants);
      setNewNote('');
      
    } catch (error) {
      console.error('ÔØî Error al guardar nota:', error);
      // Fallback: actualizar estado local (mantener como string para consistencia con API)
      const updatedTenants = tenants.map(tenant => {
        if (tenant.id === selectedTenant.id) {
          const updatedTenant = {
            ...tenant,
            notes: newNote.trim() // Mantener como string igual que el API
          };
          setSelectedTenant(updatedTenant);
          return updatedTenant;
        }
        return tenant;
      });
      setTenants(updatedTenants);
      setNewNote('');
    }
  };

  // Filtrar inquilinos seg├║n la pesta├▒a activa y filtros
  const filteredTenants = tenants.filter(tenant => {
    // Filtro por pesta├▒a
    let tabMatch = false;
    if (activeTab === 'active') {
      // Mostrar todos los inquilinos activos
      tabMatch = tenant.status === 'active';
    } else if (activeTab === 'archived') {
      tabMatch = tenant.status === 'archived';
    } else if (activeTab === 'folders') {
      // Mostrar inquilinos de la carpeta seleccionada que no est├®n archivados
      tabMatch = tenant.folder === selectedFolder && tenant.status !== 'archived';
    }

    // Filtros adicionales
    const matchesSearch = tenant.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
                         tenant.apartment.toLowerCase().includes(searchTerm.toLowerCase());
    const matchesStatus = statusFilter === 'all' || tenant.status === statusFilter;
    const matchesPayment = paymentFilter === 'all' || tenant.paymentStatus === paymentFilter;
    const matchesFolder = folderFilter === 'all' || tenant.folder === folderFilter;
    
    return tabMatch && matchesSearch && matchesStatus && matchesPayment && matchesFolder;
  });

  const activeTenants = tenants.filter(tenant => tenant.status === 'active').length;
  const archivedTenants = tenants.filter(tenant => tenant.status === 'archived').length;
  const currentTenants = tenants.filter(tenant => tenant.paymentStatus === 'current' && tenant.status === 'active').length;
  const advancedTenants = tenants.filter(tenant => tenant.paymentStatus === 'advanced' && tenant.status === 'active').length;
  const overdueTenants = tenants.filter(tenant => tenant.paymentStatus === 'overdue' && tenant.status === 'active').length;

  // Datos para la gráfica
  const chartData = {
    labels: ['Al Corriente', 'Adelantados', 'Deudores'],
    datasets: [{
      data: [currentTenants, advancedTenants, overdueTenants],
      backgroundColor: ['#2ecc71', '#3498db', '#e74c3c'],
      borderColor: ['#27ae60', '#2980b9', '#c0392b'],
      borderWidth: 2
    }]
  };

  const chartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: {
        position: 'bottom',
        labels: {
          color: '#ffffff',
          padding: 20
        }
      }
    }
  };

  // Crear gráfica cuando hay datos
  React.useEffect(() => {
    const canvas = document.getElementById('paymentChart');
    if (canvas && (currentTenants > 0 || advancedTenants > 0 || overdueTenants > 0)) {
      const ctx = canvas.getContext('2d');
      
      // Destruir gráfica existente si existe
      if (canvas.chart) {
        canvas.chart.destroy();
      }
      
      // Verificar si Chart está disponible globalmente
      if (typeof Chart !== 'undefined') {
        canvas.chart = new Chart(ctx, {
          type: 'doughnut',
          data: chartData,
          options: chartOptions
        });
      }
    }
  }, [currentTenants, advancedTenants, overdueTenants]);

  const maskInfo = (info, type) => {
    if (!info) return '';
    if (type === 'email') {
      const [user, domain] = info.split('@');
      return `${user.slice(0, 2)}***@${domain}`;
    }
    if (type === 'phone') {
      return `***-***-${info.slice(-4)}`;
    }
    if (type === 'amount') {
      return `$***`;
    }
    return info;
  };

  return (
    <div className="space-y-6">

      <div className="mb-8">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-3xl font-bold text-white mb-2">Gestión de Inquilinos</h1>
            <p className="text-gray-400">Administra y supervisa la información de tus inquilinos</p>
          </div>
          <div className="flex items-center space-x-3">
            <button
              onClick={() => window.setCurrentPage('add-tenant')}
              className="flex items-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors"
            >
              <i className="fas fa-plus mr-2"></i>
              Agregar Inquilino
            </button>
          </div>
        </div>
      </div>

      {/* Loading State */}
      {loading && (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6 w-full px-6">
          {[1, 2, 3, 4, 5, 6].map((i) => (
            <div key={i} className="bg-[#252628] rounded-xl p-4 flex flex-col gap-3">
              <div className="flex items-center gap-4">
                <div className="skeleton-loader h-12 w-12 rounded-full"></div>
                <div className="flex-1">
                  <div className="skeleton-loader h-5 w-3/4 mb-2"></div>
                  <div className="skeleton-loader h-4 w-1/2"></div>
                </div>
              </div>
              <div className="flex justify-between mt-2">
                <div className="skeleton-loader h-4 w-1/4"></div>
                <div className="skeleton-loader h-4 w-1/4"></div>
                <div className="skeleton-loader h-4 w-1/4"></div>
              </div>
            </div>
          ))}
        </div>
      )}

      {/* Error State */}
      {!loading && error && (
        <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-4 mb-6">
          <div className="flex items-center">
            <i className="fas fa-exclamation-triangle text-red-400 mr-3"></i>
            <div>
              <p className="text-red-400 font-medium">Error al cargar inquilinos</p>
              <p className="text-red-300 text-sm mt-1">{error}</p>
            </div>
            <button 
              onClick={loadTenants}
              className="ml-auto bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg text-sm transition-colors"
            >
              Reintentar
            </button>
          </div>
        </div>
      )}



      {/* Data Stats */}
      {!loading && !error && tenants.length > 0 && (
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
          <div className="bg-[#1b1c20] border border-[#252628] rounded-lg p-4">
            <div className="flex items-center">
              <div className="p-2 bg-blue-500/10 rounded-lg mr-3">
                <i className="fas fa-users text-blue-400"></i>
              </div>
              <div>
                <p className="text-gray-400 text-sm">Total Inquilinos</p>
                <p className="text-white text-xl font-semibold">{tenants.length}</p>
              </div>
            </div>
          </div>
          <div className="bg-[#1b1c20] border border-[#252628] rounded-lg p-4">
            <div className="flex items-center">
              <div className="p-2 bg-green-500/10 rounded-lg mr-3">
                <i className="fas fa-check-circle text-green-400"></i>
              </div>
              <div>
                <p className="text-gray-400 text-sm">Activos</p>
                <p className="text-white text-xl font-semibold">{filteredTenants.filter(t => t.status === 'active').length}</p>
              </div>
            </div>
          </div>
          <div className="bg-[#1b1c20] border border-[#252628] rounded-lg p-4">
            <div className="flex items-center">
              <div className="p-2 bg-yellow-500/10 rounded-lg mr-3">
                <i className="fas fa-exclamation-triangle text-yellow-400"></i>
              </div>
              <div>
                <p className="text-gray-400 text-sm">Pendientes</p>
                <p className="text-white text-xl font-semibold">{filteredTenants.filter(t => t.paymentStatus === 'overdue').length}</p>
              </div>
            </div>
          </div>
          <div className="bg-[#1b1c20] border border-[#252628] rounded-lg p-4">
            <div className="flex items-center">
              <div className="p-2 bg-red-500/10 rounded-lg mr-3">
                <i className="fas fa-archive text-red-400"></i>
              </div>
              <div>
                <p className="text-gray-400 text-sm">Archivados</p>
                <p className="text-white text-xl font-semibold">{filteredTenants.filter(t => t.status === 'archived').length}</p>
              </div>
            </div>
          </div>
        </div>
      )}


      {showCreateFolder && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-[#1b1c20] rounded-lg p-6 w-full max-w-md mx-4 border border-[#252628]">
            <div className="flex items-center justify-between mb-6">
              <h3 className="text-xl font-semibold text-white">Crear Nueva Carpeta</h3>
              <button 
                onClick={() => {
                  setShowCreateFolder(false);
                  setNewFolderParent(null);
                }}
                className="text-gray-400 hover:text-white"
              >
                <i className="fas fa-times"></i>
              </button>
            </div>
            
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-300 mb-2">
                  Nombre de la Carpeta
                </label>
                <input
                  type="text"
                  value={newFolderName}
                  onChange={(e) => setNewFolderName(e.target.value)}
                  className="w-full px-3 py-2 bg-[#252628] border border-[#3a3b3e] rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500"
                  placeholder="Ej: VIP, Problemáticos, etc."
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-300 mb-2">
                  Carpeta Padre (opcional)
                </label>
                <select
                  value={newFolderParent || ''}
                  onChange={(e) => setNewFolderParent(e.target.value || null)}
                  className="custom-select w-full px-3 pr-8 py-2 bg-[#252628] border border-[#3a3b3e] rounded-lg text-white focus:outline-none focus:border-blue-500"
                >
                  <option value="">Sin carpeta padre</option>
                  {folders.map(folder => (
                    <option key={folder.id} value={folder.id}>
                      {getFolderPath(folder.id)}
                    </option>
                  ))}
                </select>
              </div>
              
              <div>
                <label className="block text-sm font-medium text-gray-300 mb-2">
                  Color de la Carpeta
                </label>
                <div className="flex flex-wrap gap-2">
                  {['#3498db', '#2ecc71', '#f39c12', '#e74c3c', '#9b59b6', '#1abc9c', '#34495e', '#95a5a6'].map(color => (
                    <button
                      key={color}
                      onClick={() => setNewFolderColor(color)}
                      className={`w-8 h-8 rounded-lg border-2 ${
                        newFolderColor === color ? 'border-white' : 'border-transparent'
                      }`}
                      style={{ backgroundColor: color }}
                    />
                  ))}
                </div>
              </div>
              
              <div className="flex gap-4 pt-4">
                <button
                  onClick={() => {
                    setShowCreateFolder(false);
                    setNewFolderParent(null);
                  }}
                  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={createFolder}
                  disabled={!newFolderName.trim()}
                  className="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  Crear Carpeta
                </button>
              </div>
            </div>
          </div>
        </div>
      )}


      {showPaymentConfirm && paymentData && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-[#1b1c20] rounded-lg p-6 w-full max-w-md mx-4 border border-[#252628]">
            <div className="flex items-center justify-between mb-6">
              <h3 className="text-xl font-semibold text-white">Confirmar Pago Parcial</h3>
              <button 
                onClick={cancelPartialPayment}
                className="text-gray-400 hover:text-white"
              >
                <i className="fas fa-times"></i>
              </button>
            </div>
            
            <div className="space-y-4">
              <div className="bg-[#252628] rounded-lg p-4">
                <p className="text-gray-300 mb-2">
                  El pago de <span className="text-green-400 font-bold">${paymentData.payment}</span> es menor al monto requerido de <span className="text-red-400 font-bold">${paymentData.totalOwed}</span>.
                </p>
                <p className="text-orange-300">
                  Quedará un monto pendiente: <span className="font-bold">${paymentData.remaining}</span>
                </p>
              </div>
              
              <p className="text-gray-400 text-sm">
                ¿Deseas guardar el monto faltante como dinero pendiente?
              </p>
              
              <div className="flex gap-4">
                <button
                  onClick={cancelPartialPayment}
                  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={confirmPartialPayment}
                  className="flex-1 px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg font-medium transition-colors"
                >
                  Confirmar
                </button>
              </div>
            </div>
          </div>
        </div>
      )}


      {showChangeConfirm && paymentData && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-[#1b1c20] rounded-lg p-6 w-full max-w-md mx-4 border border-[#252628]">
            <div className="flex items-center justify-between mb-6">
              <h3 className="text-xl font-semibold text-white">Dar Cambio</h3>
              <button 
                onClick={cancelChangePayment}
                className="text-gray-400 hover:text-white"
              >
                <i className="fas fa-times"></i>
              </button>
            </div>
            
            <div className="space-y-4">
              <div className="bg-[#252628] rounded-lg p-4">
                <p className="text-gray-300 mb-2">
                  Pago recibido: <span className="text-green-400 font-bold">${paymentData.payment}</span>
                </p>
                <p className="text-gray-300 mb-2">
                  Monto requerido: <span className="text-blue-400 font-bold">${paymentData.totalOwed}</span>
                </p>
                <p className="text-orange-300">
                  Cambio a dar: <span className="font-bold">${paymentData.change}</span>
                </p>
              </div>
              
              <p className="text-gray-400 text-sm">
                El cliente pagará más del monto requerido. Debes dar cambio.
              </p>
              
              <div className="flex gap-4">
                <button
                  onClick={cancelChangePayment}
                  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={confirmChangePayment}
                  className="flex-1 px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg font-medium transition-colors"
                >
                  Confirmar Pago
                </button>
              </div>
            </div>
          </div>
        </div>
      )}


      {showAlreadyPaidConfirm && paymentData && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-[#1b1c20] rounded-lg p-6 w-full max-w-md mx-4 border border-[#252628]">
            <div className="flex items-center justify-between mb-6">
              <h3 className="text-xl font-semibold text-white">Ya Pagó Este Mes</h3>
              <button 
                onClick={cancelNextMonthPayment}
                className="text-gray-400 hover:text-white"
              >
                <i className="fas fa-times"></i>
              </button>
            </div>
            
            <div className="space-y-4">
              <div className="bg-[#252628] rounded-lg p-4">
                <p className="text-yellow-300 mb-3 flex items-center">
                  <i className="fas fa-exclamation-triangle mr-2"></i>
                  Este inquilino ya realizó el pago de este mes
                </p>
                <p className="text-gray-300 mb-2">
                  Pago máximo permitido: <span className="text-blue-400 font-bold">${paymentData.maxAdvancePayment || paymentData.rentAmount}</span> (1 mes adelantado)
                </p>
                {paymentData.change > 0 && (
                  <p className="text-orange-300">
                    Cambio a dar: <span className="font-bold">${paymentData.change}</span>
                  </p>
                )}
              </div>
              
              <p className="text-gray-400 text-sm">
                ¿Deseas registrar este pago como adelanto para el próximo mes? 
              </p>
              
              <div className="flex gap-4">
                <button
                  onClick={cancelNextMonthPayment}
                  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={confirmNextMonthPayment}
                  className="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors"
                >
                  Pagar Próximo Mes
                </button>
              </div>
            </div>
          </div>
        </div>
      )}


      {showRenewConfirm && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-[#1b1c20] rounded-lg p-6 w-full max-w-md mx-4 border border-[#252628]">
            <div className="flex items-center justify-between mb-6">
              <h3 className="text-xl font-semibold text-white">Renovar Contrato</h3>
              <button 
                onClick={() => setShowRenewConfirm(false)}
                className="text-gray-400 hover:text-white"
              >
                <i className="fas fa-times"></i>
              </button>
            </div>
            
            <div className="space-y-4">
              <div className="bg-[#252628] rounded-lg p-4">
                <p className="text-green-300 mb-3 flex items-center">
                  <i className="fas fa-sync-alt mr-2"></i>
                  Renovar contrato de {selectedTenant?.name}
                </p>
                <p className="text-gray-300 mb-2">
                  Apartamento: <span className="text-white font-bold">{selectedTenant?.apartment}</span>
                </p>
                <p className="text-gray-300 mb-2">
                  Fecha actual de finalizaci├│n: <span className="text-orange-400 font-bold">
                    {selectedTenant?.endDate && new Date(selectedTenant.endDate).toLocaleDateString('es-ES')}
                  </span>
                </p>
                <p className="text-gray-300">
                  Nueva fecha de finalizaci├│n: <span className="text-green-400 font-bold">
                    {selectedTenant?.endDate && (() => {
                      const currentEndDate = new Date(selectedTenant.endDate);
                      const today = new Date();
                      const newEndDate = new Date();
                      
                      if (currentEndDate > today) {
                        newEndDate.setTime(currentEndDate.getTime() + (365 * 24 * 60 * 60 * 1000));
                      } else {
                        newEndDate.setTime(today.getTime() + (365 * 24 * 60 * 60 * 1000));
                      }
                      
                      return newEndDate.toLocaleDateString('es-ES');
                    })()}
                  </span>
                </p>
              </div>
              
              <p className="text-gray-400 text-sm">
                El contrato será extendido por 1 año adicional. Esta acción no se puede deshacer.
              </p>
              
              <div className="flex gap-4">
                <button
                  onClick={() => setShowRenewConfirm(false)}
                  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={confirmRenewContract}
                  className="flex-1 px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg font-medium transition-colors"
                >
                  <i className="fas fa-sync-alt mr-2"></i>
                  Renovar Contrato
                </button>
              </div>
            </div>
          </div>
        </div>
      )}


      {showTerminateConfirm && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-[#1b1c20] rounded-lg p-6 w-full max-w-md mx-4 border border-[#252628]">
            <div className="flex items-center justify-between mb-6">
              <h3 className="text-xl font-semibold text-white">Finalizar Contrato</h3>
              <button 
                onClick={() => setShowTerminateConfirm(false)}
                className="text-gray-400 hover:text-white"
              >
                <i className="fas fa-times"></i>
              </button>
            </div>
            
            <div className="space-y-4">
              <div className="bg-[#252628] rounded-lg p-4">
                <p className="text-red-300 mb-3 flex items-center">
                  <i className="fas fa-exclamation-triangle mr-2"></i>
                  Finalizar contrato de {selectedTenant?.name}
                </p>
                <p className="text-gray-300 mb-2">
                  Apartamento: <span className="text-white font-bold">{selectedTenant?.apartment}</span>
                </p>
                <p className="text-gray-300">
                  Días restantes: <span className="text-orange-400 font-bold">
                    {selectedTenant?.endDate && getDaysUntilExpiration(selectedTenant.endDate)} días
                  </span>
                </p>
              </div>
              
              <div className="bg-[#1f2937] border border-orange-500 rounded-lg p-4">
                <p className="text-orange-300 text-sm mb-3">
                  <i className="fas fa-info-circle mr-2"></i>
                  El contrato aún tiene tiempo restante. ¿Cómo deseas proceder?
                </p>
                <div className="space-y-2">
                  <p className="text-gray-400 text-xs">
                    <strong>Finalizar ahora:</strong> El inquilino será archivado inmediatamente
                  </p>
                  <p className="text-gray-400 text-xs">
                    <strong>Programar finalización:</strong> Se archivará automáticamente cuando expire
                  </p>
                </div>
              </div>
              
              <div className="flex gap-4">
                <button
                  onClick={() => setShowTerminateConfirm(false)}
                  className="flex-1 px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-lg font-medium transition-colors text-sm"
                >
                  Cancelar
                </button>
                <button
                  onClick={scheduleContractTermination}
                  className="flex-1 px-4 py-2 bg-orange-600 hover:bg-orange-700 text-white rounded-lg font-medium transition-colors text-sm"
                >
                  <i className="fas fa-clock mr-1"></i>
                  Programar
                </button>
                <button
                  onClick={terminateContractImmediately}
                  className="flex-1 px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg font-medium transition-colors text-sm"
                >
                  <i className="fas fa-stop mr-1"></i>
                  Finalizar Ahora
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Modal de Error de Máximo Adelantado */}
      {showMaxAdvanceError && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-[#1b1c20] rounded-lg p-6 w-full max-w-md mx-4 border border-red-500">
            <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>
                Límite de Pagos Alcanzado
              </h3>
              <button 
                onClick={closeMaxAdvanceError}
                className="text-gray-400 hover:text-white"
              >
                <i className="fas fa-times"></i>
              </button>
            </div>
            
            <div className="space-y-4">
              <div className="bg-red-900/30 border border-red-500/30 rounded-lg p-4">
                {(() => {
                  const errorInfo = window.maxPaymentErrorInfo;
                  if (errorInfo && errorInfo.isAdvanced) {
                    return (
                      <>
                        <p className="text-red-300 text-center font-semibold mb-3">
                          ¡El inquilino ya está <span className="text-red-400 font-bold">ADELANTADO</span>!
                        </p>
                        <p className="text-gray-300 text-center text-sm mb-3">
                          No puede realizar más pagos hasta el próximo período de facturación.
                        </p>
                        <div className="mt-4 p-3 bg-red-800/20 rounded-lg border border-red-600/20">
                          <p className="text-red-200 text-sm text-center">
                            <i className="fas fa-info-circle mr-1"></i>
                            Estado actual: Adelantado 1 mes
                          </p>
                        </div>
                      </>
                    );
                  } else if (errorInfo && errorInfo.paymentsCount >= 2) {
                    return (
                      <>
                        <p className="text-red-300 text-center font-semibold mb-3">
                          ¡El inquilino ya realizó <span className="text-red-400 font-bold">{errorInfo.paymentsCount} pagos</span> en {errorInfo.monthName}!
                        </p>
                        <p className="text-gray-300 text-center text-sm mb-3">
                          Máximo permitido: <span className="text-orange-400 font-bold">2 pagos por mes</span> (actual + adelantado)
                        </p>
                        {errorInfo.paymentsDetails && errorInfo.paymentsDetails.length > 0 && (
                          <div className="mt-4 p-3 bg-red-800/20 rounded-lg border border-red-600/20">
                            <p className="text-red-200 text-sm font-medium mb-2 text-center">
                              <i className="fas fa-list mr-1"></i>
                              Pagos realizados este mes:
                            </p>
                            <div className="space-y-2 max-h-32 overflow-y-auto">
                              {errorInfo.paymentsDetails.map((payment, index) => (
                                <div key={payment.id || index} className="bg-red-800/30 rounded p-2 text-xs">
                                  <div className="flex justify-between items-center">
                                    <span className="text-green-300 font-medium">
                                      ${payment.amount}
                                    </span>
                                    <span className="text-gray-300">
                                      {new Date(payment.date).toLocaleDateString('es-ES')}
                                    </span>
                                  </div>
                                  {payment.description && (
                                    <p className="text-gray-400 mt-1">{payment.description}</p>
                                  )}
                                  {payment.note && (
                                    <p className="text-blue-300 mt-1 italic">­ƒôØ {payment.note}</p>
                                  )}
                                </div>
                              ))}
                            </div>
                          </div>
                        )}
                      </>
                    );
                  } else if (selectedTenant?.paymentStatus === 'advanced') {
                    return (
                      <>
                        <p className="text-red-300 text-center font-semibold mb-3">
                          ¡El inquilino ya está <span className="text-red-400 font-bold">1 mes adelantado</span>!
                        </p>
                        <p className="text-gray-300 text-center text-sm">
                          No puede realizar más pagos hasta el próximo período de facturación.
                        </p>
                      </>
                    );
                  } else {
                    return (
                      <>
                        <p className="text-red-300 text-center font-semibold mb-3">
                          El inquilino solo puede ir <span className="text-red-400 font-bold">{MAX_ADVANCE_MONTHS} mes{MAX_ADVANCE_MONTHS > 1 ? 'es' : ''}</span> adelantado.
                        </p>
                        <p className="text-gray-300 text-center text-sm">
                          Parece que supera el máximo de meses adelantado permitido.
                        </p>
                      </>
                    );
                  }
                })()}
                
                <div className="mt-4 p-3 bg-orange-800/20 rounded-lg border border-orange-600/20">
                  <p className="text-orange-200 text-sm text-center">
                    <i className="fas fa-info-circle mr-1"></i>
                    El inquilino podrá realizar su próximo pago el mes siguiente
                  </p>
                </div>
              </div>
              
              <div className="flex justify-center">
                <button
                  onClick={closeMaxAdvanceError}
                  className="px-6 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg font-medium transition-colors"
                >
                  <i className="fas fa-check mr-2"></i>
                  Entendido
                </button>
              </div>
            </div>
          </div>
        </div>
      )}


      {!loading && (
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 h-[calc(100vh-200px)] content-fade-in">

        <div className="bg-[#1b1c20] rounded-lg p-6 border border-[#252628] flex flex-col h-full">

          <div className="flex space-x-1 mb-4 bg-[#252628] rounded-lg p-1">
            <button
              onClick={() => setActiveTab('active')}
              className={`flex-1 px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
                activeTab === 'active' 
                  ? 'bg-blue-600 text-white shadow-md' 
                  : 'text-gray-400 hover:text-white hover:bg-[#2a2b2e]'
              }`}
            >
              <i className="fas fa-users mr-2"></i>
              Activos ({activeTenants})
            </button>
            <button
              onClick={() => setActiveTab('archived')}
              className={`flex-1 px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
                activeTab === 'archived' 
                  ? 'bg-blue-600 text-white shadow-md' 
                  : 'text-gray-400 hover:text-white hover:bg-[#2a2b2e]'
              }`}
            >
              <i className="fas fa-archive mr-2"></i>
              Archivados ({archivedTenants})
            </button>
            <button
              onClick={() => setActiveTab('folders')}
              className={`flex-1 px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
                activeTab === 'folders' 
                  ? 'bg-blue-600 text-white shadow-md' 
                  : 'text-gray-400 hover:text-white hover:bg-[#2a2b2e]'
              }`}
            >
              <i className="fas fa-folder mr-2"></i>
              Carpetas
            </button>
          </div>

          <div className="flex items-center justify-between mb-6">
            <h2 className="text-xl font-semibold text-white">
              {activeTab === 'active' ? 'Inquilinos Activos' : 
               activeTab === 'archived' ? 'Inquilinos Archivados' : 
               `Carpeta: ${folders.find(f => f.id === selectedFolder)?.name || 'General'}`}
            </h2>
            <div className="flex items-center space-x-2">
              {activeTab === 'folders' && (
                <button
                  onClick={() => setShowCreateFolder(true)}
                  className="bg-green-600 hover:bg-green-700 text-white px-3 py-2 rounded-lg text-sm font-medium transition-colors"
                >
                  <i className="fas fa-plus mr-2"></i>
                  Nueva Carpeta
                </button>
              )}
            </div>
          </div>

          {/* Selector de carpetas (solo visible en pesta├▒a folders) */}
          {activeTab === 'folders' && (
            <div className="mb-4">
              <div className="flex flex-wrap gap-2">
                {folders
                  .sort((a, b) => {
                    // Ordenar por carpetas padre primero, luego por nombre
                    if (!a.parentId && b.parentId) return -1;
                    if (a.parentId && !b.parentId) return 1;
                    if (a.parentId === b.parentId) return a.name.localeCompare(b.name);
                    return getFolderPath(a.id).localeCompare(getFolderPath(b.id));
                  })
                  .map(folder => {
                    const depth = getFolderDepth(folder.id);
                    return (
                      <button
                        key={folder.id}
                        onClick={() => setSelectedFolder(folder.id)}
                        className={`px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 flex items-center ${
                          selectedFolder === folder.id
                            ? 'text-white shadow-md'
                            : 'bg-[#252628] text-gray-400 hover:text-white hover:bg-[#2a2b2e]'
                        }`}
                        style={{
                          backgroundColor: selectedFolder === folder.id ? folder.color : undefined,
                          marginLeft: `${depth * 20}px`
                        }}
                      >
                        {depth > 0 && <span className="text-gray-500 mr-1">Ôöö</span>}
                        <i className="fas fa-folder mr-2"></i>
                        {folder.name}
                        {folder.id !== 'default' && (
                          <button
                            onClick={(e) => {
                              e.stopPropagation();
                              deleteFolder(folder.id);
                            }}
                            className="ml-2 hover:text-red-300"
                          >
                            <i className="fas fa-times text-xs"></i>
                          </button>
                        )}
                      </button>
                    );
                  })}
              </div>
            </div>
          )}

          {/* Barra de b├║squeda y filtros */}
          <div className="space-y-4 mb-6">
            {/* Barra de b├║squeda */}
            <div className="relative">
              <i className="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
              <input
                type="text"
                placeholder="Buscar por nombre o apartamento..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="w-full pl-10 pr-4 py-2 bg-[#252628] border border-[#3a3b3e] rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500"
              />
            </div>

            {/* Filtros */}
            <div className="grid grid-cols-3 gap-4">
              <select
                value={statusFilter}
                onChange={(e) => setStatusFilter(e.target.value)}
                className="custom-select pl-3 pr-8 py-2 bg-[#252628] border border-[#3a3b3e] rounded-lg text-white focus:outline-none focus:border-blue-500 text-sm"
              >
                <option value="all">Todos los estados</option>
                <option value="active">Activos</option>
                <option value="inactive">Inactivos</option>
                <option value="archived">Archivados</option>
              </select>

              <select
                value={paymentFilter}
                onChange={(e) => setPaymentFilter(e.target.value)}
                className="custom-select pl-3 pr-8 py-2 bg-[#252628] border border-[#3a3b3e] rounded-lg text-white focus:outline-none focus:border-blue-500 text-sm"
              >
                <option value="all">Todos los pagos</option>
                <option value="current">Al corriente</option>
                <option value="advanced">Adelantado</option>
                <option value="overdue">Deudores</option>
              </select>

              <select
                value={folderFilter}
                onChange={(e) => setFolderFilter(e.target.value)}
                className="custom-select pl-3 pr-8 py-2 bg-[#252628] border border-[#3a3b3e] rounded-lg text-white focus:outline-none focus:border-blue-500 text-sm"
              >
                <option value="all">Todas las carpetas</option>
                {folders.map(folder => (
                  <option key={folder.id} value={folder.id}>
                    {getFolderPath(folder.id)}
                  </option>
                ))}
              </select>
            </div>
          </div>
          
          {/* Contenido del contenedor izquierda */}
          <div className="flex-1">
            {filteredTenants.length === 0 ? (
              <div className="flex items-center justify-center h-full">
                <div className="text-gray-400 text-center">
                  <i className="fas fa-users text-4xl text-gray-600 mb-4"></i>
                  {tenants.length === 0 ? (
                    <>
                      <p>No hay inquilinos registrados</p>
                      <p className="text-sm">Comienza agregando tu primer inquilino</p>
                    </>
                  ) : (
                    <>
                      <p>No se encontraron inquilinos</p>
                      <p className="text-sm">Intenta con otros términos de búsqueda</p>
                    </>
                  )}
                </div>
              </div>
            ) : (
              <div className="space-y-4 overflow-y-auto max-h-full">
                {filteredTenants.map((tenant) => (
                  <div 
                    key={tenant.id}
                    data-tenant-id={tenant.id}
                    className={`bg-[#252628] rounded-lg p-4 border cursor-pointer transition-all hover:bg-[#2a2b2e] relative group ${
                      selectedTenant?.id === tenant.id 
                        ? 'border-blue-500 bg-[#2a2b2e]' 
                        : 'border-[#3a3b3e]'
                    }`}
                    onClick={() => handleTenantClick(tenant)}
                  >
                    {/* Menú contextual para carpetas */}
                    {activeTab === 'active' && (
                      <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
                        <div className="relative">
                          <button
                            onClick={(e) => {
                              e.stopPropagation();
                              if (showContextMenu === tenant.id) {
                                setShowContextMenu(null);
                              } else {
                                const rect = e.currentTarget.getBoundingClientRect();
                                setContextMenuPosition({
                                  x: rect.right - 200, // Posicionar a la izquierda del bot├│n
                                  y: rect.bottom + 5   // Justo debajo del bot├│n
                                });
                                setShowContextMenu(tenant.id);
                              }
                            }}
                            className="w-8 h-8 bg-[#3a3b3e] hover:bg-[#4a4b4e] rounded-full flex items-center justify-center text-gray-400 hover:text-white transition-colors"
                          >
                            <i className="fas fa-ellipsis-h text-sm"></i>
                          </button>
                        </div>
                      </div>
                    )}

                    {/* Men├║ desplegable fuera del contenedor de la card */}
                    
                    <div className="flex items-center justify-between mb-2">
                      <h3 className="text-white font-medium">{tenant.name}</h3>
                      <div className="flex items-center space-x-2">
                        {tenant.pendingAmount > 0 && (
                          <span className="px-2 py-1 rounded-full text-xs font-medium bg-orange-900 text-orange-300">
                            $-{tenant.pendingAmount}
                          </span>
                        )}
                        {getContractIndicator(tenant) && (
                          <span className={`px-2 py-1 rounded-full text-xs font-medium flex items-center ${getContractIndicator(tenant).color}`}>
                            <i className={`${getContractIndicator(tenant).icon} mr-1`}></i>
                            {getContractIndicator(tenant).text}
                          </span>
                        )}
                        <span className={`px-2 py-1 rounded-full text-xs font-medium ${
                          tenant.status === 'active' ? 'bg-green-900 text-green-300' : 
                          tenant.status === 'archived' ? 'bg-gray-900 text-gray-300' : 
                          'bg-red-900 text-red-300'
                        }`}>
                          {tenant.status === 'active' ? 'Activo' : 
                           tenant.status === 'archived' ? 'Archivado' : 
                           'Inactivo'}
                        </span>
                      </div>
                    </div>
                    <div className="text-sm text-gray-400 space-y-1">
                      <p><i className="fas fa-door-open w-4"></i> Apartamento {tenant.apartment}</p>
                      <div className="flex items-center justify-between mt-2">
                        <span className="text-sm"></span>
                        <span className={`text-sm font-medium ${
                          tenant.paymentStatus === 'current' 
                            ? 'text-green-400' 
                            : tenant.paymentStatus === 'advanced'
                            ? 'text-blue-400'
                            : 'text-red-400'
                        }`}>
                          {tenant.paymentStatus === 'current' 
                            ? '  Al Corriente' 
                            : tenant.paymentStatus === 'advanced'
                            ? '  Adelantado'
                            : '  Deudor'}
                        </span>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>

        {/* Contenedor Derecha */}
        <div className="bg-[#1b1c20] rounded-lg p-6 border border-[#252628] flex flex-col h-full">
          {!selectedTenant ? (
            <>
              <div className="flex items-center justify-between mb-6">
                <h2 className="text-xl font-semibold text-white">Estadísticas</h2>
                <div className="flex items-center space-x-2 text-sm text-gray-400">
                  <i className="fas fa-chart-bar"></i>
                  <span>Vista general</span>
                </div>
              </div>
              
              {/* Contenido del contenedor derecha */}
              <div className="flex-1 flex flex-col space-y-6">
                {/* M├®tricas */}
                <div className="grid grid-cols-3 gap-4">
                  <div className="bg-[#252628] rounded-lg p-4 text-center">
                    <div className="text-2xl font-bold text-white">{activeTenants}</div>
                    <div className="text-sm text-gray-400">Activos</div>
                  </div>
                  <div className="bg-[#252628] rounded-lg p-4 text-center">
                    <div className="text-2xl font-bold text-green-400">{currentTenants}</div>
                    <div className="text-sm text-gray-400">Al Corriente</div>
                  </div>
                  <div className="bg-[#252628] rounded-lg p-4 text-center">
                    <div className="text-2xl font-bold text-blue-400">{advancedTenants}</div>
                    <div className="text-sm text-gray-400">Adelantados</div>
                  </div>
                  <div className="bg-[#252628] rounded-lg p-4 text-center">
                    <div className="text-2xl font-bold text-red-400">{overdueTenants}</div>
                    <div className="text-sm text-gray-400">Deudores</div>
                  </div>
                </div>
                
                {/* Gráfico de pagos */}
                <div className="bg-[#252628] rounded-lg p-4 flex-1 flex flex-col">
                  <h3 className="text-lg font-semibold text-white mb-4">Estado de Pagos</h3>
                  <div className="flex-1 flex items-center justify-center">
                    {(currentTenants > 0 || advancedTenants > 0 || overdueTenants > 0) ? (
                      <div className="w-full h-64 relative">
                        <canvas id="paymentChart" className="w-full h-full"></canvas>
                      </div>
                    ) : (
                      <div className="text-center text-gray-400">
                        <i className="fas fa-chart-pie text-3xl mb-4"></i>
                        <p className="mb-2">No hay datos de pago</p>
                        <p className="text-sm text-gray-500">
                          Agrega inquilinos para ver las estadísticas
                        </p>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            </>
          ) : (
            <>
              {/* Panel de Pago */}
              <div className="flex items-center justify-between mb-6">
                <h2 className="text-xl font-semibold text-white">Panel de Pago</h2>
                <button 
                  onClick={() => setSelectedTenant(null)}
                  className="text-gray-400 hover:text-white"
                >
                  <i className="fas fa-times"></i>
                </button>
              </div>

              <div className="flex-1 overflow-y-auto space-y-6">
                {/* Información del Inquilino */}
                <div className="bg-[#252628] rounded-lg p-4">
                  <h3 className="text-lg font-semibold text-white mb-3">{selectedTenant.name}</h3>
                  <div className="space-y-2 text-sm">
                    <p className="text-gray-300"><i className="fas fa-envelope w-4"></i> {selectedTenant.email}</p>
                    {selectedTenant.phone && <p className="text-gray-300"><i className="fas fa-phone w-4"></i> {selectedTenant.phone}</p>}
                    <p className="text-gray-300"><i className="fas fa-door-open w-4"></i> Apartamento {selectedTenant.apartment}</p>
                    {selectedTenant.rentAmount && (
                      <p className="text-gray-300"><i className="fas fa-dollar-sign w-4"></i> ${selectedTenant.rentAmount}/mes</p>
                    )}
                    {selectedTenant.endDate && (
                      <div className="flex items-center justify-between mt-3">
                        <p className="text-gray-300">
                          <i className="fas fa-calendar-check w-4"></i> 
                          Vence: {new Date(selectedTenant.endDate).toLocaleDateString('es-ES')}
                        </p>
                        {(() => {
                          const contractIndicator = getContractIndicator(selectedTenant);
                          return contractIndicator && (
                            <span className={`px-3 py-1 rounded-full text-xs font-medium flex items-center ${contractIndicator.color}`}>
                              <i className={`${contractIndicator.icon} mr-1`}></i>
                              {contractIndicator.text === 'Expirado' ? 'Contrato Expirado' : 
                               getDaysUntilExpiration(selectedTenant.endDate) <= 30 ? 
                               `Expira en ${getDaysUntilExpiration(selectedTenant.endDate)} días` :
                               `${getDaysUntilExpiration(selectedTenant.endDate)} días restantes`}
                            </span>
                          );
                        })()}
                      </div>
                    )}
                    {selectedTenant.pendingAmount > 0 && (
                      <p className="text-orange-300"><i className="fas fa-exclamation-triangle w-4"></i> Pendiente: ${selectedTenant.pendingAmount}</p>
                    )}
                  </div>
                </div>

                {/* Informaci├│n de Archivo - Solo para inquilinos archivados */}
                {selectedTenant.status === 'archived' && (
                  <div className="bg-red-900 bg-opacity-20 border border-red-700 rounded-lg p-4">
                    <h4 className="text-red-300 font-medium mb-3 flex items-center">
                      <i className="fas fa-archive mr-2"></i>
                      Contrato Archivado
                    </h4>
                    <div className="space-y-2 text-sm">
                      <p className="text-gray-300">
                        Estado: <span className="text-red-400 font-medium">
                          {selectedTenant.contractStatus === 'expired' ? 'Expirado' : 
                           selectedTenant.contractStatus === 'terminated' ? 'Finalizado' : 'Archivado'}
                        </span>
                      </p>
                      {selectedTenant.archivedDate && (
                        <p className="text-gray-300">
                          Archivado: <span className="text-gray-400">
                            {new Date(selectedTenant.archivedDate).toLocaleDateString('es-ES')}
                          </span>
                        </p>
                      )}
                      {selectedTenant.archivedReason && (
                        <p className="text-gray-300">
                          Motivo: <span className="text-gray-400">{selectedTenant.archivedReason}</span>
                        </p>
                      )}
                      {selectedTenant.renewalHistory && selectedTenant.renewalHistory.length > 0 && (
                        <div className="mt-3">
                          <p className="text-gray-300 mb-2">Historial de renovaciones:</p>
                          <div className="space-y-1 max-h-20 overflow-y-auto">
                            {selectedTenant.renewalHistory.map((renewal) => (
                              <div key={renewal.id} className="text-xs bg-[#1b1c20] rounded p-2">
                                <p className="text-gray-400">
                                  Renovado el {new Date(renewal.renewedDate).toLocaleDateString('es-ES')}
                                </p>
                              </div>
                            ))}
                          </div>
                        </div>
                      )}
                    </div>
                  </div>
                )}

                {/* Gesti├│n de Contrato - Solo para inquilinos activos */}
                {selectedTenant.status === 'active' && (
                  <div className="bg-[#252628] rounded-lg p-4">
                    <h4 className="text-white font-medium mb-3">Gestión de Contrato</h4>
                    <div className="space-y-3">
                      {/* Informaci├│n del estado del contrato */}
                      <div className="bg-[#1b1c20] rounded p-3">
                        <div className="flex items-center justify-between mb-2">
                          <span className="text-sm text-gray-400">Estado del contrato:</span>
                          <span className={`text-sm font-medium ${
                            selectedTenant.contractStatus === 'renewed' ? 'text-green-400' :
                            selectedTenant.contractStatus === 'scheduled_termination' ? 'text-orange-400' :
                            'text-gray-300'
                          }`}>
                            {selectedTenant.contractStatus === 'renewed' ? 'Renovado' :
                             selectedTenant.contractStatus === 'scheduled_termination' ? 'Finalizaci├│n Programada' :
                             'Normal'}
                          </span>
                        </div>
                        {selectedTenant.contractStatus === 'scheduled_termination' && (
                          <div className="text-xs text-orange-300 flex items-center">
                            <i className="fas fa-clock mr-1"></i>
                            Se archivará automáticamente al expirar
                          </div>
                        )}
                      </div>
                      
                      {/* Botones de gestión */}
                      <div className="flex gap-3">
                        <button
                          onClick={handleRenewContract}
                          className="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors text-sm"
                        >
                          <i className="fas fa-sync-alt mr-2"></i>
                          Renovar Contrato
                        </button>
                        <button
                          onClick={handleTerminateContract}
                          className="flex-1 px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg font-medium transition-colors text-sm"
                        >
                          <i className="fas fa-stop mr-2"></i>
                          Finalizar Contrato
                        </button>
                      </div>
                    </div>
                  </div>
                )}

                {/* Sistema de Pagos - Solo para inquilinos activos */}
                {selectedTenant.status === 'active' && (
                  <div className="bg-[#252628] rounded-lg p-4">
                    <h4 className="text-white font-medium mb-3">Procesar Pago</h4>
                  <div className="space-y-3">
                    <div>
                      <label className="block text-sm text-gray-400 mb-1">
                        Monto a pagar: ${selectedTenant.rentAmount ? parseFloat(selectedTenant.rentAmount) + (selectedTenant.pendingAmount || 0) : '0'}
                      </label>
                      <input
                        type="number"
                        value={paymentAmount}
                        onChange={(e) => setPaymentAmount(e.target.value)}
                        placeholder="Ingrese el monto"
                        className="w-full px-3 py-2 bg-[#1b1c20] border border-[#3a3b3e] rounded-lg text-white focus:outline-none focus:border-blue-500"
                      />
                    </div>
                    <div>
                      <label className="block text-sm text-gray-400 mb-1">
                        Nota para el recibo (opcional)
                      </label>
                      <textarea
                        value={paymentNote}
                        onChange={(e) => setPaymentNote(e.target.value)}
                        placeholder="Ej: Pago con descuento por pronto pago..."
                        rows="2"
                        className="w-full px-3 py-2 bg-[#1b1c20] border border-[#3a3b3e] rounded-lg text-white focus:outline-none focus:border-blue-500 resize-none"
                      />
                    </div>
                    <button
                      onClick={handlePayment}
                      className="w-full px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg font-medium transition-colors"
                      disabled={!paymentAmount || paymentAmount <= 0}
                    >
                      <i className="fas fa-dollar-sign mr-2"></i>
                      Procesar Pago
                    </button>
                  </div>
                </div>
                )}

                {/* Sistema de Notas */}
                <div className="bg-[#252628] rounded-lg p-4">
                  <h4 className="text-white font-medium mb-3">Notas</h4>
                  <div className="space-y-3">
                    <div className="flex space-x-2">
                      <input
                        type="text"
                        value={newNote}
                        onChange={(e) => setNewNote(e.target.value)}
                        placeholder="Agregar nota..."
                        className="flex-1 px-3 py-2 bg-[#1b1c20] border border-[#3a3b3e] rounded-lg text-white focus:outline-none focus:border-blue-500"
                        onKeyPress={(e) => e.key === 'Enter' && addNote()}
                      />
                      <button
                        onClick={addNote}
                        className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors"
                        disabled={!newNote.trim()}
                      >
                        <i className="fas fa-plus"></i>
                      </button>
                    </div>
                    
                    {/* Lista de Notas */}
                    <div className="space-y-2 max-h-32 overflow-y-auto">
                      {normalizeNotes(selectedTenant.notes).map((note) => (
                        <div key={note.id} className="bg-[#1b1c20] rounded p-2 text-sm">
                          <p className="text-gray-300">{note.text}</p>
                          <p className="text-gray-500 text-xs mt-1">
                            {note.date ? `${new Date(note.date).toLocaleDateString()} ${new Date(note.date).toLocaleTimeString()}` : 'Fecha no disponible'}
                          </p>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>

                {/* Historial de Pagos */}
                {selectedTenant.paymentHistory && selectedTenant.paymentHistory.length > 0 && (
                  <div className="bg-[#252628] rounded-lg p-4">
                    <h4 className="text-white font-medium mb-3">Historial de Pagos</h4>
                    <div className="space-y-2 max-h-32 overflow-y-auto">
                      {selectedTenant.paymentHistory.map((payment) => (
                        <div key={payment.id} className="bg-[#1b1c20] rounded p-2 text-sm">
                          <div className="flex justify-between items-center">
                            <span className={`font-medium ${
                              payment.type === 'next-month-payment' ? 'text-blue-400' : 'text-green-400'
                            }`}>
                              ${payment.amount}
                            </span>
                            <span className="text-gray-400">
                              {payment.date ? new Date(payment.date).toLocaleDateString() : 'Fecha no disponible'}
                            </span>
                          </div>
                          {payment.description && (
                            <p className="text-gray-500 text-xs mt-1">{payment.description}</p>
                          )}
                          {payment.note && (
                            <p className="text-blue-300 text-xs mt-1 italic">­ƒôØ {payment.note}</p>
                          )}
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            </>
          )}
        </div>
      </div>
      )}

      {/* Men├║ contextual global */}
      {showContextMenu && (
        <div 
          className="fixed bg-[#1b1c20] border border-[#3a3b3e] rounded-lg shadow-lg min-w-48 max-h-80 overflow-y-auto z-50"
          style={{
            left: `${contextMenuPosition.x}px`,
            top: `${contextMenuPosition.y}px`
          }}
        >
          <div className="py-2">
            <div className="text-xs text-gray-400 px-3 py-2 border-b border-[#3a3b3e]">
              Mover a carpeta:
            </div>
            <div className="max-h-60 overflow-y-auto">
              {folders.map(folder => {
                const selectedTenantData = tenants.find(t => t.id === showContextMenu);
                return (
                  <button
                    key={folder.id}
                    onClick={(e) => {
                      e.stopPropagation();
                      moveTenantToFolder(showContextMenu, folder.id);
                      setShowContextMenu(null);
                    }}
                    className={`w-full text-left px-3 py-2 text-sm rounded hover:bg-[#2a2b2e] transition-colors flex items-center ${
                      (selectedTenantData?.folder || 'default') === folder.id 
                        ? 'text-blue-400 bg-[#2a2b2e]' 
                        : 'text-gray-300 hover:text-white'
                    }`}
                  >
                    <div 
                      className="w-3 h-3 rounded mr-2 flex-shrink-0" 
                      style={{ backgroundColor: folder.color }}
                    ></div>
                    <span className="flex-1">{folder.name}</span>
                    {(selectedTenantData?.folder || 'default') === folder.id && (
                      <i className="fas fa-check ml-2 text-xs flex-shrink-0"></i>
                    )}
                  </button>
                );
              })}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}