// Calendar — three views: grid (default), list, timeline

function CalendarGrid({ cursor, setCursor, selected, setSelected, bookings, isBusy, getByDate, t, lang, onBusyClick }) {
  const today = new Date(); today.setHours(0,0,0,0);
  const maxDate = addDays(today, 90);
  const monthStart = startOfMonth(cursor);
  const firstWeekday = (monthStart.getDay() + 6) % 7; // Mon=0
  const daysInMonth = new Date(cursor.getFullYear(), cursor.getMonth() + 1, 0).getDate();
  const daysInPrev = new Date(cursor.getFullYear(), cursor.getMonth(), 0).getDate();

  const cells = [];
  for (let i = firstWeekday - 1; i >= 0; i--) {
    cells.push({ day: daysInPrev - i, out: true });
  }
  for (let d = 1; d <= daysInMonth; d++) {
    const date = new Date(cursor.getFullYear(), cursor.getMonth(), d);
    const iso = toIso(date);
    const past = date < today;
    const beyond = date > maxDate;
    cells.push({
      day: d, date, iso,
      past: past || beyond,
      partial: isBusy(iso),
      bookings: getByDate(iso),
      today: sameDate(date, today),
      selected: selected === iso,
    });
  }
  while (cells.length % 7 !== 0) {
    const d = cells.length - firstWeekday - daysInMonth + 1;
    cells.push({ day: d, out: true });
  }

  const prevMonth = () => {
    const next = new Date(cursor.getFullYear(), cursor.getMonth() - 1, 1);
    if (next >= startOfMonth(today)) setCursor(next);
  };
  const nextMonth = () => {
    const next = new Date(cursor.getFullYear(), cursor.getMonth() + 1, 1);
    if (next <= startOfMonth(maxDate)) setCursor(next);
  };
  const canPrev = startOfMonth(cursor) > startOfMonth(today);
  const canNext = startOfMonth(cursor) < startOfMonth(maxDate);

  const pick = (cell) => {
    if (cell.out || cell.past) return;
    setSelected(cell.iso);
  };

  return (
    <div className="cal-panel">
      <div className="cal-head">
        <div className="cal-month">
          {t.months[cursor.getMonth()]}
          <span className="yr">{cursor.getFullYear()}</span>
        </div>
        <div className="cal-nav">
          <button onClick={prevMonth} disabled={!canPrev} aria-label={t.prev}>←</button>
          <button onClick={nextMonth} disabled={!canNext} aria-label={t.next}>→</button>
        </div>
      </div>
      <div className="cal-legend">
        <span><span className="dot free"></span>{t.legend_free}</span>
        <span><span className="dot partial"></span>{t.legend_busy}</span>
        <span><span className="dot sel"></span>{t.legend_sel}</span>
        <span><span className="dot past"></span>{t.legend_past}</span>
      </div>
      <div className="cal-grid" role="grid">
        {t.weekdays.map((w) => <div key={w} className="cal-weekday">{w}</div>)}
        {cells.map((c, i) => {
          if (c.out) return <div key={i} className="cal-cell out"></div>;
          const cls = ['cal-cell'];
          if (c.past) cls.push('past');
          else if (c.partial) cls.push('partial');
          else cls.push('free');
          if (c.today) cls.push('today');
          if (c.selected) cls.push('selected');
          return (
            <div key={c.iso} className={cls.join(' ')} onClick={() => pick(c)}>
              <div className="daynum">{c.day}</div>
              <div className="cell-meta">
                {c.past ? '—' : c.partial ? t.legend_busy : t.legend_free}
              </div>
              {c.bookings && c.bookings.length > 0 && (
                <div className="cell-bookers">
                  {c.bookings.map((b) => (
                    <div key={b.id} className="cell-booker">{b.name} · кв.{b.apt}</div>
                  ))}
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

function CalendarList({ cursor, setCursor, selected, setSelected, bookings, isBusy, getByDate, t, onBusyClick }) {
  const today = new Date(); today.setHours(0,0,0,0);
  const maxDate = addDays(today, 90);
  const daysInMonth = new Date(cursor.getFullYear(), cursor.getMonth() + 1, 0).getDate();
  const rows = [];
  for (let d = 1; d <= daysInMonth; d++) {
    const date = new Date(cursor.getFullYear(), cursor.getMonth(), d);
    const iso = toIso(date);
    const past = date < today || date > maxDate;
    rows.push({ date, iso, past, partial: isBusy(iso), bookings: getByDate(iso), day: d });
  }
  const prevMonth = () => { const n = new Date(cursor.getFullYear(), cursor.getMonth()-1, 1); if (n >= startOfMonth(today)) setCursor(n); };
  const nextMonth = () => { const n = new Date(cursor.getFullYear(), cursor.getMonth()+1, 1); if (n <= startOfMonth(maxDate)) setCursor(n); };
  const canPrev = startOfMonth(cursor) > startOfMonth(today);
  const canNext = startOfMonth(cursor) < startOfMonth(maxDate);

  const pick = (r) => {
    if (r.past) return;
    setSelected(r.iso);
  };

  return (
    <div className="cal-panel">
      <div className="cal-head">
        <div className="cal-month">{t.months[cursor.getMonth()]}<span className="yr">{cursor.getFullYear()}</span></div>
        <div className="cal-nav">
          <button onClick={prevMonth} disabled={!canPrev}>←</button>
          <button onClick={nextMonth} disabled={!canNext}>→</button>
        </div>
      </div>
      <div className="cal-list">
        {rows.map((r) => {
          const dow = (r.date.getDay() + 6) % 7;
          const cls = ['cal-list-row'];
          if (r.past) cls.push('past');
          else if (r.partial) cls.push('partial');
          if (r.iso === selected) cls.push('selected');
          return (
            <div key={r.iso} className={cls.join(' ')} onClick={() => pick(r)}>
              <div className="cal-list-date">
                {r.day}
                <span className="dow">{t.weekdays[dow]}</span>
              </div>
              <div className={'cal-list-status' + (r.partial ? ' partial' : '')}>
                {r.past ? '—' : r.partial ? t.legend_busy : t.legend_free}
                {r.bookings.map((b) => (
                  <span key={b.id} className="booker">
                    {b.name} · кв. {b.apt}
                  </span>
                ))}
              </div>
              <div className="cal-list-cta">
                {r.past ? '' : t.nav_book + ' →'}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function CalendarTimeline({ cursor, setCursor, selected, setSelected, bookings, isBusy, getByDate, t, onBusyClick }) {
  const today = new Date(); today.setHours(0,0,0,0);
  const maxDate = addDays(today, 90);
  const monthStart = startOfMonth(cursor);
  const firstWeekday = (monthStart.getDay() + 6) % 7;
  const daysInMonth = new Date(cursor.getFullYear(), cursor.getMonth() + 1, 0).getDate();

  const cells = [];
  for (let i = 0; i < firstWeekday; i++) cells.push({ out: true, key: 'pre-' + i });
  for (let d = 1; d <= daysInMonth; d++) {
    const date = new Date(cursor.getFullYear(), cursor.getMonth(), d);
    const iso = toIso(date);
    const past = date < today || date > maxDate;
    cells.push({ day: d, date, iso, past, partial: isBusy(iso), bookings: getByDate(iso), selected: selected === iso });
  }
  while (cells.length % 7 !== 0) cells.push({ out: true, key: 'post-' + cells.length });

  const prevMonth = () => { const n = new Date(cursor.getFullYear(), cursor.getMonth()-1, 1); if (n >= startOfMonth(today)) setCursor(n); };
  const nextMonth = () => { const n = new Date(cursor.getFullYear(), cursor.getMonth()+1, 1); if (n <= startOfMonth(maxDate)) setCursor(n); };
  const canPrev = startOfMonth(cursor) > startOfMonth(today);
  const canNext = startOfMonth(cursor) < startOfMonth(maxDate);

  const pick = (c) => {
    if (c.out || c.past) return;
    setSelected(c.iso);
  };

  return (
    <div className="cal-panel">
      <div className="cal-head">
        <div className="cal-month">{t.months[cursor.getMonth()]}<span className="yr">{cursor.getFullYear()}</span></div>
        <div className="cal-nav">
          <button onClick={prevMonth} disabled={!canPrev}>←</button>
          <button onClick={nextMonth} disabled={!canNext}>→</button>
        </div>
      </div>
      <div className="cal-legend">
        <span><span className="dot free"></span>{t.legend_free}</span>
        <span><span className="dot partial"></span>{t.legend_busy}</span>
        <span><span className="dot sel"></span>{t.legend_sel}</span>
      </div>
      <div className="cal-timeline">
        {t.weekdays.map((w) => <div key={w} className="tl-weekday">{w}</div>)}
        {cells.map((c, i) => {
          if (c.out) return <div key={c.key || i} className="tl-cell out"></div>;
          const cls = ['tl-cell'];
          if (c.past) cls.push('past');
          else if (c.partial) cls.push('partial');
          else cls.push('free');
          if (c.selected) cls.push('selected');
          return (
            <div key={c.iso} className={cls.join(' ')} onClick={() => pick(c)}>
              <div className="daynum">{c.day}</div>
              {c.bookings.length > 0 ? (
                c.bookings.map((b) => (
                  <div key={b.id} className="tl-bar" title={`${b.name} · кв.${b.apt}`}>
                    {b.name} · кв.{b.apt}
                  </div>
                ))
              ) : !c.past && (
                <div className="tl-status">{t.legend_free}</div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, { CalendarGrid, CalendarList, CalendarTimeline });