function StatusBar({ dark }) {
  const th = useTheme(dark);
  return (
    <div style={{
      position:'absolute', top:0, left:0, right:0, height:44,
      display:'flex', alignItems:'center', justifyContent:'space-between',
      padding:'0 26px', zIndex:55, fontFamily:FONTS.mono, fontSize:FS(14), fontWeight:600,
      color:th.text, pointerEvents:'none',
    }}>
      <span>9:41</span>
      <span style={{ display:'flex', alignItems:'center', gap:5 }}>
        <svg width="17" height="11" viewBox="0 0 17 11"><rect x="0.5" y="0.5" width="10" height="10" rx="2.5" fill="none" stroke="currentColor"/><rect x="3" y="3.5" width="5" height="4" rx="1" fill="currentColor"/><path d="M12.5 3v5M14.5 1.5v8M16.5 4v3" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round"/></svg>
        <svg width="25" height="12" viewBox="0 0 25 12"><rect x="0.5" y="0.5" width="20" height="11" rx="3" fill="none" stroke="currentColor"/><rect x="2" y="2.5" width="15" height="7" rx="1.5" fill="currentColor"/><rect x="22.5" y="4" width="2" height="4" rx="1" fill="currentColor"/></svg>
      </span>
    </div>
  );
}

function MessagesOverlay({ dark, onClose }) {
  const th = useTheme(dark);
  return (
    <div className="fullscreen-overlay" style={{ background:th.bg, '--bg':th.bg }}>
      <ScreenHeader
        title="訊息"
        sub={`${DATA.messages.unread} 則未讀`}
        onBack={onClose}
        right={
          <span style={{ display:'flex', alignItems:'center', gap:4, fontSize:FS(11), color:th.success, fontWeight:600 }}>
            <span className="pulse-dot" style={{ width:6, height:6, borderRadius:'50%', background:th.success, display:'inline-block' }} />即時
          </span>
        }
        dark={dark}
      />
      <div style={{ flex:1, overflowY:'auto', padding:'0 16px 20px' }} className="scroll-hide">
        <div style={{ display:'flex', justifyContent:'flex-end', marginBottom:10 }}>
          <button onClick={() => onClose()} className="press" style={{ background:'transparent', border:'none', color:th.info, fontSize:FS(12), fontWeight:600, cursor:'pointer', fontFamily:'Noto Sans TC' }}>全部標為已讀</button>
        </div>
        {DATA.messages.items.map((m,i) => (
          <div key={i} onClick={onClose} className="press" style={{
            background:th.surface, border:`1.5px solid ${m.unread?th.danger:th.border}`, borderRadius:14, padding:14, marginBottom:10, cursor:'pointer',
            opacity: m.unread?1:.75,
          }}>
            <div style={{ display:'flex', alignItems:'center', gap:8 }}>
              <Pill fg={m.color} bg={m.bg} style={{ fontSize:FS(11), fontWeight:700 }}>{m.title}</Pill>
              <span style={{ marginLeft:'auto', fontFamily:FONTS.mono, fontSize:FS(10.5), color:th.textMuted }}>{m.time}</span>
              {m.unread && <span style={{ width:7, height:7, borderRadius:'50%', background:th.danger }} />}
            </div>
            <div style={{ fontSize:FS(13), color:th.text, marginTop:8, whiteSpace:'pre-wrap', lineHeight:1.6 }}>{m.body}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function Root() {
  const [dark, setDark] = useState(() => localStorage.getItem('gogmo_dark')==='1');
  const [big, setBig] = useState(() => localStorage.getItem('gogmo_bigfont')==='1');
  const [tab, setTab] = useState(() => localStorage.getItem('gogmo_driver_tab') || 'hall');
  const [messagesOpen, setMessagesOpen] = useState(false);

  React.useEffect(() => { window.BIGFONT = big; }, [big]);

  function changeDark(v) {
    setDark(v);
    localStorage.setItem('gogmo_dark', v?'1':'0');
    document.getElementById('globalDarkBtn').textContent = v ? '☀️ 切換淺色' : '🌙 切換深色';
  }
  function changeBig(v) {
    setBig(v);
    localStorage.setItem('gogmo_bigfont', v?'1':'0');
  }
  function changeTab(t) {
    setTab(t);
    localStorage.setItem('gogmo_driver_tab', t);
    window.location.hash = t;
  }

  return (
    <div className="app" style={{ background: useTheme(dark).bg }}>
      <StatusBar dark={dark} />
      <div className="tab-area" style={{ background: useTheme(dark).bg }}>
        {tab==='hall' && <TabHall dark={dark} unread={DATA.messages.unread} onOpenMessages={() => setMessagesOpen(true)} />}
        {tab==='schedule' && <TabSchedule dark={dark} />}
        {tab==='premium' && <TabPremium dark={dark} />}
        {tab==='finance' && <TabFinance dark={dark} />}
        {tab==='profile' && <TabProfile dark={dark} big={big} onToggleBig={changeBig} onToggleDark={changeDark} onReport={() => alert('跳轉問題回報頁（原型示意）')} onLogout={() => alert('登出（原型示意）')} />}
      </div>
      {messagesOpen && <MessagesOverlay dark={dark} onClose={() => setMessagesOpen(false)} />}
      <BottomNav tab={tab} onChange={changeTab} dark={dark} unread={DATA.messages.unread} />
    </div>
  );
}

window.addEventListener('hashchange', () => {
  const h = window.location.hash.replace('#','');
  if (['hall','schedule','premium','finance','profile'].includes(h)) {
    localStorage.setItem('gogmo_driver_tab', h);
  }
});

ReactDOM.createRoot(document.getElementById('root')).render(<Root />);

const gb = document.getElementById('globalDarkBtn');
gb.addEventListener('click', () => {
  const v = localStorage.getItem('gogmo_dark')!=='1';
  localStorage.setItem('gogmo_dark', v?'1':'0');
  gb.textContent = v ? '☀️ 切換淺色' : '🌙 切換深色';
  document.location.reload();
});
gb.textContent = localStorage.getItem('gogmo_dark')==='1' ? '☀️ 切換淺色' : '🌙 切換深色';