// 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="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm z-50 flex items-center justify-center">
          <div className="overlay">
            <svg xmlns="http://www.w3.org/2000/svg" width="324" height="324" viewBox="0 0 1024 1024">
              <g className="upper">
                <path style={{opacity: 1}} fill="#fdfdfd" d="M 470.5,230.5 C 520.501,230.333 570.501,230.5 620.5,231C 641.629,238.423 649.129,252.923 643,274.5C 638.017,285.471 629.517,291.971 617.5,294C 572.5,294.333 527.5,294.667 482.5,295C 475.585,296.291 469.252,298.958 463.5,303C 434.031,330.134 404.865,357.634 376,385.5C 368.667,397.833 368.667,410.167 376,422.5C 387.839,435.57 401.672,438.07 417.5,430C 451.468,399.034 485.134,367.7 518.5,336C 537.119,325.206 552.952,328.372 566,345.5C 571.158,357.487 570.491,369.154 564,380.5C 530.167,412.333 496.333,444.167 462.5,476C 427.826,502.567 391.159,505.567 352.5,485C 311.585,455.627 298.752,416.794 314,368.5C 317.657,359.844 322.324,351.844 328,344.5C 359.167,314.667 390.333,284.833 421.5,255C 435.731,242.551 452.064,234.385 470.5,230.5 Z"/>
              </g>
              <g className="lower">
                <path style={{opacity: 1}} fill="#fdfdfc" d="M 606.5,416.5 C 648.301,412.155 680.468,427.488 703,462.5C 721.528,499.533 719.194,535.199 696,569.5C 661.789,603.378 626.623,636.211 590.5,668C 578.451,675.239 565.451,679.906 551.5,682C 501.5,682.667 451.5,682.667 401.5,682C 383.06,675.304 375.227,662.137 378,642.5C 382.007,629.828 390.507,621.995 403.5,619C 451.532,618.971 499.532,618.304 547.5,617C 552.945,615.112 557.945,612.445 562.5,609C 590.635,583.2 618.468,557.033 646,530.5C 655.961,514.422 654.461,499.588 641.5,486C 628.805,477.389 616.138,477.389 603.5,486C 568.768,519.402 533.434,552.069 497.5,584C 478.272,592.462 463.438,587.629 453,569.5C 447.086,553.242 450.919,539.742 464.5,529C 498.468,498.034 532.134,466.7 565.5,435C 578.021,426.069 591.688,419.902 606.5,416.5 Z"/>
              </g>
            </svg>
            
            <div className="loading-text">
              CARGANDO INQUILINOS<span className="dots"><span className="dot1">.</span><span className="dot2">.</span><span className="dot3">.</span></span>
            </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>
  );
}