/* ============================================================
   AVAILABILITY + BOOKING PANEL — premium trip-detail sidebar
   Renders the full booking card body: price summary, availability
   calendar, selected-date summary, availability-oriented CTAs and
   trust points. All Phase C behavior preserved (fetch by
   trip_key+month, month nav, status rendering, selection state,
   date-aware WhatsApp link + exact message format, enquiry
   fallback, 3 tracking events, loading/error/empty handling).

   NOTE (hooks-scope): this file is its own babel program, so the
   top-level `const { useState } = React` in app.jsx is NOT visible
   here. We call React.useState / React.useEffect directly.
   ============================================================ */

function pad2(n) { return n < 10 ? '0' + n : String(n); }

// Local today as 'YYYY-MM-DD' (no UTC shift).
function todayStr() {
  const d = new Date();
  return d.getFullYear() + '-' + pad2(d.getMonth() + 1) + '-' + pad2(d.getDate());
}

// 'YYYY-MM' for a given year/month (1-based month).
function ym(year, month) { return year + '-' + pad2(month); }

const MONTH_NAMES = ['January','February','March','April','May','June','July','August','September','October','November','December'];
const WEEKDAYS = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun']; // Monday-start

// Human-readable 'YYYY-MM-DD' -> '15 June 2026' (month name localized).
function humanDate(s) {
  if (!s || s.length < 10) return s || '';
  const y = s.slice(0, 4);
  const m = parseInt(s.slice(5, 7), 10);
  const d = parseInt(s.slice(8, 10), 10);
  return d + ' ' + window.t('cal.month.' + m) + ' ' + y;
}

// Honest, optional badge based on trip cadence/privacy. Returns '' to omit.
function tripBadge(trip) {
  const txt = ((trip.pace || '') + ' ' + (trip.group || '')).toLowerCase();
  if (txt.indexOf('private') !== -1) return window.t('bk.badge.private');
  if (txt.indexOf('full day') !== -1) return window.t('bk.badge.fullDay');
  return '';
}

// Compact +/- counter used in the booking-starter panel.
function PeopleStepper(props) {
  var value = props.value, onChange = props.onChange;
  var min = props.min == null ? 0 : props.min;
  var max = props.max == null ? 40 : props.max;
  function dec() { if (value > min) onChange(value - 1); }
  function inc() { if (value < max) onChange(value + 1); }
  return (
    <div className="bk-stepper">
      <button type="button" className="bk-step-btn" onClick={dec} disabled={value <= min} aria-label={'Decrease ' + props.label}>−</button>
      <span className="bk-step-val" aria-live="polite">{value}</span>
      <button type="button" className="bk-step-btn" onClick={inc} disabled={value >= max} aria-label={'Increase ' + props.label}>+</button>
    </div>
  );
}

