// SceneFrame — renders the conte image for a sceneId, with a clean
// scene-number/title fallback when the image is missing or fails to load.
function SceneFrame({ id, title, shot, fit = 'cover' }) {
  const [err, setErr] = React.useState(false);
  const src = window.sceneImg?.(id) ?? null;
  React.useEffect(() => {
    setErr(false);
  }, [src]);
  if (!src || err) {
    return (
      <div className="sb-fallback">
        <div className="sb-fb-mark">🎬</div>
        <div className="sb-fb-scn">씬 {id}</div>
        {(title || shot) && <div className="sb-fb-sub">{title || shot}</div>}
      </div>
    );
  }
  return (
    <img
      className={'sb-img fit-' + fit}
      src={src}
      alt={'씬 ' + id + (title ? ' · ' + title : '')}
      loading="lazy"
      draggable="false"
      onError={() => setErr(true)}
    />
  );
}
window.SceneFrame = SceneFrame;

function ContiAllGrid({ active, onPick }) {
  const D = window.DATA;
  return (
    <div className="conti-all">
      {D.storyboard.map((s) => (
        <div
          key={s.id}
          className={'conti-card' + (active === s.id ? ' on' : '')}
          onClick={() => onPick && onPick(s.id)}
        >
          <div className="ccard-prev">
            <SceneFrame id={s.id} title={s.title} shot={s.shot} fit="cover" />
            <span className="ccard-scn">씬 {s.id}</span>
          </div>
          <div className="ccard-foot">
            <div className="cft">
              씬 {s.id} · {s.title}
            </div>
            <div className="cfs">
              {s.shot} · {s.loc}
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

function Continuity() {
  const D = window.DATA;
  const [active, setActive] = React.useState('12A');
  const [tab, setTab] = React.useState('cur');
  const cur = D.storyboard.find((s) => s.id === active) || D.storyboard[0];
  return (
    <div
      className={
        'panel bordered-r panel-conti' + (React.useContext(FSContext).fs === 'conti' ? ' fs' : '')
      }
    >
      <div className="panel-h">
        <span className="dot-r" />
        <span className="t">스토리보드 뷰어</span>
        <div className="right">
          <div className="seg">
            <span className={'s' + (tab === 'cur' ? ' on' : '')} onClick={() => setTab('cur')}>
              현재 스토리보드
            </span>
            <span className={'s' + (tab === 'all' ? ' on' : '')} onClick={() => setTab('all')}>
              전체 스토리보드
            </span>
          </div>
          <button
            className="icon-btn naked"
            title="전체화면 보기"
            onClick={() => React.useContext(FSContext).toggleFs('conti')}
          >
            {I.expand}
          </button>
        </div>
      </div>

      {tab === 'all' ? (
        <ContiAllGrid
          active={active}
          onPick={(id) => {
            setActive(id);
            setTab('cur');
          }}
        />
      ) : (
        <div className="conti-body">
          <VSplit initial={420} min={120} max={1400}>
            <div className="conti-stage">
              <SceneFrame id={cur.id} title={cur.title} shot={cur.shot} fit="contain" />
              <span className="live-pill">촬영중</span>
              <div className="stage-meta">
                <span className="sm-scn">씬 {cur.id}</span>
                <span className="sm-title">{cur.title}</span>
                <span className="sm-shot">{cur.shot}</span>
              </div>
            </div>

            <div className="shot-note">
              <div className="l">{I.edit}촬영 노트</div>
              <div className="t">{D.scene.note}</div>
            </div>
          </VSplit>

          <div className="conti-foot pinned">
            <div className="slate-row">
              {D.storyboard.map((s) => (
                <div
                  key={s.id}
                  className={'slate-card' + (active === s.id ? ' on' : '')}
                  onClick={() => setActive(s.id)}
                  title={'씬 ' + s.id + ' · ' + s.title}
                >
                  <div className="sc-thumb">
                    <SceneFrame id={s.id} title={s.title} shot={s.shot} fit="cover" />
                  </div>
                  <div className="sc-info">
                    <div className="scn">씬 {s.id}</div>
                    <div className="typ">{s.shot}</div>
                  </div>
                </div>
              ))}
            </div>
            <div className="pager">
              <button className="ar">
                {I.chevL}
                <span>Previous</span>
              </button>
              {[1, 2, 3, 4, 5, 6, 7, 8].map((p) => (
                <button key={p} className={'pg' + (p === 1 ? ' active' : '')}>
                  {p}
                </button>
              ))}
              <button className="ar">
                <span>Next</span>
                {I.chevR}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
window.Continuity = Continuity;