/* ============================================================
   B1 — App shell: navigator rail + iPhone frame + Tweaks
   ============================================================ */
const ALL_SCREENS = [
  { k: 'create',  name: 'Tạo phiên',    vi: 'HOST · upload & chọn', mode: 'host', el: (t, go, bg, setBg, sessionMode, setSessionMode, notes, setNotes, sessionType, setSessionType) => <CreateScreen bg={bg} setBg={setBg} sessionType={sessionType} setSessionType={setSessionType} onCreate={() => go('host')} /> },
  { k: 'guest',   name: 'Trong phiên',  vi: 'THÀNH VIÊN · vào thẳng, không cần màn Tham gia', mode: 'member', el: (t, go, bg, setBg, sessionMode, setSessionMode, notes, setNotes, sessionType) => <GuestScreen bg={bg} setBg={setBg} particle={t.particle} mode={sessionMode} notes={notes} setNotes={setNotes} sessionType={sessionType} /> },
  { k: 'host',    name: 'Chủ trì',      vi: 'HOST · trong phiên', mode: 'host', el: (t, go, bg, setBg, sessionMode, setSessionMode, notes, setNotes, sessionType) => <HostScreen bg={bg} setBg={setBg} defaultSpeed={t.danmuSpeed} particle={t.particle} mode={sessionMode} setMode={setSessionMode} notes={notes} setNotes={setNotes} sessionType={sessionType} onEnd={() => go('wrap')} /> },
  { k: 'wrap',    name: 'Lưu phiên',    vi: 'HOST · kết phiên & xem lại', mode: 'host', el: (t, go, bg, setBg, sessionMode, setSessionMode, notes, setNotes, sessionType) => <WrapScreen sessionType={sessionType} particle={t.particle} /> },
  { k: 'install', name: 'Đặt ứng dụng lên màn hình', vi: 'HOST · cài PWA', mode: 'host', el: (t) => <InstallScreen /> },
];
// window.__B1_MODE: 'host' | 'member' | undefined(=all) — set by inline script,
// or via URL: ?mode=host / ?mode=member (one deployed bundle, role via link)
const urlMode = new URLSearchParams(window.location.search).get('mode');
const B1_MODE = urlMode || window.__B1_MODE;
const SCREENS = B1_MODE ? ALL_SCREENS.filter(s => s.mode === B1_MODE) : ALL_SCREENS;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "danmuSpeed": "vừa",
  "accent": "#B89968",
  "particle": "Bụi trầm"
}/*EDITMODE-END*/;

