/* ============================================================
   app.jsx — App shell, navigation, scenario rail, mount
   ============================================================ */
const { useState: uS } = React;
const NOTIF = 3; // R22 «требуют сверки»

const VIEW_TITLE = { dashboard: 'Дашборд', events: 'Мероприятия', subs: 'Подписки', menu: 'Меню' };

/* ===================== REVIEW RAIL ===================== */
function ScenBtn({ id, name, req, active, onClick }) {
  return (
    <button className={'scen' + (active ? ' is-active' : '')} onClick={onClick}>
      <span className="scen__name">{name}</span><span className="scen__req">{req}</span>
    </button>
  );
}

function Rail({ scenario, tab, card, onPick }) {
  const key = (sc, target) =>
    scenario === sc && (
      (sc === 'normal')
        ? (target === 'card' ? !!card && tab === 'events'
          : target === 'events' ? tab === 'events' && !card
          : tab === target)
        : true
    );
  return (
    <div className="rail">
      <div className="rail__intro">
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
          <span style={{ fontSize: 10.5, letterSpacing: '.22em', textTransform: 'uppercase', color: 'var(--ink-3)', fontWeight: 700 }}>Integramma</span>
          <span style={{ flex: 1, height: 1, background: 'var(--hairline)' }}></span>
          <span style={{ fontSize: 10.5, letterSpacing: '.05em', color: 'var(--ink-3)', fontFamily: 'var(--font-mono)' }}>FEAT-STATS-AUTO · фаза дизайна</span>
        </div>
        <h1>PWA статистики · <em>прототип по экранам</em></h1>
        <p>Тёмная тема, цветовая кодировка строк, обновление справа вверху, подвал «Обновлено» — в визуальном языке Integramma (адаптирован под dark). Переключайте экраны и состояния, чтобы пройти черновые тест-кейсы. Решения DQ-1…6 — ниже.</p>
        <p style={{ marginTop: 8 }}><a href="Проверка и трассировка.html" target="_blank">→ Проверка: тест-кейсы и трассировка R1–R22</a></p>
      </div>

      <div className="rail-card">
        <h3>Экраны</h3>
        <div className="scen-grid">
          <ScenBtn name="Дашборд (R1)" req="R1 · R13–R16" active={key('normal', 'dashboard')} onClick={() => onPick('normal', 'dashboard')} />
          <ScenBtn name="Список + поиск" req="R2 · R20 · R21" active={key('normal', 'events')} onClick={() => onPick('normal', 'events')} />
          <ScenBtn name="Карточка" req="R3 · DQ-4 · DQ-5" active={key('normal', 'card')} onClick={() => onPick('normal', 'card')} />
          <ScenBtn name="Подписки" req="R16 · R17 · R18" active={key('normal', 'subs')} onClick={() => onPick('normal', 'subs')} />
          <ScenBtn name="Меню (R22)" req="нав. · уведомл." active={key('normal', 'menu')} onClick={() => onPick('normal', 'menu')} />
        </div>
      </div>

      <div className="rail-card">
        <h3>Состояния для макетов</h3>
        <div className="scen-grid">
          <ScenBtn name="Загрузка" req="NFR-1" active={key('loading')} onClick={() => onPick('loading', 'dashboard')} />
          <ScenBtn name="Пусто · разделы" req="R10" active={key('emptySections')} onClick={() => onPick('emptySections', 'dashboard')} />
          <ScenBtn name="Пусто · мероприятия" req="R2 neg" active={key('emptyEvents')} onClick={() => onPick('emptyEvents', 'events')} />
          <ScenBtn name="Карточка без заказов" req="R10 · R3" active={key('cardNoOrders')} onClick={() => onPick('cardNoOrders', 'card')} />
          <ScenBtn name="Ошибка источника" req="NFR-1 · R9" active={key('sourceError')} onClick={() => onPick('sourceError', 'dashboard')} />
          <ScenBtn name="Пустой поиск" req="R20 neg" active={key('emptySearch')} onClick={() => onPick('emptySearch', 'events')} />
          <ScenBtn name="Дельта · прочерк" req="R17 · DQ-3" active={key('deltaDash')} onClick={() => onPick('deltaDash', 'subs')} />
          <ScenBtn name="Дельта · деление /0" req="R17 · DQ-3" active={key('deltaZero')} onClick={() => onPick('deltaZero', 'subs')} />
          <ScenBtn name="Дельта · оба = 0" req="R17 edge" active={key('deltaBothZero')} onClick={() => onPick('deltaBothZero', 'subs')} />
          <ScenBtn name="Виджет с нулями" req="R10 edge" active={key('widgetZero')} onClick={() => onPick('widgetZero', 'dashboard')} />
          <ScenBtn name="Нет сети" req="NFR-6" active={key('offline')} onClick={() => onPick('offline', 'dashboard')} />
          <ScenBtn name="Отказ в доступе" req="R8" active={key('accessDenied')} onClick={() => onPick('accessDenied', 'dashboard')} />
        </div>
      </div>

      <div className="rail-card">
        <h3>Закрытые дизайн-вопросы</h3>
        <div className="dq"><p className="dq__q">DQ-1 · Нижняя навигация</p><p className="dq__a"><b>Принято.</b> 4 вкладки: Дашборд / Мероприятия / Подписки / Меню. Линейный drill раздел→список→карточка живёт внутри вкладок.</p></div>
        <div className="dq"><p className="dq__q">DQ-2 · Форма дельты R17</p><p className="dq__a"><b>Процент крупно</b> (знак + цвет) + абсолют мелким рядом + подпись базы. Видны обе формы.</p></div>
        <div className="dq"><p className="dq__q">DQ-3 · Деление на 0 в дельте</p><p className="dq__a">Прошлый период = 0, текущий &gt; 0 → <b>«0»</b> крупно + абсолют «+N подп.» мелким, без бейджа. Оба = 0 → прочерк «без активности · н/д». Финал.</p></div>
        <div className="dq"><p className="dq__q">DQ-4 · Две валюты на агрегатах</p><p className="dq__a"><b>Стопкой:</b> ₽ (violet) над € (emerald). На узком экране читается лучше колонок. В карточке — раздельные блоки «Всего ₽» / «Всего €».</p></div>
        <div className="dq"><p className="dq__q">DQ-5 · Обрезка названий</p><p className="dq__a">Списки — <b>1 строка + многоточие</b> (CSS ellipsis, без лимита символов). Карточка — <b>полное имя</b>, переносится.</p></div>
        <div className="dq"><p className="dq__q">DQ-6 · «Показать ещё»</p><p className="dq__a">Плашка <b>со счётчиком «показано N из M»</b>. Порция 20 (R21). Кнопка скрыта при исчерпании.</p></div>
      </div>

      <div className="rail-card">
        <h3>Итоги ревью-цикла 01</h3>
        <div className="openq"><span className="openq__tag">closed</span><span><b>DQ-3</b> упрощено до «0» без бейджа «рост с нуля». <b>DQ-4</b> — стопкой везде (B-1). <b>R2</b> — окно списка снято (B-2). <b>R22</b> — финал, бейдж-индикатор (B-9). <b>Тёмная тема</b> — принята в Integramma v1.1.</span></div>
        <div className="openq"><span className="openq__tag">B-7 (a)</span><span><b>Клик на WidgetB</b> открывает список РадасТВ (унифицированный путь с типом C).</span></div>
      </div>
    </div>
  );
}

