/* ════════════════════════════════════════════════════════════
   Desktop shell — Bloomberg-style 3-column layout
   Top bar + left nav rail + main + right rail
   ════════════════════════════════════════════════════════════ */

const { useState: dS, useEffect: dE } = React;

function DesktopShell({ tweaks, setTweak, children, tab, setTab, detail, setDetail, market, setMarket, term, setTerm, notifOpen, setNotifOpen }) {
  const lang = window.__LANG || 'zh';
  const now = new Date();
  const [clock, setClock] = dS(now);
  dE(() => {
    const id = setInterval(() => setClock(new Date()), 30000);
    return () => clearInterval(id);
  }, []);

  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 },
  ];

  // breadcrumb
  const crumbs = [
    lang === 'zh' ? 'Felix · Private Briefing' : 'Felix · Private Briefing',
    detail ? t('nav.dashboard') : navTabs.find(n => n.id === tab)?.label,
    detail || null,
  ].filter(Boolean);

  const setTabAndClear = (id) => { setTab(id); setDetail(null); };

  // Right rail: market clocks + recent notifications + open positions
  const positions = (window.MOCK_POSITIONS?.open || []).slice(0, 4);
  const notif = (window.buildNotifications ? window.buildNotifications() : []).slice(0, 4);

  return (
    <div className="dt-shell">
      <header className="dt-top">
        <div className="dt-brand">
          <img src="icon-192.svg" alt="" width="22" height="22" className="dt-logo"/>
          <div>
            <div className="dt-brand-name">Felix · Private Briefing</div>
            <div className="dt-brand-sub">{lang==='zh' ? '股票推荐 · 三源融合' : 'Stock Briefing · 3-source fusion'}</div>
          </div>
        </div>

        <div className="dt-crumb">
          {crumbs.map((c, i) => (
            <span key={i} className="dt-crumb-seg">
              {i > 0 && <span className="dt-crumb-sep">›</span>}
              {c}
            </span>
          ))}
        </div>

        <div className="dt-toolbar">
          <div className="dt-market-row">
            {['us','cn','crypto','th'].map(m => (
              <button key={m}
                      className={'dt-mk' + (market === m ? ' on' : '')}
                      onClick={() => setMarket(m)}>
                {t('dashboard.market_' + m)}
              </button>
            ))}
          </div>
          <div className="dt-divider"/>
          <div className="dt-term-row">
            {['short','medium','long'].map(tm => (
              <button key={tm}
                      className={'dt-tm' + (term === tm ? ' on' : '')}
                      onClick={() => setTerm(tm)}>
                {t('dashboard.' + tm + '_term')}
              </button>
            ))}
          </div>
          <div className="dt-divider"/>
          <div className="dt-clock">
            <span className="dt-clock-mk">NY</span>
            <span className="dt-clock-v">{new Date(clock.getTime() - 13*3600000).toLocaleTimeString('en-US',{hour:'2-digit',minute:'2-digit',hour12:false})}</span>
          </div>
          <div className="dt-clock">
            <span className="dt-clock-mk">SH</span>
            <span className="dt-clock-v">{clock.toLocaleTimeString('en-US',{hour:'2-digit',minute:'2-digit',hour12:false})}</span>
          </div>
          <window.NotificationBell onOpen={() => setNotifOpen(true)} count={3} />
        </div>
      </header>

      <div className="dt-body">
        <aside className="dt-nav">
          <div className="dt-nav-sec">
            <div className="dt-nav-label">{lang==='zh' ? '导航' : 'Navigation'}</div>
            {navTabs.map(nt => {
              const active = !detail && tab === nt.id;
              const Ico = nt.icon;
              return (
                <button key={nt.id}
                        className={'dt-nav-item' + (active ? ' active' : '')}
                        onClick={() => setTabAndClear(nt.id)}>
                  <Ico width="14" height="14"/>
                  <span>{nt.label}</span>
                  {nt.id === 'dashboard' && <span className="dt-nav-badge">{window.MOCK_RECS?.filter(r => r.market === market && r.term === term).length || 0}</span>}
                </button>
              );
            })}
          </div>

          <div className="dt-nav-sec">
            <div className="dt-nav-label">{lang==='zh' ? '关注列表' : 'Watchlist'}</div>
            {(window.MOCK_RECS || []).slice(0, 5).map(r => (
              <button key={r.symbol} className="dt-watch" onClick={() => setDetail(r.symbol)}>
                <span className="dt-watch-sym">{r.symbol}</span>
                <span className={'dt-watch-ch ' + (r.price.change_pct >= 0 ? 'up' : 'down')}>
                  {r.price.change_pct >= 0 ? '+' : ''}{r.price.change_pct.toFixed(2)}%
                </span>
              </button>
            ))}
          </div>

          <div className="dt-nav-foot">
            <div className="dt-foot-line">
              <span className="d on"/> <span>{lang==='zh' ? '已同步' : 'synced'}</span>
            </div>
            <div className="dt-foot-line dim">v1.0 · Felix · {now.getFullYear()}</div>
          </div>
        </aside>

        <main className="dt-main">
          <div className="dt-main-scroll" id="app-scroll">
            {children}
          </div>
        </main>

        <aside className="dt-rail">
          <div className="dt-rail-sec">
            <div className="dt-rail-ttl">
              <span className="kicker">{lang==='zh' ? '当前持仓' : 'OPEN POSITIONS'}</span>
              <span className="meta">{positions.length}</span>
            </div>
            <div className="dt-pos-list">
              {positions.map(p => {
                const ret = (p.current - p.entry) / p.entry * 100;
                return (
                  <button key={p.symbol} className="dt-pos" onClick={() => setDetail(p.symbol)}>
                    <div className="dp-l">
                      <div className="dp-sym">{p.symbol}</div>
                      <div className="dp-sub">{p.days}d · @{p.entry}</div>
                    </div>
                    <div className={'dp-r ' + (ret >= 0 ? 'up' : 'down')}>
                      {ret >= 0 ? '+' : ''}{ret.toFixed(1)}%
                    </div>
                  </button>
                );
              })}
            </div>
          </div>

          <div className="dt-rail-sec">
            <div className="dt-rail-ttl">
              <span className="kicker">{lang==='zh' ? '最近通知' : 'RECENT'}</span>
              <button className="dt-see-all" onClick={() => setNotifOpen(true)}>
                {lang==='zh' ? '查看全部' : 'view all'} →
              </button>
            </div>
            <div className="dt-notif-list">
              {notif.map(n => (
                <div key={n.id} className="dt-notif"
                     onClick={() => { if (n.sym) setDetail(n.sym); }}>
                  <div className="dn-top">
                    <span className="dn-ttl">{n.ttl}</span>
                    {n.sym && <span className="dn-sym">{n.sym}</span>}
                  </div>
                  <div className="dn-msg">{n.msg}</div>
                </div>
              ))}
            </div>
          </div>

          <div className="dt-rail-foot">
            <div className="dt-foot-mast">
              {lang==='zh' ? '免责声明' : 'DISCLAIMER'}
            </div>
            <div className="dt-foot-text">
              {t('disclaimer')}
            </div>
          </div>
        </aside>
      </div>
    </div>
  );
}

window.DesktopShell = DesktopShell;

// expose buildNotifications globally if not yet
if (!window.buildNotifications) {
  // shadow: notifications.jsx exposes via inner closure; mirror minimal set here
  window.buildNotifications = function() { return []; };
}