function useMediaQuery(q) {
  const [m, setM] = useState(() => typeof window !== 'undefined' && window.matchMedia(q).matches);
  useEffect(() => {
    const mq = window.matchMedia(q);
    const on = () => setM(mq.matches);
    on();
    mq.addEventListener ? mq.addEventListener('change', on) : mq.addListener(on);
    return () => { mq.removeEventListener ? mq.removeEventListener('change', on) : mq.removeListener(on); };
  }, [q]);
  return m;
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [screen, setScreen] = useState(SCREENS[0].k);
  const [menu, setMenu] = useState(false);
  const [bg, setBg] = useState(null);
  const [sessionMode, setSessionMode] = useState('chat'); // 'chat' | 'work' (Họp) — global, host điều khiển
  const [notes, setNotes] = useState([]);
  const [sessionType, setSessionType] = useState('hop'); // 'hop' | 'gap-mat' — loại phiên, chọn lúc Tạo phiên
  const phone = useMediaQuery('(max-width: 760px)');

  useEffect(() => {
    document.documentElement.style.setProperty('--gold', t.accent);
  }, [t.accent]);

  useEffect(() => {
    window.__b1setScreen = setScreen;
  }, []);

  useEffect(() => {
    const onKey = (e) => {
      const tag = (e.target.tagName || '').toLowerCase();
      if (tag === 'input' || tag === 'textarea') return;
      const i = SCREENS.findIndex(s => s.k === screen);
      if (e.key === 'ArrowRight') setScreen(SCREENS[(i + 1) % SCREENS.length].k);
      if (e.key === 'ArrowLeft') setScreen(SCREENS[(i - 1 + SCREENS.length) % SCREENS.length].k);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [screen]);

  const go = (k) => { setScreen(k); setMenu(false); };
  const cur = SCREENS.find(s => s.k === screen);
  const idx = SCREENS.findIndex(s => s.k === screen);

  /* ---------- PHONE MODE: full-bleed, no bezel, top switcher ---------- */
  if (phone) {
    return (
      <div style={{ position: 'fixed', inset: 0, display: 'flex', flexDirection: 'column', background: 'var(--ink)' }}>
        {/* top switcher */}
        <div style={{
          flexShrink: 0, display: 'flex', alignItems: 'center', gap: 8,
          padding: 'calc(env(safe-area-inset-top, 0px) + 7px) 12px 7px',
          background: 'var(--ink)', borderBottom: '1px solid var(--ink-line)', zIndex: 5,
        }}>
          <button onClick={() => go(SCREENS[(idx - 1 + SCREENS.length) % SCREENS.length].k)} aria-label="Màn trước" style={navArrow}>
            <svg width="15" height="15" viewBox="0 0 16 16"><path d="M10 3l-5 5 5 5" stroke="var(--cream)" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </button>
          <button onClick={() => setMenu(m => !m)} style={{
            flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, cursor: 'pointer',
            background: 'var(--ink-soft)', border: '1px solid var(--ink-line)', borderRadius: 999, padding: '8px 14px',
          }}>
            <span className="b1-mono" style={{ fontSize: 9, color: 'var(--gold)' }}>{String(idx + 1).padStart(2, '0')}</span>
            <span style={{ fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 500, color: 'var(--cream)' }}>{cur.name}</span>
            <svg width="11" height="11" viewBox="0 0 12 12" style={{ transform: menu ? 'rotate(180deg)' : 'none', transition: 'transform .2s' }}><path d="M3 4.5l3 3 3-3" stroke="var(--cream-dim)" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </button>
          <button onClick={() => go(SCREENS[(idx + 1) % SCREENS.length].k)} aria-label="Màn sau" style={navArrow}>
            <svg width="15" height="15" viewBox="0 0 16 16"><path d="M6 3l5 5-5 5" stroke="var(--cream)" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </button>
        </div>

        {/* screen */}
        <div style={{ flex: 1, position: 'relative', overflow: 'hidden' }}>
          {cur.el(t, go, bg, setBg, sessionMode, setSessionMode, notes, setNotes, sessionType, setSessionType)}
        </div>

        {/* screen list dropdown */}
        {menu && (
          <div onClick={() => setMenu(false)} style={{ position: 'fixed', inset: 0, zIndex: 60, background: 'rgba(13,19,31,.6)', backdropFilter: 'blur(4px)' }}>
            <div onClick={e => e.stopPropagation()} style={{
              position: 'absolute', top: 'calc(env(safe-area-inset-top, 0px) + 58px)', left: 12, right: 12,
              background: 'var(--ink-soft)', border: '1px solid var(--ink-line)', borderRadius: 14, padding: 7,
              boxShadow: '0 24px 50px -18px rgba(0,0,0,.7)', animation: 'b1-rise-in .2s ease both',
            }}>
              {SCREENS.map((s, i) => {
                const on = s.k === screen;
                return (
                  <button key={s.k} onClick={() => go(s.k)} style={{
                    width: '100%', display: 'flex', alignItems: 'center', gap: 12, textAlign: 'left', cursor: 'pointer',
                    padding: '11px 12px', borderRadius: 9, border: 'none',
                    background: on ? 'rgba(184,153,104,.12)' : 'transparent',
                  }}>
                    <span className="b1-mono" style={{ fontSize: 9, width: 18, color: on ? 'var(--gold)' : 'rgba(200,192,174,.4)' }}>{String(i + 1).padStart(2, '0')}</span>
                    <span style={{ flex: 1 }}>
                      <span style={{ display: 'block', fontFamily: 'var(--font-body)', fontSize: 14.5, fontWeight: on ? 500 : 400, color: on ? 'var(--cream)' : 'var(--cream-dim)' }}>{s.name}</span>
                      <span className="b1-mono" style={{ fontSize: 9, color: 'rgba(200,192,174,.4)' }}>{s.vi}</span>
                    </span>
                    {on && <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--vermilion)' }} />}
                  </button>
                );
              })}
            </div>
          </div>
        )}

        <TweaksPanel>
          <TweakSection label="Nghi thức" />
          <TweakRadio label="Tốc độ bình luận" value={t.danmuSpeed} options={['tắt', 'chậm', 'vừa', 'nhanh']} onChange={v => setTweak('danmuSpeed', v)} />
          <TweakSection label="Sắc thái" />
          <TweakColor label="Vàng accent" value={t.accent} options={['#B89968', '#C2A878', '#A8894F', '#9C8A6A']} onChange={v => setTweak('accent', v)} />
          <TweakSelect label="Hiệu ứng nền (host chọn)" value={t.particle} options={['Tắt', 'Bụi trầm', 'Tuyết', 'Mưa', 'Khói hương', 'Cánh hoa']} onChange={v => setTweak('particle', v)} />
        </TweaksPanel>
      </div>
    );
  }

  /* ---------- DESKTOP MODE: nav rail + bezel ---------- */

  return (
    <div style={{
      minHeight: '100vh', width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center',
      gap: 54, padding: '40px 32px', boxSizing: 'border-box', flexWrap: 'wrap',
      background: 'radial-gradient(120% 90% at 50% 0%, #22355A 0%, #17233C 60%, #101828 100%)',
    }}>
      {/* navigator rail */}
      <div style={{ width: 248, flexShrink: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 13, marginBottom: 14 }}>
          <div style={{ position: 'relative', flexShrink: 0, width: 46, height: 46, borderRadius: 9, overflow: 'hidden' }}>
            <img src="b1-logo.png" alt="B1" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
          </div>

        </div>
        <p style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 16, color: 'var(--gold)', lineHeight: 1.5, margin: '0 0 22px', padding: '12px 0 0', borderTop: '1px solid var(--ink-line)' }}>
          “ Trăm đường một hướng ”
        </p>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
          {SCREENS.map((s, i) => {
            const on = s.k === screen;
            return (
              <button key={s.k} onClick={() => go(s.k)} style={{
                display: 'flex', alignItems: 'stretch', gap: 13, textAlign: 'left', cursor: 'pointer',
                padding: '11px 14px', borderRadius: 4,
                transition: 'background-color .16s ease, border-color .16s ease',
                backgroundColor: on ? 'var(--ink-soft)' : 'transparent',
                border: '1px solid ' + (on ? 'rgba(184,153,104,.4)' : 'transparent'),
              }}>
                <span style={{ width: 2, alignSelf: 'stretch', background: on ? 'var(--gold)' : 'rgba(200,192,174,.16)', flexShrink: 0 }} />
                <span style={{ flex: 1 }}>
                  <span style={{ display: 'block', fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: on ? 500 : 400, color: on ? 'var(--cream)' : 'var(--cream-dim)', lineHeight: 1.25 }}>{s.name}</span>
                  <span className="b1-mono" style={{ fontSize: 9, color: on ? 'var(--gold)' : 'rgba(200,192,174,.4)', letterSpacing: '.06em' }}>{s.vi}</span>
                </span>
                {on && <span style={{ alignSelf: 'center', width: 6, height: 6, borderRadius: '50%', background: 'var(--vermilion)' }} />}
              </button>
            );
          })}
        </div>

        <div className="b1-rule" style={{ margin: '22px 0 14px' }} />
        <div className="b1-mono" style={{ fontSize: 9, color: 'rgba(200,192,174,.4)', lineHeight: 1.7, letterSpacing: '.04em' }}>
          ← → để chuyển màn · mở Tweaks<br />để đổi nghi thức, tốc độ bình luận, accent.
        </div>
      </div>

      {/* phone */}
      <div style={{ flexShrink: 0 }}>
        <IOSDevice dark>
          {cur.el(t, go, bg, setBg, sessionMode, setSessionMode, notes, setNotes, sessionType, setSessionType)}
        </IOSDevice>
      </div>

      {/* Tweaks */}
      <TweaksPanel>
        <TweakSection label="Nghi thức" />
        <TweakRadio label="Tốc độ bình luận" value={t.danmuSpeed}
          options={['tắt', 'chậm', 'vừa', 'nhanh']}
          onChange={v => setTweak('danmuSpeed', v)} />
        <TweakSection label="Sắc thái" />
        <TweakColor label="Vàng accent" value={t.accent}
          options={['#B89968', '#C2A878', '#A8894F', '#9C8A6A']}
          onChange={v => setTweak('accent', v)} />
        <TweakSelect label="Hiệu ứng nền (host chọn)" value={t.particle}
          options={['Tắt', 'Bụi trầm', 'Tuyết', 'Mưa', 'Khói hương', 'Cánh hoa']}
          onChange={v => setTweak('particle', v)} />
      </TweaksPanel>
    </div>
  );
}

// keyboard nav
const navArrow = {
  flexShrink: 0, width: 38, height: 38, borderRadius: '50%', cursor: 'pointer',
  background: 'var(--ink-soft)', border: '1px solid var(--ink-line)',
  display: 'flex', alignItems: 'center', justifyContent: 'center',
};
ReactDOM.createRoot(document.getElementById('root')).render(<App />);