Get Trending Searches

const TrendingDestinations = ({ timeframe = 'week' }) => {
  const [trending, setTrending] = useState([]);
  const [loading, setLoading] = useState(true);
  
  const daysBack = {
    week: 7,
    month: 30,
    quarter: 90
  }[timeframe] || 30;
  
  useEffect(() => {
    const fetchTrending = async () => {
      setLoading(true);
      try {
        const data = await getTrendingSearches({
          limit: 8,
          daysBack
        });
        setTrending(data.items);
      } catch (error) {
        console.error('Failed to fetch trending searches:', error);
      } finally {
        setLoading(false);
      }
    };
    
    fetchTrending();
  }, [daysBack]);
  
  const formatLocation = (item) => {
    if (item.location.query) {
      return item.location.query;
    }
    
    if (item.location.bounds) {
      // Try to derive location from bounds (could use reverse geocoding)
      return 'Popular Area';
    }
    
    return 'Unknown Location';
  };
  
  const formatSearchDetails = (item) => {
    const details = [];
    
    if (item.guests > 1) {
      details.push(`${item.guests} guests`);
    }
    
    if (item.flexibility) {
      if (typeof item.flexibility === 'string') {
        details.push(`${item.flexibility} stays`);
      } else if (item.flexibility.months) {
        details.push(`flexible dates`);
      }
    } else if (item.checkIn && item.checkOut) {
      const checkIn = new Date(item.checkIn);
      const checkOut = new Date(item.checkOut);
      const nights = Math.ceil((checkOut - checkIn) / (1000 * 60 * 60 * 24));
      details.push(`${nights} nights`);
    }
    
    if (item.filters.price?.min || item.filters.price?.max) {
      const min = item.filters.price.min || 0;
      const max = item.filters.price.max || '∞';
      details.push(`$${min}-${max}/night`);
    }
    
    return details.join(' • ');
  };
  
  const handleTrendingClick = (item) => {
    // Navigate to search with similar parameters
    const searchParams = {
      location: item.location,
      guests: item.guests,
      filters: item.filters
    };
    
    if (item.flexibility) {
      searchParams.flexibility = item.flexibility;
    } else if (item.checkIn && item.checkOut) {
      searchParams.checkIn = item.checkIn;
      searchParams.checkOut = item.checkOut;
    }
    
    // Navigate to search page
    window.location.href = `/search?${encodeURIComponent(JSON.stringify(searchParams))}`;
  };
  
  if (loading) {
    return (
      <div className="trending-destinations loading">
        <h2>Trending Destinations</h2>
        <div className="loading-placeholder">Loading trending searches...</div>
      </div>
    );
  }
  
  return (
    <div className="trending-destinations">
      <div className="trending-header">
        <h2>Trending This {timeframe.charAt(0).toUpperCase() + timeframe.slice(1)}</h2>
        <p>Discover where Journey members are planning their next adventures</p>
      </div>
      
      <div className="trending-grid">
        {trending.map((item, index) => (
          <div 
            key={index}
            className="trending-card"
            onClick={() => handleTrendingClick(item)}
          >
            <div className="trend-rank">#{index + 1}</div>
            
            <div className="trend-content">
              <h3 className="destination">{formatLocation(item)}</h3>
              
              <div className="search-details">
                {formatSearchDetails(item)}
              </div>
              
              <div className="popularity">
                <div className="popularity-bar">
                  <div 
                    className="popularity-fill"
                    style={{ width: `${item.popularityScore}%` }}
                  />
                </div>
                <span className="popularity-score">{item.popularityScore}% popularity</span>
              </div>
              
              <div className="search-type">
                {item.searchType === 'location' && '📍 Location search'}
                {item.searchType === 'bounds' && '🗺️ Area search'}
                {item.searchType === 'property' && '🏨 Property search'}
              </div>
            </div>
            
            <div className="trend-arrow">→</div>
          </div>
        ))}
      </div>
      
      {trending.length === 0 && (
        <div className="no-trends">
          <h3>No trending searches</h3>
          <p>Check back soon for popular destinations!</p>
        </div>
      )}
    </div>
  );
};

