// Root app: tab navigation, theme/lang, tweaks panel wiring.
// Depends on: components.jsx, pages.jsx, tweaks-panel.jsx, data.js

const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lang": "zh",
  "theme": "dark",
  "style": "union",
  "palette": "midnight",
  "startTab": "dashboard",
  "density": "normal",
  "layout": "auto",
  "showCircuitBreaker": false
}/*EDITMODE-END*/;

function StockApp({ layout = 'phone' }) {
  const [tab, setTab] = useState('dashboard');
  const [detail, setDetail] = useState(null);
  const [market, setMarket] = useState('us');
  const [term, setTerm] = useState('short');
  const [notifOpen, setNotifOpen] = useState(false);
  const [comparePair, setComparePair] = useState(null);
  const t_ = window.useTweaks(TWEAK_DEFAULTS);
  const [tweaks, setTweak] = t_;

  // sync lang + theme globally
  useEffect(() => {
    window.__LANG = tweaks.lang;
    window.__STYLE = tweaks.style;
    document.documentElement.setAttribute('data-theme', tweaks.theme === 'system' ? 'dark' : tweaks.theme);
    document.documentElement.setAttribute('data-style', tweaks.style || 'editorial');
    document.documentElement.setAttribute('data-palette', tweaks.palette || 'midnight');
    document.documentElement.setAttribute('data-animations', tweaks.animations === false ? 'off' : 'on');
    document.documentElement.setAttribute('data-density', tweaks.density || 'normal');
    window.__TWEAKS = tweaks;
    window.__APP = {
      setTab: setTabAndClear,
      openNotif: () => setNotifOpen(true),
      toggleTheme: () => setTweak('theme', tweaks.theme === 'dark' ? 'light' : 'dark'),
      toggleLang:  () => setTweak('lang',  tweaks.lang  === 'zh'   ? 'en'    : 'zh'),
      refresh:     () => window.toast?.({ msg: tweaks.lang==='zh' ? '数据已刷新 · 7 分钟前的快照' : 'Refreshed · snapshot 7m ago', kind: 'success' }),
    };
    setForce(f => f + 1);
  }, [tweaks.lang, tweaks.theme, tweaks.palette, tweaks.style]);

  const [, setForce] = useState(0);

  const openDetail = (sym) => setDetail(sym);
  const goBack = () => setDetail(null);

  const navTabs = [
    { id: 'dashboard', label: t('nav.dashboard'), icon: Icon.home },
    { id: 'portfolio', label: t('nav.portfolio'), icon: Icon.briefcase },
    { id: 'strategy', label: t('nav.strategy'), icon: Icon.layers },
    { id: 'settings', label: t('nav.settings'), icon: Icon.gear },
  ];

  // when changing tabs, close detail
  const setTabAndClear = (id) => { setTab(id); setDetail(null); };

  const pageContent = (
    <>
      {detail ? <DetailPage symbol={detail} onBack={goBack} style={tweaks.style} tweaks={tweaks} /> :
        tab === 'dashboard' ? <DashboardPage market={market} setMarket={setMarket} term={term} setTerm={setTerm} onOpen={openDetail} style={tweaks.style} tweaks={tweaks} /> :
        tab === 'portfolio' ? <PortfolioPage /> :
        tab === 'strategy' ? <StrategyPage /> :
        <SettingsPage lang={tweaks.lang} theme={tweaks.theme} tweaks={tweaks} setTweak={setTweak} />
      }
    </>
  );

  if (layout === 'desktop') {
    return (
      <div className="app" data-screen-label={detail ? '02 Detail' : `01 ${tab}`}>
        <window.NotificationCenter open={notifOpen} onClose={() => setNotifOpen(false)} onOpenStock={(s) => { setDetail(s); }} />
        {window.InstallBanner && <window.InstallBanner />}
        {window.CommandPalette && <window.CommandPalette />}
        {window.ToastHost && <window.ToastHost />}
        {window.Onboarding && <window.Onboarding />}
        {window.CompareTray && <window.CompareTray onOpen={(pair) => setComparePair(pair)} />}
        {window.CompareSheet && <window.CompareSheet open={!!comparePair} pair={comparePair} onClose={() => setComparePair(null)} />}
        <window.DesktopShell
          tweaks={tweaks} setTweak={setTweak}
          tab={tab} setTab={setTab}
          detail={detail} setDetail={setDetail}
          market={market} setMarket={setMarket}
          term={term} setTerm={setTerm}
          notifOpen={notifOpen} setNotifOpen={setNotifOpen}
        >
          {pageContent}
        </window.DesktopShell>

        <window.TweaksPanel title="Tweaks">
          <window.TweakSection label="Layout">
            <window.TweakRadio label="Mode"
              value={(typeof localStorage !== 'undefined' && localStorage.getItem('__layout_override')) || 'auto'}
              onChange={(v) => window.__setLayout?.(v)}
              options={[{ value: 'auto', label: 'Auto' }, { value: 'phone', label: 'Phone' }, { value: 'desktop', label: 'Desktop' }]} />
          </window.TweakSection>
          <window.TweakSection label="Visual Style">
            <window.TweakRadio label="Style" value={tweaks.style}
              onChange={(v) => setTweak('style', v)}
              options={[{ value: 'union', label: 'Union' }, { value: 'editorial', label: 'Editorial' }, { value: 'dossier', label: 'Dossier' }, { value: 'poster', label: 'Poster' }]} />
          </window.TweakSection>
          <window.TweakSection label="Language / Theme">
            <window.TweakRadio label="Lang" value={tweaks.lang}
              onChange={(v) => setTweak('lang', v)}
              options={[{ value: 'zh', label: '中文' }, { value: 'en', label: 'English' }]} />
            <window.TweakRadio label="Theme" value={tweaks.theme}
              onChange={(v) => setTweak('theme', v)}
              options={[{ value: 'dark', label: 'Dark' }, { value: 'light', label: 'Light' }]} />
          </window.TweakSection>
        </window.TweaksPanel>
      </div>
    );
  }

  const scrollRef = useRef(null);
  const doRefresh = () => new Promise(res => setTimeout(() => {
    window.toast?.({ msg: tweaks.lang==='zh' ? '已刷新 · 三源信号已同步' : 'Refreshed · sources synced', kind: 'success' });
    res();
  }, 700));

  return (
    <div className="app" data-screen-label={detail ? '02 Detail' : `01 ${tab}`}>
      <div className="status-rail">
        <window.NotificationBell onOpen={() => setNotifOpen(true)} count={3} />
      </div>
      {window.DynamicIsland && <window.DynamicIsland market={market}/>}
      <window.NotificationCenter open={notifOpen} onClose={() => setNotifOpen(false)} onOpenStock={(s) => { setDetail(s); }} />
      {window.InstallBanner && <window.InstallBanner />}
      {window.CommandPalette && <window.CommandPalette />}
      {window.ToastHost && <window.ToastHost />}
      {window.Onboarding && <window.Onboarding />}
      <div className="app-scroll" id="app-scroll" ref={scrollRef}>
        {window.PullToRefresh && !detail && tab === 'dashboard'
          ? <window.PullToRefresh onRefresh={doRefresh} scrollRef={scrollRef}>{pageContent}</window.PullToRefresh>
          : pageContent}
      </div>

      <nav className="tabbar" role="tablist">
        {navTabs.map(nt => {
          const active = !detail && tab === nt.id;
          const Ico = nt.icon;
          return (
            <button key={nt.id} className={'tab' + (active ? ' active' : '')} onClick={() => setTabAndClear(nt.id)} role="tab" aria-selected={active}>
              <Ico />
              <span>{nt.label}</span>
            </button>
          );
        })}
      </nav>

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label="Visual Style">
          <window.TweakRadio
            label="Style"
            value={tweaks.style}
            onChange={(v) => setTweak('style', v)}
            options={[{ value: 'union', label: 'Union' }, { value: 'editorial', label: 'Editorial' }, { value: 'dossier', label: 'Dossier' }, { value: 'poster', label: 'Poster' }]}
          />
          <div style={{ fontSize: 10, color: 'var(--text-3)', lineHeight: 1.5, padding: '4px 2px 0' }}>
            <b>Union</b> · editorial surface, dossier on demand (default)<br/>
            <b>Editorial</b> · pure FT/Economist newsprint<br/>
            <b>Dossier</b> · raw analyst case-file<br/>
            <b>Poster</b> · swipe-to-act trading desk
          </div>
        </window.TweakSection>

        <window.TweakSection label="Language / Theme">
          <window.TweakRadio
            label="Language"
            value={tweaks.lang}
            onChange={(v) => setTweak('lang', v)}
            options={[{ value: 'zh', label: '中文' }, { value: 'en', label: 'English' }]}
          />
          <window.TweakRadio
            label="Theme"
            value={tweaks.theme}
            onChange={(v) => setTweak('theme', v)}
            options={[{ value: 'dark', label: 'Dark' }, { value: 'light', label: 'Light' }]}
          />
        </window.TweakSection>

        <window.TweakSection label="Dashboard">
          <window.TweakRadio
            label="Market"
            value={market}
            onChange={setMarket}
            options={[{ value: 'us', label: 'US' }, { value: 'cn', label: 'A股' }, { value: 'crypto', label: 'Crypto' }, { value: 'th', label: '泰股' }]}
          />
          <window.TweakRadio
            label="Term"
            value={term}
            onChange={setTerm}
            options={[{ value: 'short', label: '短' }, { value: 'medium', label: '中' }, { value: 'long', label: '长' }]}
          />
        </window.TweakSection>

        <window.TweakSection label="Layout">
          <window.TweakRadio
            label="Mode"
            value={(typeof localStorage !== 'undefined' && localStorage.getItem('__layout_override')) || 'auto'}
            onChange={(v) => window.__setLayout?.(v)}
            options={[{ value: 'auto', label: 'Auto' }, { value: 'phone', label: '手机' }, { value: 'desktop', label: '桌面' }]}
          />
        </window.TweakSection>

        <window.TweakSection label="Navigation">
          <window.TweakSelect
            label="Page"
            value={detail ? '_detail' : tab}
            onChange={(v) => { if (v === '_detail') { setDetail('NVDA'); } else { setTabAndClear(v); } }}
            options={[
              { value: 'dashboard', label: 'Dashboard' },
              { value: '_detail', label: '└ Stock Detail (NVDA)' },
              { value: 'portfolio', label: 'Portfolio' },
              { value: 'strategy', label: 'Strategies' },
              { value: 'settings', label: 'Settings' },
            ]}
          />
        </window.TweakSection>
      </window.TweaksPanel>
    </div>
  );
}

function Mount() {
  const [vw, setVw] = React.useState(window.innerWidth);
  const [override, setOverride] = React.useState(() => {
    try { return localStorage.getItem('__layout_override') || 'auto'; } catch (e) { return 'auto'; }
  });
  React.useEffect(() => {
    const onR = () => setVw(window.innerWidth);
    const onLay = (e) => setOverride(e.detail || 'auto');
    window.addEventListener('resize', onR);
    window.addEventListener('__layout_change', onLay);
    return () => { window.removeEventListener('resize', onR); window.removeEventListener('__layout_change', onLay); };
  }, []);
  React.useEffect(() => {
    window.__setLayout = (v) => {
      try { localStorage.setItem('__layout_override', v); } catch (e) {}
      window.dispatchEvent(new CustomEvent('__layout_change', { detail: v }));
    };
  }, []);
  const useDesktop = override === 'desktop' || (override === 'auto' && vw >= 1100);
  if (useDesktop) return <StockApp layout="desktop" />;
  return (
    <div className="stage">
      <IOSDevice width={402} height={874} dark={true}>
        <StockApp layout="phone" />
      </IOSDevice>
    </div>
  );
}

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