// shell.jsx — App shell: sidebar nav, topbar, scope picker, page routing

const NAV = [
  { group: 'g_overview', items: [
    { id: 'dashboard', icon: 'dashboard', key: 'p_dashboard', badge: null },
    { id: 'bi',        icon: 'analytics', key: 'p_bi' },
  ]},
  { group: 'g_tenant', items: [
    { id: 'tenants',  icon: 'tenant',  key: 'p_tenants'  },
    { id: 'sites',    icon: 'site',    key: 'p_sites'    },
    { id: 'builder',  icon: 'builder', key: 'p_builder'  },
    { id: 'theme',    icon: 'bolt',    key: 'p_theme'    },
    { id: 'templates', icon: 'bolt',   key: 'p_templates' },
  ]},
  { group: 'g_user', items: [
    { id: 'users',    icon: 'user',    key: 'p_users'    },
    { id: 'levels',   icon: 'level',   key: 'p_levels'   },
    { id: 'agents',   icon: 'agents',  key: 'p_agents'   },
    { id: 'kyc',      icon: 'approvals', key: 'p_kyc'    },
  ]},
  { group: 'g_money', items: [
    { id: 'marketing', icon: 'marketing', key: 'p_marketing' },
    { id: 'finance',   icon: 'finance',   key: 'p_finance', badge: '12' },
    { id: 'payments',  icon: 'payments',  key: 'p_payments' },
  ]},
  { group: 'g_content', items: [
    { id: 'cms',      icon: 'videos', key: 'p_cms' },
    { id: 'brands',   icon: 'tenant', key: 'p_brands' },
    { id: 'games',    icon: 'games',  key: 'p_games' },
    { id: 'videos',   icon: 'videos', key: 'p_videos' },
    { id: 'live',     icon: 'live',   key: 'p_live'  },
  ]},
  { group: 'g_risk', items: [
    { id: 'pool',      icon: 'bolt',      key: 'p_pool' },
    { id: 'draws',     icon: 'bolt',      key: 'p_draws' },
    { id: 'bets',      icon: 'analytics', key: 'p_bets' },
    { id: 'trends',    icon: 'analytics', key: 'p_trends' },
    { id: 'winback',   icon: 'marketing', key: 'p_winback' },
    { id: 'risk',      icon: 'risk',      key: 'p_risk', badge: '6' },
    { id: 'analytics', icon: 'analytics', key: 'p_analytics' },
    { id: 'approvals', icon: 'approvals', key: 'p_approvals', badge: '24' },
  ]},
  { group: 'g_ops', items: [
    { id: 'audit',     icon: 'approvals', key: 'p_audit' },
    { id: 'support',   icon: 'marketing', key: 'p_support' },
    { id: 'broadcast', icon: 'bell',      key: 'p_broadcast' },
    { id: 'announce',  icon: 'bell',      key: 'p_announce' },
    { id: 'abtest',    icon: 'analytics', key: 'p_abtest' },
  ]},
  { group: 'g_system', items: [
    { id: 'errors',    icon: 'risk',      key: 'p_errors' },
    { id: 'ops',       icon: 'bolt',      key: 'p_ops' },
  ]},
];

function Sidebar({ active, onNav, t, open, onClose }) {
  const handleNav = (id) => {
    onNav(id);
    if (onClose) onClose();   // auto-close drawer after pick on tablet/phone
  };
  return (
    <React.Fragment>
      <div className={'app-side-backdrop' + (open ? ' open' : '')}
           onClick={onClose} />
      <aside className={'app-side' + (open ? ' open' : '')}>
      <div className="brand">
        <div className="brand-mark">N</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 0, lineHeight: 1.2 }}>
          <div>{t.brand}</div>
          <div style={{ fontSize: 10.5, color: 'var(--text-faint)', fontWeight: 400 }}>{t.brandSub}</div>
        </div>
      </div>

      <ScopePicker t={t} />

      {NAV.map((g) => (
        <div className="nav-group" key={g.group}>
          <div className="nav-label">{t[g.group]}</div>
          {g.items.map((item) => {
            const Ico = Icons[item.icon];
            return (
              <div key={item.id}
                   className={'nav-item' + (active === item.id ? ' active' : '')}
                   onClick={() => handleNav(item.id)}>
                <span className="ico"><Ico /></span>
                <span>{t[item.key]}</span>
                {item.badge && <span className="badge">{item.badge}</span>}
              </div>
            );
          })}
        </div>
      ))}

      <div style={{ padding: '16px 16px 20px', fontSize: 10.5, color: 'var(--text-faint)', borderTop: '1px solid var(--border)', marginTop: 12, display: 'flex', alignItems: 'center', gap: 8 }}>
        <span className="status-dot" />
        <span>All systems operational</span>
      </div>
    </aside>
    </React.Fragment>
  );
}

