// MY genie — Phase 26 · Step 4 · Calendar + Todos.
//
// Route: #/calendar (optionally #/calendar/YYYY-MM-DD deep-links a day —
// read once on mount; live selection stays local so the app's
// scroll-to-top-on-sub1 effect never yanks the page).
//
// Design contract (Ink & Cobalt, ReUI-inspired structure):
//   • Month grid, Monday-first, formal and quiet — no rainbow chips.
//   • Selected day = cobalt ring; today = ink dot under the number.
//   • Right rail = day panel with a Fraunces serif date numeral (the one
//     editorial moment), todo rows with owner avatars, formal checkboxes.
//   • Interactions: month nav, day select (click + arrow keys), toggle
//     todo (toast via central ToastHost), add todo for the selected day.

function _calIso(d) {
  return d.getFullYear() + '-' +
    String(d.getMonth() + 1).padStart(2, '0') + '-' +
    String(d.getDate()).padStart(2, '0');
}

function _calParse(iso) {
  if (!/^\d{4}-\d{2}-\d{2}$/.test(iso || '')) return null;
  const parts = iso.split('-');
  return new Date(Number(parts[0]), Number(parts[1]) - 1, Number(parts[2]));
}

const CAL_WEEKDAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];

function CalendarWorkspace({ data, subId }) {
  const today = React.useMemo(() => { const d = new Date(); d.setHours(0, 0, 0, 0); return d; }, []);
  const [sel, setSel] = React.useState(() => _calParse(subId) || today);
  const [viewMonth, setViewMonth] = React.useState(() => {
    const base = _calParse(subId) || today;
    return new Date(base.getFullYear(), base.getMonth(), 1);
  });
  const [todos, setTodos] = React.useState(() => (data.todos || []).map(t => Object.assign({}, t)));
  const [draft, setDraft] = React.useState('');

  const selIso = _calIso(sel);
  const dayTodos = todos.filter(t => t.date === selIso);
  const openCount = todos.filter(t => !t.done).length;
  const monthOpen = todos.filter(t => {
    if (t.done) return false;
    const d = _calParse(t.date);
    return d && d.getMonth() === viewMonth.getMonth() && d.getFullYear() === viewMonth.getFullYear();
  }).length;

  // 6×7 Monday-first grid for the viewed month
  const cells = React.useMemo(() => {
    const first = new Date(viewMonth.getFullYear(), viewMonth.getMonth(), 1);
    const offset = (first.getDay() + 6) % 7;
    const start = new Date(first);
    start.setDate(first.getDate() - offset);
    const out = [];
    for (let i = 0; i < 42; i++) {
      const d = new Date(start);
      d.setDate(start.getDate() + i);
      out.push(d);
    }
    return out;
  }, [viewMonth]);

  function shiftMonth(delta) {
    setViewMonth(new Date(viewMonth.getFullYear(), viewMonth.getMonth() + delta, 1));
  }

  function selectDay(d) {
    setSel(d);
    if (d.getMonth() !== viewMonth.getMonth() || d.getFullYear() !== viewMonth.getFullYear()) {
      setViewMonth(new Date(d.getFullYear(), d.getMonth(), 1));
    }
  }

  function onGridKey(e) {
    const deltas = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 };
    if (!(e.key in deltas)) return;
    e.preventDefault();
    const next = new Date(sel);
    next.setDate(sel.getDate() + deltas[e.key]);
    selectDay(next);
  }

  function toggleTodo(id) {
    setTodos(prev => prev.map(t => t.id === id ? Object.assign({}, t, { done: !t.done }) : t));
    const t = todos.find(x => x.id === id);
    if (t && window.MYGENI_TOAST) {
      window.MYGENI_TOAST.push((t.done ? 'Todo reopened — ' : 'Todo completed — ') + t.text.slice(0, 40));
    }
  }

  function addTodo(e) {
    e.preventDefault();
    const text = draft.trim();
    if (!text) return;
    setTodos(prev => prev.concat([{
      id: 'td-user-' + Date.now(),
      date: selIso,
      text: text,
      owner: (window.MYGENI_PEOPLE && window.MYGENI_PEOPLE.currentUser().name) || 'Alireza Izadi',
      done: false,
    }]));
    setDraft('');
    if (window.MYGENI_TOAST) window.MYGENI_TOAST.push('Todo added to ' + _calIso(sel));
  }

  const monthName = viewMonth.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
  const selDayName = sel.toLocaleDateString('en-US', { weekday: 'long' });
  const selMonthDay = sel.toLocaleDateString('en-US', { month: 'short' });
  const isSelToday = _calIso(sel) === _calIso(today);

  return (
    <main className="main cal-main" data-screen-label="16 Calendar">
      <div className="page-header-row">
        <div>
          <h1 className="greeting">Calendar</h1>
          <div className="date-line">
            {openCount} open · <b>{monthOpen} this month</b> · todos live with your days
          </div>
        </div>
        <div style={{ display: 'flex', gap: 10 }}>
          <button className="btn btn-white btn-sm" onClick={() => { setSel(today); setViewMonth(new Date(today.getFullYear(), today.getMonth(), 1)); }}>
            <Icon name="calendar" size={14} />
            <span>Today</span>
          </button>
        </div>
      </div>

      <div className="cal-layout">
        {/* ---------- Month grid ---------- */}
        <div className="card cal-card">
          <div className="cal-toolbar">
            <div className="cal-month">
              <button className="cal-nav" onClick={() => shiftMonth(-1)} aria-label="Previous month"><Icon name="chevronLeft" size={16} /></button>
              <span className="cal-month-name">{monthName}</span>
              <button className="cal-nav" onClick={() => shiftMonth(1)} aria-label="Next month"><Icon name="chevronRight" size={16} /></button>
            </div>
            <span className="cal-hint mono">arrow keys move the selected day</span>
          </div>

          <div className="cal-weekdays">
            {CAL_WEEKDAYS.map(w => <span key={w} className="cal-wd">{w}</span>)}
          </div>

          <div className="cal-grid" tabIndex={0} onKeyDown={onGridKey} aria-label="Month grid">
            {cells.map((d, i) => {
              const iso = _calIso(d);
              const out = d.getMonth() !== viewMonth.getMonth();
              const isToday = iso === _calIso(today);
              const isSel = iso === selIso;
              const items = todos.filter(t => t.date === iso);
              const openItems = items.filter(t => !t.done);
              return (
                <button
                  key={i}
                  className={
                    'cal-cell' +
                    (out ? ' cal-out' : '') +
                    (isToday ? ' cal-today' : '') +
                    (isSel ? ' cal-sel' : '')
                  }
                  onClick={() => selectDay(d)}
                  aria-label={d.toDateString() + (items.length ? ' · ' + items.length + ' todos' : '')}
                >
                  <span className="cal-num">{d.getDate()}</span>
                  {isToday && <span className="cal-today-dot" aria-hidden="true" />}
                  {items.slice(0, 2).map(t => (
                    <span key={t.id} className={'cal-chip' + (t.done ? ' cal-chip-done' : '')}>{t.text}</span>
                  ))}
                  {items.length > 2 && <span className="cal-more">+{items.length - 2} more</span>}
                  {items.length > 0 && openItems.length > 0 && <span className="cal-count">{openItems.length}</span>}
                </button>
              );
            })}
          </div>
        </div>

        {/* ---------- Day panel ---------- */}
        <div className="card cal-day-panel">
          <div className="cal-day-head">
            <div className="cal-day-num serif">{sel.getDate()}</div>
            <div className="cal-day-meta">
              <div className="cal-day-weekday">{selDayName}{isSelToday ? ' · Today' : ''}</div>
              <div className="cal-day-month">{selMonthDay} {sel.getFullYear()}</div>
            </div>
          </div>

          <div className="cal-todo-list">
            {dayTodos.length === 0 && (
              <div className="cal-empty">Nothing scheduled. Add the first todo below.</div>
            )}
            {dayTodos.map(t => (
              <div key={t.id} className={'cal-todo' + (t.done ? ' cal-todo-done' : '')}>
                <button
                  className="cal-check"
                  onClick={() => toggleTodo(t.id)}
                  aria-label={(t.done ? 'Reopen: ' : 'Complete: ') + t.text}
                  aria-pressed={t.done}
                >
                  {t.done && <Icon name="check" size={11} strokeWidth={3} />}
                </button>
                <div className="cal-todo-body">
                  <div className="cal-todo-text">{t.text}</div>
                  <div className="cal-todo-owner">
                    <Avatar name={t.owner} size="xs" interactive={false} />
                    <span>{t.owner}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>

          <form className="cal-add" onSubmit={addTodo}>
            <input
              className="cal-add-input"
              value={draft}
              onChange={e => setDraft(e.target.value)}
              placeholder={'Add a todo · ' + selMonthDay + ' ' + sel.getDate()}
              aria-label="Add a todo for the selected day"
            />
            <button className="btn btn-primary btn-sm" type="submit" disabled={!draft.trim()}>
              <Icon name="plus" size={14} />
              <span>Add</span>
            </button>
          </form>
        </div>
      </div>
    </main>
  );
}

Object.assign(window, { CalendarWorkspace });