function AddTenantPage() {
  const [formData, setFormData] = React.useState({
    name: '',
    email: '',
    phone: '',
    apartment: '',
    rentAmount: '',
    endDate: '',
    status: 'active',
    paymentStatus: 'current',
    contract: 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 [notification, setNotification] = React.useState(null);

  // Función para mostrar notificaciones
  const showNotification = (message, type = 'info') => {
    setNotification({ message, type });
    setTimeout(() => setNotification(null), 5000);
  };

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



  // 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
    if (!formData.contract) {
      newErrors.contract = 'Debes subir un documento de contrato';
    } else {
      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) => {
    try {
      const response = await fetch(`http://localhost:3001/api/tenants?organizationId=${organizationId}`, {
        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
        const emailExists = existingTenants.find(tenant => 
          tenant.email && tenant.email.toLowerCase() === email.toLowerCase() && tenant.status === 'active'
        );
        
        // Verificar apartamento duplicado
        const apartmentExists = existingTenants.find(tenant => 
          tenant.apartment && tenant.apartment.toLowerCase() === apartment.toLowerCase() && tenant.status === 'active'
        );

        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:3001/api/upload-contract', {
        method: 'POST',
        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">
                <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
      window.showInfo('Verificando información del inquilino...');
      const duplicateCheck = await checkDuplicateTenant(formData.email, formData.apartment, organizationId);
      
      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,
        createdAt: new Date().toISOString(),
        lastUpdated: new Date().toISOString()
      };

      // Subir archivo de contrato si existe
      window.showInfo('Subiendo documento de contrato...');
      if (formData.contract) {
        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;
      }

      // Enviar datos al servidor usando el endpoint correcto para inquilinos
      window.showInfo('Guardando información del inquilino...');
      console.log('📝 Enviando datos del inquilino:', {
        organizationId,
        tenantData,
        'formData completo': formData
      });

      console.log('📦 Datos que se envían en el body:', {
        ...tenantData,
        organizationId: organizationId
      });

      const response = await fetch(`http://localhost:3001/api/tenants?organizationId=${organizationId}`, {
        method: '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('Inquilino agregado exitosamente:', result);

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

      // Simular un pequeño delay para mostrar el loader
      await new Promise(resolve => setTimeout(resolve, 1500));
      
      // Regresar a la página de inquilinos
      window.setCurrentPage('inquilinos');
      
    } catch (error) {
      console.error('Error al agregar inquilino:', error);
      window.showError(error.message);
    } finally {
      setIsSubmitting(false);
      setShowLoader(false);
    }
  };

  const handleCancel = () => {
    window.setCurrentPage('inquilinos');
  };

  return (
    <div className="p-4">
      {/* Header */}
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-white mb-2">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}>
            {/* Información Personal */}
            <div className="mb-8">
              <h3 className="text-lg font-semibold text-white mb-4 border-b border-[#252628] pb-2">
                Información Personal
              </h3>
              
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <label className="block text-sm font-medium text-gray-300 mb-2">
                    <i className="fas fa-user mr-2 text-blue-400"></i>
                    Nombre Completo <span className="text-red-400">*</span>
                  </label>
                  <div className="relative">
                    <i className="fas fa-user absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    <input
                      type="text"
                      name="name"
                      value={formData.name}
                      onChange={handleInputChange}
                      className={`w-full pl-10 pr-4 py-3 bg-[#252628] border rounded-lg text-white focus:outline-none transition-colors ${
                        errors.name 
                          ? 'border-red-500 focus:border-red-400' 
                          : 'border-[#3a3b3e] focus:border-blue-500'
                      }`}
                      placeholder="Ej: Juan Pérez García"
                      required
                    />
                  </div>
                  {errors.name && (
                    <p className="mt-1 text-sm text-red-400 flex items-center">
                      <i className="fas fa-exclamation-circle mr-1"></i>
                      {errors.name}
                    </p>
                  )}
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-gray-300 mb-2">
                    <i className="fas fa-envelope mr-2 text-blue-400"></i>
                    Correo Electrónico <span className="text-red-400">*</span>
                  </label>
                  <div className="relative">
                    <i className="fas fa-envelope absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    <input
                      type="email"
                      name="email"
                      value={formData.email}
                      onChange={handleInputChange}
                      className={`w-full pl-10 pr-4 py-3 bg-[#252628] border rounded-lg text-white focus:outline-none transition-colors ${
                        errors.email 
                          ? 'border-red-500 focus:border-red-400' 
                          : 'border-[#3a3b3e] focus:border-blue-500'
                      }`}
                      placeholder="Ej: juan.perez@email.com"
                      required
                    />
                  </div>
                  {errors.email && (
                    <p className="mt-1 text-sm text-red-400 flex items-center">
                      <i className="fas fa-exclamation-circle mr-1"></i>
                      {errors.email}
                    </p>
                  )}
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-gray-300 mb-2">
                    <i className="fas fa-phone mr-2 text-blue-400"></i>
                    Teléfono <span className="text-red-400">*</span>
                  </label>
                  <div className="relative">
                    <i className="fas fa-phone absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    <input
                      type="tel"
                      name="phone"
                      value={formData.phone}
                      onChange={handleInputChange}
                      className={`w-full pl-10 pr-4 py-3 bg-[#252628] border rounded-lg text-white focus:outline-none transition-colors ${
                        errors.phone 
                          ? 'border-red-500 focus:border-red-400' 
                          : 'border-[#3a3b3e] focus:border-blue-500'
                      }`}
                      placeholder="Ej: +52 55 1234 5678"
                      required
                    />
                  </div>
                  {errors.phone && (
                    <p className="mt-1 text-sm text-red-400 flex items-center">
                      <i className="fas fa-exclamation-circle mr-1"></i>
                      {errors.phone}
                    </p>
                  )}
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-gray-300 mb-2">
                    <i className="fas fa-home mr-2 text-blue-400"></i>
                    Apartamento/Unidad <span className="text-red-400">*</span>
                  </label>
                  <div className="relative">
                    <i className="fas fa-home absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    <input
                      type="text"
                      name="apartment"
                      value={formData.apartment}
                      onChange={handleInputChange}
                      className={`w-full pl-10 pr-4 py-3 bg-[#252628] border rounded-lg text-white focus:outline-none transition-colors ${
                        errors.apartment 
                          ? 'border-red-500 focus:border-red-400' 
                          : 'border-[#3a3b3e] focus:border-blue-500'
                      }`}
                      placeholder="Ej: Apt 101, Casa A, etc."
                      required
                    />
                  </div>
                  {errors.apartment && (
                    <p className="mt-1 text-sm text-red-400 flex items-center">
                      <i className="fas fa-exclamation-circle mr-1"></i>
                      {errors.apartment}
                    </p>
                  )}
                </div>
              </div>
            </div>

            {/* Información del Contrato */}
            <div className="mb-8">
              <h3 className="text-lg font-semibold text-white mb-4 border-b border-[#252628] pb-2">
                Información del Contrato
              </h3>
              
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <label className="block text-sm font-medium text-gray-300 mb-2">
                    <i className="fas fa-dollar-sign mr-2 text-green-400"></i>
                    Renta Mensual <span className="text-red-400">*</span>
                  </label>
                  <div className="relative">
                    <span className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">$</span>
                    <input
                      type="number"
                      name="rentAmount"
                      value={formData.rentAmount}
                      onChange={handleInputChange}
                      className={`w-full pl-8 pr-4 py-3 bg-[#252628] border rounded-lg text-white focus:outline-none transition-colors ${
                        errors.rentAmount 
                          ? 'border-red-500 focus:border-red-400' 
                          : 'border-[#3a3b3e] focus:border-blue-500'
                      }`}
                      placeholder="0.00"
                      min="0"
                      step="0.01"
                      required
                    />
                  </div>
                  {errors.rentAmount && (
                    <p className="mt-1 text-sm text-red-400 flex items-center">
                      <i className="fas fa-exclamation-circle mr-1"></i>
                      {errors.rentAmount}
                    </p>
                  )}
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-gray-300 mb-2">
                    <i className="fas fa-calendar-alt mr-2 text-blue-400"></i>
                    Fecha de Finalización del Contrato <span className="text-red-400">*</span>
                  </label>
                  <div className="relative">
                    <i className="fas fa-calendar-alt absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    <input
                      type="date"
                      name="endDate"
                      value={formData.endDate}
                      onChange={handleInputChange}
                      className={`w-full pl-10 pr-4 py-3 bg-[#252628] border rounded-lg text-white focus:outline-none transition-colors ${
                        errors.endDate 
                          ? 'border-red-500 focus:border-red-400' 
                          : 'border-[#3a3b3e] focus:border-blue-500'
                      }`}
                      required
                    />
                  </div>
                  {errors.endDate && (
                    <p className="mt-1 text-sm text-red-400 flex items-center">
                      <i className="fas fa-exclamation-circle mr-1"></i>
                      {errors.endDate}
                    </p>
                  )}
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-gray-300 mb-2">
                    <i className="fas fa-user-check mr-2 text-blue-400"></i>
                    Estado del Inquilino
                  </label>
                  <div className="relative">
                    <i className="fas fa-user-check absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 z-10"></i>
                    <select
                      name="status"
                      value={formData.status}
                      onChange={handleInputChange}
                      className="w-full pl-10 pr-10 py-3 bg-[#252628] border border-[#3a3b3e] rounded-lg text-white focus:outline-none focus:border-blue-500 transition-colors appearance-none cursor-pointer"
                    >
                      <option value="active">Activo</option>
                      <option value="inactive">Inactivo</option>
                    </select>
                    <i className="fas fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
                  </div>
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-gray-300 mb-2">
                    <i className="fas fa-credit-card mr-2 text-green-400"></i>
                    Estado de Pago
                  </label>
                  <div className="relative">
                    <i className="fas fa-credit-card absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 z-10"></i>
                    <select
                      name="paymentStatus"
                      value={formData.paymentStatus}
                      onChange={handleInputChange}
                      className="w-full pl-10 pr-10 py-3 bg-[#252628] border border-[#3a3b3e] rounded-lg text-white focus:outline-none focus:border-blue-500 transition-colors appearance-none cursor-pointer"
                    >
                      <option value="current">Al Corriente</option>
                      <option value="overdue">Deudor</option>
                      <option value="advanced">Adelantado</option>
                    </select>
                    <i className="fas fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
                  </div>
                </div>
                
                <div className="md:col-span-2">
                  <label className="block text-sm font-medium text-gray-300 mb-2">
                    <i className="fas fa-file-contract mr-2 text-purple-400"></i>
                    Documento de Contrato <span className="text-red-400">*</span>
                  </label>
                  <div className="relative">
                    <input
                      type="file"
                      name="contract"
                      onChange={handleFileChange}
                      accept=".pdf,.doc,.docx,.ppt,.pptx"
                      className={`w-full px-4 py-3 bg-[#252628] border rounded-lg text-white focus:outline-none transition-colors file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-blue-600 file:text-white hover:file:bg-blue-700 ${
                        errors.contract 
                          ? 'border-red-500 focus:border-red-400' 
                          : 'border-[#3a3b3e] focus:border-blue-500'
                      }`}
                      required
                    />
                    {errors.contract && (
                      <p className="mt-1 text-sm text-red-400 flex items-center">
                        <i className="fas fa-exclamation-circle mr-1"></i>
                        {errors.contract}
                      </p>
                    )}
                    {formData.contract && (
                      <div className="mt-3 p-3 bg-[#1a1b1e] border border-[#3a3b3e] rounded-lg">
                        <div className="flex items-center justify-between">
                          <div className="flex items-center">
                            <i className={`${getFileIcon(formData.contract.name)} text-lg mr-3`}></i>
                            <div>
                              <p className="text-sm font-medium text-white">{formData.contract.name}</p>
                              <p className="text-xs text-gray-400">
                                {(formData.contract.size / (1024 * 1024)).toFixed(2)} MB
                              </p>
                            </div>
                          </div>
                          <div className="flex gap-2">
                            <button
                              type="button"
                              onClick={openPreview}
                              className="px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white text-xs rounded-md transition-colors flex items-center"
                            >
                              <i className="fas fa-eye mr-1"></i>
                              Preview
                            </button>
                            <button
                              type="button"
                              onClick={() => setFormData(prev => ({ ...prev, contract: null }))}
                              className="px-3 py-1 bg-red-600 hover:bg-red-700 text-white text-xs rounded-md transition-colors flex items-center"
                            >
                              <i className="fas fa-trash mr-1"></i>
                              Eliminar
                            </button>
                          </div>
                        </div>
                      </div>
                    )}
                    <p className="mt-2 text-xs text-gray-500">
                      Formatos aceptados: PDF, Word (.doc, .docx), PowerPoint (.ppt, .pptx) • Tamaño máximo: 10MB
                    </p>
                  </div>
                </div>
              </div>
            </div>

            {/* Botones */}
            <div className="flex gap-4 pt-6 border-t border-[#252628]">
              <button
                type="submit"
                className="w-full px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors disabled:opacity-50"
                disabled={isSubmitting}
              >
                {isSubmitting ? (
                  <>
                    <i className="fas fa-spinner fa-spin mr-2"></i>
                    Agregando...
                  </>
                ) : (
                  <>
                    <i className="fas fa-plus mr-2"></i>
                    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 */}
      {showLoader && (
        <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<span className="dots"><span className="dot1">.</span><span className="dot2">.</span><span className="dot3">.</span></span>
            </div>
          </div>
        </div>
      )}

      <style dangerouslySetInnerHTML={{
        __html: `
          .overlay {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
          }
          
          .upper {
            animation: upperMove 2s ease-in-out infinite;
          }
          
          .lower {
            animation: lowerMove 2s ease-in-out infinite;
          }
          
          @keyframes upperMove {
            0%, 100% {
              transform: translate(0, 0);
            }
            50% {
              transform: translate(50px, -50px);
            }
          }
          
          @keyframes lowerMove {
            0%, 100% {
              transform: translate(0, 0);
            }
            50% {
              transform: translate(-50px, 50px);
            }
          }
          
          .loading-text {
            position: absolute;
            bottom: 150px;
            color: rgba(255, 255, 255, 0.9);
            font-family: Arial, sans-serif;
            font-size: 18px;
            font-weight: 300;
            letter-spacing: 2px;
          }
          
          .dots {
            display: inline-block;
          }
          
          .dot1, .dot2, .dot3 {
            opacity: 0;
            animation: dotFade 1.5s ease-in-out infinite;
          }
          
          .dot1 {
            animation-delay: 0s;
          }
          
          .dot2 {
            animation-delay: 0.5s;
          }
          
          .dot3 {
            animation-delay: 1s;
          }
          
          @keyframes dotFade {
            0%, 100% {
              opacity: 0;
            }
            50% {
              opacity: 1;
            }
          }
        `
      }} />
    </div>
  );
}

window.AddTenantPage = AddTenantPage;