/* Track & Train — Calendar tab */

function CalendarView({ data, onAddSession, onUpdateSession, onDeleteSession, onAddType }) {
  const today = new Date();
  const [view, setView] = useState({ y: today.getFullYear(), m: today.getMonth() });
  const [selectedDay, setSelectedDay] = useState(null);   // 'YYYY-MM-DD'
  const [editing, setEditing] = useState(null);           // { draft, isNew }
  const { ask, ui: confirmUI } = useConfirm();

  const typeById = useMemo(() => Object.fromEntries(data.types.map(t => [t.id, t])), [data.types]);

  // sessions grouped by date key
  const byDay = useMemo(() => {
    const m = {};
    for (const s of data.sessions) { (m[s.date] = m[s.date] || []).push(s); }
    return m;
  }, [data.sessions]);

  const cells = useMemo(() => monthMatrix(view.y, view.m), [view]);
  const tKey = todayKey();

  const go = (delta) => {
    setView(v => {
      const d = new Date(v.y, v.m + delta, 1);
      return { y: d.getFullYear(), m: d.getMonth() };
    });
  };
  const goToday = () => setView({ y: today.getFullYear(), m: today.getMonth() });

  const openDay = (key) => setSelectedDay(key);

  const startAdd = (dayKey) => {
    setEditing({
      isNew: true,
      draft: { id: uid('ses'), date: dayKey, typeId: data.types[0]?.id || null, feeling: null, notes: '', createdAt: Date.now() },
    });
  };
  const startEdit = (session) => setEditing({ isNew: false, draft: { ...session } });

  const saveSession = () => {
    const d = editing.draft;
    if (!d.typeId) return;
    if (editing.isNew) onAddSession(d); else onUpdateSession(d);
    setEditing(null);
  };

  const removeSession = async (session) => {
    const ok = await ask({ title: t('confirm_del_session_title'), message: t('confirm_del_session_msg'), confirmLabel: t('delete'), danger: true });
    if (ok) { onDeleteSession(session.id); setEditing(null); }
  };

  const daySessions = selectedDay ? (byDay[selectedDay] || []).slice().sort((a,b) => a.createdAt - b.createdAt) : [];
  const mName = monthName(view.m);

  return (
    <div className="fade-in">
      {/* Month header */}
      <div className="cal-head">
        <div className="cal-month">{mName}<span className="yr">{view.y}</span></div>
        <button className="cal-today-btn" onClick={goToday}>{t('cal_today')}</button>
        <button className="cal-nav" onClick={() => go(-1)} aria-label="‹"><Icon.chevL/></button>
        <button className="cal-nav" onClick={() => go(1)} aria-label="›"><Icon.chevR/></button>
      </div>

      {/* Grid */}
      <div className="cal-grid">
        <div className="cal-dow">{dowHeader().map((d, i) => <span key={i}>{d}</span>)}</div>
        <div className="cal-weeks">
          {cells.map((d, i) => {
            const key = toKey(d);
            const inMonth = d.getMonth() === view.m;
            const sess = byDay[key] || [];
            const isToday = key === tKey;
            const dots = sess.slice(0, 4);
            return (
              <button
                key={i}
                className={'cal-cell' + (inMonth ? '' : ' muted-day') + (isToday ? ' today' : '') + (sess.length ? ' has' : '')}
                onClick={() => openDay(key)}
              >
                <span className="cal-num">{d.getDate()}</span>
                <span className="cal-dots">
                  {dots.map((s, j) => (
                    <span key={j} className="cal-dot" style={{ background: typeById[s.typeId]?.color || 'var(--ink-3)' }}></span>
                  ))}
                  {sess.length > 4 && <span className="cal-more">+{sess.length - 4}</span>}
                </span>
              </button>
            );
          })}
        </div>
      </div>

      <p className="muted small" style={{ textAlign: 'center', marginTop: 14 }}>
        {t('cal_hint')}
      </p>

      {/* Quick-add FAB → today */}
      <button className="btn-fab" onClick={() => startAdd(tKey)} aria-label={t('add_workout')}><Icon.plus/></button>

      {/* Day sheet */}
      <Sheet
        open={!!selectedDay && !editing}
        onClose={() => setSelectedDay(null)}
        title={selectedDay ? capitalize(formatLongDate(selectedDay)) : ''}
        action={selectedDay && relativeDay(selectedDay)
          ? <span className="chip accent" style={{ marginRight: 2 }}>{relativeDay(selectedDay)}</span> : null}
      >
        {daySessions.length === 0 ? (
          <div style={{ padding: '8px 0 4px', textAlign: 'center' }}>
            <p className="muted" style={{ fontSize: 13.5, margin: '4px 0 18px' }}>{t('day_no_session')}</p>
          </div>
        ) : (
          <div style={{ marginBottom: 16 }}>
            {daySessions.map(s => {
              const ty = typeById[s.typeId];
              const f = feelingOf(s.feeling);
              return (
                <button key={s.id} className="session-card" onClick={() => startEdit(s)}>
                  <span className="sc-bar" style={{ background: ty?.color || 'var(--ink-3)' }}></span>
                  <span className="sc-main">
                    <span className="sc-top">
                      <span className="sc-type">{ty?.name || t('deleted_type')}</span>
                      {f && <span className="sc-feel">{f.emoji}</span>}
                    </span>
                    {s.notes ? <span className="sc-notes">{s.notes}</span> : <span className="sc-empty-notes">{t('no_notes')}</span>}
                  </span>
                </button>
              );
            })}
          </div>
        )}
        <button className="btn accent block lg" onClick={() => startAdd(selectedDay)}>
          <Icon.plusSm/> {t('add_workout')}
        </button>
      </Sheet>

      {/* Session editor sheet */}
      <Sheet
        open={!!editing}
        onClose={() => setEditing(null)}
        title={editing ? (editing.isNew ? t('new_workout') : t('edit_title')) : ''}
        action={editing && !editing.isNew
          ? <button className="icon-btn" style={{ color: 'var(--ink-3)' }} onClick={() => removeSession(editing.draft)} aria-label={t('delete')}><Icon.trash/></button>
          : null}
      >
        {editing && (
          <Fragment>
            <p className="day-date" style={{ margin: '-4px 0 16px' }}>{capitalize(formatLongDate(editing.draft.date))}</p>
            <SessionForm
              types={data.types}
              draft={editing.draft}
              onChange={(d) => setEditing(e => ({ ...e, draft: d }))}
              onAddType={onAddType}
            />
            <button className="btn accent block lg" style={{ marginTop: 22 }} disabled={!editing.draft.typeId} onClick={saveSession}>
              {editing.isNew ? t('save_session') : t('save_changes')}
            </button>
          </Fragment>
        )}
      </Sheet>

      {confirmUI}
    </div>
  );
}

const capitalize = (s) => s ? s.charAt(0).toUpperCase() + s.slice(1) : s;

Object.assign(window, { CalendarView, capitalize });