/**
 * Alpine.js component for the booking wizard step-2 calendar.
 * Shows ALL time slots including taken/unavailable ones.
 */
function bookingCalendar({ artistId, apiUrl }) {
  return {
    artistId,
    apiUrl,
    year:  new Date().getFullYear(),
    month: new Date().getMonth(),
    cells: [],
    monthMap: {},
    slots: [],
    selectedDate: null,
    picked: null,
    loadingSlots: false,

    get monthLabel() {
      return new Date(this.year, this.month, 1).toLocaleDateString(undefined, { month: 'long', year: 'numeric' });
    },

    init() { this.loadMonth(); },

    prevMonth() {
      this.month--;
      if (this.month < 0) { this.month = 11; this.year--; }
      this.loadMonth();
    },
    nextMonth() {
      this.month++;
      if (this.month > 11) { this.month = 0; this.year++; }
      this.loadMonth();
    },

    async loadMonth() {
      this.selectedDate = null;
      this.picked = null;
      this.slots = [];
      const ym = `${this.year}-${String(this.month + 1).padStart(2,'0')}`;
      const qs = new URLSearchParams({ month: ym });
      if (this.artistId) qs.set('artist', this.artistId);
      try {
        const res  = await fetch(`${this.apiUrl}?${qs}`);
        const data = await res.json();
        this.monthMap = data.month || {};
      } catch (e) { this.monthMap = {}; }
      this.buildCells();
    },

    buildCells() {
      const first = new Date(this.year, this.month, 1);
      const daysInMonth = new Date(this.year, this.month + 1, 0).getDate();
      const startWeekday = first.getDay();
      const today = new Date();
      today.setHours(0,0,0,0);
      const cells = [];
      for (let i = 0; i < startWeekday; i++) {
        cells.push({ key: 'pad-' + i, day: '', date: null, count: 0, past: false });
      }
      for (let d = 1; d <= daysInMonth; d++) {
        const date = `${this.year}-${String(this.month + 1).padStart(2,'0')}-${String(d).padStart(2,'0')}`;
        const cellDate = new Date(this.year, this.month, d);
        const isPast = cellDate < today;
        cells.push({ key: date, day: d, date, count: this.monthMap[date] || 0, past: isPast });
      }
      this.cells = cells;
    },

    async pickDate(date) {
      if (!date) return;
      this.selectedDate = date;
      this.picked = null;
      this.loadingSlots = true;
      const qs = new URLSearchParams({ date });
      if (this.artistId) qs.set('artist', this.artistId);
      try {
        const res  = await fetch(`${this.apiUrl}?${qs}`);
        const data = await res.json();
        this.slots = data.slots || [];
      } catch (e) { this.slots = []; }
      this.loadingSlots = false;
    },

    slotClass(slot) {
      if (this.picked && this.picked.start === slot.start) {
        return 'bg-gold text-ink border-gold font-semibold';
      }
      if (slot.status === 'taken') {
        return 'bg-red-500/5 border-red-500/20 text-bone/30 cursor-not-allowed';
      }
      if (slot.status === 'past') {
        return 'bg-white/[0.02] border-white/5 text-bone/20 cursor-not-allowed';
      }
      return 'bg-ink hover:bg-gold/10 hover:border-gold/30 border-white/10 text-bone cursor-pointer';
    },

    pickSlot(slot) {
      if (slot.status !== 'free') return;
      this.picked = slot;
    },
  };
}
window.bookingCalendar = bookingCalendar;
