const MAPBOX_TOKEN = 'pk.eyJ1IjoiZGllZ29iYW51ZWxvcyIsImEiOiJjbWo2OXlydTEwcjVnM2pwb2JkYnE2Zm90In0.wduWUtALNLzx_t3ciVgzaw';

function AddApartmentPage({ onCancel, editData }) {
  const isEditing = !!editData;
  
  const [formData, setFormData] = React.useState({
    name: editData?.name || '',
    address: editData?.address || '',
    lat: editData?.lat || null,
    lng: editData?.lng || null,
    photos: editData?.photos || [],
    contractFile: null,
    contractBase64: editData?.contractBase64 || null,
    contractFileName: editData?.contractFileName || null,
    contractURL: editData?.contractURL || null,
    residents: editData?.residents || [],
    status: editData?.status || 'available',
    classification: editData?.classification || 'standard',
    monthlyRent: editData?.monthlyRent || '',
    propertyPrice: editData?.propertyPrice || '',
    squareMeters: editData?.squareMeters || '',
    bedrooms: editData?.bedrooms || '',
    bathrooms: editData?.bathrooms || '',
    expedientes: editData?.expedientes || []
  });
  
  // Opciones de estado
  const statusOptions = [
    { value: 'available', label: 'Disponible', color: 'bg-emerald-500', icon: 'fa-check-circle' },
    { value: 'occupied', label: 'Ocupado', color: 'bg-blue-500', icon: 'fa-user' },
    { value: 'maintenance', label: 'En Mantenimiento', color: 'bg-orange-500', icon: 'fa-tools' },
    { value: 'reserved', label: 'Reservado', color: 'bg-purple-500', icon: 'fa-clock' },
    { value: 'unavailable', label: 'No Disponible', color: 'bg-red-500', icon: 'fa-ban' }
  ];
  
  // Opciones de clasificación
  const classificationOptions = [
    { value: 'economy', label: 'Económico', icon: 'fa-dollar-sign' },
    { value: 'standard', label: 'Estándar', icon: 'fa-home' },
    { value: 'premium', label: 'Premium', icon: 'fa-star' },
    { value: 'luxury', label: 'Lujo', icon: 'fa-gem' },
    { value: 'penthouse', label: 'Penthouse', icon: 'fa-crown' }
  ];
  
  const [photoFiles, setPhotoFiles] = React.useState([]);
  const [uploadingPhotos, setUploadingPhotos] = React.useState(false);
  const [uploadingContract, setUploadingContract] = React.useState(false);
  const [uploadingExpediente, setUploadingExpediente] = React.useState(false);
  
  const [searchQuery, setSearchQuery] = React.useState(editData?.address || '');
  const [suggestions, setSuggestions] = React.useState([]);
  const [showSuggestions, setShowSuggestions] = React.useState(false);
  const [isSubmitting, setIsSubmitting] = React.useState(false);
  const [tenants, setTenants] = React.useState([]);
  const [selectedTenants, setSelectedTenants] = React.useState(editData?.residents || []);
  const [subResidents, setSubResidents] = React.useState(editData?.subResidents || []);
  const [newSubResident, setNewSubResident] = React.useState('');
  const [pendingNewTenants, setPendingNewTenants] = React.useState([]);
  const [showNewTenantForm, setShowNewTenantForm] = React.useState(false);
  const [newTenantData, setNewTenantData] = React.useState({ name: '', phone: '', email: '', rentAmount: '' });
  const [errors, setErrors] = React.useState({});
  const mapContainerRef = React.useRef(null);
  const mapRef = React.useRef(null);
  const markerRef = React.useRef(null);
  const searchTimeoutRef = React.useRef(null);

  // Actualizar coordenadas, colocar marcador y centrar mapa
  const setMarker = (lng, lat) => {
    try { console.debug('Setting coords', lng, lat); } catch (e) {}

    setFormData(prev => ({
      ...prev,
      lat,
      lng
    }));

    try {
      if (mapRef.current && typeof mapRef.current.resize === 'function') {
        mapRef.current.resize();
      }
      // Crear o mover marcador visual
      if (markerRef.current) {
        markerRef.current.setLngLat([lng, lat]);
      } else if (window.mapboxgl && mapRef.current) {
        markerRef.current = new window.mapboxgl.Marker({ color: '#3b82f6' })
          .setLngLat([lng, lat])
          .addTo(mapRef.current);
      }
      mapRef.current.flyTo({ center: [lng, lat], zoom: 16 });
    } catch (e) {}
  };

  // Función para guardar estado del formulario antes de navegar
  const saveApartmentFormState = () => {
    const stateToSave = {
      formData: {
        name: formData.name,
        address: formData.address,
        lat: formData.lat,
        lng: formData.lng,
        photos: formData.photos,
        contractBase64: formData.contractBase64,
        contractFileName: formData.contractFileName,
        contractURL: formData.contractURL,
        residents: formData.residents,
        status: formData.status,
        classification: formData.classification,
        monthlyRent: formData.monthlyRent,
        propertyPrice: formData.propertyPrice,
        squareMeters: formData.squareMeters,
        bedrooms: formData.bedrooms,
        bathrooms: formData.bathrooms,
        expedientes: formData.expedientes
      },
      selectedTenants,
      subResidents,
      pendingNewTenants,
      searchQuery
    };
    sessionStorage.setItem('pendingApartmentForm', JSON.stringify(stateToSave));
  };

  // Restaurar datos guardados si venimos de regreso de crear inquilino
  React.useEffect(() => {
    if (isEditing) return;
    const savedForm = sessionStorage.getItem('pendingApartmentForm');
    if (savedForm) {
      try {
        const parsed = JSON.parse(savedForm);
        if (parsed.formData) {
          setFormData(prev => ({ ...prev, ...parsed.formData, contractFile: null }));
        }
        if (parsed.selectedTenants) setSelectedTenants(parsed.selectedTenants);
        if (parsed.subResidents) setSubResidents(parsed.subResidents);
        if (parsed.pendingNewTenants) setPendingNewTenants(parsed.pendingNewTenants);
        if (parsed.searchQuery) setSearchQuery(parsed.searchQuery);
        sessionStorage.removeItem('pendingApartmentForm');
      } catch (e) {
        console.error('Error restaurando formulario de departamento:', e);
      }
    }
    const newTenantStr = sessionStorage.getItem('lastCreatedTenant');
    if (newTenantStr) {
      try {
        const newTenant = JSON.parse(newTenantStr);
        if (newTenant.id) {
          setSelectedTenants(prev => prev.includes(newTenant.id) ? prev : [...prev, newTenant.id]);
        }
        sessionStorage.removeItem('lastCreatedTenant');
      } catch (e) {
        console.error('Error restaurando inquilino creado:', e);
      }
    }
  }, []);

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

  // Cargar inquilinos existentes
  React.useEffect(() => {
    const loadTenants = 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/tenants?organizationId=${organizationId}`, {
            headers: {
              'Authorization': `Bearer ${getJWTFromStorage()}`
            }
          });
          
          if (response.ok) {
            const result = await response.json();
            setTenants(result.data || []);
          }
        }
      } catch (error) {
        console.error('Error cargando inquilinos:', error);
      }
    };
    
    loadTenants();
  }, []);

  // Detectar país/estado del usuario usando IP (aproximado)
  const detectUserLocation = async () => {
    try {
      // Usar servicio de geolocalización por IP (no exacta)
      const response = await fetch('https://ipapi.co/json/');
      const data = await response.json();
      
      if (data.latitude && data.longitude) {
        return {
          lat: data.latitude,
          lng: data.longitude,
          country: data.country_name,
          region: data.region,
          zoom: 6 // Zoom bajo para mostrar estado/región, no ubicación exacta
        };
      }
    } catch (error) {
      console.log('No se pudo detectar ubicación por IP, usando ubicación por defecto');
    }
    
    // Fallback: México
    return {
      lat: 23.6345,
      lng: -102.5528,
      country: 'México',
      region: '',
      zoom: 5
    };
  };

  // Inicializar mapa de Mapbox
  React.useEffect(() => {
    if (!mapContainerRef.current || mapRef.current) return;

    // Cargar script de Mapbox si no está cargado
    if (!window.mapboxgl) {
      const script = document.createElement('script');
      script.src = 'https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.js';
      script.onload = initMap;
      document.head.appendChild(script);

      const link = document.createElement('link');
      link.href = 'https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.css';
      link.rel = 'stylesheet';
      document.head.appendChild(link);
    } else {
      initMap();
    }

    async function initMap() {
      window.mapboxgl.accessToken = MAPBOX_TOKEN;
      // Asegurarse de no dejar un marcador previo al inicializar
      if (markerRef.current) {
        try { markerRef.current.remove(); } catch (e) {}
        markerRef.current = null;
      }
      
      // Si estamos editando y hay coordenadas, usarlas
      let initialCenter, initialZoom;
      if (editData?.lat && editData?.lng) {
        initialCenter = [editData.lng, editData.lat];
        initialZoom = 16;
      } else {
        // Detectar ubicación aproximada del usuario
        const userLocation = await detectUserLocation();
        initialCenter = [userLocation.lng, userLocation.lat];
        initialZoom = userLocation.zoom;
      }
      
      mapRef.current = new window.mapboxgl.Map({
        container: mapContainerRef.current,
        style: 'mapbox://styles/mapbox/dark-v11',
        center: initialCenter,
        zoom: initialZoom
      });

      mapRef.current.addControl(new window.mapboxgl.NavigationControl(), 'top-right');

      // Al cargar, limpiar cualquier marcador residual y poner marcador de edición si aplica
      mapRef.current.on('load', () => {
        try {
          const container = mapContainerRef.current;
          if (container) {
            const existing = container.querySelectorAll('.mapboxgl-marker');
            existing.forEach(el => el.remove());
          }
        } catch (e) {
          // ignore
        }

        if (editData?.lat && editData?.lng) {
          setMarker(editData.lng, editData.lat);
        }
      });

      // Click en el mapa para seleccionar ubicación
      mapRef.current.on('click', (e) => {
        const { lng, lat } = e.lngLat;
        try { console.debug('Map clicked at', lng, lat, 'point', e.point); } catch (er) {}
        setMarker(lng, lat);
        reverseGeocode(lng, lat);
      });
    }
  }, []);

  const reverseGeocode = async (lng, lat) => {
    try {
      const response = await fetch(
        `https://api.mapbox.com/geocoding/v5/mapbox.places/${lng},${lat}.json?access_token=${MAPBOX_TOKEN}&language=es`
      );
      const data = await response.json();
      
      if (data.features && data.features.length > 0) {
        const address = data.features[0].place_name;
        setSearchQuery(address);
        setFormData(prev => ({
          ...prev,
          address
        }));
      }
    } catch (error) {
      console.error('Error en geocodificación inversa:', error);
    }
  };

  // Buscar sugerencias de direcciones
  const searchAddresses = async (query) => {
    if (!query || query.length < 3) {
      setSuggestions([]);
      return;
    }

    try {
      const response = await fetch(
        `https://api.mapbox.com/geocoding/v5/mapbox.places/${encodeURIComponent(query)}.json?access_token=${MAPBOX_TOKEN}&language=es&country=mx&limit=5`
      );
      const data = await response.json();
      
      if (data.features) {
        setSuggestions(data.features);
        setShowSuggestions(true);
      }
    } catch (error) {
      console.error('Error buscando direcciones:', error);
    }
  };

  // Buscar la primera coincidencia y colocar marcador (usado al presionar Enter)
  const geocodeAndSetMarker = async (query) => {
    if (!query || query.length < 3) return;
    try {
      const response = await fetch(
        `https://api.mapbox.com/geocoding/v5/mapbox.places/${encodeURIComponent(query)}.json?access_token=${MAPBOX_TOKEN}&language=es&country=mx&limit=1`
      );
      const data = await response.json();
      if (data.features && data.features.length > 0) {
        const feature = data.features[0];
        const [lng, lat] = feature.center;
        setSearchQuery(feature.place_name);
        setFormData(prev => ({ ...prev, address: feature.place_name, lat, lng }));
        setSuggestions([]);
        setShowSuggestions(false);
        setMarker(lng, lat);
      } else {
        window.showError?.('No se encontró la dirección. Intenta refinar la búsqueda.');
      }
    } catch (err) {
      console.error('Error en geocodificación rápida:', err);
      window.showError?.('Error buscando la dirección. Intenta de nuevo.');
    }
  };

  const handleSearchKeyDown = (e) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      geocodeAndSetMarker(searchQuery);
    }
  };

  const handleSearchChange = (e) => {
    const value = e.target.value;
    setSearchQuery(value);

    // Debounce la búsqueda
    if (searchTimeoutRef.current) {
      clearTimeout(searchTimeoutRef.current);
    }

    searchTimeoutRef.current = setTimeout(() => {
      searchAddresses(value);
    }, 300);
  };

  const selectSuggestion = (suggestion) => {
    const [lng, lat] = suggestion.center;
    setSearchQuery(suggestion.place_name);
    setFormData(prev => ({
      ...prev,
      address: suggestion.place_name,
      lat,
      lng
    }));
    setSuggestions([]);
    setShowSuggestions(false);
    setMarker(lng, lat);
  };

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

  const handlePhotoChange = async (e) => {
    const files = Array.from(e.target.files);
    let tooLargeCount = 0;
    let invalidTypeCount = 0;
    
    const validFiles = files.filter(file => {
      const isImage = file.type.startsWith('image/');
      const isValidSize = file.size <= 5 * 1024 * 1024; // 5MB max
      
      if (!isImage) {
        invalidTypeCount++;
        return false;
      }
      if (!isValidSize) {
        tooLargeCount++;
        return false;
      }
      return true;
    });

    if (invalidTypeCount > 0) {
      window.showError?.(`${invalidTypeCount} archivo(s) rechazado(s): Solo se permiten imágenes`);
    }
    if (tooLargeCount > 0) {
      window.showError?.(`${tooLargeCount} imagen(es) muy grande(s): Máximo 5MB por imagen`);
    }

    const currentPhotos = formData.photos.length;
    const maxPhotos = 10;
    if (currentPhotos + validFiles.length > maxPhotos) {
      const allowed = maxPhotos - currentPhotos;
      window.showError?.(`Solo puedes agregar ${allowed} foto(s) más. Máximo ${maxPhotos} fotos.`);
      validFiles.splice(allowed);
    }

    if (validFiles.length === 0) return;

    // Upload to Cloudinary
    setUploadingPhotos(true);
    try {
      const formDataUpload = new FormData();
      validFiles.forEach(file => formDataUpload.append('files', file));
      formDataUpload.append('folder', 'apartments/photos');
      formDataUpload.append('type', 'image');

      const response = await fetch('http://localhost:3000/api/upload', {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${getJWTFromStorage()}`
        },
        body: formDataUpload
      });

      if (response.ok) {
        const result = await response.json();
        const newUrls = result.files.map(f => f.url);
        setFormData(prev => ({
          ...prev,
          photos: [...prev.photos, ...newUrls]
        }));
        setPhotoFiles(prev => [...prev, ...validFiles]);
        window.showSuccess?.(`${newUrls.length} foto(s) subida(s) correctamente`);
      } else {
        window.showError?.('Error al subir las fotos. Intenta de nuevo.');
      }
    } catch (error) {
      console.error('Error uploading photos:', error);
      window.showError?.('Error al subir las fotos. Verifica tu conexión.');
    } finally {
      setUploadingPhotos(false);
    }
  };

  const removePhoto = (index) => {
    setFormData(prev => ({
      ...prev,
      photos: prev.photos.filter((_, i) => i !== index)
    }));
    setPhotoFiles(prev => prev.filter((_, i) => i !== index));
  };

  const handleContractChange = async (e) => {
    const file = e.target.files[0];
    if (file) {
      const allowedTypes = ['.pdf', '.doc', '.docx'];
      const extension = '.' + file.name.split('.').pop().toLowerCase();
      const maxSizeMB = 10;
      const maxSize = maxSizeMB * 1024 * 1024;
      
      if (!allowedTypes.includes(extension)) {
        window.showError?.(`Tipo de archivo no permitido. Solo se aceptan: ${allowedTypes.join(', ')}`);
        return;
      }
      
      if (file.size > maxSize) {
        window.showError?.(`El contrato es muy grande (${(file.size / (1024 * 1024)).toFixed(1)}MB). Máximo permitido: ${maxSizeMB}MB`);
        return;
      }
      
      // Upload to Cloudinary
      setUploadingContract(true);
      try {
        const uploadData = new FormData();
        uploadData.append('file', file);
        uploadData.append('tenantName', formData.name || 'apartment');
        
        let orgId = window.currentOrganizationId;
        if (!orgId) {
          const token = getJWTFromStorage();
          if (token) {
            const payload = JSON.parse(atob(token.split('.')[1]));
            orgId = payload.organizationId;
          }
        }
        uploadData.append('orgId', orgId || 'general');

        const response = await fetch('http://localhost:3000/api/upload-contract', {
          method: 'POST',
          headers: {
            'Authorization': `Bearer ${getJWTFromStorage()}`
          },
          body: uploadData
        });

        if (response.ok) {
          const result = await response.json();
          setFormData(prev => ({
            ...prev,
            contractFile: file,
            contractBase64: null,
            contractFileName: file.name,
            contractURL: result.downloadURL
          }));
          window.showSuccess?.('Contrato subido correctamente');
        } else {
          window.showError?.('Error al subir el contrato. Intenta de nuevo.');
        }
      } catch (error) {
        console.error('Error uploading contract:', error);
        window.showError?.('Error al subir el contrato. Verifica tu conexión.');
      } finally {
        setUploadingContract(false);
      }
    }
  };

  // Subir expediente (documento) a Cloudinary
  const handleExpedienteUpload = async (e) => {
    const file = e.target.files[0];
    if (!file) return;
    const maxSizeMB = 10;
    if (file.size > maxSizeMB * 1024 * 1024) {
      window.showError?.(`El archivo es muy grande (${(file.size / (1024 * 1024)).toFixed(1)}MB). Máximo: ${maxSizeMB}MB`);
      return;
    }
    setUploadingExpediente(true);
    try {
      const uploadData = new FormData();
      uploadData.append('file', file);
      uploadData.append('tenantName', formData.name || 'apartment');
      let orgId = window.currentOrganizationId;
      if (!orgId) {
        const token = getJWTFromStorage();
        if (token) {
          const payload = JSON.parse(atob(token.split('.')[1]));
          orgId = payload.organizationId;
        }
      }
      uploadData.append('orgId', orgId || 'general');

      const response = await fetch('http://localhost:3000/api/upload-contract', {
        method: 'POST',
        headers: { 'Authorization': `Bearer ${getJWTFromStorage()}` },
        body: uploadData
      });

      if (response.ok) {
        const result = await response.json();
        const newExp = {
          id: Date.now().toString(),
          name: file.name,
          url: result.downloadURL,
          size: file.size,
          type: file.name.split('.').pop().toLowerCase(),
          uploadedAt: new Date().toISOString()
        };
        setFormData(prev => ({
          ...prev,
          expedientes: [...prev.expedientes, newExp]
        }));
        window.showSuccess?.(`Expediente "${file.name}" subido correctamente`);
      } else {
        window.showError?.('Error al subir el expediente. Intenta de nuevo.');
      }
    } catch (error) {
      console.error('Error uploading expediente:', error);
      window.showError?.('Error al subir el expediente.');
    } finally {
      setUploadingExpediente(false);
    }
  };

  const removeExpediente = (expId) => {
    setFormData(prev => ({
      ...prev,
      expedientes: prev.expedientes.filter(e => e.id !== expId)
    }));
  };

  const toggleTenant = (tenantId) => {
    setSelectedTenants(prev => {
      const isRemoving = prev.includes(tenantId);
      if (isRemoving) {
        return prev.filter(id => id !== tenantId);
      }
      // Auto-fill contract info from the newly selected tenant
      const tenant = tenants.find(t => t.id === tenantId);
      if (tenant) {
        setFormData(prevForm => ({
          ...prevForm,
          monthlyRent: prevForm.monthlyRent || (tenant.rentAmount ? String(tenant.rentAmount) : ''),
          contractURL: prevForm.contractURL || tenant.contractURL || null,
          contractFileName: prevForm.contractFileName || (tenant.contractURL ? `Contrato - ${tenant.name}` : null),
        }));
      }
      return [...prev, tenantId];
    });
  };

  const validateForm = () => {
    const newErrors = {};
    
    if (!formData.name.trim()) {
      newErrors.name = 'El nombre del departamento es obligatorio';
    }
    
    // La dirección es opcional
    
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  // Agregar subresidente
  const addSubResident = () => {
    if (newSubResident.trim()) {
      setSubResidents(prev => [...prev, newSubResident.trim()]);
      setNewSubResident('');
    }
  };

  // Eliminar subresidente
  const removeSubResident = (index) => {
    setSubResidents(prev => prev.filter((_, i) => i !== index));
  };

  // Agregar nuevo inquilino inline
  const addNewTenantInline = () => {
    if (!newTenantData.name.trim()) {
      window.showError?.('El nombre del inquilino es obligatorio');
      return;
    }
    setPendingNewTenants(prev => [...prev, { ...newTenantData, _tempId: Date.now().toString() }]);
    setNewTenantData({ name: '', phone: '', email: '', rentAmount: '' });
    setShowNewTenantForm(false);
    window.showSuccess?.(`Inquilino "${newTenantData.name}" agregado`);
  };

  // Eliminar inquilino pendiente
  const removePendingTenant = (tempId) => {
    setPendingNewTenants(prev => prev.filter(t => t._tempId !== tempId));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!validateForm()) {
      window.showError?.('Por favor completa los campos requeridos');
      return;
    }
    setIsSubmitting(true);
    try {
      let organizationId = window.currentOrganizationId;
      if (!organizationId) {
        const token = getJWTFromStorage();
        if (token) {
          const payload = JSON.parse(atob(token.split('.')[1]));
          organizationId = payload.organizationId;
        }
      }
      const apartmentData = {
        name: formData.name.trim(),
        address: formData.address || null,
        lat: formData.lat,
        lng: formData.lng,
        residents: selectedTenants,
        newResidents: pendingNewTenants.map(t => ({
          name: t.name,
          phone: t.phone || '',
          email: t.email || '',
          rentAmount: t.rentAmount || ''
        })),
        subResidents: subResidents,
        photos: formData.photos,
        contractURL: formData.contractURL || null,
        contractBase64: formData.contractURL ? null : (formData.contractBase64 || null),
        contractFileName: formData.contractFileName || null,
        status: formData.status,
        classification: formData.classification,
        monthlyRent: formData.monthlyRent ? parseFloat(formData.monthlyRent) : null,
        propertyPrice: formData.propertyPrice ? parseFloat(formData.propertyPrice) : null,
        squareMeters: formData.squareMeters ? parseFloat(formData.squareMeters) : null,
        bedrooms: formData.bedrooms ? parseInt(formData.bedrooms) : null,
        bathrooms: formData.bathrooms ? parseFloat(formData.bathrooms) : null,
        expedientes: formData.expedientes || [],
        updatedAt: new Date().toISOString(),
        organizationId
      };
      if (!isEditing) {
        apartmentData.createdAt = new Date().toISOString();
      }
      const url = isEditing
        ? `http://localhost:3000/api/apartments/${editData.id}`
        : 'http://localhost:3000/api/apartments';

      // Timeout de 10 segundos para fetch
      const controller = new AbortController();
      const timeoutId = setTimeout(() => controller.abort(), 10000);
      let response;
      try {
        response = await fetch(url, {
          method: isEditing ? 'PUT' : 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${getJWTFromStorage()}`
          },
          body: JSON.stringify(apartmentData),
          signal: controller.signal
        });
      } catch (fetchError) {
        if (fetchError.name === 'AbortError') {
          window.showError?.('No se pudo guardar el departamento: el servidor no respondió en 10 segundos.');
          setIsSubmitting(false);
          clearTimeout(timeoutId);
          return;
        } else {
          throw fetchError;
        }
      }
      clearTimeout(timeoutId);
      if (response.ok) {
        window.showSuccess?.(isEditing ? '¡Departamento actualizado!' : '¡Departamento creado exitosamente!');
        // Si vinimos desde el formulario de inquilino, guardar el departamento creado y regresar
        const returnTo = sessionStorage.getItem('formReturnTo');
        if (returnTo === 'add-tenant') {
          sessionStorage.setItem('lastCreatedApartment', formData.name.trim());
          sessionStorage.removeItem('formReturnTo');
          setTimeout(() => {
            window.setCurrentPage?.('add-tenant');
          }, 1500);
        } else {
          sessionStorage.removeItem('formReturnTo');
          setTimeout(() => {
            if (onCancel) onCancel();
          }, 1500);
        }
      } else {
        let errorMessage = isEditing ? 'Error al actualizar departamento' : 'Error al crear departamento';
        try {
          const errorData = await response.json();
          if (errorData && errorData.error) {
            errorMessage = errorData.error;
          }
        } catch {}
        window.showError?.(errorMessage);
      }
    } catch (error) {
      console.error('Error:', error);
      window.showError?.(error.message || 'Error al crear el departamento');
    } finally {
      setIsSubmitting(false);
    }
  };

  // Manejar cancelación respetando el contexto de retorno
  const handleCancel = () => {
    const returnTo = sessionStorage.getItem('formReturnTo');
    if (returnTo === 'add-tenant') {
      sessionStorage.removeItem('formReturnTo');
      window.setCurrentPage?.('add-tenant');
    } else {
      sessionStorage.removeItem('formReturnTo');
      if (onCancel) onCancel();
    }
  };

  return (
    <div className="fixed inset-0 bg-black/80 backdrop-blur-xl z-50 overflow-y-auto">
      <div className="min-h-screen py-8 px-4">
        <div className="w-full bg-black/40 backdrop-blur-md rounded-3xl p-6 border border-white/10">
        {/* Header */}
        <div className="mb-8">
          <button
            onClick={handleCancel}
            className="flex items-center text-gray-400 hover:text-white transition-colors mb-6"
          >
            <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
            </svg>
            Volver
          </button>
          
          <h1 className="text-3xl font-bold text-white mb-2">{isEditing ? 'Editar Departamento' : 'Nuevo Departamento'}</h1>
          <p className="text-gray-400">{isEditing ? 'Modifica la información del departamento' : 'Agrega un nuevo departamento a tu organización'}</p>
        </div>

        <form onSubmit={handleSubmit}>
          {/* Bento Grid Layout */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
            
            {/* Mapa - Ocupa 2 columnas */}
            <div className="md:col-span-2 lg:col-span-2 row-span-2">
              <div className="relative mb-3">
                <input
                  type="text"
                  value={searchQuery}
                  onChange={handleSearchChange}
                  onFocus={() => suggestions.length > 0 && setShowSuggestions(true)}
                  onKeyDown={(e) => handleSearchKeyDown(e)}
                  className={`w-full px-4 py-3 bg-transparent border-b text-white focus:outline-none transition-colors placeholder-gray-500 ${
                    errors.address ? 'border-red-500' : 'border-gray-700 focus:border-white'
                  }`}
                  placeholder="Buscar dirección..."
                />
                
                {/* Sugerencias */}
                {showSuggestions && suggestions.length > 0 && (
                  <div className="absolute z-20 w-full mt-1 bg-[#1a1a1a] border border-gray-800 rounded-lg max-h-60 overflow-auto">
                    {suggestions.map((suggestion, index) => (
                      <button
                        key={index}
                        type="button"
                        onClick={() => selectSuggestion(suggestion)}
                        className="w-full px-4 py-3 text-left text-white hover:bg-gray-800 transition-colors flex items-start"
                      >
                        <i className="fas fa-map-marker-alt text-gray-500 mr-3 mt-1"></i>
                        <span className="text-sm">{suggestion.place_name}</span>
                      </button>
                    ))}
                  </div>
                )}
              </div>
              
              <div 
                ref={mapContainerRef}
                className="w-full h-72 md:h-80 lg:h-96 rounded-2xl overflow-hidden"
              />
              {errors.address && (
                <p className="mt-2 text-sm text-red-400">{errors.address}</p>
              )}
            </div>

            {/* Nombre del Departamento */}
            <div className="flex flex-col justify-center">
              <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-0 py-3 bg-transparent border-b text-white text-lg focus:outline-none transition-colors placeholder-gray-600 ${
                  errors.name ? 'border-red-500' : 'border-gray-700 focus:border-white'
                }`}
                placeholder="Departamento 101"
              />
              {errors.name && (
                <p className="mt-1 text-sm text-red-400">{errors.name}</p>
              )}
            </div>

            {/* Estado del Departamento */}
            <div>
              <label className="text-xs uppercase tracking-wider text-gray-500 mb-3 block">
                Estado
              </label>
              <div className="flex flex-wrap gap-2">
                {statusOptions.map(option => (
                  <button
                    key={option.value}
                    type="button"
                    onClick={() => setFormData(prev => ({ ...prev, status: option.value }))}
                    className={`px-3 py-2 rounded-full text-sm transition-all flex items-center gap-2 ${
                      formData.status === option.value
                        ? `${option.color} text-white`
                        : 'bg-[#252628] text-gray-400 hover:bg-[#35383d] hover:text-white'
                    }`}
                  >
                    <i className={`fas ${option.icon} text-xs`}></i>
                    {option.label}
                  </button>
                ))}
              </div>
            </div>

            {/* Clasificación */}
            <div>
              <label className="text-xs uppercase tracking-wider text-gray-500 mb-3 block">
                Clasificación
              </label>
              <div className="flex flex-wrap gap-2">
                {classificationOptions.map(option => (
                  <button
                    key={option.value}
                    type="button"
                    onClick={() => setFormData(prev => ({ ...prev, classification: option.value }))}
                    className={`px-3 py-2 rounded-full text-sm transition-all flex items-center gap-2 ${
                      formData.classification === option.value
                        ? 'bg-[#fae0d1] text-[#1b1c20]'
                        : 'bg-[#252628] text-gray-400 hover:bg-[#35383d] hover:text-white'
                    }`}
                  >
                    <i className={`fas ${option.icon} text-xs`}></i>
                    {option.label}
                  </button>
                ))}
              </div>
            </div>

            {/* Detalles del Departamento - Grid de 5 columnas */}
            <div className="md:col-span-2 lg:col-span-3">
              <label className="text-xs uppercase tracking-wider text-gray-500 mb-3 block">
                Detalles
              </label>
              <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
                {/* Renta Mensual */}
                <div>
                  <label className="text-xs text-gray-500 mb-1 block">
                    <i className="fas fa-dollar-sign mr-1"></i>Renta Mensual
                  </label>
                  <input
                    type="number"
                    name="monthlyRent"
                    value={formData.monthlyRent}
                    onChange={handleInputChange}
                    className="w-full px-0 py-2 bg-transparent border-b border-gray-700 focus:border-white text-white focus:outline-none transition-colors placeholder-gray-600"
                    placeholder="0"
                    min="0"
                    step="100"
                  />
                </div>
                
                {/* Metros Cuadrados */}
                <div>
                  <label className="text-xs text-gray-500 mb-1 block">
                    <i className="fas fa-ruler-combined mr-1"></i>m² Construidos
                  </label>
                  <input
                    type="number"
                    name="squareMeters"
                    value={formData.squareMeters}
                    onChange={handleInputChange}
                    className="w-full px-0 py-2 bg-transparent border-b border-gray-700 focus:border-white text-white focus:outline-none transition-colors placeholder-gray-600"
                    placeholder="0"
                    min="0"
                    step="1"
                  />
                </div>
                
                {/* Recámaras */}
                <div>
                  <label className="text-xs text-gray-500 mb-1 block">
                    <i className="fas fa-bed mr-1"></i>Recámaras
                  </label>
                  <input
                    type="number"
                    name="bedrooms"
                    value={formData.bedrooms}
                    onChange={handleInputChange}
                    className="w-full px-0 py-2 bg-transparent border-b border-gray-700 focus:border-white text-white focus:outline-none transition-colors placeholder-gray-600"
                    placeholder="0"
                    min="0"
                    max="20"
                  />
                </div>
                
                {/* Baños */}
                <div>
                  <label className="text-xs text-gray-500 mb-1 block">
                    <i className="fas fa-bath mr-1"></i>Baños
                  </label>
                  <input
                    type="number"
                    name="bathrooms"
                    value={formData.bathrooms}
                    onChange={handleInputChange}
                    className="w-full px-0 py-2 bg-transparent border-b border-gray-700 focus:border-white text-white focus:outline-none transition-colors placeholder-gray-600"
                    placeholder="0"
                    min="0"
                    max="20"
                    step="0.5"
                  />
                </div>

                {/* Precio del Inmueble (opcional) */}
                <div>
                  <label className="text-xs text-gray-500 mb-1 block">
                    <i className="fas fa-tag mr-1"></i>Precio Inmueble
                  </label>
                  <input
                    type="number"
                    name="propertyPrice"
                    value={formData.propertyPrice}
                    onChange={handleInputChange}
                    className="w-full px-0 py-2 bg-transparent border-b border-gray-700 focus:border-white text-white focus:outline-none transition-colors placeholder-gray-600"
                    placeholder="Opcional"
                    min="0"
                    step="1000"
                  />
                </div>
              </div>
            </div>

            {/* Contrato */}
            <div>
              <label className="text-xs uppercase tracking-wider text-gray-500 mb-2 block">
                Contrato
              </label>
              {uploadingContract ? (
                <div className="flex items-center py-3 border-b border-gray-700">
                  <i className="fas fa-spinner fa-spin text-blue-400 mr-3"></i>
                  <span className="text-gray-400 text-sm">Subiendo contrato...</span>
                </div>
              ) : (formData.contractFile || formData.contractBase64 || formData.contractURL) ? (
                <div className="flex items-center justify-between py-3 border-b border-gray-700">
                  <div className="flex items-center">
                    <i className="fas fa-file-pdf text-red-400 mr-3"></i>
                    <div>
                      <p className="text-white text-sm truncate max-w-[150px]">
                        {formData.contractFile?.name || formData.contractFileName || 'Contrato'}
                      </p>
                      {formData.contractFile && (
                        <p className="text-xs text-gray-500">
                          {(formData.contractFile.size / (1024 * 1024)).toFixed(2)} MB
                        </p>
                      )}
                      {formData.contractURL && (
                        <p className="text-xs text-emerald-400">
                          <i className="fas fa-cloud mr-1"></i>En la nube
                        </p>
                      )}
                    </div>
                  </div>
                  <div className="flex items-center gap-2">
                    {formData.contractURL && (
                      <a
                        href={formData.contractURL}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="text-blue-500 hover:text-blue-400 transition-colors"
                        title="Ver contrato"
                      >
                        <i className="fas fa-external-link-alt"></i>
                      </a>
                    )}
                    {formData.contractBase64 && !formData.contractURL && (
                      <a
                        href={formData.contractBase64}
                        download={formData.contractFileName || '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, contractFile: null, contractBase64: null, contractFileName: 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 o Word</span>
                  <input
                    type="file"
                    accept=".pdf,.doc,.docx"
                    onChange={handleContractChange}
                    className="hidden"
                  />
                </label>
              )}
            </div>

            {/* Fotos - Grid de fotos flat */}
            <div className="md:col-span-2 lg:col-span-3">
              <label className="text-xs uppercase tracking-wider text-gray-500 mb-3 block">
                Fotos ({formData.photos.length})
                {uploadingPhotos && <span className="ml-2 text-blue-400"><i className="fas fa-spinner fa-spin"></i> Subiendo...</span>}
              </label>
              <div className="grid grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-2">
                {formData.photos.map((photo, index) => (
                  <div key={index} className="relative aspect-square rounded-xl overflow-hidden group">
                    <img
                      src={photo}
                      alt={`Foto ${index + 1}`}
                      className="w-full h-full object-cover"
                    />
                    <button
                      type="button"
                      onClick={() => removePhoto(index)}
                      className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
                    >
                      <i className="fas fa-trash text-white"></i>
                    </button>
                  </div>
                ))}
                
                <label className="aspect-square rounded-xl border border-dashed border-gray-700 hover:border-white cursor-pointer flex items-center justify-center transition-colors group">
                  <i className="fas fa-plus text-gray-600 group-hover:text-white transition-colors"></i>
                  <input
                    type="file"
                    accept="image/*"
                    multiple
                    onChange={handlePhotoChange}
                    className="hidden"
                  />
                </label>
              </div>
            </div>

            {/* Expedientes (Documentos) */}
            <div className="md:col-span-2 lg:col-span-3">
              <label className="text-xs uppercase tracking-wider text-gray-500 mb-3 block">
                Expedientes ({formData.expedientes.length})
                {uploadingExpediente && <span className="ml-2 text-blue-400"><i className="fas fa-spinner fa-spin"></i> Subiendo...</span>}
              </label>
              
              {formData.expedientes.length > 0 && (
                <div className="space-y-2 mb-3">
                  {formData.expedientes.map(exp => (
                    <div key={exp.id} className="flex items-center justify-between px-4 py-2 bg-[#1a1a1a] rounded-xl border border-gray-700/50">
                      <div className="flex items-center gap-3 min-w-0">
                        <i className={`fas ${
                          exp.type === 'pdf' ? 'fa-file-pdf text-red-400' :
                          exp.type === 'doc' || exp.type === 'docx' ? 'fa-file-word text-blue-400' :
                          exp.type === 'xls' || exp.type === 'xlsx' ? 'fa-file-excel text-green-400' :
                          exp.type === 'jpg' || exp.type === 'jpeg' || exp.type === 'png' ? 'fa-file-image text-purple-400' :
                          'fa-file text-gray-400'
                        }`}></i>
                        <div className="min-w-0">
                          <p className="text-white text-sm truncate">{exp.name}</p>
                          <p className="text-xs text-gray-500">{(exp.size / 1024).toFixed(0)} KB</p>
                        </div>
                      </div>
                      <div className="flex items-center gap-2 flex-shrink-0">
                        <a
                          href={exp.url}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="text-blue-500 hover:text-blue-400 transition-colors"
                          title="Ver documento"
                        >
                          <i className="fas fa-external-link-alt text-xs"></i>
                        </a>
                        <button
                          type="button"
                          onClick={() => removeExpediente(exp.id)}
                          className="text-gray-500 hover:text-red-400 transition-colors"
                        >
                          <i className="fas fa-times text-xs"></i>
                        </button>
                      </div>
                    </div>
                  ))}
                </div>
              )}

              <label className="flex items-center py-3 border border-dashed border-gray-700 hover:border-white rounded-xl cursor-pointer transition-colors group px-4">
                <i className="fas fa-folder-plus 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">
                  Agregar documento al expediente (PDF, Word, imágenes, etc.)
                </span>
                <input
                  type="file"
                  accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.txt"
                  onChange={handleExpedienteUpload}
                  className="hidden"
                />
              </label>
            </div>

            {/* Residentes - Titulares */}
            <div className="md:col-span-2 lg:col-span-3">
              <div className="flex items-center justify-between mb-3">
                <label className="text-xs uppercase tracking-wider text-gray-500">
                  Arrendatarios Titulares (opcional)
                </label>
                <div className="flex gap-2">
                  <button
                    type="button"
                    onClick={() => setShowNewTenantForm(true)}
                    className="text-xs text-blue-500 hover:text-blue-400 transition-colors"
                  >
                    + Rápido
                  </button>
                  <button
                    type="button"
                    onClick={() => {
                      saveApartmentFormState();
                      sessionStorage.setItem('formReturnTo', 'add-apartment');
                      sessionStorage.setItem('preselectedApartment', formData.name.trim());
                      window.setCurrentPage?.('add-tenant');
                    }}
                    className="text-xs text-emerald-500 hover:text-emerald-400 transition-colors"
                  >
                    + Crear Inquilino
                  </button>
                </div>
              </div>

              {/* Formulario inline para nuevo inquilino */}
              {showNewTenantForm && (
                <div className="mb-4 p-4 bg-[#1a1a1a] rounded-xl border border-gray-700">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mb-3">
                    <div>
                      <label className="text-xs text-gray-500 mb-1 block">Nombre *</label>
                      <input
                        type="text"
                        value={newTenantData.name}
                        onChange={e => setNewTenantData(prev => ({ ...prev, name: e.target.value }))}
                        className="w-full px-0 py-2 bg-transparent border-b border-gray-700 focus:border-white text-white focus:outline-none transition-colors placeholder-gray-600"
                        placeholder="Nombre completo"
                        autoFocus
                      />
                    </div>
                    <div>
                      <label className="text-xs text-gray-500 mb-1 block">Teléfono</label>
                      <input
                        type="tel"
                        value={newTenantData.phone}
                        onChange={e => setNewTenantData(prev => ({ ...prev, phone: e.target.value }))}
                        className="w-full px-0 py-2 bg-transparent border-b border-gray-700 focus:border-white text-white focus:outline-none transition-colors placeholder-gray-600"
                        placeholder="Teléfono"
                      />
                    </div>
                    <div>
                      <label className="text-xs text-gray-500 mb-1 block">Email</label>
                      <input
                        type="email"
                        value={newTenantData.email}
                        onChange={e => setNewTenantData(prev => ({ ...prev, email: e.target.value }))}
                        className="w-full px-0 py-2 bg-transparent border-b border-gray-700 focus:border-white text-white focus:outline-none transition-colors placeholder-gray-600"
                        placeholder="correo@ejemplo.com"
                      />
                    </div>
                    <div>
                      <label className="text-xs text-gray-500 mb-1 block">Renta Mensual</label>
                      <input
                        type="number"
                        value={newTenantData.rentAmount}
                        onChange={e => setNewTenantData(prev => ({ ...prev, rentAmount: e.target.value }))}
                        className="w-full px-0 py-2 bg-transparent border-b border-gray-700 focus:border-white text-white focus:outline-none transition-colors placeholder-gray-600"
                        placeholder="0"
                        min="0"
                      />
                    </div>
                  </div>
                  <div className="flex gap-2 justify-end">
                    <button
                      type="button"
                      onClick={() => { setShowNewTenantForm(false); setNewTenantData({ name: '', phone: '', email: '', rentAmount: '' }); }}
                      className="px-4 py-2 text-sm text-gray-400 hover:text-white transition-colors"
                    >
                      Cancelar
                    </button>
                    <button
                      type="button"
                      onClick={addNewTenantInline}
                      className="px-4 py-2 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded-full transition-colors"
                    >
                      Agregar Inquilino
                    </button>
                  </div>
                </div>
              )}

              {/* Nuevos inquilinos pendientes (se crearán al guardar) */}
              {pendingNewTenants.length > 0 && (
                <div className="flex flex-wrap gap-2 mb-3">
                  {pendingNewTenants.map(tenant => (
                    <div
                      key={tenant._tempId}
                      className="flex items-center gap-2 px-4 py-2 bg-emerald-600/20 border border-emerald-500/30 rounded-full text-sm"
                    >
                      <i className="fas fa-user-plus text-emerald-400 text-xs"></i>
                      <span className="text-emerald-300">{tenant.name}</span>
                      <span className="text-emerald-500 text-xs">Nuevo</span>
                      <button
                        type="button"
                        onClick={() => removePendingTenant(tenant._tempId)}
                        className="text-emerald-400 hover:text-red-400 transition-colors ml-1"
                      >
                        <i className="fas fa-times text-xs"></i>
                      </button>
                    </div>
                  ))}
                </div>
              )}
              
              {tenants.length > 0 ? (
                <div className="flex flex-wrap gap-2">
                  {tenants.filter(t => t.status === 'active').map(tenant => {
                    const isAssigned = tenant.apartment && tenant.apartment.trim() !== '' && tenant.apartment.trim().toLowerCase() !== formData.name.trim().toLowerCase();
                    return (
                    <div key={tenant.id} className="flex items-center gap-1">
                      <button
                        type="button"
                        onClick={() => toggleTenant(tenant.id)}
                        className={`px-4 py-2 rounded-l-full text-sm transition-all ${
                          selectedTenants.includes(tenant.id)
                            ? 'bg-blue-600 text-white'
                            : isAssigned
                              ? 'border border-red-500/50 text-red-400 hover:border-red-400 hover:text-red-300'
                              : 'border border-gray-700 text-gray-400 hover:border-white hover:text-white'
                        }`}
                      >
                        {tenant.name}
                        {isAssigned && !selectedTenants.includes(tenant.id) && (
                          <span className="ml-2 text-xs text-red-500">
                            <i className="fas fa-home text-[10px] mr-1"></i>{tenant.apartment}
                          </span>
                        )}
                        {selectedTenants.includes(tenant.id) && (
                          <span className="ml-2 text-xs bg-white/20 px-1.5 py-0.5 rounded">Titular</span>
                        )}
                      </button>
                      {selectedTenants.includes(tenant.id) && (
                        <button
                          type="button"
                          onClick={() => {
                            // Guardar estado del formulario de departamento
                            saveApartmentFormState();
                            sessionStorage.setItem('formReturnTo', 'add-apartment');
                            // Guardar tenant a editar y navegar
                            window.editingTenant = tenant;
                            window.setCurrentPage?.('add-tenant');
                          }}
                          className="px-2 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-r-full transition-colors"
                          title="Editar inquilino"
                        >
                          <i className="fas fa-edit text-xs"></i>
                        </button>
                      )}
                    </div>
                  );
                  })}
                </div>
              ) : (
                <p className="text-gray-600 text-sm">No hay inquilinos registrados</p>
              )}

              {/* Vencimiento de contrato de inquilinos seleccionados */}
              {selectedTenants.length > 0 && (() => {
                const selectedTenantsData = tenants.filter(t => selectedTenants.includes(t.id));
                const tenantsWithContract = selectedTenantsData.filter(t => t.contractEnd && t.contractEnd !== 'Sin definir');
                if (tenantsWithContract.length === 0) return null;
                return (
                  <div className="mt-3 space-y-1">
                    {tenantsWithContract.map(t => {
                      const endDate = new Date(t.endDate || t.contractEnd);
                      const now = new Date();
                      const daysLeft = Math.ceil((endDate - now) / (1000 * 60 * 60 * 24));
                      const isExpired = daysLeft < 0;
                      const isExpiringSoon = daysLeft >= 0 && daysLeft <= 30;
                      return (
                        <div key={t.id} className={`flex items-center gap-2 px-3 py-2 rounded-lg text-xs ${
                          isExpired ? 'bg-red-500/10 border border-red-500/30' :
                          isExpiringSoon ? 'bg-yellow-500/10 border border-yellow-500/30' :
                          'bg-gray-800/50 border border-gray-700/30'
                        }`}>
                          <i className={`fas fa-calendar-alt ${
                            isExpired ? 'text-red-400' : isExpiringSoon ? 'text-yellow-400' : 'text-gray-400'
                          }`}></i>
                          <span className={isExpired ? 'text-red-400' : isExpiringSoon ? 'text-yellow-400' : 'text-gray-400'}>
                            {t.name}:
                          </span>
                          <span className={`font-medium ${
                            isExpired ? 'text-red-300' : isExpiringSoon ? 'text-yellow-300' : 'text-gray-300'
                          }`}>
                            {isExpired 
                              ? `Contrato vencido (${Math.abs(daysLeft)} días)` 
                              : isExpiringSoon 
                                ? `Vence en ${daysLeft} días (${endDate.toLocaleDateString('es-MX')})` 
                                : `Vence: ${endDate.toLocaleDateString('es-MX')}`
                            }
                          </span>
                        </div>
                      );
                    })}
                  </div>
                );
              })()}
            </div>

            {/* Subresidentes */}
            <div className="md:col-span-2 lg:col-span-3">
              <div className="flex items-center justify-between mb-3">
                <label className="text-xs uppercase tracking-wider text-gray-500">
                  Subresidentes ({subResidents.length})
                </label>
              </div>
              
              {/* Input para agregar subresidente */}
              <div className="flex gap-2 mb-3">
                <input
                  type="text"
                  value={newSubResident}
                  onChange={(e) => setNewSubResident(e.target.value)}
                  onKeyDown={(e) => {
                    if (e.key === 'Enter') {
                      e.preventDefault();
                      e.stopPropagation();
                      addSubResident();
                    }
                  }}
                  placeholder="Nombre del subresidente..."
                  className="flex-1 bg-transparent border-b border-gray-700 focus:border-white py-2 text-white placeholder-gray-600 outline-none transition-colors"
                />
                <button
                  type="button"
                  onClick={(e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    addSubResident();
                  }}
                  className="w-10 h-10 rounded-full bg-blue-600 hover:bg-blue-700 text-white flex items-center justify-center transition-colors"
                >
                  <i className="fas fa-plus"></i>
                </button>
              </div>

              {/* Lista de subresidentes agregados */}
              {subResidents.length > 0 ? (
                <div className="flex flex-wrap gap-2">
                  {subResidents.map((name, index) => (
                    <div
                      key={index}
                      className="flex items-center gap-2 px-3 py-2 bg-[#1a1a1a] rounded-full text-sm border border-gray-700"
                    >
                      <span className="text-gray-300">{name}</span>
                      <button
                        type="button"
                        onClick={(e) => {
                          e.preventDefault();
                          e.stopPropagation();
                          removeSubResident(index);
                        }}
                        className="text-gray-500 hover:text-red-400 transition-colors"
                      >
                        <i className="fas fa-times text-xs"></i>
                      </button>
                    </div>
                  ))}
                </div>
              ) : (
                <p className="text-gray-600 text-sm">No hay subresidentes añadidos</p>
              )}
            </div>
          </div>

          {/* Botones */}
          <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' : 'Crear Departamento'
              )}
            </button>
          </div>
        </form>
        </div>
      </div>
    </div>
  );
}

// Exportar globalmente (temporalmente deshabilitado mientras depuramos)
// window.AddApartmentPage = AddApartmentPage;