/* ===================== MOUNT ===================== */
function Root() {
  const [scenario, setScenario] = uS('normal');
  const [tab, setTab] = uS('dashboard');
  const [card, setCard] = uS(null);
  const [section, setSection] = uS(null); // B-7: выбранный раздел для списка мероприятий
  return (
    <div className="stage">
      <AppHost scenario={scenario} setScenario={setScenario} tab={tab} setTab={setTab} card={card} setCard={setCard} section={section} setSection={setSection} />
      <Rail scenario={scenario} tab={tab} card={card} onPick={(sc, target) => {
        setScenario(sc); setCard(null); setSection(null);
        if (target === 'card') { setTab('events'); setCard(EVENT_CARD); }
        else if (target) setTab(target);
      }} />
    </div>
  );
}

// AppHost = App driven by lifted state (so the rail can steer it)
function AppHost({ scenario, setScenario, tab, setTab, card, setCard, section, setSection }) {
  const [stamp, setStamp] = uS(FRESH_OK);
  const [toast, setToast] = uS(false);
  const denied = scenario === 'accessDenied';
  const stale = scenario === 'sourceError';
  const offline = scenario === 'offline';

  const nav = {
    // нижняя вкладка «Мероприятия» сбрасывает выбранный раздел → default-список (Озарины)
    toTab: (id) => { setCard(null); if (id === 'events') setSection(null); setTab(id); },
    toEvents: (sec) => { setCard(null); setSection(sec || null); setTab('events'); },
    toCard: (ev) => { setCard(ev); setTab('events'); },
    back: () => setCard(null),
  };
  function onRefresh() {
    if (offline) { setToast('Нет соединения с сетью.'); setTimeout(() => setToast(false), 2600); return; }
    if (stale) { setToast('Не удалось обновить. Показаны данные не старше суток.'); setTimeout(() => setToast(false), 2600); return; }
    setStamp(FRESH_OK);
  }

  let screen, title = VIEW_TITLE[tab], showBack = false;
  if (denied) screen = <AccessDenied />;
  else if (offline) screen = <OfflineState onRetry={onRefresh} />;
  else if (tab === 'events' && card) { title = 'Мероприятие'; showBack = true; screen = <EventCard scenario={scenario} event={card} nav={nav} />; }
  else if (tab === 'dashboard') screen = <Dashboard scenario={scenario} nav={nav} />;
  else if (tab === 'events') { if (section) title = section.name; screen = <EventsList scenario={scenario} nav={nav} section={section} />; }
  else if (tab === 'subs') screen = <Subscriptions scenario={scenario} nav={nav} />;
  else screen = <Menu notif={NOTIF} />;

  return (
    <div className="phone">
      <div className="phone__screen">
        <Star className="wm" style={{ width: '62%', right: '-6%', top: '14%' }} />
        <StatusBar />
        {denied ? (
          <>{screen}</>
        ) : (
          <>
            <AppBar title={title} onBack={showBack ? nav.back : null} onRefresh={onRefresh} />
            {screen}
            <Freshness stamp={stale ? FRESH_STALE : stamp} stale={stale} offline={offline} />
            <TabBar tab={tab} onTab={nav.toTab} notif={NOTIF} />
          </>
        )}
        {toast && <div className="toast">{I.alert({ width: 18, height: 18 })}<span>{typeof toast === 'string' ? toast : 'Не удалось обновить. Показаны данные не старше суток.'}</span></div>}
        <div className="home-indicator"></div>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<Root />);