// App shell — tgplay topbar + couple sidebar + mobile tab bar
// Changes from the design prototype:
//  - Removed non-functional "search games" input (no backend search yet)
//  - "tgplay" brand links to the portal domain instead of resetting state
//  - "new" badge on Reveal entry uses the real game state from the API

const NAV = [
  { id: 'today',    label: 'Сегодня',      icon: 'today' },
  { id: 'reveal',   label: 'Раскрытие',    icon: 'reveal' },
  { id: 'archive',  label: 'Архив',        icon: 'archive' },
  { id: 'stats',    label: 'Статистика',   icon: 'stats' },
  { id: 'capsule',  label: 'Наша капсула', icon: 'capsule' },
  { id: 'settings', label: 'Настройки',    icon: 'settings' }
];

const PORTAL_URL = 'https://tgplay.ru';

window.TopBar = function TopBar({ screen, state, data }) {
  const screenLabel = ({
    today: 'Сегодня', reveal: 'Раскрытие', archive: 'Архив',
    stats: 'Статистика', capsule: 'Наша капсула', settings: 'Настройки',
    onboarding: 'Подключение', landing: 'Превью'
  })[screen] || screen;
  const showCrumb = !!data && data.hasPair && screen !== 'landing' && screen !== 'onboarding';
  const meInitial = data && data.me ? data.me.initial : '?';
  const meName = data && data.me ? data.me.name : '';

  return (
    <header className="topbar">
      <a className="topbar__brand" href={PORTAL_URL} aria-label="К порталу tgplay">
        <span className="topbar__brand-dot">tg</span>
        <span>tgplay</span>
      </a>
      <div className="topbar__crumb">
        <window.Icon name="arrow" size={14}/>
        <b>Вопрос дня для пары</b>
        {showCrumb && <>
          <window.Icon name="arrow" size={14}/>
          <span>{screenLabel}</span>
        </>}
      </div>
      <div className="topbar__spacer"></div>
      {meName && (
        <div className="topbar__user">
          <span className="topbar__avatar">{meInitial}</span>
          <span style={{fontSize: 13, fontWeight: 600}}>{meName}</span>
        </div>
      )}
    </header>
  );
};

window.Sidebar = function Sidebar({ screen, setScreen, state, data }) {
  const hasReveal = state === 'reveal-ready';
  const newCount = hasReveal ? 1 : 0;
  const me = data && data.me;
  const partner = data && data.partner;
  const pair = data && data.pair;

  return (
    <aside className="sidebar">
      <div className="sidebar__game">
        <div className="sidebar__icon">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l8.8 8.8 8.8-8.8a5.5 5.5 0 0 0 0-7.8z"/></svg>
        </div>
        <div className="sidebar__game-meta">
          <div className="sidebar__game-name">Вопрос дня</div>
          <div className="sidebar__game-tag">для пары · ru</div>
        </div>
      </div>

      <div className="nav__section">Игра</div>
      {NAV.slice(0, 2).map(item => (
        <button key={item.id} className={'nav__item' + (screen === item.id ? ' nav__item--active' : '')} onClick={() => setScreen(item.id)}>
          <window.Icon name={item.icon}/>
          <span>{item.label}</span>
          {item.id === 'reveal' && newCount > 0 && <span className="nav__item-badge">{newCount}</span>}
        </button>
      ))}

      <div className="nav__section">Архив</div>
      {NAV.slice(2, 5).map(item => (
        <button key={item.id} className={'nav__item' + (screen === item.id ? ' nav__item--active' : '')} onClick={() => setScreen(item.id)}>
          <window.Icon name={item.icon}/>
          <span>{item.label}</span>
        </button>
      ))}

      <div className="nav__section">Аккаунт</div>
      {NAV.slice(5).map(item => (
        <button key={item.id} className={'nav__item' + (screen === item.id ? ' nav__item--active' : '')} onClick={() => setScreen(item.id)}>
          <window.Icon name={item.icon}/>
          <span>{item.label}</span>
        </button>
      ))}

      {me && partner && pair && (
        <div className="sidebar__pair">
          <div className="sidebar__pair-label">Ваша пара</div>
          <div className="sidebar__pair-row">
            <div className="avatar-pair">
              <div className="avatar-pair__a">{me.initial}</div>
              <div className="avatar-pair__b">{partner.initial}</div>
            </div>
            <div className="sidebar__pair-names">{me.name} & {partner.name}</div>
          </div>
          <div className="sidebar__pair-streak">
            <window.Icon name="flame" size={14}/>
            <span>Серия {pair.current_streak} {pair.current_streak === 1 ? 'день' : (pair.current_streak < 5 ? 'дня' : 'дней')}</span>
          </div>
        </div>
      )}
    </aside>
  );
};

window.MobileTabs = function MobileTabs({ screen, setScreen, state }) {
  const hasReveal = state === 'reveal-ready';
  const items = [
    { id: 'today',    label: 'Сегодня', icon: 'today' },
    { id: 'reveal',   label: 'Раскрыть', icon: 'reveal', badge: hasReveal },
    { id: 'archive',  label: 'Архив',   icon: 'archive' },
    { id: 'stats',    label: 'Статы',   icon: 'stats' },
    { id: 'settings', label: 'Ещё',     icon: 'settings' }
  ];
  return (
    <nav className="mobile-tabs">
      {items.map(item => (
        <button key={item.id} className={'mobile-tabs__btn' + (screen === item.id ? ' mobile-tabs__btn--active' : '')} onClick={() => setScreen(item.id)} style={{position: 'relative'}}>
          <window.Icon name={item.icon} size={22}/>
          <span>{item.label}</span>
          {item.badge && <span style={{position:'absolute', top:8, right:'calc(50% - 16px)', width:7, height:7, borderRadius:'50%', background:'var(--brand)', boxShadow:'0 0 8px var(--brand-glow)'}}></span>}
        </button>
      ))}
    </nav>
  );
};