// Mobile — distinct focused app feel.
// Top: month switcher + week strip. Body: month grid (compact) or week list. FAB: quick add.

const { useState: mUseState, useMemo: mUseMemo, useEffect: mUseEffect } = React;
const M = window.CAL_UTILS;

function MobileMonth({ year, month0, selectedKey, onSelect }) {
  const cells = M.monthGrid(year, month0);
  const todayKey = M.keyOf(new Date());
  const events = window.CALENDAR_DATA.EVENTS;
  const cats = window.CALENDAR_DATA.CATEGORIES;

  return (
    <div className="m-month">
      <div className="m-dow-row">
        {M.DOW_NARROW.map((d, i) => <div key={i} className="m-dow">{d}</div>)}
      </div>
      <div className="m-grid">
        {cells.map((date) => {
          const k = M.keyOf(date);
          const inMonth = date.getMonth() === month0;
          const isToday = k === todayKey;
          const isSel = k === selectedKey;
          const evts = window.CAL_UTILS.eventsOnDate(events, k);
          const ribbon = evts.find(e => e.allDay);
          const dots = evts.filter(e => !e.allDay).slice(0, 3);
          // Multi-day: show full title only on the first day or week-start (Mon).
          const ribbonIsStart = ribbon && (ribbon.date === k || M.dowMon(date) === 0);
          const ribbonIsTail = ribbon && !ribbonIsStart;
          return (
            <button
              key={k}
              onClick={() => onSelect(k)}
              className={`m-cell ${inMonth ? "" : "out"} ${isToday ? "today" : ""} ${isSel ? "sel" : ""}`}
            >
              <span className="m-num">{date.getDate()}</span>
              {ribbon && (
                <span
                  className={`m-ribbon ${ribbonIsTail ? "tail" : ""}`}
                  style={{ background: cats[ribbon.cat].soft, color: cats[ribbon.cat].ink }}
                >
                  {ribbonIsStart ? window.CAL_UTILS.clipTitle(ribbon.title, 8) : ""}
                </span>
              )}
              {!ribbon && dots.length > 0 && (
                <span className="m-dots">
                  {dots.map((e, i) => (
                    <span key={i} className="m-d" style={{ background: cats[e.cat].dot }} />
                  ))}
                </span>
              )}
            </button>
          );
        })}
      </div>
    </div>
  );
}

function MobileWeek({ anchorKey, onSelect, onPickDay }) {
  const anchor = M.parseKey(anchorKey);
  const offset = M.dowMon(anchor);
  const start = M.addDays(anchor, -offset);
  const days = Array.from({ length: 7 }, (_, i) => M.addDays(start, i));
  const cats = window.CALENDAR_DATA.CATEGORIES;
  const todayKey = M.keyOf(new Date());

  return (
    <div className="m-week">
      {days.map((date) => {
        const k = M.keyOf(date);
        const evts = window.CAL_UTILS.sortEvents(window.CAL_UTILS.eventsOnDate(window.CALENDAR_DATA.EVENTS, k));
        const isToday = k === todayKey;
        return (
          <div key={k} className={`m-week-day ${isToday ? "today" : ""}`} onClick={() => onPickDay(k)}>
            <div className="m-week-date">
              <div className="m-week-dow">{M.DOW_SHORT[M.dowMon(date)]}</div>
              <div className="m-week-num">{date.getDate()}</div>
            </div>
            <div className="m-week-evts">
              {evts.length === 0 && <div className="m-week-empty">—</div>}
              {evts.map((e) => (
                <div key={e.id} className="m-week-evt" style={{ borderLeftColor: cats[e.cat].dot }}>
                  <div className="m-week-time">
                    {e.allDay ? "All day" : e.start}
                  </div>
                  <div className="m-week-title">{e.title}</div>
                </div>
              ))}
            </div>
          </div>
        );
      })}
    </div>
  );
}

function MobileDaySheet({ dateKey, onClose }) {
  const habitState = window.useHabits();
  if (!dateKey) return null;
  const date = M.parseKey(dateKey);
  const evts = M.sortEvents(window.CAL_UTILS.eventsOnDate(window.CALENDAR_DATA.EVENTS, dateKey));
  const cats = window.CALENDAR_DATA.CATEGORIES;
  const habits = window.CALENDAR_DATA.HABITS;

  return (
    <div className="m-sheet-backdrop" onClick={onClose}>
      <div className="m-sheet" onClick={(e) => e.stopPropagation()}>
        <div className="m-sheet-handle" />
        <div className="m-sheet-head">
          <div className="m-sheet-dow">{M.DOW_LONG[M.dowMon(date)]}</div>
          <div className="m-sheet-date">
            <span className="m-sheet-day">{date.getDate()}</span>
            <span className="m-sheet-month">{M.MONTH_NAMES[date.getMonth()]}</span>
          </div>
        </div>

        <div className="m-sheet-habits">
          {habits.map((h) => {
            const done = habitState.done(h.id, dateKey);
            return (
              <button
                type="button"
                key={h.id}
                className={`m-habit ${done ? "done" : ""}`}
                onClick={() => habitState.toggle(h.id, dateKey)}
                aria-pressed={done}
              >
                <span className="m-habit-mark" style={{ background: done ? h.color : "transparent", borderColor: h.color }} />
                <span>{h.label}</span>
              </button>
            );
          })}
        </div>

        <div className="m-sheet-body">
          <button className="m-sheet-add" onClick={() => window.openEventEditor({ defaultDate: dateKey })}>
            + Add event
          </button>
          {evts.length === 0 && <div className="m-sheet-empty">A clear day.</div>}
          {evts.map((e) => (
            <div key={e.id} className="m-sheet-evt" onClick={() => window.openEventEditor({ initial: e })} style={{ cursor: "pointer" }}>
              <div className="m-sheet-time">
                {e.allDay ? "—" : e.start}
                {!e.allDay && <div className="m-sheet-end">{e.end}</div>}
              </div>
              <div className="m-sheet-bar" style={{ background: cats[e.cat].dot }} />
              <div>
                <div className="m-sheet-title">{e.title}</div>
                <div className="m-sheet-cat" style={{ color: cats[e.cat].ink }}>{cats[e.cat].label}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

window.MobileBits = { MobileMonth, MobileWeek, MobileDaySheet };