Property Search

const PropertySearch = () => {
  const [searchParams, setSearchParams] = useState({
    location: null,
    checkIn: '',
    checkOut: '',
    guests: 2,
    filters: {
      price: { min: null, max: null },
      propertyTypes: [],
      amenities: []
    }
  });
  const [results, setResults] = useState(null);
  const [loading, setLoading] = useState(false);
  const [pagination, setPagination] = useState({ offset: 0, limit: 20 });
  
  const handleSearch = async (newParams = searchParams, newPagination = pagination) => {
    setLoading(true);
    
    try {
      const searchData = {
        location: newParams.location,
        ...(newParams.checkIn && newParams.checkOut && {
          checkIn: newParams.checkIn,
          checkOut: newParams.checkOut
        }),
        guests: newParams.guests,
        filters: newParams.filters,
        pagination: newPagination
      };
      
      const data = await searchProperties(searchData);
      
      if (newPagination.offset === 0) {
        setResults(data);
      } else {
        // Append to existing results for pagination
        setResults(prev => ({
          ...data,
          properties: [...(prev?.properties || []), ...data.properties]
        }));
      }
    } catch (error) {
      console.error('Search failed:', error);
    } finally {
      setLoading(false);
    }
  };
  
  const loadMore = () => {
    if (!results?.pagination.hasMore) return;
    
    const newPagination = {
      ...pagination,
      offset: pagination.offset + pagination.limit
    };
    setPagination(newPagination);
    handleSearch(searchParams, newPagination);
  };
  
  const renderProperty = (property) => (
    <div key={property.id} className="property-card">
      <div className="property-image">
        <img 
          src={property.heroImage?.thumbnailUrl || property.heroImage?.url} 
          alt={property.heroImage?.alt}
        />
        {property.starRating && (
          <div className="star-rating">
            {'★'.repeat(property.starRating)}
          </div>
        )}
      </div>
      
      <div className="property-info">
        <div className="property-header">
          <h3>{property.name}</h3>
          {property.brand?.logo && (
            <img src={property.brand.logo} alt={property.brand.name} className="brand-logo" />
          )}
        </div>
        
        <p className="location">{property.address.city}, {property.address.country}</p>
        <p className="description">{property.shortDescription}</p>
        
        <div className="property-meta">
          {property.guestRating && (
            <span className="rating">
              ⭐ {property.guestRating} ({property.reviewCount} reviews)
            </span>
          )}
          
          {property.distance && (
            <span className="distance">{property.distance.toFixed(1)}km away</span>
          )}
        </div>
        
        <div className="amenities">
          {property.amenities.slice(0, 4).map((amenity, index) => (
            <span key={index} className="amenity-tag">{amenity}</span>
          ))}
          {property.amenities.length > 4 && (
            <span className="more-amenities">+{property.amenities.length - 4} more</span>
          )}
        </div>
        
        {property.pricing && (
          <div className="pricing">
            <div className="price">
              ${(property.pricing.nightlyCost / 100).toFixed(0)}/night
            </div>
            <div className="total">
              Total: ${(property.pricing.totalCost / 100).toFixed(0)}
              {!property.pricing.taxesIncluded && <small>+ taxes</small>}
            </div>
            
            {property.availability && (
              <div className={`availability ${property.availability.isAvailable ? 'available' : 'unavailable'}`}>
                {property.availability.isAvailable 
                  ? `${property.availability.availableRooms} rooms available`
                  : 'No availability'
                }
              </div>
            )}
          </div>
        )}
        
        <button 
          className="view-details-btn"
          onClick={() => window.location.href = `/properties/${property.slug}`}
        >
          View Details
        </button>
      </div>
    </div>
  );
  
  return (
    <div className="property-search">
      {/* Search Form */}
      <SearchForm
        params={searchParams}
        onParamsChange={setSearchParams}
        onSearch={() => {
          setPagination({ offset: 0, limit: 20 });
          handleSearch();
        }}
        loading={loading}
      />
      
      {/* Results */}
      {results && (
        <div className="search-results">
          <div className="results-header">
            <h2>{results.total} properties found</h2>
            <div className="applied-filters">
              {Object.entries(results.filters.applied).map(([key, value]) => (
                <span key={key} className="filter-tag">
                  {key}: {value}
                </span>
              ))}
            </div>
          </div>
          
          <div className="properties-grid">
            {results.properties.map(renderProperty)}
          </div>
          
          {results.pagination.hasMore && (
            <button 
              onClick={loadMore}
              className="load-more-btn"
              disabled={loading}
            >
              {loading ? 'Loading...' : 'Load More'}
            </button>
          )}
        </div>
      )}
    </div>
  );
};

const PropertySearchWithMap = () => {
  const [mapBounds, setMapBounds] = useState(null);
  const [properties, setProperties] = useState([]);
  const [selectedProperty, setSelectedProperty] = useState(null);
  
  const handleMapBoundsChange = async (bounds) => {
    setMapBounds(bounds);
    
    try {
      const results = await searchProperties({
        location: { bounds },
        guests: 2,
        pagination: { limit: 50, offset: 0 }
      });
      
      setProperties(results.properties);
    } catch (error) {
      console.error('Map search failed:', error);
    }
  };
  
  return (
    <div className="search-with-map">
      <div className="map-container">
        <PropertyMap
          properties={properties}
          selectedProperty={selectedProperty}
          onBoundsChange={handleMapBoundsChange}
          onPropertySelect={setSelectedProperty}
        />
      </div>
      
      <div className="results-panel">
        <div className="results-header">
          <h3>{properties.length} properties in this area</h3>
        </div>
        
        <div className="property-list">
          {properties.map(property => (
            <PropertyListItem
              key={property.id}
              property={property}
              selected={selectedProperty?.id === property.id}
              onClick={() => setSelectedProperty(property)}
            />
          ))}
        </div>
      </div>
    </div>
  );
};

// Implement debounced search for better UX
const useDebounced = (value, delay) => {
  const [debouncedValue, setDebouncedValue] = useState(value);
  
  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);
    
    return () => clearTimeout(handler);
  }, [value, delay]);
  
  return debouncedValue;
};

const SearchWithDebounce = ({ onSearch }) => {
  const [query, setQuery] = useState('');
  const debouncedQuery = useDebounced(query, 300);
  
  useEffect(() => {
    if (debouncedQuery) {
      onSearch(debouncedQuery);
    }
  }, [debouncedQuery, onSearch]);
  
  return (
    <input
      type="text"
      value={query}
      onChange={(e) => setQuery(e.target.value)}
      placeholder="Search destination..."
    />
  );
};