function StatusMenu({ onPick, onClose }) {
  return (
    <>
      <div className="menu-backdrop" onClick={onClose} />
      <div className="status-menu">
        <div className="mi done" onClick={() => onPick('촬영완료')}>
          {I.check}촬영완료
        </div>
        <div className="mi live" onClick={() => onPick('촬영중')}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
            <path d="M8 5v14l11-7z" />
          </svg>
          촬영중
        </div>
        <div className="mi delay" onClick={() => onPick('촬영연기')}>
          {I.clock}촬영연기
        </div>
        <div className="mi del" onClick={() => onPick('씬삭제')}>
          <svg
            width="14"
            height="14"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="1.8"
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <path d="M3 6h18 M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2 M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
          </svg>
          씬삭제
        </div>
      </div>
    </>
  );
}

function SceneListModal({ onClose }) {
  // 15 scenes per the image
  const sceneNums = [
    '1',
    '2',
    '3',
    '4',
    '5',
    '6',
    '7',
    '8',
    '9',
    '10',
    '16',
    '25',
    '32',
    '109',
    '110',
  ];
  const current = '16';
  return (
    <>
      <div className="modal-backdrop" onClick={onClose} />
      <div className="modal wide">
        <div className="modal-h2">
          <span style={{ color: 'var(--blue)' }}>{I.clipboard}</span>
          <div>
            <div className="mt">스크립트 씬 목록</div>
          </div>
          <button className="icon-btn naked" onClick={onClose}>
            {I.x}
          </button>
        </div>
        <div className="modal-sub">모든 씬의 촬영 상태와 진행 정보를 확인할 수 있습니다</div>
        <div className="scene-body">
          <table className="scene-tbl">
            <thead>
              <tr>
                <th>씬번호</th>
                <th>촬영상태</th>
                <th>컷수</th>
                <th>총테이크</th>
                <th>OK</th>
                <th>KEEP</th>
                <th>NG</th>
                <th>비고</th>
              </tr>
            </thead>
            <tbody>
              {sceneNums.map((n, i) => {
                const isCur = n === current;
                const isOne = n === '1';
                return (
                  <tr key={n} className={isCur ? 'cur' : ''}>
                    <td>
                      <span className="scn-no">씬 {n}</span>
                      {isCur && <span className="cur-tag">현재</span>}
                    </td>
                    <td>
                      <span className="stat-empty">미지정</span>
                    </td>
                    <td>{isOne ? 3 : 0}</td>
                    <td>{isOne ? 3 : 0}</td>
                    <td>
                      <span className="cnt-pill ok">0</span>
                    </td>
                    <td>
                      <span className="cnt-pill keep">0</span>
                    </td>
                    <td>
                      <span className="cnt-pill ng">{isOne ? 3 : 0}</span>
                    </td>
                    <td></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
        <div className="modal-f-list">
          <span className="cnt">총 {sceneNums.length}개의 씬</span>
          <div className="right">
            <button className="btn primary" onClick={onClose}>
              닫기
            </button>
          </div>
        </div>
      </div>
    </>
  );
}

function TakesBoard() {
  const D = window.DATA;
  const createRowId = (row, index) =>
    [row.scene, row.cut, row.take, index].filter(Boolean).join('-') ||
    `take-${Date.now()}-${Math.random().toString(36).slice(2)}`;
  const createNewRowId = () => `take-${Date.now()}-${Math.random().toString(36).slice(2)}`;
  const [rows, setRows] = React.useState(() =>
    D.takes.map((row, index) => ({ ...row, id: row.id || createRowId(row, index) })),
  );
  const [statusOpen, setStatusOpen] = React.useState(false);
  const [listOpen, setListOpen] = React.useState(false);
  const [toast, setToast] = React.useState('');
  const [shootStatus, setShootStatus] = React.useState('촬영완료');
  const toastTimerRef = React.useRef(null);

  React.useEffect(
    () => () => {
      if (toastTimerRef.current) window.clearTimeout(toastTimerRef.current);
    },
    [],
  );

  const showToast = (msg) => {
    if (toastTimerRef.current) window.clearTimeout(toastTimerRef.current);
    setToast(msg);
    toastTimerRef.current = window.setTimeout(() => {
      setToast('');
      toastTimerRef.current = null;
    }, 1800);
  };

  const addCut = () => {
    const lastScene = rows[rows.length - 1]?.scene || '12A';
    const maxCut = rows
      .filter((r) => r.scene === lastScene)
      .reduce((m, r) => Math.max(m, parseInt(r.cut) || 0), 0);
    const newCut = String(maxCut + 1).padStart(3, '0');
    setRows([
      ...rows,
      { id: createNewRowId(), scene: lastScene, cut: newCut, take: '01', status: 'OK', note: '' },
    ]);
    showToast(`컷 ${newCut} 추가됨`);
  };
  const addTake = () => {
    const last = rows[rows.length - 1];
    if (!last) return;
    const maxTake = rows
      .filter((r) => r.scene === last.scene && r.cut === last.cut)
      .reduce((m, r) => Math.max(m, parseInt(r.take) || 0), 0);
    const newTake = String(maxTake + 1).padStart(2, '0');
    setRows([
      ...rows,
      {
        id: createNewRowId(),
        scene: last.scene,
        cut: last.cut,
        take: newTake,
        status: 'OK',
        note: '',
      },
    ]);
    showToast(`테이크 ${newTake} 추가됨`);
  };
  const save = () => showToast('저장되었습니다');

  const pickStatus = (s) => {
    setStatusOpen(false);
    if (s === '씬삭제') {
      if (rows.length > 0) setRows(rows.slice(0, -1));
      showToast('씬 마지막 행 삭제됨');
      return;
    }
    setShootStatus(s);
    showToast(`상태 변경 → ${s}`);
  };

  const updateNote = (rowId, note) => {
    setRows((currentRows) => currentRows.map((row) => (row.id === rowId ? { ...row, note } : row)));
  };

  const statusChipCls =
    shootStatus === '촬영완료'
      ? 'status-chip'
      : shootStatus === '촬영중'
        ? 'status-chip live'
        : 'status-chip delay';

  return (
    <div className={'takes-card' + (React.useContext(FSContext).fs === 'takes' ? ' fs' : '')}>
      <div className="takes-h">
        <span className="t">스크립트</span>
        <span className={statusChipCls}>{shootStatus}</span>
        <button
          className="icon-btn naked"
          title="전체화면 보기"
          style={{ marginLeft: 6 }}
          onClick={() => React.useContext(FSContext).toggleFs('takes')}
        >
          {I.expand}
        </button>
        <div className="right">
          <div className="btn-status">
            <button className="btn sm" onClick={() => setStatusOpen((v) => !v)}>
              {I.cam}촬영상태관리
            </button>
            {statusOpen && <StatusMenu onPick={pickStatus} onClose={() => setStatusOpen(false)} />}
          </div>
          <button className="btn sm" onClick={addCut}>
            {I.plus}컷 추가
          </button>
          <button className="btn sm" onClick={addTake}>
            {I.plus}테이크 추가
          </button>
          <button className="btn sm" onClick={() => setListOpen(true)}>
            {I.list}목록보기
          </button>
          <button className="btn sm primary" onClick={save}>
            {I.check}저장하기
          </button>
        </div>
      </div>

      <div className="takes-scroll">
        <table className="tbl">
          <thead>
            <tr>
              <th>타이틀</th>
              <th style={{ width: 80 }}>회차</th>
              <th style={{ width: 110 }}>씬넘버</th>
              <th style={{ width: 90 }}>컷</th>
              <th style={{ width: 90 }}>테이크</th>
              <th style={{ width: 130 }}>상태</th>
              <th>비고</th>
              <th style={{ width: 56 }}></th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r) => (
              <tr key={r.id}>
                <td>
                  <div className="cell">{D.title}</div>
                </td>
                <td>
                  <div className="cell">
                    <span className="num">1회</span>
                  </div>
                </td>
                <td>
                  <div className="cell">
                    <span className="num">{r.scene}</span>
                  </div>
                </td>
                <td>
                  <div className="cell">
                    <span className="num">{r.cut}</span>
                  </div>
                </td>
                <td>
                  <div className="cell">
                    <span className="num">{r.take}</span>
                  </div>
                </td>
                <td>
                  <div className="cell">
                    <span className={'status-cell ' + r.status}>
                      <span className="dotc" />
                      {r.status}
                      <span className="caret">{I.chevD}</span>
                    </span>
                  </div>
                </td>
                <td>
                  <div className="cell">
                    <input
                      className="memo"
                      value={r.note}
                      placeholder="메모 추가..."
                      onChange={(event) => updateNote(r.id, event.target.value)}
                    />
                  </div>
                </td>
                <td>
                  <div className="cell">
                    <button
                      className="del-btn"
                      title="행 삭제"
                      onClick={() => {
                        setRows(rows.filter((row) => row.id !== r.id));
                        showToast('행 삭제됨');
                      }}
                    >
                      {I.trash}
                    </button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {listOpen && <SceneListModal onClose={() => setListOpen(false)} />}
      {toast && (
        <div className="toast">
          {I.check}
          <span>{toast}</span>
        </div>
      )}
    </div>
  );
}
window.TakesBoard = TakesBoard;