function MiniCal() {
  const today = 20; // 2026-05-20 (Wed)
  // First of May 2026 = Friday (col 5). Leading: Sun Apr 26..Thu Apr 30 (5 cells)
  const lead = [26, 27, 28, 29, 30].map((n) => ({ n, out: true }));
  const may = Array.from({ length: 31 }, (_, i) => ({
    n: i + 1,
    today: i + 1 === today,
    shoot: [3, 7, 10, 14, 17, 20, 22, 27].includes(i + 1),
  }));
  const trail = [1, 2, 3, 4, 5, 6].map((n) => ({ n, out: true }));
  const cells = [...lead, ...may, ...trail].slice(0, 42);
  return (
    <div className="cal">
      <div className="cal-h">
        <span>{I.cal}</span>
        <span>May 2026</span>
        <div className="nav">
          <button>{I.chevL}</button>
          <button>{I.chevR}</button>
        </div>
      </div>
      <div className="cal-grid">
        {['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map((d, i) => (
          <div key={d} className="dow" style={i === 0 ? { color: 'var(--red)' } : undefined}>
            {d}
          </div>
        ))}
        {cells.map((c, i) => {
          const dow = i % 7;
          let cls = 'd';
          if (c.out) cls += ' out';
          if (c.today) cls += ' today';
          if (c.shoot) cls += ' shoot';
          if (dow === 0 && !c.out && !c.today) cls += ' sun';
          return (
            <div key={i} className={cls}>
              {c.n}
            </div>
          );
        })}
      </div>
      <div className="cal-legend">촬영일정</div>
    </div>
  );
}

function TimelineView() {
  const steps = window.DATA.timelineSteps;
  return (
    <div className="timeline-view">
      <div className="tv-h">
        <span className="t">제작 타임라인</span>
        <span className="ct-pill">{steps.length}개 일정 중 0단계</span>
      </div>
      <ol className="tv-list">
        {steps.map((s, i) => (
          <li key={i} className="tv-step">
            <span className="tv-dot" />
            <div className="tv-body">
              {s.sceneId && (
                <div className="tv-thumb">
                  <SceneFrame id={s.sceneId} fit="cover" />
                </div>
              )}
              <div className="tv-phase">{s.phase}</div>
              <div className="tv-meta">
                {s.scene} · {s.date}
              </div>
              <div className="tv-loc">{s.loc}</div>
            </div>
          </li>
        ))}
      </ol>
    </div>
  );
}

function Schedule() {
  const D = window.DATA;
  const [tab, setTab] = React.useState('daily');
  const tones = ['purple', 'orange', 'green', 'blue'];
  const icons = ['📅', '👗', '🧰', '🗺'];
  return (
    <div
      className={'panel panel-sched' + (React.useContext(FSContext).fs === 'sched' ? ' fs' : '')}
    >
      <div className="panel-h">
        <span className="dot-r" />
        <span className="t">제작 일정 관리</span>
        <div className="right">
          <button
            className="icon-btn naked"
            title="전체화면 보기"
            onClick={() => React.useContext(FSContext).toggleFs('sched')}
          >
            {I.expand}
          </button>
        </div>
      </div>

      <div className="sched-tabs">
        <div
          className={'sched-tab' + (tab === 'daily' ? ' on' : '')}
          onClick={() => setTab('daily')}
        >
          일일촬영표
        </div>
        <div className={'sched-tab' + (tab === 'time' ? ' on' : '')} onClick={() => setTab('time')}>
          타임라인
        </div>
      </div>

      {tab === 'time' ? (
        <TimelineView />
      ) : (
        <div className="sched-body">
          <div className="sched-l">
            <MiniCal />
            <div className="misc">
              <h4>기타 제작 일정</h4>
              <div className="sub">일일촬영표 외 이벤트</div>
              {D.otherEvents.map((e, i) => (
                <div key={i} className={'event ' + tones[i % 4]}>
                  <div className="t-row">
                    <span>{icons[i % 4]}</span>
                    <span>{e.title}</span>
                  </div>
                  <div className="r">
                    {I.clock}
                    <span>{e.when}</span>
                  </div>
                  <div className="r">
                    {I.pin}
                    <span>{e.where}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="sched-r">
            <div className="dailyplan-h">
              <span className="dot" />
              <div>
                <div className="t">일일 촬영 계획</div>
                <div className="d">{D.date}</div>
              </div>
              <div className="right">
                <button className="icon-btn naked" title="전체화면 보기">
                  {I.expand}
                </button>
              </div>
            </div>
            <div className="dailyplan-list">
              {D.schedule.map((s, i) => {
                const cls = s.kind === 'ghost' ? 'done' : s.kind === 'now' ? 'live' : '';
                const sceneImage = s.scene ? window.sceneImg?.(s.scene) : null;
                return (
                  <div key={i} className={'slot ' + cls}>
                    {sceneImage && (
                      <div className="slot-thumb">
                        <SceneFrame id={s.scene} fit="cover" />
                      </div>
                    )}
                    <div className="slot-main">
                      <div className="time">
                        <span className="ic">{I.clock}</span>
                        {s.time}
                      </div>
                      <div className="scn">씬 {s.scene || '—'}</div>
                      <div className="loc">
                        <span className="ic">{I.pin}</span>
                        {s.loc}
                      </div>
                      <div className="dur">
                        <span className="ic">{I.clock}</span>
                        {s.dur}
                      </div>
                    </div>
                    {s.kind === 'ghost' && <span className="check">{I.check}</span>}
                    {s.kind === 'now' && <span className="badge-live">촬영중</span>}
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
window.Schedule = Schedule;