/* === PHYSL 210 — Schedule (course pacing timeline) === */

function SchedRow({ it, focusId, go }) {
  const status = schStatus(it);
  if (it.kind === 'study') {
    const m = MOD_BY_ID[it.mod], c = modColor(m.hue);
    const isFocus = it.mod === focusId;
    return (
      <div className={`tl-row ${status==='done'?'tl-done':''} ${isFocus?'tl-focus':''}`}>
        <div className="tl-date">{schRange(it.start, it.end)}</div>
        <div className="tl-rail"><span className="tl-dot" style={{ background: status==='done' ? 'var(--muted)' : c.ink }}></span></div>
        <div className="tl-card">
          <div className="tl-study" onClick={() => go('lessons', it.mod)}>
            <div className="mod-emblem" style={{ width:38, height:38, borderRadius:11, background:c.bg, color:c.ink }}><ModuleGlyph m={m} size={20} color={c.ink} /></div>
            <div style={{ flex:1, minWidth:0 }}>
              <div className="disp" style={{ fontSize:16.5, fontWeight:600, lineHeight:1.2 }}>{m.name}</div>
              <div style={{ fontSize:12.5, color:'var(--muted)', marginTop:1 }}>{it.lectures} lectures</div>
            </div>
            {status==='done'
              ? <span className="tag" style={{ background:'oklch(0.93 0.04 165)', color:'var(--p-mint-i)' }}>✓ Done</span>
              : isFocus
                ? <span className="tag" style={{ background:'var(--coral)', color:'#fff' }}>This week</span>
                : <span style={{ color:'var(--muted)', fontSize:18 }}>›</span>}
          </div>
        </div>
      </div>
    );
  }
  if (it.kind === 'exam') {
    const days = schDaysUntil(it.start);
    return (
      <div className={`tl-row ${status==='done'?'tl-done':''}`}>
        <div className="tl-date">{schRange(it.start, it.end)}</div>
        <div className="tl-rail"><span className="tl-dot" style={{ background:'var(--coral)' }}></span></div>
        <div className="tl-card">
          <div className="tl-exam" onClick={() => go('exam')}>
            <div style={{ minWidth:0, flex:1 }}>
              <div style={{ display:'flex', alignItems:'center', gap:10 }}>
                <div className="disp" style={{ fontSize:18, fontWeight:600 }}>{it.title}</div>
                <span className="tag" style={{ background:'var(--coral)', color:'#fff' }}>{it.weight}</span>
              </div>
              <div style={{ fontSize:13.5, color:'var(--ink-soft)', marginTop:3 }}>{it.detail}</div>
            </div>
            {status!=='done' && days>0 && <div style={{ textAlign:'right', flex:'none' }}>
              <div className="stat-num" style={{ fontSize:24, color:'var(--coral-deep)' }}>{days}</div>
              <div style={{ fontSize:11.5, color:'var(--muted)', fontWeight:600 }}>days</div>
            </div>}
          </div>
        </div>
      </div>
    );
  }
  // release / holiday markers
  const dot = it.kind==='release'
    ? { background:'var(--surface)', borderColor:'var(--coral)', boxShadow:'inset 0 0 0 2px var(--coral)' }
    : { background:'var(--line)' };
  return (
    <div className={`tl-row ${status==='done'?'tl-done':''}`}>
      <div className="tl-date">{schRange(it.date)}</div>
      <div className="tl-rail"><span className="tl-dot" style={{ ...dot, border:'4px solid var(--bg)' }}></span></div>
      <div className="tl-card">
        <div className="tl-minor">
          {it.kind==='release' ? <span style={{ color:'var(--coral-deep)' }}>● </span> : <span>○ </span>}
          {it.kind==='release' ? `Module release — ${it.title}` : `${it.title} · holiday`}
        </div>
      </div>
    </div>
  );
}

function SchedulePage({ go }) {
  const focus = SCH_FOCUS ? MOD_BY_ID[SCH_FOCUS] : null;
  const fc = focus ? modColor(focus.hue) : null;
  const examDays = SCH_NEXT_EXAM ? schDaysUntil(SCH_NEXT_EXAM.start) : 0;

  return (
    <div className="page fade">
      <div className="page-head">
        <div className="page-eyebrow">Schedule</div>
        <h1 className="page-title">Course timeline</h1>
      </div>

      {/* summary band */}
      <div className="sched-grid">
        {focus && (
          <div className="panel" style={{ display:'flex', alignItems:'center', gap:18, cursor:'pointer' }} onClick={() => go('lessons', focus.id)}>
            <div className="mod-emblem" style={{ width:54, height:54, background:fc.bg, color:fc.ink }}><ModuleGlyph m={focus} size={29} color={fc.ink} /></div>
            <div style={{ flex:1 }}>
              <div className="page-eyebrow" style={{ color:fc.ink }}>On your plate this week</div>
              <div className="disp" style={{ fontSize:23, fontWeight:600, marginTop:2 }}>{focus.name}</div>
              <div style={{ fontSize:13.5, color:'var(--muted)', marginTop:2 }}>{focus.lectures.length} lectures · keep pace before the next exam</div>
            </div>
            <span className="btn btn-md btn-primary">Open →</span>
          </div>
        )}
        {SCH_NEXT_EXAM && (
          <div className="panel" style={{ display:'flex', flexDirection:'column', cursor:'pointer' }} onClick={() => go('exam')}>
            <div className="tag" style={{ alignSelf:'flex-start', background:'var(--p-sky)', color:'var(--p-sky-i)' }}>Next exam</div>
            <div className="disp" style={{ fontSize:20, fontWeight:600, margin:'12px 0 2px' }}>{SCH_NEXT_EXAM.title}</div>
            <div style={{ fontSize:13, color:'var(--muted)' }}>{schRange(SCH_NEXT_EXAM.start, SCH_NEXT_EXAM.end)} · {SCH_NEXT_EXAM.weight}</div>
            <div style={{ marginTop:'auto', display:'flex', alignItems:'baseline', gap:7, paddingTop:14 }}>
              <span className="stat-num" style={{ fontSize:34, color:'var(--coral)' }}>{examDays}</span>
              <span style={{ fontSize:14, fontWeight:600, color:'var(--muted)' }}>days away</span>
            </div>
          </div>
        )}
      </div>

      {/* term timelines */}
      {SCHEDULE.map((term) => {
        const studies = term.items.filter(i => i.kind==='study');
        const done = studies.filter(i => schStatus(i)==='done').length;
        return (
          <div key={term.term} style={{ marginBottom:14 }}>
            <div style={{ display:'flex', alignItems:'baseline', gap:12, margin:'24px 0 18px' }}>
              <h2 className="disp" style={{ fontSize:24, fontWeight:700, margin:0, letterSpacing:'-.5px' }}>{term.term}</h2>
              <span style={{ fontSize:14, color:'var(--muted)', fontWeight:600 }}>{term.sub}</span>
              <span style={{ marginLeft:'auto', fontSize:13, fontWeight:700, color:'var(--coral-deep)' }}>{done}/{studies.length} topics done</span>
            </div>
            <div className="tl">
              {term.items.map((it, k) => <SchedRow key={k} it={it} focusId={SCH_FOCUS} go={go} />)}
            </div>
          </div>
        );
      })}
    </div>
  );
}
window.SchedulePage = SchedulePage;