function AvailabilityCalendar({ tripKey, trip, go }) {
  const today = todayStr();
  const initYear = parseInt(today.slice(0, 4), 10);
  const initMonth = parseInt(today.slice(5, 7), 10); // 1-based

  const [year, setYear] = React.useState(initYear);
  const [month, setMonth] = React.useState(initMonth);
  const [days, setDays] = React.useState(null);   // null = loading; [] possible
  const [error, setError] = React.useState(false);
  const [loading, setLoading] = React.useState(true);
  const [selected, setSelected] = React.useState(''); // 'YYYY-MM-DD'
  const [adults, setAdults] = React.useState(1);
  const [children, setChildren] = React.useState(0);
  const [infants, setInfants] = React.useState(0);

  const monthKey = ym(year, month);

  // Fetch availability for the active month.
  React.useEffect(function () {
    let cancelled = false;
    setLoading(true);
    setError(false);
    const url = '/api/availability?trip_key=' + encodeURIComponent(tripKey) + '&month=' + encodeURIComponent(monthKey);
    fetch(url)
      .then(function (r) { if (!r.ok) throw new Error('bad status ' + r.status); return r.json(); })
      .then(function (data) {
        if (cancelled) return;
        setDays(Array.isArray(data.days) ? data.days : []);
        setLoading(false);
        if (typeof window.dhTrack === 'function') {
          window.dhTrack('availability_month_view', { trip_key: tripKey, month: monthKey });
        }
      })
      .catch(function () {
        if (cancelled) return;
        setError(true);
        setLoading(false);
        setDays(null);
      });
    return function () { cancelled = true; };
  }, [tripKey, monthKey]);

  // Is the displayed month entirely in the past? (disable prev beyond current month)
  const curYear = parseInt(today.slice(0, 4), 10);
  const curMonth = parseInt(today.slice(5, 7), 10);
  const atCurrentMonth = (year === curYear && month === curMonth);
  const isPastMonth = (year < curYear) || (year === curYear && month < curMonth);

  function goPrev() {
    if (atCurrentMonth || isPastMonth) return; // don't navigate to fully-past months
    let m = month - 1, y = year;
    if (m < 1) { m = 12; y -= 1; }
    setMonth(m); setYear(y);
  }
  function goNext() {
    let m = month + 1, y = year;
    if (m > 12) { m = 1; y += 1; }
    setMonth(m); setYear(y);
  }

  function pickDate(dayObj) {
    if (!dayObj.selectable) return;
    if (dayObj.date < today) return; // past day
    setSelected(dayObj.date);
    if (typeof window.dhTrack === 'function') {
      window.dhTrack('availability_date_select', { trip_key: tripKey, date: dayObj.date });
    }
  }

  // Build a quick lookup: day-of-month (1..N) -> day object.
  const dayByNum = {};
  if (Array.isArray(days)) {
    days.forEach(function (d) {
      const n = parseInt(d.date.slice(8, 10), 10);
      dayByNum[n] = d;
    });
  }

  // Leading blank cells: weekday of the 1st (Monday-start grid).
  const firstDow = new Date(year, month - 1, 1).getDay();
  const lead = (firstDow + 6) % 7;
  const lastDay = new Date(year, month, 0).getDate();

  // WhatsApp message — exact template, prefilled from current selections.
  // Blank values where unknown (date, or zero counts left blank).
  function waMessage() {
    return window.t('wa.greeting') + '\n\n' +
      window.t('wa.tripOption', { name: window.tt(trip, 'name') }) + '\n' +
      window.t('wa.date', { date: (selected || '') }) + '\n' +
      window.t('wa.adults', { n: (adults > 0 ? adults : '') }) + '\n' +
      window.t('wa.children', { n: (children > 0 ? children : '') }) + '\n' +
      window.t('wa.infants', { n: (infants > 0 ? infants : '') }) + '\n' +
      window.t('wa.hotel') + '\n' +
      window.t('wa.transferQ');
  }

  function onWaClick() {
    if (typeof window.dhTrack === 'function') {
      window.dhTrack('availability_whatsapp_click', { trip_key: tripKey, date: selected || '' });
    }
  }
  const badge = tripBadge(trip);
  const pl = DATA.priceLabel(trip);
  const isFixed = (trip.pricing && trip.pricing.type === 'fixed');

  // Clean slug for /book/<slug> from the trip key (e.g. 'snorkeling' -> 'dolphin-house-hurghada').
  function bookSlug() {
    var p = (window.KEY_TO_PATH && window.KEY_TO_PATH[tripKey]) || '';
    return p.replace(/^\//, '');
  }
  function goCheckout() {
    if (!selected) return; // require a date
    if (typeof window.dhTrack === 'function') {
      window.dhTrack('checkout_cta_click', { trip_key: tripKey, date: selected || '' });
    }
    var path = '/book/' + bookSlug() +
      '?date=' + encodeURIComponent(selected) +
      '&adults=' + adults +
      '&children=' + children +
      '&infants=' + infants;
    if (typeof window.goPath === 'function') window.goPath(path);
  }

  // ---- Render a single day cell ----
  function renderCell(n) {
    const dObj = dayByNum[n] || { date: monthKey + '-' + pad2(n), status: 'available', selectable: true, remaining: null, note: '' };
    const dateStr = monthKey + '-' + pad2(n);
    const isPast = dateStr < today;
    const isSel = (dateStr === selected);
    const disabled = isPast || !dObj.selectable;

    let cls = 'avc-day';
    if (disabled) cls += ' avc-disabled';
    if (isSel) cls += ' avc-selected';
    if (!disabled && dObj.status === 'limited') cls += ' avc-limited';

    const title = dObj.note ? dObj.note : (dObj.status === 'unavailable' ? window.t('bk.statusUnavailable') : (dObj.status === 'limited' ? window.t('bk.statusLimited') : ''));

    return (
      <button
        key={n}
        type="button"
        className={cls}
        disabled={disabled}
        title={title}
        aria-label={dateStr + (disabled ? ' unavailable' : '')}
        aria-pressed={isSel}
        onClick={function () { pickDate(Object.assign({}, dObj, { date: dateStr })); }}
      >
        <span className="avc-num">{n}</span>
        {(!disabled && dObj.status === 'limited') ? <span className="avc-dot" aria-hidden="true"></span> : null}
      </button>
    );
  }

  return (
    <div className="bk">
      {/* ── 1. PRICE SUMMARY ───────────────────────────── */}
      <div className="bk-price">
        <div className="bk-price-main">
          <span className="bk-amt">{pl.main}</span>
          <span className="bk-per">{pl.note}</span>
        </div>
        <div className="bk-price-meta">
          {badge ? <span className="bk-badge">{badge}</span> : null}
        </div>
      </div>
      <p className="bk-sub">{window.tt(trip, 'duration')} · {window.tt(trip, 'pace')}</p>

      {/* ── 2. AVAILABILITY ────────────────────────────── */}
      <div className="bk-section">
        <span className="bk-kicker">{window.t('bk.checkAvail')}</span>

        <div className="avc">
          <div className="avc-head">
            <button type="button" className="avc-nav" onClick={goPrev} disabled={atCurrentMonth || isPastMonth} aria-label={window.t('bk.prevMonth')}>
              <Ic.arrow width="17" height="17" style={{ transform: 'rotate(180deg)' }}/>
            </button>
            <span className="avc-title">{window.t('cal.month.' + month)} {year}</span>
            <button type="button" className="avc-nav" onClick={goNext} aria-label={window.t('bk.nextMonth')}>
              <Ic.arrow width="17" height="17"/>
            </button>
          </div>

          <div className="avc-weekdays">
            {WEEKDAYS.map(function (w) { return <span key={w} className="avc-wd">{window.t('cal.weekday.' + w)}</span>; })}
          </div>

          {loading ? (
            <div className="avc-msg">{window.t('bk.loading')}</div>
          ) : error ? (
            <div className="avc-msg avc-err">{window.t('bk.loadError')}</div>
          ) : (
            <div className="avc-grid">
              {Array.from({ length: lead }).map(function (_, i) { return <span key={'b' + i} className="avc-blank"></span>; })}
              {Array.from({ length: lastDay }).map(function (_, i) { return renderCell(i + 1); })}
            </div>
          )}

          <div className="avc-legend">
            <span className="avc-lg"><span className="avc-sw avc-sw-av"></span>{window.t('bk.legend.available')}</span>
            <span className="avc-lg"><span className="avc-sw avc-sw-lim"></span>{window.t('bk.legend.limited')}</span>
            <span className="avc-lg"><span className="avc-sw avc-sw-un"></span>{window.t('bk.legend.unavailable')}</span>
          </div>

          {!error ? (
            <p className="avc-help">{window.t('bk.chooseDate')}</p>
          ) : null}
        </div>
      </div>

      {/* ── 3. PEOPLE COUNTERS ─────────────────────────── */}
      <div className="bk-section">
        <span className="bk-kicker">{window.t('bk.whoComing')}</span>
        {isFixed ? (
          <p className="bk-fixed-note">{window.t('bk.fixedNote')}</p>
        ) : null}
        <div className="bk-guests">
          <div className="bk-guest-row">
            <span className="bk-guest-lbl"><strong>{window.t('bk.adults')}</strong><span className="bk-guest-sub">{window.t('bk.adultsAge')}</span></span>
            <PeopleStepper label={window.t('bk.adults')} value={adults} onChange={setAdults} min={1} max={40}/>
          </div>
          <div className="bk-guest-row">
            <span className="bk-guest-lbl"><strong>{window.t('bk.children')}</strong><span className="bk-guest-sub">{window.t('bk.childrenAge')}</span></span>
            <PeopleStepper label={window.t('bk.children')} value={children} onChange={setChildren} min={0} max={40}/>
          </div>
          <div className="bk-guest-row">
            <span className="bk-guest-lbl"><strong>{window.t('bk.infants')}</strong><span className="bk-guest-sub">{window.t('bk.infantsAge')}</span></span>
            <PeopleStepper label={window.t('bk.infants')} value={infants} onChange={setInfants} min={0} max={20}/>
          </div>
        </div>
      </div>

      {/* ── 4. SELECTED-DATE SUMMARY ───────────────────── */}
      {selected ? (
        <div className="bk-selected" role="status">
          <div className="bk-selected-row">
            <span className="bk-selected-label">{window.t('bk.selectedDate')}</span>
            <span className="bk-selected-val">{humanDate(selected)}</span>
          </div>
          <div className="bk-selected-row">
            <span className="bk-selected-label">{window.t('bk.trip')}</span>
            <span className="bk-selected-trip">{window.tt(trip, 'name')}</span>
          </div>
        </div>
      ) : null}

      {/* ── 5. CTA AREA — primary checkout + WhatsApp enquiry ── */}
      <div className="bk-cta">
        <button
          type="button"
          className="btn btn-coral btn-lg btn-block"
          onClick={goCheckout}
          disabled={!selected}
          aria-disabled={!selected ? 'true' : 'false'}
        >
          {window.t('bk.continueBooking')}
        </button>
        {!selected ? <p className="bk-cta-hint">{window.t('bk.pickDateHint')}</p> : null}
        <a
          className="btn btn-wa btn-block bk-cta-wa"
          href={DATA.waLink(waMessage())}
          target="_blank"
          rel="noopener"
          onClick={onWaClick}
        >
          <Ic.wa/> {window.t('bk.enquireWa')}
        </a>
      </div>

      {/* ── 5. TRUST POINTS ────────────────────────────── */}
      <ul className="bk-trust">
        {[window.t('bk.trust.noPay'), window.t('bk.trust.fastWa'), window.t('bk.trust.transfer')].map(function (t, i) {
          return (
            <li key={i}>
              <span className="bk-trust-ic"><Ic.check width="13" height="13"/></span>
              {t}
            </li>
          );
        })}
      </ul>
    </div>
  );
}

Object.assign(window, { AvailabilityCalendar });