// director.jsx — left demo rail: persona, trip-state stepper, screen catalog, themes.
// CATALOG maps every spec feature → a concrete app destination.

const JJ_CATALOG = [
  { group: '방문 전', phrase: '곧 만나요', items: [
    { feat: '01', name: '초대 링크 · 환영', spec: '카톡 대신 링크 하나로 환영을 전한다', persona: 'guest', state: 'invited', tab: 'trip' },
    { feat: '01', name: '초대 보내기', spec: '호스트가 트립 단위로 초대를 발행한다', persona: 'host', state: 'invited', tab: 'trip' },
    { feat: '03', name: '나만의 부산 지도', spec: "호스트가 큐레이션한 '우리의 부산'", persona: 'guest', state: 'invited', tab: 'map' },
    { feat: '02', name: '집 안내', spec: '오는 법·도착·날씨를 한 화면에', persona: 'guest', state: 'invited', tab: 'home', sub: 'guide' },
    { feat: '10', name: '손님 선호 남기기', spec: '알레르기·취향을 미리 받아 배려한다', persona: 'guest', state: 'invited', tab: 'home', sub: 'prefs' },
  ]},
  { group: '도착', phrase: '어서 와요', items: [
    { feat: '04', name: '티켓 공유', spec: '도착 정보를 정확·자동으로 전한다', persona: 'guest', state: 'prearrival', tab: 'trip' },
    { feat: '05', name: '부산역 픽업', spec: '도착에 맞춰 마중 타이밍을 잡는다', persona: 'host', state: 'prearrival', tab: 'trip' },
    { feat: '06', name: '웰컴 키트', spec: '집 사용 정보를 셀프로 해결한다', persona: 'guest', state: 'prearrival', tab: 'home', sub: 'kit' },
  ]},
  { group: '머무는 동안', phrase: '같이 가요', items: [
    { feat: '07', name: '오늘 · 가고 싶은 곳', spec: '손님이 가고 싶은 곳이 늘 우선', persona: 'guest', state: 'staying', tab: 'trip' },
    { feat: '08', name: '맞춤 추천 (추천해줘)', spec: "요청 시에만 호스트 지도에서 골라준다", persona: 'guest', state: 'staying', tab: 'map', sheet: 'recommend' },
    { feat: '09', name: '손님 요청', spec: '필요를 부담 없이 남긴다', persona: 'guest', state: 'staying', tab: 'trip', sheet: 'request' },
    { feat: '09', name: '요청 처리 (호스트)', spec: '요청이 전달되고 처리 상태가 보인다', persona: 'host', state: 'staying', tab: 'trip' },
    { feat: '11', name: '공유 앨범', spec: '흩어지는 사진을 트립 단위로 모은다', persona: 'guest', state: 'staying', tab: 'album' },
    { feat: '12', name: '공동지갑', spec: '공동비용을 공평하게 모은다', persona: 'guest', state: 'staying', tab: 'wallet' },
  ]},
  { group: '떠날 때 · 그 후', phrase: '잘 가요, 또 와요', items: [
    { feat: '13', name: '추억 선물 (받기)', spec: '며칠을 한 편의 이야기로 묶어 건넨다', persona: 'guest', state: 'departing', tab: 'trip', sheet: 'memory' },
    { feat: '13', name: '추억 선물 만들기', spec: '호스트가 손글씨 한 줄을 더한다', persona: 'host', state: 'departing', tab: 'trip' },
    { feat: '15', name: '방명록 쓰기', spec: "손님의 한 줄이 집의 역사가 된다", persona: 'guest', state: 'departing', tab: 'trip', sheet: 'guestbook' },
    { feat: '14', name: '자동 회고', spec: '떠난 뒤 추억을 다시 꺼낸다', persona: 'guest', state: 'after', tab: 'trip' },
    { feat: '15', name: '방명록 (집에 누적)', spec: '집을 거쳐간 사람들의 한 줄', persona: 'host', state: 'after', tab: 'home', sub: 'guestbook' },
  ]},
];

function matchActive(entry, st) {
  return entry.persona === st.persona && entry.state === st.tripState && entry.tab === st.tab
    && (entry.sheet || null) === (st.sheet || null) && (entry.sub || null) === (st.sub || null);
}

function Seg({ options, value, onChange, accent = 'var(--coral)' }) {
  return (
    <div style={{ display: 'flex', background: '#EDE3CF', borderRadius: 11, padding: 3, gap: 3 }}>
      {options.map(o => {
        const on = value === o.k;
        return (
          <button key={o.k} onClick={() => onChange(o.k)} style={{
            flex: 1, border: 'none', cursor: 'pointer', borderRadius: 8, padding: '7px 4px',
            fontFamily: "'IBM Plex Sans KR',sans-serif", fontSize: 12.5, fontWeight: 600,
            background: on ? '#fff' : 'transparent', color: on ? accent : '#6E8089',
            boxShadow: on ? '0 1px 3px rgba(86,61,32,.16)' : 'none', transition: '.15s',
          }}>{o.label}</button>
        );
      })}
    </div>
  );
}

