// HimLocal — v2.5 Airbnb-style range calendar + Receipt/Booking detail
// Works on both desktop (2-month side-by-side) and mobile (vertical scroll).

const { useState: useStateWCal, useEffect: useEffectWCal, useMemo: useMemoWCal } = React;

const W_MONTHS = ['January','February','March','April','May','June','July','August','September','October','November','December'];
const W_DOW = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'];

function startOfMonth(y, m) { return new Date(y, m, 1); }
function ymd(d) { return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`; }
function fromYmd(s) { const [y, m, d] = (s || '').split('-').map(Number); if (!y) return null; return new Date(y, m - 1, d); }
function sameDay(a, b) { return a && b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate(); }
function isBefore(a, b) { return a && b && a.getTime() < b.getTime(); }

// Generate a 6×7 cell grid for the month (with leading/trailing days from neighbours)
function monthGrid(year, month) {
  const first = new Date(year, month, 1);
  // Monday = 0
  const leading = (first.getDay() + 6) % 7;
  const cells = [];
  for (let i = 0; i < leading; i++) {
    const d = new Date(year, month, -leading + i + 1);
    cells.push({ date:d, inMonth:false });
  }
  let dayN = 1;
  while (true) {
    const d = new Date(year, month, dayN);
    if (d.getMonth() !== month) break;
    cells.push({ date:d, inMonth:true });
    dayN++;
  }
  while (cells.length < 42) {
    const d = new Date(year, month, dayN);
    cells.push({ date:d, inMonth:false });
    dayN++;
  }
  return cells;
}

function WebCalendarPanel({ start, end, onChange, mode = 'desktop', minDate, maxDate, monthsAhead = 12 }) {
  const initial = fromYmd(start) || new Date();
  const [viewY, setViewY] = useStateWCal(initial.getFullYear());
  const [viewM, setViewM] = useStateWCal(initial.getMonth());
  const [pickStart, setPickStart] = useStateWCal(start);
  const [pickEnd, setPickEnd] = useStateWCal(end);
  const [hover, setHover] = useStateWCal(null);
  useEffectWCal(() => { setPickStart(start); setPickEnd(end); }, [start, end]);

  const sDate = fromYmd(pickStart);
  const eDate = fromYmd(pickEnd);
  const hDate = hover ? fromYmd(hover) : null;
  const min = minDate ? fromYmd(minDate) : new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 1);
  const max = maxDate ? fromYmd(maxDate) : null;

  const advance = (delta) => {
    let m = viewM + delta;
    let y = viewY;
    while (m < 0) { m += 12; y--; }
    while (m > 11) { m -= 12; y++; }
    setViewM(m); setViewY(y);
  };

  const onClickDay = (d) => {
    const k = ymd(d);
    if (min && isBefore(d, min)) return;
    if (max && isBefore(max, d)) return;
    if (!pickStart || (pickStart && pickEnd)) {
      // start new range
      setPickStart(k); setPickEnd(null); onChange?.({ start:k, end:null });
    } else if (pickStart && !pickEnd) {
      const sd = fromYmd(pickStart);
      if (isBefore(d, sd) || sameDay(d, sd)) {
        setPickStart(k); setPickEnd(null); onChange?.({ start:k, end:null });
      } else {
        setPickEnd(k); onChange?.({ start:pickStart, end:k });
      }
    }
  };

  const renderMonth = (y, m, classes) => {
    const cells = monthGrid(y, m);
    return (
      <div key={`${y}-${m}`} className={classes.month}>
        <div className={classes.head}>{W_MONTHS[m]} {y}</div>
        <div className={classes.dow}>{W_DOW.map(d => <span key={d}>{d}</span>)}</div>
        <div className={classes.days}>
          {cells.map(({ date, inMonth }, i) => {
            const isS = sDate && sameDay(date, sDate);
            const isE = eDate && sameDay(date, eDate);
            const isBetween = sDate && eDate && date > sDate && date < eDate;
            const isHoverRange = sDate && !eDate && hDate && date > sDate && date < hDate;
            const inRange = isBetween || isHoverRange;
            const disabled = (min && isBefore(date, min)) || (max && isBefore(max, date));
            const today = sameDay(date, new Date());
            const onlyStart = isS && !pickEnd;
            return (
              <button key={i}
                className={[
                  classes.day,
                  inMonth ? '' : 'is-other',
                  disabled ? 'is-disabled' : '',
                  today ? 'is-today' : '',
                  isS ? 'is-start' : '',
                  isE ? 'is-end' : '',
                  onlyStart ? 'is-only' : '',
                  inRange ? 'is-in-range' : '',
                ].filter(Boolean).join(' ')}
                disabled={disabled}
                onMouseEnter={() => mode === 'desktop' && setHover(ymd(date))}
                onMouseLeave={() => mode === 'desktop' && setHover(null)}
                onClick={() => !disabled && onClickDay(date)}>
                {date.getDate()}
              </button>
            );
          })}
        </div>
      </div>
    );
  };

  if (mode === 'mobile') {
    // Vertical scrolling list of N months from current
    const months = [];
    const today = new Date();
    for (let i = 0; i < monthsAhead; i++) {
      const d = new Date(today.getFullYear(), today.getMonth() + i, 1);
      months.push([d.getFullYear(), d.getMonth()]);
    }
    return (
      <div className="app-cal">
        {months.map(([y, m]) => renderMonth(y, m, { month:'app-cal__month', head:'app-cal__mo-head', dow:'app-cal__dow', days:'app-cal__days', day:'app-cal__day' }))}
      </div>
    );
  }

  // Desktop: 2 months side by side with nav
  const next = { y:viewM === 11 ? viewY + 1 : viewY, m:(viewM + 1) % 12 };
  return (
    <div className="w2-cal">
      <div className="w2-cal__head">
        <button className="w2-cal__navbtn" onClick={() => advance(-1)}>‹</button>
        <div className="w2-cal__title">Pick your dates</div>
        <button className="w2-cal__navbtn" onClick={() => advance(1)}>›</button>
      </div>
      <div className="w2-cal__grid">
        {renderMonth(viewY, viewM, { month:'w2-cal__month', head:'w2-cal__mo-head', dow:'w2-cal__dow', days:'w2-cal__days', day:'w2-cal__day' })}
        {renderMonth(next.y, next.m, { month:'w2-cal__month', head:'w2-cal__mo-head', dow:'w2-cal__dow', days:'w2-cal__days', day:'w2-cal__day' })}
      </div>
      <div className="w2-cal__footer">
        <div className="w2-cal__range">
          {pickStart ? <><strong>{fromYmd(pickStart).toLocaleDateString('en-IN', { day:'numeric', month:'short', year:'numeric' })}</strong></> : <span>Pick a start date</span>}
          <span> → </span>
          {pickEnd ? <strong>{fromYmd(pickEnd).toLocaleDateString('en-IN', { day:'numeric', month:'short', year:'numeric' })}</strong> : <span>{pickStart ? 'pick an end date' : '—'}</span>}
        </div>
        <button className="w2-cal__clear" onClick={() => { setPickStart(null); setPickEnd(null); onChange?.({ start:null, end:null }); }}>Clear</button>
      </div>
    </div>
  );
}
window.WebCalendarPanel = WebCalendarPanel;

// ─── Booking / Order detail modal (with QR + tracking timeline) ──
function WebReceiptModal({ kind, item, onClose, onCancel, onModify }) {
  if (!item) return null;
  const isBooking = kind === 'booking';
  const isOrder = kind === 'order' || kind === 'cafe-order';
  const isActivity = kind === 'activity';

  const trackSteps = (() => {
    if (kind === 'order') return [
      { name:'Placed',        when:'02 Apr 2026 · 11:14',  state:'done' },
      { name:'Packed',        when:'03 Apr 2026 · 09:30',  state:'done' },
      { name:'Shipped',       when:'03 Apr 2026 · 17:42',  state:'done' },
      { name:'Out for delivery', when:'14 May 2026 · expected', state:'current' },
      { name:'Delivered',     when:'14—15 May 2026',         state:'pending' },
    ];
    if (kind === 'cafe-order') return [
      { name:'Placed',        when:'08:42',  state:'done' },
      { name:'Cooking',       when:'08:48',  state:'done' },
      { name:'Out for delivery', when:'09:05', state:'current' },
      { name:'Delivered',     when:'~ 09:25', state:'pending' },
    ];
    return null;
  })();

  return (
    <div className="w2-receipt-back" onClick={onClose}>
      <div className="w2-receipt" onClick={e => e.stopPropagation()}>
        <div className="w2-receipt__head">
          <div className="w2-receipt__lbl">
            {isBooking ? 'Booking confirmed' : isActivity ? 'Activity confirmed' : kind === 'cafe-order' ? 'Café order' : 'Shop order'}
          </div>
          <div className="w2-receipt__t">{item.title || item.cafe}</div>
          <div className="w2-receipt__sub">{item.ref} · ₹{item.amount?.toLocaleString() || item.total?.toLocaleString()}</div>
        </div>
        <div className="w2-receipt__body">
          {(isBooking || isActivity) && (
            <>
              <div className="w2-receipt__qr">
                <div className="w2-receipt__qr-grid"/>
                <div className="w2-receipt__qr-body">
                  <div className="w2-receipt__qr-l">Show this at check-in</div>
                  <div className="w2-receipt__qr-code">{item.voucher || item.ref}</div>
                  <div className="w2-receipt__qr-meta">{isBooking ? `${item.dates}` : item.date} · {item.vendor || 'Direct'}</div>
                </div>
              </div>
              <div className="w2-receipt__sect-t">Details</div>
              {isBooking && (
                <>
                  <div className="w2-receipt__row"><span>Dates</span><strong>{item.dates}</strong></div>
                  <div className="w2-receipt__row"><span>Reference</span><strong style={{fontFamily:'var(--font-mono)'}}>{item.ref}</strong></div>
                  <div className="w2-receipt__row"><span>Status</span><strong style={{color:item.status === 'Confirmed' ? 'var(--leaf-700)' : 'var(--fg-3)'}}>{item.status}</strong></div>
                  <div className="w2-receipt__row"><span>Amount</span><strong style={{fontFamily:'var(--font-mono)'}}>₹{item.amount?.toLocaleString()}</strong></div>
                </>
              )}
              {isActivity && (
                <>
                  <div className="w2-receipt__row"><span>Operator</span><strong>{item.vendor}</strong></div>
                  <div className="w2-receipt__row"><span>When</span><strong>{item.date}</strong></div>
                  <div className="w2-receipt__row"><span>Travellers</span><strong>{item.adults}</strong></div>
                  <div className="w2-receipt__row"><span>Amount</span><strong style={{fontFamily:'var(--font-mono)'}}>₹{item.total?.toLocaleString()}</strong></div>
                </>
              )}
              <div className="w2-receipt__sect-t">Important info</div>
              <div style={{font:'400 12.5px var(--font-body)',color:'var(--fg-2)',lineHeight:1.6,padding:'4px 0'}}>
                Free cancellation up to {isActivity ? '24 hours' : '14 days'} before. Modifying dates may change the price. The host has been notified — they'll reach out 1 day prior.
              </div>
            </>
          )}
          {isOrder && (
            <>
              <div className="w2-receipt__row"><span>Items</span><strong style={{textAlign:'right',maxWidth:'70%'}}>{item.title || item.items}</strong></div>
              {kind === 'cafe-order' && <div className="w2-receipt__row"><span>Mode</span><strong>{item.mode}</strong></div>}
              {kind === 'cafe-order' && <div className="w2-receipt__row"><span>Café</span><strong>{item.cafe}</strong></div>}
              <div className="w2-receipt__row"><span>Reference</span><strong style={{fontFamily:'var(--font-mono)'}}>{item.ref}</strong></div>
              <div className="w2-receipt__row"><span>Total</span><strong style={{fontFamily:'var(--font-mono)'}}>₹{item.total?.toLocaleString()}</strong></div>
              <div className="w2-receipt__sect-t">Track this order</div>
              <div className="w2-track">
                {trackSteps?.map((s, i) => (
                  <div key={i} className={`w2-track-step is-${s.state}`}>
                    <div className="w2-track-step__dot">{s.state === 'done' ? '✓' : s.state === 'current' ? '●' : i + 1}</div>
                    <div className="w2-track-step__body">
                      <div className="w2-track-step__name">{s.name}</div>
                      <div className="w2-track-step__when">{s.when}</div>
                    </div>
                  </div>
                ))}
              </div>
            </>
          )}
        </div>
        <div className="w2-receipt__foot">
          {(isBooking || isActivity) && (
            <>
              <button className="w2-receipt__foot-ghost" onClick={onModify}>Modify dates</button>
              <button className="w2-receipt__foot-danger" onClick={onCancel}>Cancel · refund</button>
              <button className="w2-receipt__foot-primary" onClick={onClose}>Done</button>
            </>
          )}
          {isOrder && (
            <>
              <button className="w2-receipt__foot-ghost" onClick={onClose}>Help with order</button>
              <button className="w2-receipt__foot-primary" onClick={onClose}>Done</button>
            </>
          )}
        </div>
      </div>
    </div>
  );
}
window.WebReceiptModal = WebReceiptModal;