// shell.jsx — Sidebar + Topbar
const { useState: useStateShell } = React;

// Translation strings
const T = {
  en: {
    main: 'Main', account: 'Account',
    home: 'Home', dashboard: 'Dashboard', myideas: 'My ideas', favorite: 'Favorite',
    profile: 'Profile', settings: 'Settings', logout: 'Logout',
    yourBalance: 'Your balance', trade: 'Trade for prizes',
    search: 'Search by idea name, or owner name…',
    newIdea: 'New Idea',
    ideasSystem: 'Ideas system',
  },
  ar: {
    main: 'الرئيسية', account: 'الحساب',
    home: 'الرئيسية', dashboard: 'لوحة التحكم', myideas: 'أفكاري', favorite: 'المفضلة',
    profile: 'الملف الشخصي', settings: 'الإعدادات', logout: 'تسجيل الخروج',
    yourBalance: 'رصيدك', trade: 'استبدال الجوائز',
    search: 'ابحث باسم الفكرة أو المالك…',
    newIdea: 'فكرة جديدة',
    ideasSystem: 'نظام الأفكار',
  },
};

function Sidebar({ route, go, collapsed, balance, pendingCount, lang = 'en' }) {
  const Icon = window.Icon;
  const t = T[lang] || T.en;
  const main = [
    { id: 'home',      icon: 'home',    label: t.home },
    { id: 'dashboard', icon: 'grid',    label: t.dashboard },
    { id: 'myideas',   icon: 'paper',   label: t.myideas },
    { id: 'favorite',  icon: 'heart',   label: t.favorite, badge: 4 },
  ];
  const account = [
    { id: 'profile',  icon: 'profile',  label: t.profile },
    { id: 'settings', icon: 'settings', label: t.settings },
  ];
  const Item = (it) => (
    <button key={it.id} className={`nav-item ${route === it.id ? 'active' : ''}`} onClick={() => go(it.id)} title={it.label}>
      <Icon name={it.icon} size={21} />
      <span>{it.label}</span>
      {it.badge ? <span className="badge">{it.badge}</span> : null}
    </button>
  );
  return (
    <aside className="sidebar">
      <div className="brand">
        <div className="brand-mark"><window.BrandMark /></div>
        <div className="brand-text"><b>IdeaMint</b><span>{t.ideasSystem}</span></div>
      </div>
      <nav className="nav">
        <div className="nav-label">{t.main}</div>
        {main.map(Item)}
        <div className="nav-label">{t.account}</div>
        {account.map(Item)}
        <button className="nav-item" onClick={() => go('home')} title={t.logout} style={{ marginTop: 4 }}>
          <Icon name="logout" size={21} /><span>{t.logout}</span>
        </button>
      </nav>
      <div className="sidebar-foot">
        <div className="balance-card">
          <div className="lbl">{t.yourBalance}</div>
          <div className="amt tnum">{window.fmt(balance)} <small>USD</small></div>
          <button className="trade" onClick={() => go('trade')}>
            <Icon name="gift" size={16} /><span>{t.trade}</span>
          </button>
        </div>
      </div>
    </aside>
  );
}

function Topbar({ toggleRail, search, setSearch, balance, onAdd, onNav, onSearchSubmit, notifOpen, setNotifOpen, unread, lang = 'en', toggleLang }) {
  const Icon = window.Icon;
  const t = T[lang] || T.en;
  const isAr = lang === 'ar';
  return (
    <header className="topbar">
      <button className="rail-toggle" onClick={toggleRail} title="Toggle menu">
        <Icon name="chevLeft" size={20} style={{ transform: isAr ? 'rotate(180deg)' : 'none' }} />
      </button>
      <div className="search">
        <Icon name="search" size={19} />
        <input placeholder={t.search} value={search}
          onChange={e => { setSearch(e.target.value); onSearchSubmit(e.target.value); }}
          onKeyDown={e => { if (e.key === 'Enter') onSearchSubmit(e.target.value, true); }} />
        <kbd>⌘K</kbd>
      </div>
      <div className="top-actions">
        <div style={{ position: 'relative' }}>
          <button className="icon-btn" title="Notifications" onClick={() => setNotifOpen(o => !o)} style={notifOpen ? { background: 'var(--ink-50)', color: 'var(--ink-800)' } : undefined}>
            <Icon name="bell" size={21} />{unread > 0 && <span className="dot" />}
          </button>
        </div>
        <button className="balance-pill" onClick={() => onNav('trade')} title="Trade your balance">
          <span className="coin">$</span><span className="tnum">{window.fmt(balance)}</span>
        </button>
        <div className="divider-v" />
        <button className="lang" title={isAr ? 'Switch to English' : 'التبديل إلى العربية'} onClick={toggleLang}
          style={{ fontFamily: isAr ? "'Noto Sans Arabic', sans-serif" : undefined }}>
          <Icon name="globe" size={20} />
          {isAr ? 'العربية' : 'English'}
          <Icon name="chevDown" size={16} />
        </button>
        <button onClick={() => onNav('profile')} title="Your profile"><window.Avatar src={window.AV.heba} size={42} /></button>
        <button className="btn btn-primary" onClick={onAdd}><Icon name="plus" size={18} />{t.newIdea}</button>
      </div>
    </header>
  );
}

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