/* global React, Icon, SyncChip */
// ============================================================
// App shell — sidebar, topbar, router context
// ============================================================
const { useState: useStateSh, useEffect: useEffectSh, createContext: createContextSh, useContext: useContextSh } = React;

const RouteCtx = createContextSh({ screen: 'dashboard', go: () => {} });
const useRoute = () => useContextSh(RouteCtx);

const SCREENS = [
  { id: 'dashboard',  label: 'Dashboard',    icon: Icon.Dashboard,   group: 'main' },
  { id: 'collections', label: 'Collections', icon: Icon.Collections, group: 'main' },
  { id: 'relics',     label: 'Relics',       icon: Icon.Relic,       group: 'main' },
  { id: 'static',     label: 'Static',       icon: Icon.Static,      group: 'group' },
  { id: 'fc',         label: 'Free Company', icon: Icon.FC,          group: 'group' },
  { id: 'settings',   label: 'Settings',     icon: Icon.Settings,    group: 'account' },
];

const TITLES = {
  landing:   { crumb: ['Welcome'] },
  binding:   { crumb: ['Bind character'] },
  dashboard: { crumb: ['Dashboard'] },
  collections: { crumb: ['Collections'] },
  relics:    { crumb: ['Relics', 'Zodiac weapon'] },
  static:    { crumb: ['Static', 'Aether Crystals'] },
  raidnight: { crumb: ['Static', 'Aether Crystals', 'Tue · Mar 4'] },
  loot:      { crumb: ['Static', 'Aether Crystals', 'Loot table'] },
  fc:        { crumb: ['Free Company', 'Whispers of Hydaelyn'] },
  settings:  { crumb: ['Settings'] },
};

function Sidebar({ collapsed, onCollapseChange, character }) {
  const { screen, go } = useRoute();
  const isStaticGroup = ['static', 'raidnight', 'loot'].includes(screen);

  return (
    <aside className="sidebar">
      <div className="sb-top">
        <div className="sb-brand">
          <div className="sb-mark"><Icon.Mark /></div>
          <div className="sb-name">Celestide</div>
        </div>
        <button className="sb-char" onClick={() => go('settings')}>
          <div className="sb-char-avatar"></div>
          <div className="sb-char-info">
            <div className="sb-char-name">{character.name}</div>
            <div className="sb-char-meta">{character.world} · {character.dc}</div>
          </div>
          <span className="sb-char-caret"><Icon.ChevUD /></span>
        </button>
      </div>

      <nav className="sb-nav">
        <div className="sb-section-label">Personal</div>
        {SCREENS.filter(s => s.group === 'main').map(s => (
          <button key={s.id} className={`nav-item ${screen === s.id ? 'active' : ''}`} onClick={() => go(s.id)}>
            <span className="nav-ic"><s.icon /></span>
            <span className="nav-label">{s.label}</span>
          </button>
        ))}
        <div className="sb-section-label">Group</div>
        <button className={`nav-item ${isStaticGroup ? 'active' : ''}`} onClick={() => go('static')}>
          <span className="nav-ic"><Icon.Static /></span>
          <span className="nav-label">Static</span>
        </button>
        <button className={`nav-item ${screen === 'fc' ? 'active' : ''}`} onClick={() => go('fc')}>
          <span className="nav-ic"><Icon.FC /></span>
          <span className="nav-label">Free Company</span>
        </button>
      </nav>

      <div className="sb-foot">
        <button className={`nav-item ${screen === 'settings' ? 'active' : ''}`} onClick={() => go('settings')}>
          <span className="nav-ic"><Icon.Settings /></span>
          <span className="nav-label">Settings</span>
        </button>
        <div className="sb-account">
          <div className="sb-account-avatar">JK</div>
          <div className="sb-account-text">
            <div className="sb-account-name">jakob.kohl</div>
            <div className="sb-account-sub">Discord</div>
          </div>
        </div>
      </div>
    </aside>
  );
}

function Crumbs({ crumb }) {
  return (
    <div className="tb-title">
      {crumb.map((c, i) => (
        <React.Fragment key={i}>
          {i > 0 && <span className="tb-crumb-sep">/</span>}
          {i < crumb.length - 1
            ? <span className="tb-crumb-soft">{c}</span>
            : <span>{c}</span>}
        </React.Fragment>
      ))}
    </div>
  );
}

function TopBar({ syncState, extra, onToggleTheme, theme }) {
  const { screen } = useRoute();
  const t = TITLES[screen] || { crumb: [screen] };
  return (
    <header className="topbar">
      <Crumbs crumb={t.crumb} />
      <div className="tb-actions">
        {extra}
        <SyncChip state={syncState} />
        <button className="btn ghost small" onClick={onToggleTheme} title="Toggle theme">
          {theme === 'dark' ? <Icon.Sun /> : <Icon.Moon />}
        </button>
        <div className="sb-account-avatar" style={{ width: 28, height: 28 }}>JK</div>
      </div>
    </header>
  );
}

Object.assign(window, { RouteCtx, useRoute, SCREENS, TITLES, Sidebar, TopBar });