function ScriptAll() {
  const D = window.DATA;
  return (
    <div className="script all">
      {D.scriptAll.map((scn) => (
        <div key={scn.n} className="scn-block">
          <div className="scn-head">
            <span className="scn-tag">씬 {scn.n}</span>
            <span className="scn-title">{scn.title}</span>
          </div>
          <hr className="scn-hr" />
          {scn.lines.map((ln, i) => {
            if (ln.kind === 'break') return <div key={i} style={{ height: 8 }} />;
            if (ln.kind === 'action')
              return (
                <p key={i} className="action">
                  {ln.t}
                </p>
              );
            if (ln.kind === 'char')
              return (
                <div key={i} className="char">
                  {ln.t}
                </div>
              );
            if (ln.kind === 'paren')
              return (
                <div key={i} className="paren">
                  {ln.t}
                </div>
              );
            if (ln.kind === 'dial')
              return (
                <div key={i} className="dial">
                  {ln.t}
                </div>
              );
            if (ln.kind === 'mention')
              return (
                <p key={i} className="action mention">
                  {ln.t}
                </p>
              );
            return null;
          })}
        </div>
      ))}
    </div>
  );
}

function ScriptViewer() {
  const D = window.DATA;
  const [tab, setTab] = React.useState('cur');
  return (
    <div
      className={'panel panel-script' + (React.useContext(FSContext).fs === 'script' ? ' 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('script')}
          >
            {I.expand}
          </button>
        </div>
      </div>

      {tab === 'all' ? (
        <ScriptAll />
      ) : (
        <VSplit initial={360} min={120} max={1400}>
          <div className="script">
            <div>
              <span className="scn-tag">씬 {D.scene.no}</span>{' '}
              <b style={{ color: 'var(--ink)', marginLeft: 4 }}>{D.scene.interior}</b>
            </div>
            <div className="slug" />
            <p className="action">{D.scene.desc}</p>

            <div className="char">민재</div>
            <div className="paren">(숨을 헐떡이며, 뒤를 돌아보며)</div>
            <p className="dial">이렇게 계속 도망칠 순 없어. 놈들이 도처에 있다고.</p>

            <p className="action">
              지우가 멈춰 서서 휴대폰을 꺼낸다. 화면이 그녀의 얼굴을 비춘다 — 결연함과 두려움이
              뒤섞여 있다.
            </p>

            <div className="char">지우</div>
            <p className="dial">
              그럼 도망치기를 멈추는 거야. 세이프하우스로 가야해, 동쪽으로 두 블록.
            </p>

            <div className="char">민재</div>
            <p className="dial">우릴 찾았어. 움직여. 지금!</p>

            <p className="action">
              둘은 골목길을 질주하기 시작한다. 카메라가 따라가며 쓰레기통과 잔해 사이를 헤쳐나가는
              모습을 포착한다. 헤드라이트가 뒤쪽 모퉁이를 휩쓸고 지나간다.
            </p>
          </div>

          <div className="notes-wrap">
            <div className="notes-h">
              {I.msg}
              <span>제작진 노트</span>
              <span className="ct">{D.notes.length}개</span>
            </div>
            {D.notes.map((n, i) => (
              <div key={i} className="note">
                <div className="who">
                  <span className="av" style={{ background: n.color }}>
                    {n.av}
                  </span>
                  <div>
                    <div className="nm">{n.who}</div>
                    <span
                      className="role-chip"
                      style={{ background: n.color + '22', color: n.color }}
                    >
                      {n.role}
                    </span>
                  </div>
                </div>
                <div className="body">{n.txt}</div>
                <time>{n.date}</time>
              </div>
            ))}
          </div>
        </VSplit>
      )}
    </div>
  );
}
window.ScriptViewer = ScriptViewer;