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);
  const [showLoader, setShowLoader] = React.useState(false);
  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);
    setShowLoader(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);
      setShowLoader(false);
    }
  };

  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()}

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

      <style dangerouslySetInnerHTML={{
        __html: `
          /* Animaciones del Logo Loader - Ultra fluidas */
          @keyframes newTenantLoaderFloat1 {
            0%, 100% { transform: translate(0, 0); }
            25% { transform: translate(3px, -3px); }
            50% { transform: translate(0, -5px); }
            75% { transform: translate(-3px, -3px); }
          }
          @keyframes newTenantLoaderFloat2 {
            0%, 100% { transform: translate(0, 0); }
            25% { transform: translate(-3px, 3px); }
            50% { transform: translate(0, 5px); }
            75% { transform: translate(3px, 3px); }
          }
          @keyframes newTenantLoaderPulse {
            0%, 100% { opacity: 0.7; }
            50% { opacity: 1; }
          }
          .new-tenant-loader-upper {
            animation: newTenantLoaderFloat1 2s ease-in-out infinite, newTenantLoaderPulse 2s ease-in-out infinite;
          }
          .new-tenant-loader-lower {
            animation: newTenantLoaderFloat2 2s ease-in-out infinite, newTenantLoaderPulse 2s ease-in-out infinite 0.3s;
          }
          @keyframes newTenantDotBounce {
            0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
            40% { opacity: 1; transform: translateY(-4px); }
          }
          .new-tenant-dot1 { animation: newTenantDotBounce 1.4s ease-in-out infinite; }
          .new-tenant-dot2 { animation: newTenantDotBounce 1.4s ease-in-out infinite 0.2s; }
          .new-tenant-dot3 { animation: newTenantDotBounce 1.4s ease-in-out infinite 0.4s; }
        `
      }} />
    </div>
  );
}

window.AddTenantPage = AddTenantPage;