function Menu({ open, onClose, align = 'right', wide, children }) {
  if (!open) return null;
  return (
    <>
      <div className="menu-backdrop" onClick={onClose} />
      <div className={'menu ' + align + (wide ? ' wide' : '')} onClick={(e) => e.stopPropagation()}>
        {children}
      </div>
    </>
  );
}

const getCrewName = (D, index) => D.crew?.[index]?.name ?? '-';

function SceneDetailModal({ onClose }) {
  const D = window.DATA;
  const [tab, setTab] = React.useState('info');
  return (
    <>
      <div className="modal-backdrop" onClick={onClose} />
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-h">
          <div>
            <div className="mt">씬 {D.scene.no} 상세정보</div>
            <div className="ms">실제 씬 데이터 기반 정보입니다.</div>
          </div>
          <button className="icon-btn naked" onClick={onClose}>
            {I.x}
          </button>
        </div>
        <div className="modal-tabs">
          <div
            className={'modal-tab' + (tab === 'info' ? ' on' : '')}
            onClick={() => setTab('info')}
          >
            기본 정보
          </div>
          <div className={'modal-tab' + (tab === 'sum' ? ' on' : '')} onClick={() => setTab('sum')}>
            씬 요약
          </div>
          <div
            className={'modal-tab' + (tab === 'memo' ? ' on' : '')}
            onClick={() => setTab('memo')}
          >
            메모
          </div>
        </div>
        <div className="modal-b">
          {tab === 'info' && (
            <>
              <div className="mfield-row">
                <div className="mfield">
                  <span className="ic">{I.pin}</span>
                  <div>
                    <div className="l">촬영 장소</div>
                    <div className="v">{D.scene.location}</div>
                  </div>
                </div>
                <div className="mfield">
                  <span className="ic">{I.user}</span>
                  <div>
                    <div className="l">출연자</div>
                    <div className="v">{D.scene.cast.map((c) => c.who).join(', ')}</div>
                  </div>
                </div>
              </div>
              <div className="mfield-quad">
                <div className="mq">
                  <div className="l">분량(P)</div>
                  <div className="v">{D.scene.p}</div>
                </div>
                <div className="mq">
                  <div className="l">시제</div>
                  <div className="v">{D.scene.tense}</div>
                </div>
                <div className="mq">
                  <div className="l">D/N</div>
                  <div className="v">{D.scene.dn}</div>
                </div>
                <div className="mq">
                  <div className="l">연출</div>
                  <div className="v">{getCrewName(D, 0)}</div>
                </div>
              </div>
            </>
          )}
          {tab === 'sum' && (
            <div className="mfield" style={{ width: '100%' }}>
              <span className="ic">{I.film}</span>
              <div>
                <div className="l">씬 요약</div>
                <div
                  className="v"
                  style={{ fontSize: 13, lineHeight: 1.65, fontWeight: 500, color: 'var(--ink-2)' }}
                >
                  {D.scene.desc}
                </div>
              </div>
            </div>
          )}
          {tab === 'memo' && (
            <div className="mfield" style={{ width: '100%' }}>
              <span className="ic">{I.edit}</span>
              <div style={{ flex: 1 }}>
                <div className="l">촬영 노트</div>
                <textarea className="mtxt" defaultValue={D.scene.note} />
              </div>
            </div>
          )}
        </div>
        <div className="modal-f">
          <button className="btn" onClick={onClose}>
            닫기
          </button>
          <button className="btn primary">{I.check}저장</button>
        </div>
      </div>
    </>
  );
}