function RailLabel({ children }) {
  return <div style={{ fontFamily: "'IBM Plex Sans KR',sans-serif", fontSize: 10.5, fontWeight: 700, letterSpacing: '.16em', textTransform: 'uppercase', color: '#A38B63', margin: '0 0 9px' }}>{children}</div>;
}

function Director({ st, set, scr, setScr, themeKey, setTheme, fontKey, setFont }) {
  const goEntry = (e) => set({ persona: e.persona, tripState: e.state, tab: e.tab, sub: e.sub || null, sheet: e.sheet || null });
  const activeStateIdx = JJ_STATES.findIndex(s => s.key === st.tripState);

  return (
    <div style={{
      width: 312, flexShrink: 0, alignSelf: 'stretch', background: '#FBF4E6',
      borderRight: '1px solid #E6D9BE', display: 'flex', flexDirection: 'column',
      fontFamily: "'IBM Plex Sans KR',sans-serif", maxHeight: '100vh',
    }}>
      {/* brand header */}
      <div style={{ padding: '22px 20px 16px', borderBottom: '1px solid #EEE3CD' }}>
        <div style={{ fontFamily: "'IBM Plex Sans KR',sans-serif", fontSize: 10, fontWeight: 600, letterSpacing: '.34em', textTransform: 'uppercase', color: '#DE7355' }}>Interactive Demo</div>
        <div style={{ fontFamily: "'Gowun Batang',serif", fontWeight: 700, fontSize: 27, color: '#15323C', marginTop: 5, letterSpacing: '.03em' }}>쩨우스</div>
        <div style={{ fontFamily: "'Nanum Pen Script',cursive", fontSize: 17, color: '#DE7355', marginTop: 1 }}>머무는 동안엔 길잡이, 떠날 땐 선물.</div>
        <a href="../index.html" style={{ display: 'inline-flex', alignItems: 'center', gap: 5, marginTop: 11, fontSize: 11.5, fontWeight: 600, color: '#20596B', textDecoration: 'none' }}>
          <JJIcon name="chevL" size={13} color="#20596B" sw={2} />프로젝트 허브로
        </a>
      </div>

      <div style={{ flex: 1, overflowY: 'auto', padding: '16px 18px 26px' }}>
        {/* persona */}
        <RailLabel>시점 · 누구의 화면</RailLabel>
        <Seg
          options={[{ k: 'guest', label: '손님 (민서)' }, { k: 'host', label: '호스트 (쩨)' }]}
          value={st.persona} accent={st.persona === 'host' ? '#20596B' : '#DE7355'}
          onChange={(k) => set({ persona: k })}
        />

        {/* trip state stepper */}
        <div style={{ marginTop: 20 }}><RailLabel>트립 상태 · 생명주기</RailLabel></div>
        <div style={{ position: 'relative', paddingLeft: 22 }}>
          <div style={{ position: 'absolute', left: 6, top: 8, bottom: 12, width: 2, background: '#E6D9BE', borderRadius: 2 }} />
          {JJ_STATES.map((s, i) => {
            const on = i === activeStateIdx, passed = i < activeStateIdx;
            return (
              <button key={s.key} onClick={() => set({ tripState: s.key, sheet: null })} style={{
                display: 'block', width: '100%', textAlign: 'left', background: 'none', border: 'none', cursor: 'pointer',
                padding: '5px 0 11px', position: 'relative',
              }}>
                <span style={{
                  position: 'absolute', left: -22, top: 7, width: 13, height: 13, borderRadius: '50%',
                  background: on || passed ? '#DE7355' : '#FBF4E6', border: `2.5px solid ${on || passed ? '#DE7355' : '#D8C9A8'}`,
                  boxShadow: on ? '0 0 0 4px rgba(222,115,85,.18)' : 'none',
                }} />
                <span style={{ fontFamily: "'Gowun Batang',serif", fontWeight: 700, fontSize: 14, color: on ? '#15323C' : '#8A795C' }}>{s.name}</span>
                <span style={{ fontFamily: "'Nanum Pen Script',cursive", fontSize: 15, color: on ? '#DE7355' : '#C0AE88', marginLeft: 8 }}>{s.phrase}</span>
              </button>
            );
          })}
        </div>

        {/* screen-state category — 이 화면의 세부 상태 */}
        {(function () {
          const info = getScreenStates(st);
          return (
            <div style={{ marginTop: 20 }}>
              <RailLabel>화면 상태 · {info.ctx}</RailLabel>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
                {info.options.map(o => {
                  const on = scr === o.k;
                  const dis = info.single;
                  return (
                    <button key={o.k} onClick={() => !dis && setScr(o.k)} disabled={dis} style={{
                      display: 'flex', alignItems: 'flex-start', gap: 9, width: '100%', textAlign: 'left',
                      cursor: dis ? 'default' : 'pointer', borderRadius: 10, padding: '8px 10px',
                      background: on ? '#fff' : 'transparent', border: on ? '1px solid #E6D9BE' : '1px solid transparent',
                      boxShadow: on ? '0 1px 3px rgba(86,61,32,.1)' : 'none',
                    }}>
                      <span style={{
                        width: 13, height: 13, borderRadius: '50%', flexShrink: 0, marginTop: 2,
                        background: on ? '#20596B' : '#FBF4E6', border: `2.5px solid ${on ? '#20596B' : '#D8C9A8'}`,
                        boxShadow: on ? '0 0 0 4px rgba(32,89,107,.14)' : 'none',
                      }} />
                      <span style={{ flex: 1, minWidth: 0 }}>
                        <span style={{ display: 'block', fontFamily: "'Gowun Batang',serif", fontWeight: 700, fontSize: 13, color: on ? '#15323C' : '#5A6B66' }}>{o.label}</span>
                        <span style={{ display: 'block', fontFamily: "'IBM Plex Sans KR',sans-serif", fontSize: 11, color: '#9A8A6C', marginTop: 1, lineHeight: 1.35 }}>{o.note}</span>
                      </span>
                    </button>
                  );
                })}
              </div>
            </div>
          );
        })()}

        {/* screen catalog */}
        <div style={{ marginTop: 14 }}><RailLabel>화면 · 15개 기능</RailLabel></div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          {JJ_CATALOG.map(grp => (
            <div key={grp.group}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginBottom: 7 }}>
                <span style={{ fontFamily: "'Gowun Batang',serif", fontWeight: 700, fontSize: 12.5, color: '#20596B' }}>{grp.group}</span>
                <span style={{ fontFamily: "'Nanum Pen Script',cursive", fontSize: 13, color: '#DE7355' }}>{grp.phrase}</span>
                <span style={{ flex: 1, height: 1, background: '#EEE3CD' }} />
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                {grp.items.map((e, i) => {
                  const on = matchActive(e, st);
                  return (
                    <button key={i} onClick={() => goEntry(e)} style={{
                      display: 'flex', alignItems: 'center', gap: 8, width: '100%', textAlign: 'left', cursor: 'pointer',
                      background: on ? '#fff' : 'transparent', border: on ? '1px solid #E6D9BE' : '1px solid transparent',
                      borderRadius: 9, padding: '7px 9px', boxShadow: on ? '0 1px 3px rgba(86,61,32,.1)' : 'none',
                    }}>
                      <span style={{
                        fontFamily: "'Gowun Batang',serif", fontWeight: 700, fontSize: 11, flexShrink: 0,
                        width: 22, height: 22, borderRadius: 6, display: 'flex', alignItems: 'center', justifyContent: 'center',
                        background: on ? '#DE7355' : '#EFE4CE', color: on ? '#fff' : '#A38B63',
                      }}>{e.feat}</span>
                      <span style={{ flex: 1, minWidth: 0 }}>
                        <span style={{ display: 'block', fontFamily: "'IBM Plex Sans KR',sans-serif", fontSize: 12.5, fontWeight: 600, color: on ? '#15323C' : '#4A5C5A', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{e.name}</span>
                      </span>
                      <span style={{
                        fontSize: 9.5, fontWeight: 700, padding: '2px 6px', borderRadius: 5, flexShrink: 0,
                        background: e.persona === 'host' ? 'rgba(32,89,107,.12)' : 'rgba(222,115,85,.14)',
                        color: e.persona === 'host' ? '#20596B' : '#DE7355',
                      }}>{e.persona === 'host' ? '호' : '손'}</span>
                    </button>
                  );
                })}
              </div>
            </div>
          ))}
        </div>

        {/* themes */}
        <div style={{ marginTop: 22, paddingTop: 18, borderTop: '1px solid #EEE3CD' }}>
          <RailLabel>색 테마</RailLabel>
          <Seg options={Object.keys(JJ_THEMES).map(k => ({ k, label: JJ_THEMES[k].label }))} value={themeKey} onChange={setTheme} accent="#20596B" />
          <div style={{ marginTop: 14 }}><RailLabel>글씨 테마</RailLabel></div>
          <Seg options={Object.keys(JJ_FONTS).map(k => ({ k, label: JJ_FONTS[k].label }))} value={fontKey} onChange={setFont} accent="#20596B" />
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Director, JJ_CATALOG, matchActive });