// states.jsx — status screens: permission denied, empty, network error + preview index.
(function () {
  const T = window.T, { Btn, Eyebrow, IconBtn } = window;

  // generic centered status
  function Status({ icon, tone = 'cream', eyebrow, title, body, primary, secondary, go }) {
    const dark = tone === 'dark';
    return (
      <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', display: 'flex',
        flexDirection: 'column', background: dark ? T.teal : T.canvas }}>
        <div style={{ padding: '12px 16px 0' }}>
          <IconBtn name="chevronL" onClick={() => go('back')} bg={dark ? 'rgba(246,240,227,.1)' : T.soft}
            border="transparent" color={dark ? T.onDark : T.ink} /></div>
        <div style={{ flex: 1, display: 'grid', placeItems: 'center', padding: '0 38px' }}>
          <div style={{ textAlign: 'center', maxWidth: 300 }}>
            <div style={{ width: 78, height: 78, borderRadius: 26, display: 'grid', placeItems: 'center',
              background: dark ? T.tealEl : T.soft, border: '1px solid ' + (dark ? 'rgba(246,240,227,.14)' : T.hairline),
              margin: '0 auto 22px' }}>
              <Icon name={icon} size={34} color={dark ? T.gold : T.teal} stroke={1.7} /></div>
            <Eyebrow color={dark ? T.gold : T.goldDim} style={{ textAlign: 'center' }}>{eyebrow}</Eyebrow>
            <h2 style={{ fontFamily: T.display, fontSize: 25, letterSpacing: -.6, lineHeight: 1.3,
              color: dark ? T.onDark : T.ink, margin: '12px 0 10px' }}>
              {String(title).split('\n').map((ln, i) => <React.Fragment key={i}>{i > 0 && <br/>}{ln}</React.Fragment>)}</h2>
            <p style={{ fontFamily: T.sans, fontSize: 14.5, lineHeight: 1.6,
              color: dark ? T.onDarkMuted : T.body, margin: 0 }}>{body}</p>
          </div>
        </div>
        <div style={{ padding: '0 26px 30px', display: 'flex', flexDirection: 'column', gap: 11 }}>
          {primary}
          {secondary}
        </div>
      </div>
    );
  }

  function PermDenied({ go }) {
    return <Status go={go} icon="location" eyebrow="위치 권한 꺼짐"
      title={'위치를 켜면\n곁의 이야기를 찾아드려요'}
      body="현재 위치 없이도 검색과 탐색은 쓸 수 있어요. 주변 자동 탐지를 쓰려면 위치 권한을 허용해 주세요."
      primary={<Btn full kind="primary" onClick={() => go('home')}>위치 권한 허용</Btn>}
      secondary={<Btn full kind="outline" onClick={() => go('explore')}>이름으로 찾아볼게요</Btn>} />;
  }

  function Empty({ go }) {
    return <Status go={go} icon="compass" eyebrow="주변이 조용하네요"
      title={'반경 1km 안에\n등록된 유산이 없어요'}
      body="조금 이동하면 새로운 이야기가 나타날 수 있어요. 그동안 다른 지역을 둘러보는 건 어때요?"
      primary={<Btn full kind="primary" onClick={() => go('explore')}>다른 지역 둘러보기</Btn>}
      secondary={<Btn full kind="ghost" onClick={() => go('home')}>지도로 돌아가기</Btn>} />;
  }

  function NetError({ go }) {
    return <Status go={go} icon="flash" tone="dark" eyebrow="연결이 불안정해요"
      title={'이야기를 불러오지\n못했어요'}
      body="네트워크 상태를 확인하고 다시 시도해 주세요. 받아둔 이야기는 오프라인에서도 들을 수 있어요."
      primary={<Btn full kind="gold" onClick={() => go('back')}>다시 시도</Btn>}
      secondary={<Btn full kind="ghost" onClick={() => go('library')} style={{ color: T.onDark }}>받아둔 이야기 보기</Btn>} />;
  }

  // preview index (reachable from MyPage)
  function StatesIndex({ go }) {
    const items = [
      { r: 'permDenied', t: '위치 권한 거부', d: '지도 진입 시 권한 꺼짐' },
      { r: 'empty', t: '빈 상태', d: '주변에 유산이 없을 때' },
      { r: 'netError', t: '네트워크 에러', d: '불러오기 실패' },
      { r: 'qr', t: 'QR 인식 실패', d: 'QR 스캔 화면 내 토글' },
      { r: 'loading', t: '생성 로딩', d: '스토리 구성 대기', p: { id: 'geun' } },
    ];
    return (
      <div style={{ position: 'absolute', inset: 0, background: T.canvas, overflow: 'hidden',
        display: 'flex', flexDirection: 'column' }}>
        <div style={{ padding: '14px 18px 6px', display: 'flex', alignItems: 'center', gap: 10 }}>
          <IconBtn name="chevronL" onClick={() => go('back')} bg={T.soft} />
          <span style={{ fontFamily: T.display, fontSize: 20, letterSpacing: -.4, color: T.ink }}>상태 화면 미리보기</span>
        </div>
        <div style={{ flex: 1, overflowY: 'auto', padding: '12px 22px 24px', scrollbarWidth: 'none' }}>
          {items.map(it => (
            <button key={it.r} onClick={() => go(it.r, it.p)} style={{ width: '100%', textAlign: 'left',
              cursor: 'pointer', background: T.soft, border: '1px solid ' + T.hairlineSoft, borderRadius: T.r.lg,
              padding: '15px 16px', marginBottom: 10, display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: T.sans, fontSize: 15.5, fontWeight: 600, color: T.ink }}>{it.t}</div>
                <div style={{ fontFamily: T.sans, fontSize: 12.5, color: T.muted, marginTop: 2 }}>{it.d}</div>
              </div>
              <Icon name="chevronR" size={18} color={T.mutedSoft} />
            </button>
          ))}
        </div>
      </div>
    );
  }

  Object.assign(window, { PermDenied, Empty, NetError, StatesIndex });
})();