@ticketboothapp/booking 0.1.4 → 0.1.8

package/src/components/Calendar.tsx

@@ -0,0 +1,906 @@
+'use client';
+
+import { useState, useMemo, useRef, useEffect, useCallback, memo } from 'react';
+import { startOfWeek, addDays, addWeeks, subWeeks, isSameDay, parseISO, startOfMonth, endOfMonth, eachDayOfInterval, addMonths, subMonths } from 'date-fns';
+import { formatInTimeZone } from 'date-fns-tz';
+import { enUS, fr } from 'date-fns/locale';
+import type { Availability } from '@/lib/api';
+import { useTranslations, useLocale } from '@/lib/i18n';
+import {
+  MINI_CALENDAR_START_MONTH,
+  MINI_CALENDAR_END_MONTH,
+  MINI_CALENDAR_START_DATE,
+  MINI_CALENDAR_END_DATE,
+  VISIBLE_RANGE_BUFFER_WEEKS,
+} from '@/lib/constants';
+import { cn } from '@/lib/utils';
+
+// ============ Types ============
+
+export interface DateAvailability {
+  date: string; // yyyy-MM-dd format
+  availabilityCount: number;
+  isSoldOut: boolean;
+  minPrice?: number;
+  hasDiscount?: boolean;
+  discountPercent?: number;
+  totalVacancies?: number; // Total available tickets across all availabilities for this date
+  startTimes?: string[]; // Array of start times for this date (e.g., ["09:00", "10:00", "14:00"])
+  soldOutTimes?: Set<string>; // Set of sold out time strings (e.g., ["09:00", "14:00"])
+  totalDiscountPercent?: number; // Total discount percentage from all negative adjustments (deals + dynamic pricing)
+  /** Per-time booked/total capacity (for admin calendar: show "booked/total" on each slot) */
+  timeCapacityMap?: Record<string, { booked: number; total: number }>;
+}
+
+interface CalendarProps {
+  availabilitiesByDate: Record<string, Availability[]>;
+  selectedDate: string | null;
+  onDateSelect: (date: string) => void;
+  timezone: string;
+  earliestDate: Date | null;
+  onVisibleRangeChange?: (startDate: Date, endDate: Date) => void;
+  currency: string; // Currency code (e.g., "CAD", "USD") for discount calculations
+  /** When true (admin), show booked/total capacity on each time slot */
+  showCapacity?: boolean;
+}
+
+// ============ Constants ============
+
+const DAYS_OF_WEEK_KEYS = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'] as const;
+const WEEKS_TO_SHOW = 2;
+
+// Date-fns locale map
+const dateFnsLocales = {
+  en: enUS,
+  fr: fr,
+} as const;
+
+// ============ Helper Functions ============
+
+/**
+ * Get net discount percentage for a date from percentage-type adjustments.
+ * - Deals: always discounts (add to total)
+ * - Dynamic pricing discounts (negative change): add to total
+ * - Dynamic pricing surcharges (positive change): subtract from total
+ * Result: discounts minus surcharges. Only shown if net is positive (i.e. net discount).
+ * 
+ * @param availabilities All availabilities for a specific date
+ * @param currency Currency code to check changeByCurrency for dynamic pricing
+ * @returns Net discount percentage (e.g., 15 for -15% off), or undefined if net <= 0
+ */
+function calculateTotalDiscountPercent(
+  availabilities: Availability[],
+  currency: string
+): number | undefined {
+  // Get the first availability with rates
+  const avail = availabilities.find(a => a.rates && a.rates.length > 0);
+  if (!avail?.rates) return undefined;
+  
+  // Get ADULT rate adjustments
+  const adultRate = avail.rates.find(rate => rate.category === 'ADULT');
+  if (!adultRate) return undefined;
+  
+  const adjustments = adultRate.appliedAdjustments || adultRate.applied_adjustments || [];
+  
+  let totalDiscount = 0;
+  let totalSurcharge = 0;
+  const seenIds = new Set<string>();
+  
+  for (const adj of adjustments) {
+    if (seenIds.has(adj.id)) continue;
+    if (adj.adjustmentType !== 'percentage' || !adj.adjustmentValue) continue;
+    
+    seenIds.add(adj.id);
+    
+    if (adj.type === 'deal') {
+      // Deals are always discounts
+      totalDiscount += Math.abs(adj.adjustmentValue);
+    } else if (adj.type === 'dynamic') {
+      const change = adj.changeByCurrency?.[currency];
+      if (change !== undefined) {
+        if (change < 0) {
+          totalDiscount += Math.abs(adj.adjustmentValue);
+        } else {
+          totalSurcharge += Math.abs(adj.adjustmentValue);
+        }
+      }
+    }
+  }
+  
+  const net = totalDiscount - totalSurcharge;
+  return net > 0 ? Math.round(net) : undefined;
+}
+
+// ============ Date Cell Component ============
+
+interface DateCellProps {
+  date: Date;
+  dateStr: string;
+  availability: DateAvailability | null;
+  isSelected: boolean;
+  isToday: boolean;
+  showCapacity?: boolean;
+  timezone: string;
+  onClick: () => void;
+}
+
+const DateCell = memo(function DateCell({
+  date,
+  availability,
+  isSelected,
+  isToday,
+  showCapacity,
+  timezone,
+  onClick,
+}: DateCellProps) {
+  const { t } = useTranslations();
+  const { locale } = useLocale();
+  const dateFnsLocale = dateFnsLocales[locale] || enUS;
+  const dayNumber = formatInTimeZone(date, timezone, 'd');
+  // When showCapacity (admin), allow selecting sold-out slots for overbooking
+  const hasAvailability = availability !== null && (!availability.isSoldOut || showCapacity);
+  const isDisabled = !hasAvailability;
+
+  // Format time for display (e.g., "09:00" -> "9:00 AM" or "9:00" in 24h format)
+  // Memoized to prevent recreation on every render
+  const formatTime = useCallback((timeStr: string) => {
+    try {
+      const [hours, minutes] = timeStr.split(':').map(Number);
+      const date = new Date();
+      date.setHours(hours, minutes, 0, 0);
+      // Use 12-hour format for English, 24-hour format for French
+      const format = locale === 'fr' ? 'HH:mm' : 'h:mm a';
+      return formatInTimeZone(date, timezone, format, { locale: dateFnsLocale });
+    } catch {
+      return timeStr;
+    }
+  }, [locale, timezone, dateFnsLocale]);
+
+  // Two heights: tall when >2 time slots (discount + times); otherwise short. No aspect on outer so cell can stretch to row.
+  const needsTallerCell = (availability?.startTimes?.length ?? 0) > 2;
+  const buttonClassName = useMemo(() => cn(
+    'h-full w-full min-h-0',
+    needsTallerCell ? 'min-w-0 min-h-[7.75rem]' : 'min-h-[6.25rem]',
+    'px-2 py-0 border-r border-b border-stone-200 last:border-r-0',
+    'transition-all text-left relative',
+    isDisabled
+      ? 'bg-stone-50 text-stone-300 cursor-not-allowed'
+      : isSelected
+      ? 'bg-emerald-600 text-white hover:bg-emerald-700 cursor-pointer'
+      : 'bg-white text-stone-900 hover:bg-stone-50 cursor-pointer',
+    isToday && hasAvailability && !isSelected && 'ring-1 ring-emerald-500 ring-inset'
+  ), [isDisabled, isSelected, isToday, hasAvailability, needsTallerCell]);
+
+  const dayNumberClassName = useMemo(() => cn(
+    'text-[10px] font-medium absolute top-1 left-1',
+    isSelected && hasAvailability ? 'text-white' : 'text-stone-900'
+  ), [isSelected, hasAvailability]);
+
+  const ariaLabel = useMemo(() => {
+    const parts = [dayNumber];
+    if (availability?.isSoldOut) parts.push(' - Sold out');
+    if (availability?.hasDiscount) parts.push(` - ${availability.discountPercent}% off`);
+    return parts.join('');
+  }, [dayNumber, availability?.isSoldOut, availability?.hasDiscount, availability?.discountPercent]);
+
+  return (
+    <button
+      onClick={onClick}
+      disabled={isDisabled}
+      className={buttonClassName}
+      aria-label={ariaLabel}
+    >
+      <div className="flex flex-col h-full items-center justify-center">
+        {/* Day Number */}
+        <div className={dayNumberClassName}>
+          {dayNumber}
+        </div>
+
+        {/* Discount Tag Icon - Top Right Corner */}
+        {availability?.totalDiscountPercent && availability.totalDiscountPercent > 0 && (
+          <div className="absolute top-1 right-1 flex items-center gap-0.5 bg-red-500/90 text-white text-[9px] font-bold px-1 py-0.5 rounded">
+            <svg className="w-2.5 h-2.5" fill="currentColor" viewBox="0 0 20 20">
+              <path fillRule="evenodd" d="M17.707 9.293a1 1 0 010 1.414l-7 7a1 1 0 01-1.414 0l-7-7A.997.997 0 012 10V5a3 3 0 013-3h5c.256 0 .512.098.707.293l7 7zM5 6a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
+            </svg>
+            <span>-{availability.totalDiscountPercent}%</span>
+          </div>
+        )}
+
+        {/* Availability Indicators - Centered */}
+        {availability && (
+          <div className="flex flex-col items-center justify-center space-y-0 w-full px-0.5">
+            {/* Sold Out Badge - Centered */}
+            {availability.isSoldOut ? (
+              <div className={cn(
+                'text-[10px] font-semibold px-2 py-1 rounded flex items-center justify-center',
+                isSelected 
+                  ? 'bg-red-500/30 text-white border border-red-400/50' 
+                  : 'bg-red-100 text-red-700 border border-red-300'
+              )}>
+                {t('calendar.soldOut')}
+              </div>
+            ) : hasAvailability ? (
+              <>
+                {/* Start Times as Pills - Yellow/Orange if < 5 spots, Red if sold out, Green otherwise */}
+                {availability.startTimes && availability.startTimes.length > 0 ? (
+                  <div className="flex flex-wrap gap-0.5 justify-center">
+                    {availability.startTimes.slice(0, 3).map((time) => {
+                      const isTimeSoldOut = availability.soldOutTimes?.has(time) || false;
+                      const isLowAvailability = !isTimeSoldOut && availability.totalVacancies !== undefined && availability.totalVacancies < 5;
+                      // Check if this is daily availability (midnight/00:00 time)
+                      const isDailyAvailability = time === '00:00';
+                      return (
+                        <div
+                          key={time}
+                          className={cn(
+                            'text-[10px] px-1.5 py-1 rounded font-medium flex flex-col items-center gap-0',
+                            isTimeSoldOut
+                              ? isSelected
+                                ? 'bg-red-500/30 text-white opacity-60'
+                                : 'bg-red-400 text-white opacity-60'
+                              : isLowAvailability
+                              ? isSelected 
+                                ? 'bg-amber-600 text-white' 
+                                : 'bg-amber-500 text-white'
+                              : isSelected
+                              ? 'bg-white/30 text-white' 
+                              : 'bg-emerald-500 text-white'
+                          )}
+                        >
+                          <div>{isDailyAvailability ? 'Available' : formatTime(time)}</div>
+                          {showCapacity && availability.timeCapacityMap?.[time] && (
+                            <div className="text-[9px] -mt-0.5 tabular-nums opacity-90">
+                              {availability.timeCapacityMap[time].booked}/{availability.timeCapacityMap[time].total}
+                            </div>
+                          )}
+                          {isTimeSoldOut ? (
+                            <div className="text-[9px] -mt-0.5">
+                              {t('calendar.soldOut')}
+                            </div>
+                          ) : isLowAvailability && !showCapacity && (
+                            <div className="flex items-center gap-0.5 text-[9px] -mt-0.5">
+                              <svg className="w-2.5 h-2.5" fill="currentColor" viewBox="0 0 20 20">
+                                <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+                              </svg>
+                              <span>{t('calendar.left', { count: availability.totalVacancies ?? 0 })}</span>
+                            </div>
+                          )}
+                        </div>
+                      );
+                    })}
+                    {availability.startTimes.length > 3 && (
+                      <div className={cn(
+                        'text-[10px] px-1.5 py-1 rounded font-medium',
+                        isSelected 
+                          ? 'bg-white/30 text-white' 
+                          : 'bg-emerald-500 text-white'
+                      )}>
+                        +{availability.startTimes.length - 3}
+                      </div>
+                    )}
+                  </div>
+                ) : (
+                  /* Fallback: Low Availability Badge (when no start times) */
+                  availability.totalVacancies !== undefined && availability.totalVacancies < 5 && (
+                    <div className={cn(
+                      'text-[10px] font-semibold px-2 py-1 rounded flex items-center gap-0.5 justify-center',
+                      isSelected 
+                        ? 'bg-red-500/30 text-white border border-red-400/50' 
+                        : 'bg-red-100 text-red-700 border border-red-300'
+                    )}>
+                      <svg className="w-2.5 h-2.5" fill="currentColor" viewBox="0 0 20 20">
+                        <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+                      </svg>
+                      {t('calendar.left', { count: availability.totalVacancies ?? 0 })}
+                    </div>
+                  )
+                )}
+
+                {/* Discount Badge */}
+                {availability.hasDiscount && availability.discountPercent && (availability.totalVacancies === undefined || availability.totalVacancies >= 5) && (
+                  <div className={cn(
+                    'text-[9px] font-semibold px-1 py-0.5 rounded text-center',
+                    isSelected 
+                      ? 'bg-white/20 text-white' 
+                      : 'bg-red-100 text-red-700'
+                  )}>
+                    -{availability.discountPercent}%
+                  </div>
+                )}
+              </>
+            ) : null}
+          </div>
+        )}
+      </div>
+    </button>
+  );
+});
+
+// ============ Main Calendar Component ============
+
+export function Calendar({
+  availabilitiesByDate,
+  selectedDate,
+  onDateSelect,
+  timezone,
+  earliestDate,
+  onVisibleRangeChange,
+  currency,
+  showCapacity = false,
+}: CalendarProps) {
+  const { t } = useTranslations();
+  const { locale } = useLocale();
+  const dateFnsLocale = dateFnsLocales[locale] || enUS;
+  
+  // Initialize currentStartDate only once on mount, don't reset when earliestDate changes
+  // Use a ref to track if we've initialized to prevent reset on prop changes
+  const hasInitializedRef = useRef(false);
+  const [currentStartDate, setCurrentStartDate] = useState(() => {
+    hasInitializedRef.current = true;
+    if (earliestDate) {
+      return startOfWeek(earliestDate, { weekStartsOn: 0 });
+    }
+    return startOfWeek(new Date(), { weekStartsOn: 0 });
+  });
+  
+  // Only update currentStartDate if earliestDate changes AND we haven't initialized yet
+  // This prevents resetting the calendar position when new availabilities are fetched
+  useEffect(() => {
+    if (!hasInitializedRef.current && earliestDate) {
+      const weekStart = startOfWeek(earliestDate, { weekStartsOn: 0 });
+      setCurrentStartDate(weekStart);
+      hasInitializedRef.current = true;
+    }
+  }, [earliestDate]);
+  const [isDatePickerOpen, setIsDatePickerOpen] = useState(false);
+  
+  // Initialize picker month to match the currently visible month in the main calendar
+  const [pickerMonth, setPickerMonth] = useState(() => {
+    // Start with the month that contains the current start date
+    return startOfMonth(currentStartDate);
+  });
+  
+  // Update picker month when main calendar navigates to keep them in sync
+  useEffect(() => {
+    const currentMonth = startOfMonth(currentStartDate);
+    // Only update if the month actually changed and it's within the allowed range
+    if (currentMonth.getTime() >= MINI_CALENDAR_START_MONTH.getTime() && 
+        currentMonth.getTime() <= MINI_CALENDAR_END_MONTH.getTime()) {
+      setPickerMonth(currentMonth);
+    }
+  }, [currentStartDate]);
+  
+  // Ensure pickerMonth stays within bounds
+  useEffect(() => {
+    const currentMonth = startOfMonth(pickerMonth);
+    if (currentMonth.getTime() < MINI_CALENDAR_START_MONTH.getTime()) {
+      setPickerMonth(MINI_CALENDAR_START_MONTH);
+    } else if (currentMonth.getTime() > MINI_CALENDAR_END_MONTH.getTime()) {
+      setPickerMonth(MINI_CALENDAR_END_MONTH);
+    }
+  }, [pickerMonth]);
+  const datePickerRef = useRef<HTMLDivElement>(null); // Ref for the popup
+  const datePickerTriggerRef = useRef<HTMLButtonElement>(null); // Ref for the trigger button
+  const [pickerPosition, setPickerPosition] = useState<{ top: number; left: number } | null>(null);
+  
+  // Get all available dates for dropdown (must be defined before useMemo hooks that use it)
+  const availableDates = useMemo(() => {
+    return Object.keys(availabilitiesByDate)
+      .filter(dateStr => {
+        const availabilities = availabilitiesByDate[dateStr];
+        return availabilities && availabilities.length > 0 && !availabilities.every(avail => avail.vacancies === 0);
+      })
+      .sort()
+      .map(dateStr => {
+        try {
+          const [year, month, day] = dateStr.split('-').map(Number);
+          return new Date(year, month - 1, day);
+        } catch {
+          return null;
+        }
+      })
+      .filter((date): date is Date => date !== null);
+  }, [availabilitiesByDate]);
+  
+  // Check if we can navigate months in mini calendar (hardcoded to June-October 2026)
+  const canNavigatePickerMonthBack = useMemo(() => {
+    const currentMonthTime = startOfMonth(pickerMonth).getTime();
+    const startMonthTime = MINI_CALENDAR_START_MONTH.getTime();
+    return currentMonthTime > startMonthTime;
+  }, [pickerMonth]);
+
+  const canNavigatePickerMonthForward = useMemo(() => {
+    const currentMonthTime = startOfMonth(pickerMonth).getTime();
+    const endMonthTime = MINI_CALENDAR_END_MONTH.getTime();
+    return currentMonthTime < endMonthTime;
+  }, [pickerMonth]);
+
+  // Generate mini calendar days - memoized to avoid recalculation
+  const miniCalendarData = useMemo(() => {
+    const monthStart = startOfMonth(pickerMonth);
+    const monthEnd = endOfMonth(pickerMonth);
+    const calendarStart = startOfWeek(monthStart, { weekStartsOn: 0 });
+    const calendarEnd = startOfWeek(monthEnd, { weekStartsOn: 0 });
+    // Show 6 weeks (42 days) to ensure full calendar grid
+    const days = eachDayOfInterval({ start: calendarStart, end: addDays(calendarEnd, 6) });
+    return { days, monthStart, monthEnd };
+  }, [pickerMonth]);
+  
+  // Calculate position for date picker and close when clicking outside
+  useEffect(() => {
+    if (!isDatePickerOpen) {
+      setPickerPosition(null);
+      return;
+    }
+    
+    // Calculate position from trigger button
+    if (datePickerTriggerRef.current) {
+      const rect = datePickerTriggerRef.current.getBoundingClientRect();
+      setPickerPosition({
+        top: rect.bottom + window.scrollY + 4,
+        left: rect.left + window.scrollX,
+      });
+    }
+    
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Node;
+      // Check if click is outside both the popup and the trigger button
+      const isOutsidePopup = datePickerRef.current && !datePickerRef.current.contains(target);
+      const isOutsideTrigger = datePickerTriggerRef.current && !datePickerTriggerRef.current.contains(target);
+      
+      if (isOutsidePopup && isOutsideTrigger) {
+        setIsDatePickerOpen(false);
+        setPickerPosition(null);
+      }
+    };
+    
+    // Use a small delay to avoid immediate closure when opening
+    const timeoutId = setTimeout(() => {
+      document.addEventListener('click', handleClickOutside, true);
+    }, 100);
+    
+    return () => {
+      clearTimeout(timeoutId);
+      document.removeEventListener('click', handleClickOutside, true);
+    };
+  }, [isDatePickerOpen]);
+  
+  // Check if we can navigate backwards/forwards
+  const canNavigateBack = useMemo(() => {
+    if (availableDates.length === 0) return false;
+    const firstAvailableDate = availableDates[0];
+    return firstAvailableDate < currentStartDate;
+  }, [availableDates, currentStartDate]);
+  
+  const canNavigateForward = useMemo(() => {
+    if (availableDates.length === 0) return false;
+    const lastAvailableDate = availableDates[availableDates.length - 1];
+    const currentEndDate = addDays(currentStartDate, WEEKS_TO_SHOW * 7 - 1);
+    return lastAvailableDate > currentEndDate;
+  }, [availableDates, currentStartDate]);
+  
+  const handleDateJump = useCallback((date: Date) => {
+    const weekStart = startOfWeek(date, { weekStartsOn: 0 });
+    const dateStr = formatInTimeZone(date, timezone, 'yyyy-MM-dd');
+    
+    // Calculate the visible range directly without creating unnecessary array
+    const visibleStart = weekStart;
+    const visibleEnd = addDays(weekStart, WEEKS_TO_SHOW * 7 - 1);
+    const bufferStart = subWeeks(visibleStart, VISIBLE_RANGE_BUFFER_WEEKS);
+    const bufferEnd = addWeeks(visibleEnd, VISIBLE_RANGE_BUFFER_WEEKS);
+    
+    // Clear any pending debounced callbacks
+    if (debounceTimeoutRef.current) {
+      clearTimeout(debounceTimeoutRef.current);
+      debounceTimeoutRef.current = null;
+    }
+    
+    // Update the ref BEFORE calling the callback to prevent the useEffect from calling it again
+    lastReportedRangeRef.current = { start: bufferStart, end: bufferEnd };
+    
+    // Update state and immediately notify parent (bypass debounce for date jumps)
+    setCurrentStartDate(weekStart);
+    if (onVisibleRangeChange) {
+      onVisibleRangeChange(bufferStart, bufferEnd);
+    }
+    
+    onDateSelect(dateStr);
+  }, [timezone, onVisibleRangeChange, onDateSelect]);
+
+  // Generate calendar days (2 weeks = 14 days)
+  const calendarDays = useMemo(() => {
+    const days: Date[] = [];
+    for (let i = 0; i < WEEKS_TO_SHOW * 7; i++) {
+      days.push(addDays(currentStartDate, i));
+    }
+    return days;
+  }, [currentStartDate]);
+
+  // Notify parent of visible date range changes (with buffer weeks before/after)
+  // Debounce to avoid excessive API calls during rapid navigation
+  const lastReportedRangeRef = useRef<{ start: Date; end: Date } | null>(null);
+  const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  
+  useEffect(() => {
+    if (!onVisibleRangeChange || calendarDays.length === 0) return;
+    
+    const visibleStart = calendarDays[0];
+    const visibleEnd = calendarDays[calendarDays.length - 1];
+    // Add buffer weeks before and after
+    const bufferStart = subWeeks(visibleStart, VISIBLE_RANGE_BUFFER_WEEKS);
+    const bufferEnd = addWeeks(visibleEnd, VISIBLE_RANGE_BUFFER_WEEKS);
+    
+    // Only report if range actually changed (more than a day difference)
+    const currentReported = lastReportedRangeRef.current;
+    if (!currentReported || 
+        Math.abs(bufferStart.getTime() - currentReported.start.getTime()) > 24 * 60 * 60 * 1000 ||
+        Math.abs(bufferEnd.getTime() - currentReported.end.getTime()) > 24 * 60 * 60 * 1000) {
+      
+      // Clear existing timeout
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current);
+      }
+      
+      // Debounce the callback
+      debounceTimeoutRef.current = setTimeout(() => {
+        lastReportedRangeRef.current = { start: bufferStart, end: bufferEnd };
+        onVisibleRangeChange(bufferStart, bufferEnd);
+      }, 300); // 300ms debounce
+    }
+    
+    return () => {
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current);
+      }
+    };
+  }, [calendarDays, onVisibleRangeChange]);
+
+  // Calculate date availability info
+  // Use plain object instead of Map so React can detect changes properly
+  const dateAvailabilityMap = useMemo(() => {
+    const map: Record<string, DateAvailability> = {};
+    
+    Object.entries(availabilitiesByDate).forEach(([dateStr, availabilities]) => {
+      if (availabilities && availabilities.length > 0) {
+        // Calculate min price from ADULT prices only (for "from" price display)
+        // Priority: pricesByCategory.retailPrices (in cents) > rates.price (in dollars)
+        const adultPrices = availabilities.flatMap(avail => {
+          // First try pricesByCategory.retailPrices (preferred format, in cents)
+          if (avail.pricesByCategory?.retailPrices) {
+            const adultPrice = avail.pricesByCategory.retailPrices.find(p => p.category === 'ADULT');
+            return adultPrice ? [adultPrice.price / 100] : []; // Convert cents to dollars
+          }
+          // Fallback to rates.price (already in dollars)
+          if (avail.rates) {
+            const adultRate = avail.rates.find(rate => rate.category === 'ADULT');
+            return adultRate && adultRate.price !== undefined && adultRate.price !== null
+              ? [adultRate.price]
+              : [];
+          }
+          return [];
+        });
+        
+        const minPrice = adultPrices.length > 0 ? Math.min(...adultPrices) : undefined;
+        
+        // Check if sold out (all availabilities have 0 vacancies)
+        const isSoldOut = availabilities.every(avail => avail.vacancies === 0);
+        
+        // Calculate total vacancies across all availabilities for this date
+        const totalVacancies = availabilities.reduce((sum, avail) => sum + avail.vacancies, 0);
+        
+        // Extract start times from availabilities and track which are sold out
+        const timeAvailabilityMap = new Map<string, { isSoldOut: boolean; vacancies: number }>();
+        const timeCapacityMap: Record<string, { booked: number; total: number }> = {};
+        
+        availabilities.forEach(avail => {
+          let timeStr: string | null = null;
+          try {
+            // Parse ISO datetime and extract time portion
+            const dateTime = parseISO(avail.dateTime);
+            timeStr = formatInTimeZone(dateTime, timezone, 'HH:mm');
+          } catch {
+            const timeMatch = avail.dateTime.match(/T(\d{2}:\d{2})/);
+            if (timeMatch) timeStr = timeMatch[1];
+          }
+          if (timeStr) {
+            const existing = timeAvailabilityMap.get(timeStr);
+            if (existing) {
+              timeAvailabilityMap.set(timeStr, {
+                isSoldOut: existing.isSoldOut && avail.vacancies === 0,
+                vacancies: existing.vacancies + avail.vacancies
+              });
+            } else {
+              timeAvailabilityMap.set(timeStr, {
+                isSoldOut: avail.vacancies === 0,
+                vacancies: avail.vacancies
+              });
+            }
+            // Per-time capacity for admin: first availability for this time wins
+            const totalCapacity = avail.totalCapacity ?? 0;
+            if (totalCapacity > 0 && !timeCapacityMap[timeStr]) {
+              const booked = avail.bookedCapacity ?? (totalCapacity - avail.vacancies);
+              timeCapacityMap[timeStr] = { booked, total: totalCapacity };
+            }
+          }
+        });
+        
+        const startTimes = Array.from(timeAvailabilityMap.keys()).sort();
+        const soldOutTimes = new Set(
+          Array.from(timeAvailabilityMap.entries())
+            .filter(([, info]) => info.isSoldOut)
+            .map(([time]) => time)
+        );
+        
+        // Calculate total discount percentage from all negative adjustments
+        const totalDiscountPercent = calculateTotalDiscountPercent(availabilities, currency);
+        
+        map[dateStr] = {
+          date: dateStr,
+          availabilityCount: availabilities.length,
+          isSoldOut,
+          minPrice,
+          totalVacancies,
+          startTimes: startTimes.length > 0 ? startTimes : undefined,
+          soldOutTimes: soldOutTimes.size > 0 ? soldOutTimes : undefined,
+          totalDiscountPercent,
+          timeCapacityMap: Object.keys(timeCapacityMap).length > 0 ? timeCapacityMap : undefined,
+        };
+      }
+    });
+    
+    return map;
+  }, [availabilitiesByDate, timezone, currency]);
+
+  // Get display range for header
+  const displayRange = useMemo(() => {
+    const firstDay = calendarDays[0];
+    const lastDay = calendarDays[calendarDays.length - 1];
+    return {
+      start: formatInTimeZone(firstDay, timezone, 'MMM d', { locale: dateFnsLocale }),
+      end: formatInTimeZone(lastDay, timezone, 'MMM d, yyyy', { locale: dateFnsLocale }),
+    };
+  }, [calendarDays, timezone, dateFnsLocale]);
+
+  // Navigation handlers
+  const handlePrevious = () => {
+    setCurrentStartDate(subWeeks(currentStartDate, WEEKS_TO_SHOW));
+  };
+
+  const handleNext = () => {
+    setCurrentStartDate(addWeeks(currentStartDate, WEEKS_TO_SHOW));
+  };
+
+  const handleDateClick = (date: Date) => {
+    const dateStr = formatInTimeZone(date, timezone, 'yyyy-MM-dd');
+    const availability = dateAvailabilityMap[dateStr] || null;
+    
+    // Allow selection when there are availabilities; when showCapacity (admin), allow sold-out for overbooking
+    if (availability && (!availability.isSoldOut || showCapacity)) {
+      onDateSelect(dateStr);
+    }
+  };
+
+  return (
+    <div className="w-full max-w-2xl mx-auto relative">
+      {/* Calendar Header with Navigation */}
+      <div className="flex items-center justify-between mb-1.5">
+        <button
+          onClick={handlePrevious}
+          disabled={!canNavigateBack}
+          className="p-1.5 rounded-lg hover:bg-stone-100 transition-colors focus:outline-none focus:ring-2 focus:ring-emerald-500 disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:bg-transparent"
+          aria-label={t('calendar.previousWeeks')}
+        >
+          <svg
+            className="w-4 h-4 text-stone-600"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M15 19l-7-7 7-7"
+            />
+          </svg>
+        </button>
+        <div className="relative">
+          <button
+            ref={datePickerTriggerRef}
+            onClick={() => setIsDatePickerOpen(!isDatePickerOpen)}
+            className="text-xs font-medium text-stone-700 hover:text-stone-900 px-2 py-1 rounded hover:bg-stone-100 transition-colors cursor-pointer flex items-center gap-1"
+          >
+            <span>{displayRange.start} - {displayRange.end}</span>
+            <svg 
+              className={`w-3 h-3 text-stone-600 transition-transform ${isDatePickerOpen ? 'rotate-180' : ''}`}
+              fill="none" 
+              stroke="currentColor" 
+              viewBox="0 0 24 24"
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+            </svg>
+          </button>
+          {isDatePickerOpen && pickerPosition && (
+            <div 
+              ref={datePickerRef}
+              className="fixed bg-white border border-stone-300 rounded-lg shadow-lg z-50 p-3 min-w-[280px] max-h-[400px] overflow-y-auto"
+              style={{ 
+                top: `${pickerPosition.top}px`,
+                left: `${pickerPosition.left}px`,
+              }}
+              onClick={(e) => e.stopPropagation()}
+            >
+              {/* Mini Calendar Header */}
+              <div className="flex items-center justify-between mb-2">
+                <button
+                  type="button"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (!canNavigatePickerMonthBack) return;
+                    const previousMonth = startOfMonth(subMonths(pickerMonth, 1));
+                    // Clamp to June-October 2026 range
+                    if (previousMonth.getTime() >= MINI_CALENDAR_START_MONTH.getTime()) {
+                      setPickerMonth(previousMonth);
+                    }
+                  }}
+                  disabled={!canNavigatePickerMonthBack}
+                  className="p-1 rounded hover:bg-stone-100 disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:bg-transparent transition-colors"
+                >
+                  <svg className="w-4 h-4 text-stone-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+                  </svg>
+                </button>
+                <div className="text-sm font-semibold text-stone-700">
+                  {formatInTimeZone(pickerMonth, timezone, 'MMMM yyyy', { locale: dateFnsLocale })}
+                </div>
+                <button
+                  type="button"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (!canNavigatePickerMonthForward) return;
+                    const nextMonth = startOfMonth(addMonths(pickerMonth, 1));
+                    // Clamp to June-October 2026 range
+                    if (nextMonth.getTime() <= MINI_CALENDAR_END_MONTH.getTime()) {
+                      setPickerMonth(nextMonth);
+                    }
+                  }}
+                  disabled={!canNavigatePickerMonthForward}
+                  className="p-1 rounded hover:bg-stone-100 disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:bg-transparent transition-colors"
+                >
+                  <svg className="w-4 h-4 text-stone-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                  </svg>
+                </button>
+              </div>
+              
+              {/* Mini Calendar Days of Week */}
+              <div className="grid grid-cols-7 gap-1 mb-1">
+                {DAYS_OF_WEEK_KEYS.map((dayKey) => (
+                  <div key={dayKey} className="text-[10px] font-semibold text-stone-500 text-center py-1">
+                    {t(`calendar.days.${dayKey}`)[0]}
+                  </div>
+                ))}
+              </div>
+              
+              {/* Mini Calendar Grid */}
+              <div className="grid grid-cols-7 gap-1">
+                {miniCalendarData.days.map((day) => {
+                    const dateStr = formatInTimeZone(day, timezone, 'yyyy-MM-dd');
+                    const dayNumber = formatInTimeZone(day, timezone, 'd');
+                    const availability = dateAvailabilityMap[dateStr] || null;
+                    const isSelected = selectedDate === dateStr;
+                    const isCurrentMonth = day >= miniCalendarData.monthStart && day <= miniCalendarData.monthEnd;
+                    // Check if day is within allowed range (June 1 - October 12, 2026)
+                    const isInAllowedRange = day >= MINI_CALENDAR_START_DATE && day <= MINI_CALENDAR_END_DATE;
+                    
+                    // If we have availability data and it's sold out, show as sold out
+                    // Otherwise, if in allowed range, show as available (even if not fetched yet)
+                    const isSoldOut = availability?.isSoldOut === true;
+                    // When showCapacity (admin), sold-out days are still selectable for overbooking
+                    const isAvailable = isInAllowedRange && (!isSoldOut || showCapacity);
+                    const isToday = isSameDay(day, new Date());
+                    
+                    return (
+                      <button
+                        key={dateStr}
+                        onClick={() => {
+                          if (isAvailable) {
+                            handleDateJump(day);
+                            setIsDatePickerOpen(false);
+                          }
+                        }}
+                        disabled={!isAvailable}
+                        className={cn(
+                          'aspect-square text-xs rounded transition-colors',
+                          !isCurrentMonth && 'text-stone-300',
+                          isSoldOut && !showCapacity
+                            ? 'bg-red-400 text-white cursor-not-allowed'
+                            : isSoldOut && showCapacity
+                            ? 'bg-red-400 text-white cursor-pointer hover:bg-red-500'
+                            : !isInAllowedRange
+                            ? 'text-stone-300 cursor-not-allowed'
+                            : isSelected
+                            ? 'bg-emerald-600 text-white hover:bg-emerald-700'
+                            : 'bg-emerald-50 text-stone-900 hover:bg-emerald-100 cursor-pointer',
+                          isToday && isAvailable && !isSelected && 'ring-1 ring-emerald-500'
+                        )}
+                      >
+                        {dayNumber}
+                      </button>
+                    );
+                  })}
+              </div>
+            </div>
+          )}
+        </div>
+        <button
+          onClick={handleNext}
+          disabled={!canNavigateForward}
+          className="p-1.5 rounded-lg hover:bg-stone-100 transition-colors focus:outline-none focus:ring-2 focus:ring-emerald-500 disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:bg-transparent"
+          aria-label={t('calendar.nextWeeks')}
+        >
+          <svg
+            className="w-4 h-4 text-stone-600"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M9 5l7 7-7 7"
+            />
+          </svg>
+        </button>
+      </div>
+
+      {/* Calendar Grid: on mobile scroll horizontally; on sm+ fit container so no scroll to see Saturday */}
+      <div className="border border-stone-200 rounded-lg overflow-hidden bg-white overflow-x-auto sm:overflow-visible">
+        <div className="min-w-[700px] sm:min-w-0 sm:w-full pb-3 sm:pb-0">
+          {/* Day Headers */}
+          <div className="grid grid-cols-7 bg-stone-50 border-b border-stone-200">
+            {DAYS_OF_WEEK_KEYS.map((dayKey) => (
+              <div
+                key={dayKey}
+                className="py-1 text-center text-xs font-semibold text-stone-600 uppercase tracking-wide"
+              >
+                {t(`calendar.days.${dayKey}`)}
+              </div>
+            ))}
+          </div>
+
+          {/* Calendar Days Grid - row height = tallest cell in row; all cells stretch to that height */}
+          <div className="grid grid-cols-7 items-stretch">
+          {calendarDays.map((date) => {
+            const dateStr = formatInTimeZone(date, timezone, 'yyyy-MM-dd');
+            const availability = dateAvailabilityMap[dateStr] || null;
+            const isSelected = selectedDate === dateStr;
+            const isToday = isSameDay(date, new Date());
+
+            // Include availability data in key to force re-render when availability changes
+            const availabilityKey = availability 
+              ? `${availability.availabilityCount}-${availability.isSoldOut}-${availability.startTimes?.join(',') || ''}`
+              : 'none';
+            return (
+              <DateCell
+                key={`${dateStr}-${availabilityKey}`}
+                date={date}
+                dateStr={dateStr}
+                availability={availability}
+                isSelected={isSelected}
+                isToday={isToday}
+                showCapacity={showCapacity}
+                timezone={timezone}
+                onClick={() => handleDateClick(date)}
+              />
+            );
+          })}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}