/* MaiAgent Partner Portal — app shell, sidebar, topbar */

const NAV_GROUPS = [
  {
    labelKey: 'nav.overview',
    items: [
      { id: 'dashboard', labelKey: 'nav.dashboard', icon: 'dashboard' },
      { id: 'deals', labelKey: 'nav.deals', icon: 'shield', badge: 3 },
      { id: 'customers',        labelKey: 'nav.customers',        icon: 'users' },
      { id: 'customer_success', labelKey: 'nav.customer_success', icon: 'heart' },
    ],
  },
  {
    labelKey: 'nav.partner',
    items: [
      { id: 'onboarding', labelKey: 'nav.onboarding', icon: 'map' },
      { id: 'training', labelKey: 'nav.training', icon: 'book-open' },
      { id: 'video_hub', labelKey: 'nav.video_hub', icon: 'video' },
      { id: 'events', labelKey: 'nav.events', icon: 'calendar', badge: 2 },
      { id: 'roadmap', labelKey: 'nav.roadmap', icon: 'layers' },
    ],
  },
  {
    labelKey: 'nav.sales',
    items: [
      { id: 'materials', labelKey: 'nav.materials', icon: 'folder' },
      { id: 'cases', labelKey: 'nav.cases', icon: 'book' },
      { id: 'pricing', labelKey: 'nav.pricing', icon: 'tag' },
      { id: 'calculator', labelKey: 'nav.calculator', icon: 'wallet' },
      { id: 'proposal_assistant', labelKey: 'nav.proposal_assistant', icon: 'zap' },
      { id: 'compliance', labelKey: 'nav.compliance', icon: 'award' },
    ],
  },
  {
    labelKey: 'nav.account',
    items: [
      { id: 'orders',      labelKey: 'nav.orders',      icon: 'inbox' },
      { id: 'members',     labelKey: 'nav.members',     icon: 'settings' },
      { id: 'tickets',     labelKey: 'nav.tickets',     icon: 'life-buoy' },
      { id: 'notifications', labelKey: 'nav.notifications', icon: 'bell', badge: 3 },
    ],
  },
];

const Sidebar = ({ current, onNav, t, lang, isOpen, onClose }) => {
  return (
    <aside className={`sidebar ${isOpen ? 'is-open' : ''}`}>
      <div className="sidebar__brand">
        <div className="sidebar__brand-mark">
          <svg viewBox="60 65 220 120" xmlns="http://www.w3.org/2000/svg">
            <polygon fill="#26C281" points="156.48,178.32 194.62,178.32 156.08,73.13 123.33,73.13"/>
            <polygon fill="#1F4FFF" points="84.81,178.04 122.94,178.04 156.09,73.13 123.35,73.13"/>
          </svg>
        </div>
        <div className="sidebar__brand-text">
          <span className="sidebar__brand-name">MaiAgent</span>
          <span className="sidebar__brand-sub">{lang === 'zh' ? '夥伴 Portal' : 'Partner Portal'}</span>
        </div>
      </div>

      <div className="sidebar__partner">
        <div className="sidebar__partner-avatar">{initials(PARTNER.name[lang])}</div>
        <div className="sidebar__partner-info">
          <div className="sidebar__partner-name">{PARTNER.company[lang]}</div>
          <div className="sidebar__partner-meta">
            <span>{PARTNER.name[lang]}</span>
            <span className="sidebar__partner-badge">{lang === 'zh' ? '夥伴' : 'PARTNER'}</span>
          </div>
        </div>
      </div>

      <nav className="sidebar__nav">
        {NAV_GROUPS.map((g) => (
          <React.Fragment key={g.labelKey}>
            <div className="sidebar__section-label">{t(g.labelKey)}</div>
            {g.items.map((it) => {
              const active = current === it.id;
              return (
                <div
                  key={it.id}
                  className={`nav-item ${active ? 'is-active' : ''}`}
                  onClick={() => { onNav(it.id); onClose && onClose(); }}
                >
                  <Icon name={it.icon} className="nav-item__icon" size={18} />
                  <span className="nav-item__label">{t(it.labelKey)}</span>
                  {it.badge && <span className="nav-item__badge">{it.badge}</span>}
                </div>
              );
            })}
          </React.Fragment>
        ))}
      </nav>

      <div className="sidebar__footer">
        <Icon name="globe" size={14} />
        <span>{lang === 'zh' ? '版本 2026.05 · 台北資料中心' : 'v 2026.05 · Taipei DC'}</span>
      </div>
    </aside>
  );
};

const CRUMBS = {
  dashboard: ['nav.dashboard'],
  deals: ['nav.deals'],
  customers: ['nav.customers'],
  onboarding: ['nav.onboarding'],
  training: ['nav.training'],
  video_hub:        ['nav.video_hub'],
  customer_success: ['nav.customer_success'],
  materials: ['nav.materials'],
  cases: ['nav.cases'],
  pricing: ['nav.pricing'],
  calculator: ['nav.calculator'],
  events: ['nav.events'],
  roadmap: ['nav.roadmap'],
  proposal_assistant: ['nav.proposal_assistant'],
  compliance: ['nav.compliance'],
  orders:        ['nav.orders'],
  members:       ['nav.members'],
  tickets:       ['nav.tickets'],
  notifications: ['nav.notifications'],
};

const Topbar = ({ current, t, lang, setLang, onMenu, onOpenNoti }) => {
  return (
    <div className="topbar">
      <button className="icon-btn mobile-menu-btn" onClick={onMenu}><Icon name="menu" /></button>
      <div className="topbar__crumbs">
        <span>{t('common.partner_portal')}</span>
        <Icon name="chevron-right" size={14} />
        <span className="is-current">{t(CRUMBS[current][0])}</span>
      </div>
      <div className="topbar__search">
        <Icon name="search" size={16} />
        <input placeholder={t('common.search_global')} />
        <kbd>⌘K</kbd>
      </div>
      <div className="topbar__actions">
        <div className="lang-toggle">
          <button className={lang === 'zh' ? 'is-active' : ''} onClick={() => setLang('zh')}>繁中</button>
          <button className={lang === 'en' ? 'is-active' : ''} onClick={() => setLang('en')}>EN</button>
        </div>
        <IconBtn name="bell" hasDot onClick={onOpenNoti} />
        <IconBtn name="help" />
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '4px 4px 4px 10px', borderRadius: 999, border: '1px solid var(--mai-border)', cursor: 'pointer', background: 'white' }}>
          <span style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--mai-fg)' }}>{PARTNER.name[lang]}</span>
          <Avatar name={PARTNER.name[lang]} size="sm" />
        </div>
      </div>
    </div>
  );
};

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