Get Featured Content

const FeaturedHeroCarousel = () => {
  const [featuredContent, setFeaturedContent] = useState([]);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    const loadFeaturedContent = async () => {
      try {
        const response = await fetch('/api/members/me/features/discover/featured?propertiesLimit=5');
        const content = await response.json();
        setFeaturedContent(content);
      } catch (error) {
        console.error('Failed to load featured content:', error);
      } finally {
        setLoading(false);
      }
    };
    
    loadFeaturedContent();
  }, []);
  
  if (loading) return <FeaturedContentSkeleton />;
  
  return (
    <Carousel>
      {featuredContent.map((item, index) => (
        <FeaturedCard key={index} item={item} />
      ))}
    </Carousel>
  );
};

const FeaturedCard = ({ item }) => {
  switch (item.itemType) {
    case 'perk':
      return <PerkCard perk={item.itemData} />;
      
    case 'offer':
      return <OfferCard offer={item.itemData} />;
      
    case 'stay-upcoming':
      return <UpcomingStayCard stay={item.itemData} />;
      
    case 'stay-current':
      return <CurrentStayCard stay={item.itemData} />;
      
    case 'stay-past':
      return <PastStayCard stay={item.itemData} />;
      
    case 'property':
      return <PropertyCard property={item.itemData} />;
      
    default:
      return null;
  }
};

const loadPersonalizedFeatured = async (preferences = {}) => {
  const params = new URLSearchParams();
  
  // Limit properties based on screen size
  const isMobile = window.innerWidth < 768;
  params.set('propertiesLimit', isMobile ? '3' : '8');
  
  // Offset for pagination
  if (preferences.offset) {
    params.set('propertiesOffset', preferences.offset.toString());
  }
  
  const response = await fetch(`/api/members/me/features/discover/featured?${params}`);
  return response.json();
};

const filterFeaturedContent = (content, filters) => {
  return content.filter(item => {
    // Filter by content type
    if (filters.contentTypes && !filters.contentTypes.includes(item.itemType)) {
      return false;
    }
    
    // Filter offers by point requirements
    if (item.itemType === 'offer' && filters.maxPoints) {
      if (item.itemData.pointsRequired > filters.maxPoints) {
        return false;
      }
    }
    
    // Filter properties by price range
    if (item.itemType === 'property' && filters.priceRange) {
      const price = item.itemData.nightlyCost;
      if (price < filters.priceRange.min || price > filters.priceRange.max) {
        return false;
      }
    }
    
    return true;
  });
};

const prioritizeFeaturedContent = (content, userContext) => {
  return content.sort((a, b) => {
    // Prioritize upcoming stays
    if (a.itemType.startsWith('stay-') && !b.itemType.startsWith('stay-')) {
      return -1;
    }
    
    // Prioritize affordable offers
    if (a.itemType === 'offer' && b.itemType === 'offer') {
      const aAffordable = a.itemData.pointsRequired <= userContext.pointBalance;
      const bAffordable = b.itemData.pointsRequired <= userContext.pointBalance;
      
      if (aAffordable && !bAffordable) return -1;
      if (!aAffordable && bAffordable) return 1;
    }
    
    return 0;
  });
};

const CACHE_DURATION = 5 * 60 * 1000; // 5 minutes
const featuredContentCache = new Map();

const getCachedFeaturedContent = async (userId, params = {}) => {
  const cacheKey = `featured_${userId}_${JSON.stringify(params)}`;
  const cached = featuredContentCache.get(cacheKey);
  
  if (cached && Date.now() - cached.timestamp < CACHE_DURATION) {
    return cached.data;
  }
  
  const fresh = await loadPersonalizedFeatured(params);
  featuredContentCache.set(cacheKey, {
    data: fresh,
    timestamp: Date.now()
  });
  
  return fresh;
};

const useProgressiveFeaturedContent = () => {
  const [content, setContent] = useState([]);
  const [loading, setLoading] = useState(true);
  const [loadingMore, setLoadingMore] = useState(false);
  
  const loadInitial = useCallback(async () => {
    setLoading(true);
    try {
      const initial = await fetch('/api/members/me/features/discover/featured?propertiesLimit=3');
      const data = await initial.json();
      setContent(data);
    } finally {
      setLoading(false);
    }
  }, []);
  
  const loadMore = useCallback(async () => {
    setLoadingMore(true);
    try {
      const more = await fetch(`/api/members/me/features/discover/featured?propertiesLimit=5&propertiesOffset=${content.length}`);
      const data = await more.json();
      setContent(prev => [...prev, ...data]);
    } finally {
      setLoadingMore(false);
    }
  }, [content.length]);
  
  return { content, loading, loadingMore, loadInitial, loadMore };
};