function Header() {
  const D = window.DATA;
  const [menu, setMenu] = React.useState(null);
  const open = (id) => setMenu(menu === id ? null : id);
  const close = () => setMenu(null);

  const meta = [
    ['감독', getCrewName(D, 0)],
    ['조감독', getCrewName(D, 1)],
    ['작가', getCrewName(D, 2)],
    ['제작', getCrewName(D, 3)],
    ['촬영', getCrewName(D, 4)],
  ];

  const projects = [
    { t: '어둠의 추격자', g: '드라마', c: '#6c5ce7', on: true },
    { t: '7번방의 선물', g: '영화', c: '#0086c0' },
    { t: '승호의 단칸방', g: '단편', c: '#fdab3d' },
    { t: '킹스 카바레', g: '뮤지컬', c: '#ff5ac4' },
  ];
  const modes = [
    { t: '영화/드라마 제작 모드', d: '장편·시리즈물', on: true, ic: I.film },
    { t: '광고 / CF 제작 모드', d: '숏폼·30s~3min', ic: I.cam },
    { t: '다큐멘터리 제작 모드', d: '논픽션·인터뷰', ic: I.clipboard },
    { t: '숏폼 콘텐츠 모드', d: '세로형·SNS', ic: I.bolt },
  ];
  const notifs = [
    {
      who: '이촬영',
      av: '이',
      color: '#0086c0',
      t: '씬 12B 스토리보드 업데이트',
      s: '트래킹샷 동선 수정사항 반영했습니다.',
      m: '2분 전',
      unread: true,
    },
    {
      who: '박조명',
      av: '박',
      color: '#fdab3d',
      t: '조명 셋업 완료',
      s: 'HMI 4kW 4대 위치 잡았습니다. 컨펌 부탁드려요.',
      m: '15분 전',
      unread: true,
    },
    {
      who: '정제작',
      av: '정',
      color: '#00c875',
      t: '의상팀 피팅 확정',
      s: '오후 4시 의상실에서 진행됩니다.',
      m: '1시간 전',
      unread: true,
    },
    {
      who: '김작가',
      av: '김',
      color: '#a25ddc',
      t: '대본 v3.2 업로드',
      s: '씬 14 대사 수정본 확인 부탁드립니다.',
      m: '3시간 전',
    },
  ];
  const sharePeople = [
    { who: '이촬영', role: '촬영감독', av: '이', color: '#0086c0', access: '편집 가능' },
    { who: '박조명', role: '조명감독', av: '박', color: '#fdab3d', access: '편집 가능' },
    { who: '정제작', role: '프로듀서', av: '정', color: '#00c875', access: '보기 전용' },
    { who: '김작가', role: '작가', av: '김', color: '#a25ddc', access: '댓글 가능' },
  ];

  return (
    <>
      <div className="h1">
        <div className="brand">
          <span className="r">Ready</span>
          <span className="bar" />
          <span className="a">Action</span>
        </div>

        <div className="menu-wrap">
          <button className="project-pill" onClick={() => open('proj')}>
            <span className="dot" />
            <span>{D.title}</span>
            <span className="tag">{D.genre}</span>
            <span className="caret">{I.chevD}</span>
          </button>
          <Menu open={menu === 'proj'} onClose={close} align="left" wide>
            <div className="menu-search">
              {I.search}
              <input placeholder="프로젝트 검색..." defaultValue="" />
            </div>
            <div className="menu-label">최근 프로젝트</div>
            {projects.map((p) => (
              <div key={p.t} className={'menu-item' + (p.on ? ' on' : '')}>
                <span className="swatch" style={{ background: p.c }} />
                <span>{p.t}</span>
                <span className="tag">{p.g}</span>
                {p.on && <span className="check">{I.check}</span>}
              </div>
            ))}
            <div className="menu-divider" />
            <div className="menu-item">
              {I.plus}
              <span>새 프로젝트 만들기</span>
            </div>
            <div className="menu-item">
              {I.briefcase}
              <span>모든 프로젝트 보기</span>
            </div>
          </Menu>
        </div>

        <div className="spacer" />

        <div className="menu-wrap">
          <button className="mode-pill" onClick={() => open('mode')}>
            {I.film}
            <span>{D.mode}</span>
            <span style={{ color: 'var(--ink-3)' }}>{I.chevD}</span>
          </button>
          <Menu open={menu === 'mode'} onClose={close} align="right" wide>
            <div className="menu-label">제작 모드 선택</div>
            {modes.map((m) => (
              <div
                key={m.t}
                className={'menu-item' + (m.on ? ' on' : '')}
                style={{ padding: '10px' }}
              >
                <span
                  style={{
                    width: 28,
                    height: 28,
                    borderRadius: 7,
                    background: m.on ? '#f3f0ff' : '#f3f4fa',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    color: m.on ? 'var(--accent)' : 'var(--ink-2)',
                  }}
                >
                  {m.ic}
                </span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 12.5, fontWeight: 700 }}>{m.t}</div>
                  <div
                    style={{ fontSize: 11, color: 'var(--ink-3)', fontWeight: 500, marginTop: 1 }}
                  >
                    {m.d}
                  </div>
                </div>
                {m.on && <span style={{ color: 'var(--accent)' }}>{I.check}</span>}
              </div>
            ))}
          </Menu>
        </div>

        <span className="pill live">실시간</span>
        <span className="pill viewers">
          {I.eye}
          <span>뷰어 {D.viewers.length}명</span>
        </span>

        <div className="menu-wrap">
          <button className="btn" onClick={() => open('share')}>
            {I.share}공유
          </button>
          <Menu open={menu === 'share'} onClose={close} align="right" wide>
            <div className="menu-label">사람 초대 · "{D.title}"</div>
            <div className="share-row">
              <input placeholder="이메일 또는 이름 입력..." />
              <button className="btn sm primary">초대</button>
            </div>
            <div className="menu-divider" />
            <div className="menu-label">현재 접근 권한</div>
            <div className="share-people">
              {sharePeople.map((p, i) => (
                <div key={i} className="menu-item" style={{ padding: '8px 10px' }}>
                  <span className="av sm" style={{ background: p.color }}>
                    {p.av}
                  </span>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 12.5, fontWeight: 700 }}>{p.who}</div>
                    <div style={{ fontSize: 10.5, color: 'var(--ink-3)' }}>{p.role}</div>
                  </div>
                  <span className="meta">
                    {p.access} {I.chevD}
                  </span>
                </div>
              ))}
            </div>
            <div className="menu-divider" />
            <div className="menu-item">
              {I.link}
              <span>링크 복사하기</span>
              <span className="meta">읽기 전용</span>
            </div>
            <div className="menu-item">
              {I.share}
              <span>외부로 공유</span>
            </div>
          </Menu>
        </div>

        <div className="menu-wrap">
          <button className="icon-btn" onClick={() => open('bell')}>
            {I.bell}
            <span className="dot-badge">3</span>
          </button>
          <Menu open={menu === 'bell'} onClose={close} align="right" wide>
            <div className="menu-label" style={{ display: 'flex', alignItems: 'center' }}>
              <span>알림</span>
              <span
                style={{
                  marginLeft: 'auto',
                  color: 'var(--accent)',
                  fontWeight: 700,
                  cursor: 'pointer',
                }}
              >
                모두 읽음
              </span>
            </div>
            {notifs.map((n, i) => (
              <div key={i} className={'notif' + (n.unread ? ' unread' : '')}>
                <span className="av" style={{ background: n.color }}>
                  {n.av}
                </span>
                <div className="nbody">
                  <div className="nt">
                    {n.who} · {n.t}
                  </div>
                  <div className="ns">{n.s}</div>
                </div>
                <div className="nm">{n.m}</div>
              </div>
            ))}
            <div className="menu-divider" />
            <div className="menu-item" style={{ justifyContent: 'center', color: 'var(--ink-2)' }}>
              전체 알림 보기
            </div>
          </Menu>
        </div>

        <div className="menu-wrap">
          <button className="user-chip" onClick={() => open('user')}>
            <div style={{ textAlign: 'right' }}>
              <div className="nm">김감독</div>
              <div className="ro">에디터</div>
            </div>
            <span className="av" style={{ background: 'linear-gradient(135deg,#6c5ce7,#a25ddc)' }}>
              김
            </span>
          </button>
          <Menu open={menu === 'user'} onClose={close} align="right">
            <div className="user-hero">
              <span className="av" style={{ background: '#fff', color: '#2563eb' }}>
                T
              </span>
              <div className="meta">
                <div className="nm">the favorite</div>
                <div className="em">thefavoritebiz@gmail.com</div>
                <span className="role-chip">방송</span>
              </div>
            </div>
            <div className="user-mode">
              <span className="ic">{I.bolt}</span>
              <div>
                <div className="t">Ready 모드</div>
                <div className="s">촬영 준비 대시보드</div>
              </div>
            </div>
            <div className="menu-item lg">
              {I.user}
              <div>
                <div className="mt">내 프로필</div>
                <div className="ms">프로필 정보 관리</div>
              </div>
            </div>
            <div className="menu-item lg">
              {I.briefcase}
              <div>
                <div className="mt">프로젝트 목록</div>
                <div className="ms">내 프로젝트 보기</div>
              </div>
            </div>
            <div className="menu-item lg">
              {I.settings}
              <div>
                <div className="mt">계정 설정</div>
                <div className="ms">환경설정 및 알림</div>
              </div>
            </div>
            <div className="menu-divider" />
            <div className="menu-label">현재 프로젝트</div>
            <div className="user-project">
              <span className="ic">{I.cam}</span>
              <div>
                <div className="t">7번방의 선물</div>
                <div className="s">영화</div>
              </div>
            </div>
            <div className="menu-divider" />
            <div className="menu-item danger">
              {I.x}
              <span>로그아웃</span>
            </div>
          </Menu>
        </div>
      </div>

      <div className="h2">
        <div className="kv-i">
          <span className="k">타이틀</span>
          <span className="v">에피소드 07 — "{D.epTag}"</span>
        </div>
        <div className="sep" />
        {meta.map(([k, v]) => (
          <div key={k} className="kv-i">
            <span className="k">{k}</span>
            <span className="v">{v}</span>
          </div>
        ))}
        <div className="sep" />
        <div className="kv-i">
          <span className="k">제작사</span>
          <span className="v">{D.studio}</span>
        </div>

        <div className="timers">
          <div className="kv-i" style={{ marginRight: 8 }}>
            <span className="k">오늘은</span>
            <span className="v" style={{ color: 'var(--ink-3)' }}>
              일정없음
            </span>
          </div>
          <div className="weather-chip">
            {I.cloud}
            <b>
              {D.weather.tag} {D.weather.temp}
            </b>
          </div>
          <div className="weather-chip">
            {I.sun}
            <b>{D.weather.sunrise}</b>
          </div>
          <div className="weather-chip">
            {I.moon}
            <b>{D.weather.sunset}</b>
          </div>
          <div className="timer alarm">
            {I.clock}
            <span className="v">23:39:01</span>
          </div>
          <div className="timer run">
            {I.clock}
            <span className="v">08:28:48</span>
          </div>
        </div>
      </div>

      <div className="h3">
        <div className="grp scene">
          <span className="k">씬번호</span>
          <span className="v">{D.scene.no}</span>
        </div>
        <div className="grp">
          <span className="k">D/N</span>
          <span className={'badge-dn ' + (D.scene.dn === 'N' ? '' : 'day')}>{D.scene.dn}</span>
        </div>
        <div className="grp">
          <span className="k">S/L</span>
          <span
            className="v"
            style={{ padding: '1px 8px', background: '#dbeafe', color: '#1d4ed8', borderRadius: 5 }}
          >
            {D.scene.sl}
          </span>
        </div>
        <div className="grp">
          <span className="k">분량(P)</span>
          <span className="v">{D.scene.p}</span>
        </div>
        <div className="grp">
          <span className="k">시제</span>
          <span className="v">{D.scene.tense}</span>
        </div>
        <div className="grp">
          <span className="k">촬영장소</span>
          <span className="v">{D.scene.location}</span>
        </div>
        <div className="grp">
          <span className="k">출연자(착용/소품/의상)</span>
          <span className="v">{D.scene.cast.map((c) => `${c.who}(${c.code})`).join(', ')}</span>
        </div>
        <div className="grp">
          <span className="k">의상</span>
          <span className="v">{D.scene.wardrobe.join(', ')}</span>
        </div>
        <div className="grp">
          <span className="k">소품</span>
          <span className="v">{D.scene.props.join(', ')}</span>
        </div>
        <div className="grp">
          <span className="k">미술</span>
          <span className="v">{D.scene.art.join(', ')}</span>
        </div>
        <div className="grp">
          <span className="k">특수효과</span>
          <span className="v">{D.scene.sfx.join(', ')}</span>
        </div>
        <div className="grp">
          <span className="k">스턴트</span>
          <span className="empty">—</span>
        </div>
        <div className="grp">
          <span className="k">특수분장</span>
          <span className="empty">—</span>
        </div>
        <div className="grp">
          <span className="k">CG</span>
          <span className="empty">—</span>
        </div>
        <div className="grp">
          <span className="k">촬영장비</span>
          <span className="v">{D.scene.gear.join(', ')}</span>
        </div>
        <div className="grp">
          <span className="k">특수장비</span>
          <span className="v">{D.scene.special.join(', ')}</span>
        </div>
        <div className="grp warn">
          <span className="k">특이사항</span>
          <span className="v">⚠ {D.scene.flags[0]}</span>
        </div>
        <button className="btn sm detail-btn" onClick={() => open('detail')}>
          {I.clipboard}촬영상세정보
        </button>
      </div>

      {menu === 'detail' && <SceneDetailModal onClose={close} />}
    </>
  );
}
window.Header = Header;