Get Public Offers

const PublicOffersShowcase = ({ propertyId }) => {
  const [offers, setOffers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [filters, setFilters] = useState({
    categoryId: null,
    redemptionType: null
  });
  
  useEffect(() => {
    const fetchOffers = async () => {
      setLoading(true);
      try {
        const data = await getPublicOffers({
          propertyId,
          ...filters,
          limit: 12
        });
        setOffers(data.items);
      } catch (error) {
        console.error('Failed to fetch offers:', error);
      } finally {
        setLoading(false);
      }
    };
    
    fetchOffers();
  }, [propertyId, filters]);
  
  const groupedOffers = offers.reduce((groups, offer) => {
    const category = offer.category?.name || 'Other';
    if (!groups[category]) groups[category] = [];
    groups[category].push(offer);
    return groups;
  }, {});
  
  const renderOffer = (offer) => (
    <div key={offer.offerId} className="offer-card">
      <div className="offer-image">
        <img 
          src={offer.cardImageUrl || offer.heroImageUrl} 
          alt={offer.name}
          onError={(e) => {
            e.target.src = '/placeholder-offer.jpg';
          }}
        />
        {offer.requiresStay && (
          <div className="requires-stay-badge">Requires Stay</div>
        )}
      </div>
      
      <div className="offer-content">
        <h3>{offer.name}</h3>
        <p>{offer.shortDescription}</p>
        
        <div className="offer-details">
          <div className="points-required">
            {offer.pointsRequired.toLocaleString()} points
          </div>
          
          {offer.retailValue && (
            <div className="retail-value">
              Value: ${offer.retailValue}
            </div>
          )}
          
          {offer.discountAmount && (
            <div className="discount">
              {offer.discountType === 'percentage' ? `${offer.discountAmount}% off` : `$${offer.discountAmount} off`}
            </div>
          )}
        </div>
        
        <div className="offer-restrictions">
          {offer.restrictions.map((restriction, index) => (
            <span key={index} className="restriction-tag">
              {restriction.message}
            </span>
          ))}
        </div>
        
        {offer.validUntil && (
          <div className="expiration">
            Valid until {new Date(offer.validUntil).toLocaleDateString()}
          </div>
        )}
        
        <button 
          className="view-offer-btn"
          onClick={() => showOfferDetails(offer)}
        >
          Learn More
        </button>
      </div>
    </div>
  );
  
  if (loading) return <div className="loading-offers">Loading offers...</div>;
  
  return (
    <div className="offers-showcase">
      <div className="offers-header">
        <h2>Available Offers</h2>
        <p>Discover exclusive experiences with Journey points</p>
      </div>
      
      <div className="offers-filters">
        <select 
          value={filters.categoryId || ''}
          onChange={(e) => setFilters(prev => ({
            ...prev, 
            categoryId: e.target.value ? parseInt(e.target.value) : null
          }))}
        >
          <option value="">All Categories</option>
          <option value="1">Food & Beverage</option>
          <option value="2">Room & Accommodations</option>
          <option value="3">Wellness & Spa</option>
          <option value="4">Recreation & Activities</option>
        </select>
        
        <select 
          value={filters.redemptionType || ''}
          onChange={(e) => setFilters(prev => ({
            ...prev, 
            redemptionType: e.target.value || null
          }))}
        >
          <option value="">All Types</option>
          <option value="dining">Dining</option>
          <option value="spa">Spa</option>
          <option value="room_upgrade">Room Upgrade</option>
          <option value="amenity_access">Amenities</option>
        </select>
      </div>
      
      {Object.entries(groupedOffers).map(([category, categoryOffers]) => (
        <div key={category} className="offer-category">
          <h3>{category}</h3>
          <div className="offers-grid">
            {categoryOffers.map(renderOffer)}
          </div>
        </div>
      ))}
      
      {offers.length === 0 && (
        <div className="no-offers">
          <h3>No offers available</h3>
          <p>Check back soon for new exclusive offers!</p>
        </div>
      )}
    </div>
  );
};

const OfferValueCalculator = ({ offer }) => {
  const [memberTier, setMemberTier] = useState('bronze');
  
  const calculateValue = () => {
    const pointsValue = offer.pointsRequired * getPointValue(memberTier);
    const savings = offer.retailValue ? (offer.retailValue - pointsValue) : 0;
    const discountValue = offer.discountAmount || 0;
    
    return {
      pointsValue,
      retailValue: offer.retailValue || 0,
      totalValue: (offer.retailValue || 0) + discountValue,
      savings: Math.max(savings, 0),
      worthIt: savings > 0 || discountValue > pointsValue
    };
  };
  
  const getPointValue = (tier) => {
    const values = {
      bronze: 0.01,    // 1 cent per point
      silver: 0.012,   // 1.2 cents per point
      gold: 0.015,     // 1.5 cents per point
      platinum: 0.018  // 1.8 cents per point
    };
    return values[tier] || values.bronze;
  };
  
  const value = calculateValue();
  
  return (
    <div className="offer-value-calculator">
      <h4>Offer Value Analysis</h4>
      
      <div className="tier-selector">
        <label>Your membership tier:</label>
        <select value={memberTier} onChange={(e) => setMemberTier(e.target.value)}>
          <option value="bronze">Bronze</option>
          <option value="silver">Silver</option>
          <option value="gold">Gold</option>
          <option value="platinum">Platinum</option>
        </select>
      </div>
      
      <div className="value-breakdown">
        <div className="value-row">
          <span>Points required:</span>
          <span>{offer.pointsRequired.toLocaleString()}</span>
        </div>
        
        <div className="value-row">
          <span>Point value ({memberTier}):</span>
          <span>${value.pointsValue.toFixed(2)}</span>
        </div>
        
        {offer.retailValue && (
          <div className="value-row">
            <span>Retail value:</span>
            <span>${offer.retailValue.toFixed(2)}</span>
          </div>
        )}
        
        {offer.discountAmount && (
          <div className="value-row">
            <span>Additional discount:</span>
            <span>
              {offer.discountType === 'percentage' 
                ? `${offer.discountAmount}%` 
                : `$${offer.discountAmount}`}
            </span>
          </div>
        )}
        
        <div className="value-row total">
          <span>Total value:</span>
          <span>${value.totalValue.toFixed(2)}</span>
        </div>
        
        {value.savings > 0 && (
          <div className="value-row savings">
            <span>Your savings:</span>
            <span>${value.savings.toFixed(2)}</span>
          </div>
        )}
      </div>
      
      <div className={`value-verdict ${value.worthIt ? 'good-deal' : 'poor-deal'}`}>
        {value.worthIt 
          ? '✅ Great value for your points!' 
          : '⚠️ Consider saving points for better offers'}
      </div>
    </div>
  );
};

const OfferComparison = ({ offers }) => {
  const [sortBy, setSortBy] = useState('pointsRequired');
  const [showOnlyAvailable, setShowOnlyAvailable] = useState(true);
  
  const filteredOffers = offers.filter(offer => {
    if (!showOnlyAvailable) return true;
    
    // Check if offer has any blocking restrictions
    const hasBlockingRestrictions = offer.restrictions.some(restriction => 
      restriction.type === 'requires_stay' && !hasActiveStay()
    );
    
    return !hasBlockingRestrictions;
  });
  
  const sortedOffers = [...filteredOffers].sort((a, b) => {
    switch (sortBy) {
      case 'pointsRequired':
        return a.pointsRequired - b.pointsRequired;
      case 'retailValue':
        return (b.retailValue || 0) - (a.retailValue || 0);
      case 'value':
        return calculateOfferValue(b) - calculateOfferValue(a);
      case 'expiration':
        const aExpiry = a.validUntil ? new Date(a.validUntil) : new Date('2099-12-31');
        const bExpiry = b.validUntil ? new Date(b.validUntil) : new Date('2099-12-31');
        return aExpiry - bExpiry;
      default:
        return 0;
    }
  });
  
  const calculateOfferValue = (offer) => {
    const pointsValue = offer.pointsRequired * 0.01; // Assume 1 cent per point
    const retailValue = offer.retailValue || 0;
    return Math.max(0, retailValue - pointsValue);
  };
  
  return (
    <div className="offer-comparison">
      <div className="comparison-controls">
        <select value={sortBy} onChange={(e) => setSortBy(e.target.value)}>
          <option value="pointsRequired">Sort by Points Required</option>
          <option value="retailValue">Sort by Retail Value</option>
          <option value="value">Sort by Best Value</option>
          <option value="expiration">Sort by Expiration</option>
        </select>
        
        <label>
          <input
            type="checkbox"
            checked={showOnlyAvailable}
            onChange={(e) => setShowOnlyAvailable(e.target.checked)}
          />
          Show only available offers
        </label>
      </div>
      
      <div className="comparison-table">
        <div className="table-header">
          <div>Offer</div>
          <div>Points</div>
          <div>Retail Value</div>
          <div>Value Score</div>
          <div>Expires</div>
          <div>Status</div>
        </div>
        
        {sortedOffers.map(offer => {
          const value = calculateOfferValue(offer);
          const isExpiringSoon = offer.validUntil && 
            new Date(offer.validUntil) - new Date() < 7 * 24 * 60 * 60 * 1000;
          
          return (
            <div key={offer.offerId} className="table-row">
              <div className="offer-info">
                <div className="offer-name">{offer.name}</div>
                <div className="offer-category">{offer.category?.name}</div>
              </div>
              
              <div className="points-column">
                {offer.pointsRequired.toLocaleString()}
              </div>
              
              <div className="value-column">
                ${offer.retailValue?.toFixed(2) || 'N/A'}
              </div>
              
              <div className={`value-score ${value > 0 ? 'positive' : 'neutral'}`}>
                {value > 0 ? `+$${value.toFixed(2)}` : '$0.00'}
              </div>
              
              <div className="expiry-column">
                {offer.validUntil ? (
                  <span className={isExpiringSoon ? 'expiring-soon' : ''}>
                    {new Date(offer.validUntil).toLocaleDateString()}
                  </span>
                ) : (
                  'No expiration'
                )}
              </div>
              
              <div className="status-column">
                {offer.requiresStay ? (
                  <span className="requires-stay">Requires Stay</span>
                ) : (
                  <span className="available">Available</span>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

const restrictionTypes = {
  requires_stay: {
    description: 'Must have an active hotel reservation',
    appliesToGuests: true,
    blockingForNonGuests: true
  },
  check_in_window: {
    description: 'Only available during specified check-in period',
    appliesToGuests: true,
    timeRestricted: true
  }
};

const interpretRestrictions = (offer) => {
  const interpretation = {
    canRedeem: true,
    warnings: [],
    blockers: []
  };
  
  offer.restrictions.forEach(restriction => {
    switch (restriction.type) {
      case 'requires_stay':
        if (!hasActiveStay()) {
          interpretation.canRedeem = false;
          interpretation.blockers.push('Active hotel stay required');
        }
        break;
        
      case 'check_in_window':
        if (offer.disableBeforeCheckInHours) {
          const hoursUntilCheckIn = getHoursUntilCheckIn();
          if (hoursUntilCheckIn > offer.disableBeforeCheckInHours) {
            interpretation.warnings.push(
              `Available ${offer.disableBeforeCheckInHours} hours before check-in`
            );
          }
        }
        break;
    }
  });
  
  return interpretation;
};