// calendar.jsx — two-month range calendar with off-season disabled.
// Themed via CSS variables on the wrapper:
//   --cal-fg, --cal-fg-mute, --cal-bg, --cal-bg-2, --cal-line, --cal-accent, --cal-on-accent

function ymd(d) { return d.getFullYear() * 10000 + (d.getMonth() + 1) * 100 + d.getDate(); }
function sameDay(a, b) { return a && b && ymd(a) === ymd(b); }
function isBefore(a, b) { return ymd(a) < ymd(b); }
function isAfter(a, b) { return ymd(a) > ymd(b); }
function addMonths(d, n) { const x = new Date(d.getFullYear(), d.getMonth() + n, 1); return x; }
function startOfMonth(d) { return new Date(d.getFullYear(), d.getMonth(), 1); }
function daysIn(d) { return new Date(d.getFullYear(), d.getMonth() + 1, 0).getDate(); }
function isClosed(d) {
  // Off season: November through March
  const m = d.getMonth();
  return m === 10 || m === 11 || m === 0 || m === 1 || m === 2;
}
function isPast(d) {
  const today = new Date(); today.setHours(0,0,0,0);
  return ymd(d) < ymd(today);
}

function MonthGrid({ month, lang, value, hover, onPick, onHover }) {
  const L = COPY[lang].reserve.labels;
  const monthLabel = `${MONTH_NAMES[lang][month.getMonth()]} ${month.getFullYear()}`;
  const total = daysIn(month);
  // Monday-first: JS getDay() returns 0 (Sun) – 6 (Sat). Convert to 0 (Mon) – 6 (Sun).
  const firstDow = (startOfMonth(month).getDay() + 6) % 7;
  const cells = [];
  for (let i = 0; i < firstDow; i++) cells.push(null);
  for (let d = 1; d <= total; d++) cells.push(new Date(month.getFullYear(), month.getMonth(), d));
  while (cells.length % 7) cells.push(null);

  return (
    <div className="cal-month">
      <div className="cal-month-hd">
        <span>{monthLabel}</span>
        {isClosed(month) && <span className="cal-closed">{L.closed}</span>}
      </div>
      <div className="cal-dow">
        {L.days.map((d, i) => <span key={i}>{d}</span>)}
      </div>
      <div className="cal-grid">
        {cells.map((d, i) => {
          if (!d) return <span key={i} className="cal-cell cal-blank"></span>;
          const closed = isClosed(d) || isPast(d);
          const isStart = value.start && sameDay(d, value.start);
          const isEnd = value.end && sameDay(d, value.end);
          let inRange = false;
          if (value.start && value.end) {
            inRange = !isBefore(d, value.start) && !isAfter(d, value.end);
          } else if (value.start && hover && !value.end) {
            const lo = isBefore(hover, value.start) ? hover : value.start;
            const hi = isBefore(hover, value.start) ? value.start : hover;
            inRange = !isBefore(d, lo) && !isAfter(d, hi);
          }
          const cls = [
            "cal-cell",
            "cal-day",
            closed && "cal-disabled",
            (isStart || isEnd) && "cal-edge",
            isStart && "cal-start",
            isEnd && "cal-end",
            inRange && !isStart && !isEnd && "cal-in-range",
          ].filter(Boolean).join(" ");
          return (
            <button
              key={i}
              type="button"
              className={cls}
              disabled={closed}
              onClick={() => !closed && onPick(d)}
              onMouseEnter={() => !closed && onHover(d)}
            >
              <span>{d.getDate()}</span>
            </button>
          );
        })}
      </div>
    </div>
  );
}

function RangeCalendar({ lang, value, onChange, accent = "#c96442" }) {
  const L = COPY[lang].reserve.labels;
  const [anchor, setAnchor] = React.useState(() => {
    // Start anchor at the next open month (today, or April if off-season)
    const today = new Date();
    if (isClosed(today)) {
      // jump to April this year, or next year if past Oct
      const m = today.getMonth();
      if (m >= 10) return new Date(today.getFullYear() + 1, 3, 1);
      return new Date(today.getFullYear(), 3, 1);
    }
    return startOfMonth(today);
  });
  const [hover, setHover] = React.useState(null);

  const pick = (d) => {
    if (!value.start || (value.start && value.end)) {
      onChange({ start: d, end: null });
    } else {
      if (isBefore(d, value.start)) onChange({ start: d, end: value.start });
      else if (sameDay(d, value.start)) onChange({ start: null, end: null });
      else onChange({ start: value.start, end: d });
    }
  };

  const nights = value.start && value.end ? Math.round((value.end - value.start) / 86400000) : 0;

  return (
    <div className="cal-wrap" style={{ "--cal-accent": accent }}>
      <div className="cal-toolbar">
        <div className="cal-summary">
          <div>
            <span className="cal-summary-lbl">{L.arrival}</span>
            <strong>{value.start ? formatDate(value.start, lang) : "—"}</strong>
          </div>
          <span className="cal-summary-arrow">→</span>
          <div>
            <span className="cal-summary-lbl">{L.departure}</span>
            <strong>{value.end ? formatDate(value.end, lang) : "—"}</strong>
          </div>
          <div className="cal-summary-nights">
            {nights > 0 ? <><strong>{nights}</strong> {L.nights}</> : <span style={{ opacity: 0.6 }}>{value.start ? L.selectDep : L.select}</span>}
          </div>
        </div>
        <div className="cal-nav">
          <button type="button" onClick={() => setAnchor(addMonths(anchor, -1))} aria-label="prev">‹</button>
          <button type="button" onClick={() => setAnchor(addMonths(anchor, 1))} aria-label="next">›</button>
          {(value.start || value.end) && (
            <button type="button" className="cal-clear" onClick={() => onChange({ start: null, end: null })}>{L.clear}</button>
          )}
        </div>
      </div>
      <div className="cal-months">
        <MonthGrid month={anchor} lang={lang} value={value} hover={hover} onPick={pick} onHover={setHover} />
        <MonthGrid month={addMonths(anchor, 1)} lang={lang} value={value} hover={hover} onPick={pick} onHover={setHover} />
      </div>
    </div>
  );
}

function formatDate(d, lang) {
  if (!d) return "—";
  const months = MONTH_NAMES[lang].map(m => m.slice(0, 3));
  if (lang === "de") return `${d.getDate()}. ${months[d.getMonth()]} ${d.getFullYear()}`;
  return `${months[d.getMonth()]} ${d.getDate()}, ${d.getFullYear()}`;
}

Object.assign(window, { RangeCalendar, formatDate, isClosed, isPast });