function ScopePicker({ t }) {
  return (
    <div className="scope-picker">
      <div className="scope-row">
        <span className="tag">{t.platform}</span>
        <span className="name">Nebula</span>
        <span className="chev">▾</span>
      </div>
      <div className="scope-row">
        <span className="tag">{t.tenant}</span>
        <span className="name">{t.tx('极光娱乐','Aurora Ent.')}</span>
        <span className="chev">▾</span>
      </div>
      <div className="scope-row">
        <span className="tag">{t.site}</span>
        <span className="name">aurora.cn</span>
        <span className="chev">▾</span>
      </div>
    </div>
  );
}

function Topbar({ active, t, crumb, lang, onLang, onMenuToggle }) {
  const labels = {
    dashboard: t.p_dashboard, tenants: t.p_tenants, sites: t.p_sites, builder: t.p_builder,
    users: t.p_users, levels: t.p_levels, agents: t.p_agents, kyc: t.p_kyc,
    marketing: t.p_marketing, finance: t.p_finance, payments: t.p_payments,
    games: t.p_games, videos: t.p_videos, live: t.p_live,
    risk: t.p_risk, analytics: t.p_analytics, approvals: t.p_approvals,
    pool: t.p_pool, draws: t.p_draws, bets: t.p_bets, trends: t.p_trends, winback: t.p_winback,
    audit: t.p_audit, support: t.p_support, broadcast: t.p_broadcast,
    announce: t.p_announce, abtest: t.p_abtest,
    theme: t.p_theme, templates: t.p_templates,
    errors: t.p_errors,
    bi: t.p_bi,
    ops: t.p_ops,
  };
  return (
    <header className="app-top">
      <button className="hamburger" onClick={onMenuToggle} title="Menu" aria-label="Menu">☰</button>
      <div className="crumbs">
        <span>{t.platform}</span>
        <span className="sep">/</span>
        <span>{t.tx('极光娱乐','Aurora Ent.')}</span>
        <span className="sep">/</span>
        <span>aurora.cn</span>
        <span className="sep">›</span>
        <span className="cur">{crumb || labels[active]}</span>
      </div>
      <div className="top-search">
        <Icons.search />
        <span>{t.search}…</span>
        <span className="kbd">⌘K</span>
      </div>
      <div className="top-actions">
        {/* Language switcher — 显眼地放在 topbar 右上角，配合右侧 Tweaks 面板的同步选项 */}
        <div style={{ display: 'inline-flex', border: '1px solid var(--border)', borderRadius: 6, overflow: 'hidden', marginRight: 4 }}>
          <button
            onClick={() => onLang && onLang('cn')}
            style={{
              padding: '4px 10px', fontSize: 11, fontWeight: lang === 'cn' ? 700 : 400,
              background: lang === 'cn' ? 'var(--accent)' : 'transparent',
              color: lang === 'cn' ? '#fff' : 'var(--text-muted)',
              border: 'none', cursor: 'pointer',
            }}>中</button>
          <button
            onClick={() => onLang && onLang('en')}
            style={{
              padding: '4px 10px', fontSize: 11, fontWeight: lang === 'en' ? 700 : 400,
              background: lang === 'en' ? 'var(--accent)' : 'transparent',
              color: lang === 'en' ? '#fff' : 'var(--text-muted)',
              border: 'none', cursor: 'pointer',
            }}>EN</button>
        </div>
        <button className="icon-btn" title="Refresh"><Icons.refresh /></button>
        <button className="icon-btn" title="Notifications"><Icons.bell /><span className="dot" /></button>
        <button className="icon-btn" title="Settings"><Icons.cog /></button>
        <div style={{ width: 1, height: 18, background: 'var(--border)', margin: '0 4px' }} />
        <div className="avatar">YZ</div>
      </div>
    </header>
  );
}

Object.assign(window, { Sidebar, Topbar, NAV });