function AddTenantPage() {
  // Obtener datos de edición si existen
  const editData = window.editingTenant || null;
  const isEditing = !!editData;
  
  // Limpiar editingTenant al montar el componente para evitar persistencia no deseada
  React.useEffect(() => {
    return () => {
      window.editingTenant = null;
    };
  }, []);
  
  const [formData, setFormData] = React.useState({
    name: editData?.name || '',
    email: editData?.email || '',
    phone: editData?.phone || '',
    apartment: editData?.apartment || '',
    rentAmount: editData?.rentAmount || '',
    endDate: editData?.endDate || '',
    status: editData?.status || 'active',
    paymentStatus: editData?.paymentStatus || 'current',
    contract: null,
    contractURL: editData?.contractURL || null
  });

  const [isSubmitting, setIsSubmitting] = React.useState(false);
  const [showPreview, setShowPreview] = React.useState(false);
  // state to manage saving state (loader removed per subtle animations requirement)
  const [errors, setErrors] = React.useState({});
  const [apartments, setApartments] = React.useState([]);
  const [loadingApartments, setLoadingApartments] = React.useState(true);

  // Función para obtener JWT del almacenamiento
  const getJWTFromStorage = () => {
    const sessionAuthToken = sessionStorage.getItem('authToken');
    const authToken = localStorage.getItem('authToken');
    const sessionJWT = sessionStorage.getItem('jwt');
    const jwt = localStorage.getItem('jwt');
    
    return sessionAuthToken || sessionJWT || authToken || jwt;
  };

  // Cargar departamentos disponibles
  React.useEffect(() => {
    const loadApartments = async () => {
      try {
        let organizationId = window.currentOrganizationId;
        
        if (!organizationId) {
          const token = getJWTFromStorage();
          if (token) {
            const payload = JSON.parse(atob(token.split('.')[1]));
            organizationId = payload.organizationId;
          }
        }
        
        if (organizationId) {
          const response = await fetch(`http://localhost:3000/api/apartments?organizationId=${organizationId}`, {
            headers: {
              'Authorization': `Bearer ${getJWTFromStorage()}`
            }
          });
          
          if (response.ok) {
            const result = await response.json();
            setApartments(result.data || []);
          }
        }
      } catch (error) {
        console.error('Error cargando departamentos:', error);
      } finally {
        setLoadingApartments(false);
      }
    };
    
    loadApartments();
  }, []);

  // Restaurar datos guardados si venimos de regreso de crear departamento
  React.useEffect(() => {
    if (isEditing) return;
    const savedForm = sessionStorage.getItem('pendingTenantForm');
    if (savedForm) {
      try {
        const parsed = JSON.parse(savedForm);
        setFormData(prev => ({ ...prev, ...parsed, contract: null }));
        sessionStorage.removeItem('pendingTenantForm');
      } catch (e) {
        console.error('Error restaurando formulario:', e);
      }
    }
    const newApartment = sessionStorage.getItem('lastCreatedApartment');
    if (newApartment) {
      setFormData(prev => ({ ...prev, apartment: newApartment }));
      sessionStorage.removeItem('lastCreatedApartment');
    }
    // Pre-seleccionar departamento si venimos de crear un inquilino desde el formulario de departamento
    const preselected = sessionStorage.getItem('preselectedApartment');
    if (preselected) {
      setFormData(prev => ({ ...prev, apartment: preselected }));
      sessionStorage.removeItem('preselectedApartment');
    }
  }, []);

  // Ir a crear departamento (guardando datos del formulario)
  const goToCreateApartment = () => {
    // Guardar el estado actual del formulario
    const dataToSave = {
      name: formData.name,
      email: formData.email,
      phone: formData.phone,
      apartment: formData.apartment,
      rentAmount: formData.rentAmount,
      endDate: formData.endDate,
      status: formData.status,
      paymentStatus: formData.paymentStatus,
      contractURL: formData.contractURL
    };
    sessionStorage.setItem('pendingTenantForm', JSON.stringify(dataToSave));
    sessionStorage.setItem('formReturnTo', 'add-tenant');
    if (window.setCurrentPage) {
      window.setCurrentPage('add-apartment');
    }
  };

  // Función para validar el formulario
  const validateForm = () => {
    const newErrors = {};

    // Validar nombre
    if (!formData.name.trim()) {
      newErrors.name = 'El nombre es obligatorio';
    } else if (formData.name.trim().length < 2) {
      newErrors.name = 'El nombre debe tener al menos 2 caracteres';
    }

    // Validar email
    if (!formData.email.trim()) {
      newErrors.email = 'El correo electrónico es obligatorio';
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
      newErrors.email = 'Ingresa un correo electrónico válido';
    }

    // Validar teléfono
    if (!formData.phone.trim()) {
      newErrors.phone = 'El teléfono es obligatorio';
    } else if (!/^[\+]?[\d\s\-\(\)]{10,}$/.test(formData.phone.replace(/\s/g, ''))) {
      newErrors.phone = 'Ingresa un número de teléfono válido (mínimo 10 dígitos)';
    }

    // Validar apartamento
    if (!formData.apartment.trim()) {
      newErrors.apartment = 'El apartamento/unidad es obligatorio';
    }

    // Validar renta
    if (!formData.rentAmount || parseFloat(formData.rentAmount) <= 0) {
      newErrors.rentAmount = 'La renta mensual debe ser mayor a $0';
    }

    // Validar fecha de finalización
    if (!formData.endDate) {
      newErrors.endDate = 'La fecha de finalización del contrato es obligatoria';
    } else {
      const endDate = new Date(formData.endDate);
      const today = new Date();
      today.setHours(0, 0, 0, 0);
      
      if (endDate <= today) {
        newErrors.endDate = 'La fecha de finalización debe ser posterior a hoy';
      }
    }

    // Validar contrato (solo obligatorio si es nuevo inquilino y no tiene contrato existente)
    if (!formData.contract && !formData.contractURL) {
      newErrors.contract = 'Debes subir un documento de contrato';
    } else if (formData.contract) {
      const maxSize = 10 * 1024 * 1024; // 10MB
      if (formData.contract.size > maxSize) {
        newErrors.contract = 'El archivo no debe superar los 10MB';
      }
      
      const allowedTypes = ['.pdf', '.doc', '.docx', '.ppt', '.pptx'];
      const fileExtension = '.' + formData.contract.name.split('.').pop().toLowerCase();
      if (!allowedTypes.includes(fileExtension)) {
        newErrors.contract = 'Formato de archivo no permitido. Usa: PDF, Word, PowerPoint';
      }
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  // Función para verificar si ya existe un inquilino con el mismo email o apartamento
  const checkDuplicateTenant = async (email, apartment, organizationId, excludeId = null) => {
    try {
      const response = await fetch(`http://localhost:3000/api/tenants`, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${getJWTFromStorage()}`
        }
      });

      if (response.ok) {
        const result = await response.json();
        const existingTenants = result.data || [];
        
        // Verificar email duplicado (excluyendo el inquilino actual si es edición)
        const emailExists = existingTenants.find(tenant => 
          tenant.email && tenant.email.toLowerCase() === email.toLowerCase() && tenant.status === 'active' && tenant.id !== excludeId
        );
        
        // Verificar apartamento duplicado (excluyendo el inquilino actual si es edición)
        const apartmentExists = existingTenants.find(tenant => 
          tenant.apartment && tenant.apartment.toLowerCase() === apartment.toLowerCase() && tenant.status === 'active' && tenant.id !== excludeId
        );

        return {
          emailExists: !!emailExists,
          apartmentExists: !!apartmentExists,
          emailTenant: emailExists,
          apartmentTenant: apartmentExists
        };
      }
    } catch (error) {
      console.error('Error verificando inquilinos duplicados:', error);
      // En caso de error, permitir continuar pero log el error
      return { emailExists: false, apartmentExists: false };
    }
    
    return { emailExists: false, apartmentExists: false };
  };

  // Función para subir el archivo a Firebase Storage
  const uploadContractFile = async (file, tenantName, organizationId) => {
    try {
      const formData = new FormData();
      formData.append('file', file);
      formData.append('tenantName', tenantName);
      formData.append('orgId', organizationId); // Usar organizationId directamente
      
      const response = await fetch('http://localhost:3000/api/upload-contract', {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${getJWTFromStorage()}`
        },
        body: formData
      });
      
      if (response.ok) {
        const data = await response.json();
        return data.downloadURL;
      } else {
        throw new Error('Error subiendo archivo');
      }
    } catch (error) {
      console.error('Error subiendo contrato:', error);
      return null;
    }
  };

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
    
    // Limpiar error específico cuando el usuario empiece a escribir
    if (errors[name]) {
      setErrors(prev => ({
        ...prev,
        [name]: ''
      }));
    }
  };

  const handleFileChange = (e) => {
    const file = e.target.files[0];
    setFormData(prev => ({
      ...prev,
      contract: file
    }));
    
    // Limpiar error de contrato cuando se seleccione un archivo
    if (errors.contract) {
      setErrors(prev => ({
        ...prev,
        contract: ''
      }));
    }
  };

  const getFileIcon = (fileName) => {
    const extension = fileName.split('.').pop().toLowerCase();
    switch (extension) {
      case 'pdf':
        return 'fas fa-file-pdf text-red-400';
      case 'doc':
      case 'docx':
        return 'fas fa-file-word text-blue-400';
      case 'ppt':
      case 'pptx':
        return 'fas fa-file-powerpoint text-orange-400';
      default:
        return 'fas fa-file text-gray-400';
    }
  };

  const openPreview = () => {
    if (formData.contract) {
      setShowPreview(true);
    }
  };

  const closePreview = () => {
    setShowPreview(false);
  };

  const renderDocumentPreview = () => {
    if (!formData.contract) return null;

    const fileURL = URL.createObjectURL(formData.contract);
    const extension = formData.contract.name.split('.').pop().toLowerCase();

    return (
      <div className="fixed inset-0 bg-black bg-opacity-75 z-50 flex items-center justify-center p-4">
        <div className="bg-[#1b1c20] rounded-lg w-full max-w-4xl h-full max-h-[90vh] flex flex-col">
          {/* Header del modal */}
          <div className="flex items-center justify-between p-4 border-b border-[#252628]">
            <div className="flex items-center">
              <i className={`${getFileIcon(formData.contract.name)} text-lg mr-3`}></i>
              <div>
                <h3 className="text-lg font-semibold text-white">{formData.contract.name}</h3>
                <p className="text-sm text-gray-400">
                  {(formData.contract.size / (1024 * 1024)).toFixed(2)} MB
                </p>
              </div>
            </div>
            <div className="flex gap-2">
              <button
                onClick={() => window.open(fileURL, '_blank')}
                className="px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white text-sm rounded-md transition-colors flex items-center"
              >
                <i className="fas fa-external-link-alt mr-2"></i>
                Abrir en nueva ventana
              </button>
              <button
                onClick={closePreview}
                className="px-3 py-1 bg-gray-600 hover:bg-gray-700 text-white text-sm rounded-md transition-colors flex items-center"
              >
                <i className="fas fa-times mr-2"></i>
                Cerrar
              </button>
            </div>
          </div>

          {/* Contenido del preview */}
          <div className="flex-1 p-4 overflow-hidden">
            {extension === 'pdf' ? (
              <iframe
                src={fileURL}
                className="w-full h-full border border-[#252628] rounded"
                title="Vista previa del PDF"
              />
            ) : (
              <div className="w-full h-full flex flex-col items-center justify-center bg-[#252628] border border-[#3a3b3e] rounded relative">
                {/* Burbuja "Próximamente" estilo Release 1.0 */}
                <div 
                  className="absolute top-4 left-0 right-0 mx-auto w-fit px-4 py-2 rounded-full overflow-hidden"
                  style={{ 
                    background: 'linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5)',
                    boxShadow: '0 4px 15px rgba(131, 56, 236, 0.4)'
                  }}
                >
                  <div className="absolute inset-0 opacity-60">
                    <div 
                      className="absolute w-8 h-8 bg-gradient-to-r from-purple-400 to-pink-400 rounded-full blur-lg animate-pulse"
                      style={{ top: '-10%', left: '10%' }}
                    ></div>
                    <div 
                      className="absolute w-6 h-6 bg-gradient-to-r from-blue-400 to-cyan-400 rounded-full blur-md animate-pulse"
                      style={{ top: '20%', right: '15%', animationDelay: '0.5s' }}
                    ></div>
                  </div>
                  <div className="relative z-10 flex items-center gap-2">
                    <i className="fas fa-clock text-white text-sm"></i>
                    <span className="text-white text-sm font-semibold drop-shadow-lg">Próximamente</span>
                  </div>
                </div>

                <i className={`${getFileIcon(formData.contract.name)} text-6xl mb-4`}></i>
                <h4 className="text-lg font-medium text-white mb-2">Vista previa no disponible</h4>
                <p className="text-gray-400 text-center mb-4">
                  La vista previa en línea no está disponible para archivos {extension.toUpperCase()}.
                </p>
                <button
                  onClick={() => window.open(fileURL, '_blank')}
                  className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors flex items-center"
                >
                  <i className="fas fa-download mr-2"></i>
                  Descargar y abrir
                </button>
              </div>
            )}
          </div>
        </div>
      </div>
    );
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    // Validar formulario antes de proceder
    if (!validateForm()) {
      window.showError('Por favor corrige los errores en el formulario');
      return;
    }

    setIsSubmitting(true);

    try {
      // Usar variables globales para obtener información de la organización
      let organizationId = window.currentOrganizationId;
      const organizationCode = window.currentOrganizationCode;
      const organizationName = window.currentOrganizationName;
      
      console.log('🌐 Variables globales disponibles:', {
        organizationId,
        organizationCode, 
        organizationName,
        'window.currentOrganizationId existe': !!window.currentOrganizationId
      });
      
      if (!organizationId) {
        // Si no hay variables globales, intentar obtener del JWT como fallback
        console.log('⚠️ Variables globales no disponibles, usando JWT como fallback');
        const token = getJWTFromStorage();
        if (token) {
          try {
            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(''));
            const decoded = JSON.parse(jsonPayload);
            const fallbackOrgId = decoded.organizationId;
            
            if (fallbackOrgId) {
              console.log('✅ Usando organizationId del JWT:', fallbackOrgId);
              // Usar fallbackOrgId en lugar de organizationId
              organizationId = fallbackOrgId;
            } else {
              throw new Error('No se pudo obtener organizationId del JWT tampoco');
            }
          } catch (jwtError) {
            console.error('Error decodificando JWT:', jwtError);
            throw new Error('No se pudo obtener el ID de la organización');
          }
        } else {
          throw new Error('No hay token de autenticación disponible');
        }
      }

      // Verificar inquilinos duplicados (excluyendo el actual si es edición)
      window.showInfo('Verificando información del inquilino...');
      const duplicateCheck = await checkDuplicateTenant(formData.email, formData.apartment, organizationId, isEditing ? editData.id : null);
      
      if (duplicateCheck.emailExists) {
        throw new Error(`Ya existe un inquilino activo con el email ${formData.email}. Inquilino existente: ${duplicateCheck.emailTenant.name} (${duplicateCheck.emailTenant.apartment})`);
      }
      
      if (duplicateCheck.apartmentExists) {
        throw new Error(`Ya existe un inquilino activo en el apartamento ${formData.apartment}. Inquilino actual: ${duplicateCheck.apartmentTenant.name} (${duplicateCheck.apartmentTenant.email})`);
      }

      // Preparar datos del inquilino
      let tenantData = {
        name: formData.name.trim(),
        email: formData.email.trim().toLowerCase(),
        phone: formData.phone.trim(),
        apartment: formData.apartment.trim(),
        rentAmount: parseFloat(formData.rentAmount),
        endDate: formData.endDate,
        status: formData.status,
        paymentStatus: formData.paymentStatus,
        lastUpdated: new Date().toISOString()
      };

      // Solo agregar createdAt si es nuevo
      if (!isEditing) {
        tenantData.createdAt = new Date().toISOString();
      }

      // Subir archivo de contrato si se seleccionó uno nuevo
      if (formData.contract) {
        window.showInfo('Subiendo documento de contrato...');
        const contractURL = await uploadContractFile(formData.contract, formData.name, organizationId);
        if (!contractURL) {
          throw new Error('Error al subir el documento de contrato. Por favor intenta de nuevo.');
        }
        tenantData.contractURL = contractURL;
      } else if (formData.contractURL) {
        // Mantener el contrato existente
        tenantData.contractURL = formData.contractURL;
      }

      // Enviar datos al servidor
      window.showInfo(isEditing ? 'Actualizando información del inquilino...' : 'Guardando información del inquilino...');
      console.log('📝 Enviando datos del inquilino:', {
        organizationId,
        tenantData,
        'formData completo': formData,
        'isEditing': isEditing
      });

      const url = isEditing 
        ? `http://localhost:3000/api/tenants/${editData.id}?organizationId=${organizationId}`
        : `http://localhost:3000/api/tenants?organizationId=${organizationId}`;

      const response = await fetch(url, {
        method: isEditing ? 'PUT' : 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${getJWTFromStorage()}`
        },
        body: JSON.stringify({
          ...tenantData,
          organizationId: organizationId
        })
      });

      if (!response.ok) {
        // Manejo específico de errores del servidor
        let errorMessage = 'Error del servidor';
        
        try {
          const errorData = await response.json();
          errorMessage = errorData.message || errorData.error || `Error ${response.status}`;
          
          // Errores específicos según el código de estado
          switch (response.status) {
            case 400:
              errorMessage = 'Datos inválidos: ' + errorMessage;
              break;
            case 401:
              errorMessage = 'No autorizado. Por favor inicia sesión nuevamente.';
              break;
            case 403:
              errorMessage = 'No tienes permisos para realizar esta acción.';
              break;
            case 409:
              errorMessage = 'El inquilino ya existe: ' + errorMessage;
              break;
            case 422:
              errorMessage = 'Error de validación: ' + errorMessage;
              break;
            case 500:
              errorMessage = 'Error interno del servidor. Por favor contacta al administrador.';
              break;
            default:
              errorMessage = `Error ${response.status}: ${errorMessage}`;
          }
        } catch (parseError) {
          errorMessage = `Error ${response.status}: ${response.statusText}`;
        }
        
        throw new Error(errorMessage);
      }

      const result = await response.json();
      console.log(isEditing ? 'Inquilino actualizado:' : 'Inquilino agregado exitosamente:', result);

      // Mostrar notificación de éxito
      window.showSuccess(isEditing ? '¡Inquilino actualizado exitosamente!' : '¡Inquilino agregado exitosamente!');

      // Simular un pequeño delay para mostrar el loader
      await new Promise(resolve => setTimeout(resolve, 1500));
      
      // Si vinimos desde el formulario de departamento, guardar el inquilino creado y regresar
      const returnTo = sessionStorage.getItem('formReturnTo');
      if (returnTo === 'add-apartment' && result.success) {
        sessionStorage.setItem('lastCreatedTenant', JSON.stringify({
          id: result.tenantId,
          name: formData.name.trim()
        }));
        sessionStorage.removeItem('formReturnTo');
        window.setCurrentPage('add-apartment');
      } else {
        sessionStorage.removeItem('formReturnTo');
        window.setCurrentPage('inquilinos');
      }
      
    } catch (error) {
      console.error('Error al agregar inquilino:', error);
      window.showError(error.message);
    } finally {
      setIsSubmitting(false);
      // Removed full-screen loader overlay
    }
  };

  const handleCancel = () => {
    const returnTo = sessionStorage.getItem('formReturnTo');
    sessionStorage.removeItem('formReturnTo');
    sessionStorage.removeItem('pendingTenantForm');
    if (returnTo === 'add-apartment') {
      window.setCurrentPage('add-apartment');
    } else {
      window.setCurrentPage('inquilinos');
    }
  };

  return (
    <div className="p-4">
      {/* Header */}
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-white mb-2">{isEditing ? 'Editar Inquilino' : 'Agregar Nuevo Inquilino'}</h1>
        <p className="text-gray-400 mb-3">Complete la información del nuevo inquilino</p>
        <button
          onClick={handleCancel}
          className="flex items-center text-gray-400 hover:text-white transition-colors"
        >
          <i className="fas fa-arrow-left mr-2"></i>
          Volver
        </button>
      </div>

      {/* Formulario */}
      <div className="p-6">
        <form onSubmit={handleSubmit}>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            {/* Departamento */}
            <div>
              <label className="text-xs uppercase tracking-wider text-gray-500 mb-2">
                Departamento <span className="text-red-400">*</span>
              </label>
              {loadingApartments ? (
                <div className="text-gray-400 text-sm">Cargando departamentos...</div>
              ) : (
                <div className="flex gap-2">
                  <select
                    name="apartment"
                    value={formData.apartment}
                    onChange={handleInputChange}
                    className={`custom-select w-full px-4 py-3 pr-8 bg-transparent border-b text-white focus:outline-none transition-colors placeholder-gray-500 ${errors.apartment ? 'border-red-500' : 'border-gray-700 focus:border-white'}`}
                  >
                    <option value="">Selecciona un departamento</option>
                    {apartments.map((apt) => (
                      <option key={apt.id || apt._id || apt.name} value={apt.name}>{apt.name}</option>
                    ))}
                  </select>
                  <button
                    type="button"
                    onClick={goToCreateApartment}
                    className="px-3 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-full text-xs flex items-center gap-2"
                  >
                    <i className="fas fa-plus"></i> Nuevo
                  </button>
                </div>
              )}
              {errors.apartment && (
                <p className="mt-2 text-sm text-red-400">{errors.apartment}</p>
              )}
            </div>

            {/* Nombre */}
            <div>
              <label className="text-xs uppercase tracking-wider text-gray-500 mb-2">
                Nombre <span className="text-red-400">*</span>
              </label>
              <input
                type="text"
                name="name"
                value={formData.name}
                onChange={handleInputChange}
                className={`w-full px-4 py-3 bg-transparent border-b text-white focus:outline-none transition-colors placeholder-gray-500 ${errors.name ? 'border-red-500' : 'border-gray-700 focus:border-white'}`}
                placeholder="Nombre completo"
              />
              {errors.name && (
                <p className="mt-2 text-sm text-red-400">{errors.name}</p>
              )}
            </div>

            {/* Correo */}
            <div>
              <label className="text-xs uppercase tracking-wider text-gray-500 mb-2">
                Correo electrónico <span className="text-red-400">*</span>
              </label>
              <input
                type="email"
                name="email"
                value={formData.email}
                onChange={handleInputChange}
                className={`w-full px-4 py-3 bg-transparent border-b text-white focus:outline-none transition-colors placeholder-gray-500 ${errors.email ? 'border-red-500' : 'border-gray-700 focus:border-white'}`}
                placeholder="correo@dominio.com"
              />
              {errors.email && (
                <p className="mt-2 text-sm text-red-400">{errors.email}</p>
              )}
            </div>

            {/* Teléfono */}
            <div>
              <label className="text-xs uppercase tracking-wider text-gray-500 mb-2">
                Teléfono <span className="text-red-400">*</span>
              </label>
              <input
                type="tel"
                name="phone"
                value={formData.phone}
                onChange={handleInputChange}
                className={`w-full px-4 py-3 bg-transparent border-b text-white focus:outline-none transition-colors placeholder-gray-500 ${errors.phone ? 'border-red-500' : 'border-gray-700 focus:border-white'}`}
                placeholder="Ej. 5512345678"
              />
              {errors.phone && (
                <p className="mt-2 text-sm text-red-400">{errors.phone}</p>
              )}
            </div>

            {/* Monto de renta/venta */}
            <div>
              <label className="text-xs uppercase tracking-wider text-gray-500 mb-2">
                Monto de renta <span className="text-red-400">*</span>
              </label>
              <input
                type="number"
                name="rentAmount"
                value={formData.rentAmount}
                onChange={handleInputChange}
                className={`w-full px-4 py-3 bg-transparent border-b text-white focus:outline-none transition-colors placeholder-gray-500 ${errors.rentAmount ? 'border-red-500' : 'border-gray-700 focus:border-white'}`}
                placeholder="$0.00"
                min="0"
                step="100"
              />
              {errors.rentAmount && (
                <p className="mt-2 text-sm text-red-400">{errors.rentAmount}</p>
              )}
            </div>

            {/* Fecha de finalización */}
            <div>
              <label className="text-xs uppercase tracking-wider text-gray-500 mb-2">
                Fecha de fin de contrato <span className="text-red-400">*</span>
              </label>
              <input
                type="date"
                name="endDate"
                value={formData.endDate}
                onChange={handleInputChange}
                className={`w-full px-4 py-3 bg-transparent border-b text-white focus:outline-none transition-colors placeholder-gray-500 ${errors.endDate ? 'border-red-500' : 'border-gray-700 focus:border-white'}`}
                min={new Date().toISOString().split('T')[0]}
              />
              {errors.endDate && (
                <p className="mt-2 text-sm text-red-400">{errors.endDate}</p>
              )}
            </div>

            {/* Subir contrato */}
            <div>
              <label className="text-xs uppercase tracking-wider text-gray-500 mb-2 block">
                Contrato <span className="text-red-400">*</span>
              </label>
              {(formData.contract || formData.contractURL) ? (
                <div className="flex items-center justify-between py-3 border-b border-gray-700">
                  <div className="flex items-center">
                    <i className={`${getFileIcon(formData.contract?.name || 'pdf')} mr-3`}></i>
                    <div>
                      <p className="text-white text-sm truncate max-w-[150px]">
                        {formData.contract?.name || 'Contrato'}
                      </p>
                      {formData.contract && (
                        <p className="text-xs text-gray-500">
                          {(formData.contract.size / (1024 * 1024)).toFixed(2)} MB
                        </p>
                      )}
                    </div>
                  </div>
                  <div className="flex items-center gap-2">
                    {formData.contractURL && (
                      <a
                        href={formData.contractURL}
                        download={formData.contract?.name || 'contrato.pdf'}
                        className="text-blue-500 hover:text-blue-400 transition-colors"
                        title="Descargar"
                      >
                        <i className="fas fa-download"></i>
                      </a>
                    )}
                    <button
                      type="button"
                      onClick={() => setFormData(prev => ({ ...prev, contract: null, contractURL: null }))}
                      className="text-gray-500 hover:text-red-400 transition-colors"
                    >
                      <i className="fas fa-times"></i>
                    </button>
                  </div>
                </div>
              ) : (
                <label className="flex items-center py-3 border-b border-gray-700 border-dashed cursor-pointer hover:border-white transition-colors group">
                  <i className="fas fa-cloud-upload-alt text-gray-600 group-hover:text-white mr-3 transition-colors"></i>
                  <span className="text-gray-600 group-hover:text-white text-sm transition-colors">Subir PDF, Word o PowerPoint</span>
                  <input
                    type="file"
                    accept=".pdf,.doc,.docx,.ppt,.pptx"
                    onChange={handleFileChange}
                    className="hidden"
                  />
                </label>
              )}
              {errors.contract && (
                <p className="mt-2 text-sm text-red-400">{errors.contract}</p>
              )}
            </div>
          </div>
          <div className="flex gap-4 pt-6 border-t border-white/10">
            <button
              type="button"
              onClick={handleCancel}
              className="flex-1 py-3 px-6 text-gray-400 hover:text-white transition-colors"
            >
              Cancelar
            </button>
            <button
              type="submit"
              disabled={isSubmitting}
              className="flex-1 py-3 px-6 bg-white hover:bg-blue-600 text-black hover:text-white rounded-full transition-colors disabled:opacity-50 disabled:cursor-not-allowed font-medium"
            >
              {isSubmitting ? (
                <>
                  <i className="fas fa-spinner fa-spin mr-2"></i>
                  Guardando...
                </>
              ) : (
                isEditing ? 'Guardar Cambios' : 'Agregar Inquilino'
              )}
            </button>
          </div>
        </form>
      </div>

      {/* Información adicional */}
      <div className="mt-6 bg-blue-900/20 border border-blue-500/30 rounded-lg p-4">
        <div className="flex items-start">
          <i className="fas fa-info-circle text-blue-400 mt-1 mr-3"></i>
          <div>
            <h4 className="font-medium text-blue-300 mb-1">Información importante</h4>
            <ul className="text-sm text-blue-200 space-y-1">
              <li>• Los campos marcados con asterisco (*) son obligatorios</li>
              <li>• El sistema verificará que no exista otro inquilino con el mismo email o apartamento</li>
              <li>• El número de teléfono debe tener al menos 10 dígitos</li>
              <li>• La fecha de finalización del contrato debe ser posterior a hoy</li>
              <li>• El documento de contrato no debe superar los 10MB</li>
              <li>• El inquilino recibirá una notificación por email una vez agregado</li>
            </ul>
          </div>
        </div>
      </div>

      {/* Modal de vista previa */}
      {showPreview && renderDocumentPreview()}

      {/* Full-screen loader overlay removed */}
    </div>
  );
}

window.AddTenantPage = AddTenantPage;