const HomepageInspiration = () => {
  const [weeklyTrends, setWeeklyTrends] = useState([]);
  const [monthlyTrends, setMonthlyTrends] = useState([]);
  
  useEffect(() => {
    const fetchTrends = async () => {
      try {
        const [weekly, monthly] = await Promise.all([
          getTrendingSearches({ limit: 4, daysBack: 7 }),
          getTrendingSearches({ limit: 4, daysBack: 30 })
        ]);
        
        setWeeklyTrends(weekly.items);
        setMonthlyTrends(monthly.items);
      } catch (error) {
        console.error('Failed to fetch trends:', error);
      }
    };
    
    fetchTrends();
  }, []);
  
  const renderTrendingLocation = (item, index) => {
    const location = item.location.query || 'Popular Area';
    const isFlexible = !!item.flexibility;
    const hasSpecificDates = !!(item.checkIn && item.checkOut);
    
    return (
      <div 
        key={index}
        className="inspiration-card"
        onClick={() => navigateToSearch(item)}
      >
        <div className="card-content">
          <h4>{location}</h4>
          
          <div className="search-pattern">
            {item.guests > 1 && <span>{item.guests} guests</span>}
            {isFlexible && <span>Flexible dates</span>}
            {hasSpecificDates && (
              <span>
                {new Date(item.checkIn).toLocaleDateString('en-US', { 
                  month: 'short', day: 'numeric' 
                })} - 
                {new Date(item.checkOut).toLocaleDateString('en-US', { 
                  month: 'short', day: 'numeric' 
                })}
              </span>
            )}
          </div>
          
          <div className="popularity-indicator">
            <div className="trend-badge">
              🔥 {item.popularityScore}% trending
            </div>
          </div>
        </div>
      </div>
    );
  };
  
  return (
    <section className="homepage-inspiration">
      <div className="inspiration-header">
        <h2>Travel Inspiration</h2>
        <p>See where our community is exploring</p>
      </div>
      
      <div className="trends-sections">
        <div className="trend-section">
          <h3>🔥 Hot This Week</h3>
          <div className="trend-cards">
            {weeklyTrends.slice(0, 4).map(renderTrendingLocation)}
          </div>
        </div>
        
        <div className="trend-section">
          <h3>📈 Popular This Month</h3>
          <div className="trend-cards">
            {monthlyTrends.slice(0, 4).map(renderTrendingLocation)}
          </div>
        </div>
      </div>
    </section>
  );
};

const TrendingAnalytics = () => {
  const [trends, setTrends] = useState([]);
  const [timeframe, setTimeframe] = useState(7);
  const [analytics, setAnalytics] = useState(null);
  
  useEffect(() => {
    const fetchTrendingAnalytics = async () => {
      try {
        const data = await getTrendingSearches({
          limit: 50,
          daysBack: timeframe
        });
        
        setTrends(data.items);
        
        // Calculate analytics
        const analytics = calculateTrendingAnalytics(data.items);
        setAnalytics(analytics);
      } catch (error) {
        console.error('Failed to fetch trending analytics:', error);
      }
    };
    
    fetchTrendingAnalytics();
  }, [timeframe]);
  
  const calculateTrendingAnalytics = (items) => {
    const searchTypes = items.reduce((acc, item) => {
      acc[item.searchType] = (acc[item.searchType] || 0) + 1;
      return acc;
    }, {});
    
    const destinations = items
      .filter(item => item.location.query)
      .map(item => item.location.query);
    
    const avgGuests = items.reduce((sum, item) => sum + item.guests, 0) / items.length;
    
    const flexibleSearches = items.filter(item => item.flexibility).length;
    const dateSpecificSearches = items.filter(item => item.checkIn && item.checkOut).length;
    
    return {
      searchTypes,
      topDestinations: destinations.slice(0, 10),
      avgGuests: Math.round(avgGuests * 10) / 10,
      flexibilityRate: (flexibleSearches / items.length) * 100,
      specificDateRate: (dateSpecificSearches / items.length) * 100
    };
  };
  
  return (
    <div className="trending-analytics">
      <div className="analytics-header">
        <h2>Trending Search Analytics</h2>
        <select 
          value={timeframe}
          onChange={(e) => setTimeframe(parseInt(e.target.value))}
        >
          <option value={7}>Last 7 days</option>
          <option value={30}>Last 30 days</option>
          <option value={90}>Last 90 days</option>
        </select>
      </div>
      
      {analytics && (
        <div className="analytics-grid">
          <div className="analytics-card">
            <h3>Search Types</h3>
            <div className="chart">
              {Object.entries(analytics.searchTypes).map(([type, count]) => (
                <div key={type} className="chart-bar">
                  <span>{type}: {count}</span>
                </div>
              ))}
            </div>
          </div>
          
          <div className="analytics-card">
            <h3>Search Patterns</h3>
            <div className="metrics">
              <div>Avg guests: {analytics.avgGuests}</div>
              <div>Flexible dates: {analytics.flexibilityRate.toFixed(1)}%</div>
              <div>Specific dates: {analytics.specificDateRate.toFixed(1)}%</div>
            </div>
          </div>
          
          <div className="analytics-card">
            <h3>Top Destinations</h3>
            <div className="destination-list">
              {analytics.topDestinations.map((dest, index) => (
                <div key={index}>{index + 1}. {dest}</div>
              ))}
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

const withRateLimit = (apiCall) => {
  return async (...args) => {
    try {
      return await apiCall(...args);
    } catch (error) {
      if (error.status === 429) {
        // Handle rate limit with exponential backoff
        const retryAfter = error.headers?.['Retry-After'] || 60;
        
        console.warn(`Rate limited. Retrying after ${retryAfter}s`);
        
        await new Promise(resolve => 
          setTimeout(resolve, retryAfter * 1000)
        );
        
        return apiCall(...args);
      }
      throw error;
    }
  };
};

const rateLimitedGetTrending = withRateLimit(getTrendingSearches);