/* ============================================================
   НЕОН CRM — клиент рабочего места (PostgreSQL + REST API)
   Данные только с сервера; офлайн-режима у продакшн-CRM нет.
   ============================================================ */

const TOKEN_KEY = 'neon-crm-token';

const STATUS = {
  new:       { label: 'Новый',    cls: 'b-new' },
  active:    { label: 'В работе', cls: 'b-active' },
  done:      { label: 'Выдан',    cls: 'b-done' },
  cancelled: { label: 'Отменён',  cls: 'b-cancel' },
};

const state = {
  role: null,          // 'owner' | 'admin' | 'waiter' | 'hookah' — с сервера
  login: '',           // логин текущего пользователя
  name: '',            // имя сотрудника
  view: null,
  menuQuery: '',
  menuCat: 'Все',
  menuSort: 'default',   // сортировка меню (владелец): default | name | price_asc | price_desc | category
  tobaccoQuery: '',
  tobBrand: 'Все',
  tobaccoSort: 'default', // сортировка табаков: default | flavor | brand | strength_asc | strength_desc
  mixes: [],           // миксы для сайта (ведут владелец и кальянщик)
  mixQuery: '',        // поиск по вкусам в конструкторе микса
  mixBrand: 'Все',     // фильтр брендов в конструкторе микса
  mixSort: 'default',  // сортировка миксов: default | name | price_asc | price_desc | strength_asc | strength_desc
  staffReport: null,   // статистика сотрудников за период отчёта (только владелец)
  // форма нового микса: крепость/холодок/цена/теги — расширенная информация,
  // сайт покажет её в карточке и по тегам подмешает микс в автоподбор
  newMix: { name: '', note: '', flavorIds: [], strength: '', cooling: '', price: '', tags: [] },
  mixErrors: {},       // ошибки валидации формы микса: { поле: сообщение }
  mixEditId: null,     // id микса в форме редактирования (null — создание)
  siteMixEditId: null, // id витринного микса сайта в форме правки (null — создание)
  menuEditId: null,    // id позиции меню в форме редактирования (null — создание)
  orderFilter: 'all',
  orders: [],
  menu: [],
  tobacco: [],
  users: [],           // сотрудники (только владелец)
  shiftCounts: [],     // количество смен у официантов (только владелец)
  report: null,        // последний построенный отчёт (только владелец)
  reportFrom: '',      // период отчёта, ГГГГ-ММ-ДД
  reportTo: '',
  onShiftList: [],     // кто на смене сейчас
  onShift: false,      // текущий официант на смене?
  staffList: [],       // официанты и кальянщики с флагом on_shift (для владельца/админа)
  halls: [],           // занятость столов и зон (GET /api/halls)
  resReminded: new Set(), // брони, о которых уже напомнили в этой сессии
  games: [],           // библиотека игр: PS5 и настолки
  gameFilter: 'all',   // 'all' | 'ps5' | 'board'
  gameTrash: false,    // показывать удалённые игры (корзина, админ/владелец)
  gameEditId: null,    // id игры в форме редактирования (null — создание)
  gameForm: { kind: 'ps5', title: '', note: '', difficulty: 2, icon: 'dices', accent: '#b026ff' },
  accentFor: '',       // id позиции меню, для которой открыта палитра подсветки
  siteMixes: [],       // авторские миксы сайта (read-only, вкладка «Миксы»)
  photoKind: 'menu',   // что загружаем фото: 'menu' | 'game'
  photoTarget: '',     // id позиции, для которой выбирают фото
  newOrder: { table: '', items: {}, comment: '' }, // ручной заказ: стол + {id: qty} + комментарий
  newOrderError: '',   // 'table' | 'items' — что не заполнено при попытке создать заказ
  newOrderQuery: '',
  newOrderCat: 'Все', // фильтр категорий в ручном заказе
  lastOrderNumber: 0,  // для уведомлений о новых заказах с сайта
  boards: [],          // доступные доски (GET /api/boards)
  boardId: null,       // выбранная доска на странице «Заметки»
  notes: [],           // заметки выбранной доски
  notesSince: null,    // курсор инкрементального опроса (server_time)
  noteFilter: 'all',   // 'all' | 'my'
  noteEditId: null,    // id задачи в форме (null — режим создания)
  noteForm: { title: '', body: '', assignee: '', due: '', important: false },
  boardFormOpen: false, // панель «новая приватная доска» (владелец)
  boardActivity: [],   // лента событий выбранной доски
};

const halls = [
  { name: 'Стол 1',  sub: 'основной зал' },
  { name: 'Стол 2',  sub: 'основной зал' },
  { name: 'Стол 3',  sub: 'основной зал' },
  { name: 'Стол 4',  sub: 'основной зал' },
  { name: 'Стол 5',  sub: 'основной зал' },
  { name: 'VIP-зал', sub: 'до 8 гостей' },
  { name: 'Кинозал', sub: 'до 15 гостей' },
];
/* имена должны совпадать с HALLS в crm/storage.py — сервер валидирует по нему */

/* ---------------- утилиты ---------------- */

const pad2 = (n) => String(n).padStart(2, '0');
const money = (n) => (Number.isFinite(n) ? n.toLocaleString('ru-RU') : '—') + ' ₽';
/* время в локальной зоне: сервер может отдать UTC (смены SQLite) */
const fmtTime = (iso) => {
  if (!iso) return '—';
  const d = new Date(iso);
  return isNaN(d) ? '—' : pad2(d.getHours()) + ':' + pad2(d.getMinutes());
};
const fmtDate = (iso) => {
  if (!iso) return '—';
  const d = new Date(iso);
  return isNaN(d) ? '—' : pad2(d.getDate()) + '.' + pad2(d.getMonth() + 1);
};
const fmtDur = (sec) => {
  if (sec == null) return '—';
  if (sec < 60) return 'менее минуты';
  const m = Math.round(sec / 60);
  if (m < 60) return m + ' мин';
  return Math.floor(m / 60) + ' ч ' + pad2(m % 60) + ' мин';
};
const plural = (n, forms) => {
  const a = Math.abs(n) % 100, b = a % 10;
  if (a > 10 && a < 20) return forms[2];
  if (b > 1 && b < 5) return forms[1];
  if (b === 1) return forms[0];
  return forms[2];
};
const orderTotal = (o) => (o.price != null ? o.price : o.items.reduce((s, i) => s + i.price * i.qty, 0));

/* Состав заказов приходит с сайта — экранируем всё, что попадает в innerHTML */
const esc = (v) =>
  String(v ?? '').replace(/[&<>"']/g, (ch) => (
    { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[ch]
  ));

const NOVELTY_MS = 7 * 24 * 60 * 60 * 1000; // неделя для «новинок» владельца
const isNewItem = (createdAt) => {
  if (!createdAt) return false;
  const ts = new Date(createdAt).getTime();
  return Number.isFinite(ts) && Date.now() - ts < NOVELTY_MS;
};

/* ---------------- API ---------------- */

async function api(path, opts = {}) {
  const headers = { ...(opts.headers || {}) };
  const token = localStorage.getItem(TOKEN_KEY);
  if (token) headers['X-Auth-Token'] = token;
  if (opts.body != null) headers['Content-Type'] = 'application/json';

  const r = await fetch(path, { ...opts, headers });
  if (r.status === 401 && state.role) {
    // сессия истекла — на экран входа
    logout(true);
    throw new Error('session expired');
  }
  if (!r.ok) {
    let msg = 'HTTP ' + r.status;
    try {
      const err = await r.json();
      if (err && err.error) msg = err.error;
    } catch { /* не JSON — оставляем код */ }
    throw new Error(msg);
  }
  return r.json();
}

async function refreshOrders() {
  state.orders = await api('/api/orders');
}

async function refreshHalls() {
  try {
    state.halls = await api('/api/halls');
    checkReserveReminders();
  } catch { /* сеть моргнула — покажем прошлые данные */ }
}

async function refreshCatalog() {
  const [menu, tobacco] = await Promise.all([api('/api/menu'), api('/api/tobacco')]);
  state.menu = menu;
  state.tobacco = tobacco;
}

async function refreshMixes() {
  try {
    state.mixes = await api('/api/mixes');
    await refreshSiteMixes();
  } catch { /* сеть моргнула — покажем прошлые данные */ }
}

/* Заказы официантам: опрос раз в 10 с — новых с сайта узнаём по номеру */
function beep() {
  try {
    const ctx = new (window.AudioContext || window.webkitAudioContext)();
    const osc = ctx.createOscillator();
    const gain = ctx.createGain();
    osc.type = 'sine';
    osc.frequency.value = 880;
    gain.gain.setValueAtTime(0.08, ctx.currentTime);
    gain.gain.exponentialRampToValueAtTime(0.0001, ctx.currentTime + 0.6);
    osc.connect(gain).connect(ctx.destination);
    osc.start();
    osc.stop(ctx.currentTime + 0.6);
    setTimeout(() => ctx.close(), 900);
  } catch { /* звук не критичен */ }
}

async function pollOrders() {
  if (!state.role) return;
  let fresh = null;
  try {
    const orders = await api('/api/orders');
    state.orders = orders;
    // id — внутренний, монотонный: новые заказы узнаём по нему даже
    // когда недельный номер после сброса меньше прежних
    const maxId = orders.reduce((m, o) => Math.max(m, o.id), 0);
    if (state.lastOrderNumber && maxId > state.lastOrderNumber) {
      fresh = orders.find((o) => o.id === maxId);
    }
    state.lastOrderNumber = Math.max(state.lastOrderNumber, maxId);
  } catch {
    return; // сеть моргнула — попробуем в следующий тик
  }
  refreshShifts();
  refreshHalls();
  render();
  if (fresh) {
    beep();
    toast(`🔔 Заказ №${fresh.number} — ${fresh.table}, ждёт подтверждения`, '');
  }
}

/* ---------------- вход / роли ---------------- */

async function login(loginValue, password) {
  let session;
  try {
    session = await api('/api/login', {
      method: 'POST',
      body: JSON.stringify({ login: loginValue, password }),
    });
  } catch (e) {
    showLoginError(e.message === 'Failed to fetch'
      ? 'Сервер недоступен — проверь, что CRM запущена'
      : e.message);
    return;
  }
  localStorage.setItem(TOKEN_KEY, session.token);
  state.role = session.role;
  state.login = session.login;
  state.name = session.name;
  state.view = SHIFT_ROLES_JS.includes(session.role) ? 'orders' : 'dashboard';

  document.getElementById('loginScreen').classList.add('hidden');
  document.getElementById('app').classList.remove('hidden');
  showLoginError('');

  try {
    state.lastOrderNumber = 0;
    await Promise.all([refreshOrders(), refreshCatalog(), refreshShifts(), refreshHalls()]);
    state.lastOrderNumber = state.orders.reduce((m, o) => Math.max(m, o.id), 0);
  } catch (e) {
    enterOffline(e.message);
    return;
  }
  render();
  toast(`Добро пожаловать, ${session.name}!`, '');
}

function logout(expired = false) {
  const token = localStorage.getItem(TOKEN_KEY);
  if (token && !expired) api('/api/logout', { method: 'POST' }).catch(() => {});
  localStorage.removeItem(TOKEN_KEY);
  state.role = null;
  state.view = null;
  state.orders = [];
  state.menu = [];
  state.tobacco = [];
  document.getElementById('app').classList.add('hidden');
  document.getElementById('loginScreen').classList.remove('hidden');
  if (expired) showLoginError('Сессия истекла — войдите заново');
}

function enterOffline(reason) {
  const btn = document.getElementById('offlineRetry');
  btn.classList.remove('hidden');
  toast('Нет связи с сервером: ' + reason, 't-red');
}

async function retryConnection() {
  const btn = document.getElementById('offlineRetry');
  btn.disabled = true;
  try {
    await Promise.all([refreshOrders(), refreshCatalog()]);
    btn.classList.add('hidden');
    render();
    toast('Связь восстановлена', 't-green');
  } catch {
    toast('Сервер всё ещё недоступен', 't-red');
  }
  btn.disabled = false;
}

function showLoginError(text) {
  const el = document.getElementById('loginError');
  el.textContent = text || '';
  el.classList.toggle('hidden', !text);
}

function toast(msg, type = '') {
  const wrap = document.getElementById('toasts');
  const el = document.createElement('div');
  el.className = 'toast ' + type;
  el.textContent = msg;
  wrap.appendChild(el);
  setTimeout(() => el.classList.add('out'), 2600);
  setTimeout(() => el.remove(), 3000);
}

/* ---------------- модальные окна (подтверждение и ввод) ---------------- */
/* Заменяют нативные confirm()/prompt(): те не стилизуются под тёмную тему.
   Окна живут в #modalOverlay вне viewRoot — опрос заказов их не закрывает. */

let modalActive = null;              // открытое окно: { close, confirm }
let modalChain = Promise.resolve();  // очередь: окна открываются строго по одному

function uiModal(opts) {
  const run = () => new Promise((resolve) => openModal(opts, resolve));
  const p = modalChain.then(run, run);
  modalChain = p.then(() => {}, () => {});
  return p;
}

/* uiConfirm({ title, text, ok, cancel, danger }) → Promise<boolean> */
function uiConfirm(opts) {
  if (typeof opts === 'string') opts = { text: opts };
  return uiModal({ ...opts, confirm: true }).then((v) => v === true);
}

/* uiPrompt({ title, text, value, placeholder, numeric, ok, cancel }) → Promise<string|null> */
function uiPrompt(opts) {
  if (typeof opts === 'string') opts = { text: opts };
  return uiModal({ ...opts, confirm: false });
}

/* uiPassword({ title }) → Promise<{current, next}|null> — смена пароля (F-16) */
function uiPassword(opts) {
  return uiModal({ ...opts, passwords: true, ok: 'Сменить пароль' });
}

/* uiNewPassword({ title, text, ok }) → Promise<string|null> — ввод одного
   нового пароля без текущего (сброс пароля сотрудника владельцем) */
function uiNewPassword(opts) {
  return uiModal({ ...opts, newPass: true, ok: opts.ok || 'Сбросить' });
}

function openModal(opts, resolve) {
  const overlay = document.getElementById('modalOverlay');
  const box = document.getElementById('modalBox');
  const o = opts || {};
  const danger = o.confirm && o.danger !== false; // подтверждения по умолчанию «опасные»
  const okLabel = o.ok || (o.confirm ? 'Да' : 'ОК');
  box.className = 'modal' + (danger ? ' danger' : '');
  box.innerHTML = `
    <div class="modal-title">${esc(o.title || (o.confirm ? 'Подтвердите действие' : 'Ввод'))}</div>
    ${o.text ? `<div class="modal-text">${esc(o.text)}</div>` : ''}
    ${o.newPass ? `<input type="password" class="modal-input" id="modalNew" placeholder="Новый пароль — минимум 8 символов" autocomplete="new-password">` :
    o.confirm || !o.passwords ? `<input type="text" class="modal-input" id="modalInput" autocomplete="off" spellcheck="false"
        value="${esc(o.value != null ? String(o.value) : '')}"
        ${o.placeholder ? `placeholder="${esc(o.placeholder)}"` : ''}
        ${o.numeric ? 'inputmode="numeric"' : ''}>` : `
    <input type="password" class="modal-input" id="modalCur" placeholder="Текущий пароль" autocomplete="current-password">
    <input type="password" class="modal-input" id="modalNew" placeholder="Новый пароль — минимум 8 символов" autocomplete="new-password">`}
    <div class="modal-actions">
      <button class="btn btn-ghost" type="button" data-modal-cancel>${esc(o.cancel || 'Отмена')}</button>
      <button class="btn ${danger ? 'btn-danger' : 'btn-neon'}" type="button" data-modal-ok>${esc(okLabel)}</button>
    </div>`;
  overlay.classList.remove('hidden');
  document.body.style.overflow = 'hidden';
  const close = (v) => {
    if (!modalActive || modalActive.resolve !== resolve) return;
    modalActive = null;
    overlay.classList.add('hidden');
    document.body.style.overflow = '';
    resolve(v);
  };
  modalActive = { close, confirm: !!o.confirm, passwords: !!o.passwords, newPass: !!o.newPass, resolve };
  box.querySelector('[data-modal-ok]').addEventListener('click', () => {
    if (o.passwords) {
      close({ current: box.querySelector('#modalCur').value, next: box.querySelector('#modalNew').value });
    } else if (o.newPass) {
      close(box.querySelector('#modalNew').value);
    } else {
      close(o.confirm ? true : document.getElementById('modalInput').value);
    }
  });
  box.querySelector('[data-modal-cancel]').addEventListener('click', () => close(null));
  const inp = box.querySelector('#modalInput');
  if (inp) { inp.focus(); inp.select(); }
  else box.querySelector('#modalNew').focus();
}

(function initModalDom() {
  const overlay = document.getElementById('modalOverlay');
  if (!overlay) return;
  overlay.addEventListener('mousedown', (e) => {
    if (e.target === overlay && modalActive) modalActive.close(null);
  });
  document.addEventListener('keydown', (e) => {
    if (!modalActive) return;
    if (e.key === 'Escape') { e.preventDefault(); modalActive.close(null); }
    else if (e.key === 'Enter') {
      e.preventDefault();
      if (modalActive.confirm) modalActive.close(true);
      else if (modalActive.passwords) modalActive.close({
        current: document.getElementById('modalCur').value,
        next: document.getElementById('modalNew').value,
      });
      else if (modalActive.newPass) modalActive.close(document.getElementById('modalNew').value);
      else modalActive.close(document.getElementById('modalInput').value);
    }
  });
})();

/* ---------------- каркас (сайдбар, шапка) ---------------- */

const NAV = {
  owner: [
    { id: 'dashboard', label: 'Обзор',      ico: '◈' },
    { id: 'neworder',  label: 'Новый заказ', ico: '➕' },
    { id: 'halls',     label: 'Залы',       ico: '🪑' },
    { id: 'notes',     label: 'Заметки',    ico: '🗒' },
    { id: 'games',     label: 'Игры',       ico: '🎮' },
    { id: 'menu',      label: 'Меню',       ico: '☕' },
    { id: 'tobacco',   label: 'Табаки',     ico: '☁' },
    { id: 'mixes',     label: 'Миксы',      ico: '💨' },
    { id: 'orders',    label: 'Заказы',     ico: '🧾' },
    { id: 'users',     label: 'Сотрудники', ico: '👥' },
    { id: 'reports',   label: 'Отчёты',     ico: '📊' },
  ],
  admin: [
    { id: 'dashboard', label: 'Обзор',      ico: '◈' },
    { id: 'neworder',  label: 'Новый заказ', ico: '➕' },
    { id: 'halls',     label: 'Залы',       ico: '🪑' },
    { id: 'notes',     label: 'Заметки',    ico: '🗒' },
    { id: 'games',     label: 'Игры',       ico: '🎮' },
    { id: 'menu',      label: 'Меню',       ico: '☕' },
    { id: 'tobacco',   label: 'Табаки',     ico: '☁' },
    { id: 'orders',    label: 'Заказы',     ico: '🧾' },
  ],
  waiter: [
    { id: 'neworder',  label: 'Новый заказ', ico: '➕' },
    { id: 'halls',     label: 'Залы',      ico: '🪑' },
    { id: 'notes',     label: 'Заметки',   ico: '🗒' },
    { id: 'orders',    label: 'Заказы',    ico: '🧾' },
    { id: 'stoplist',  label: 'Стоп-лист', ico: '⛔' },
  ],
  hookah: [
    { id: 'neworder',  label: 'Новый заказ', ico: '➕' },
    { id: 'halls',     label: 'Залы',      ico: '🪑' },
    { id: 'notes',     label: 'Заметки',   ico: '🗒' },
    { id: 'orders',    label: 'Заказы',    ico: '🧾' },
    { id: 'stoplist',  label: 'Стоп-лист', ico: '⛔' },
    { id: 'tobacco',   label: 'Табаки',    ico: '☁' },
    { id: 'mixes',     label: 'Миксы',     ico: '💨' },
  ],
};

/* роли, работающие на смене: видят канбан заказов и выходят на смену */
const SHIFT_ROLES_JS = ['waiter', 'hookah'];
const ROLE_LABELS = { owner: 'Владелец', admin: 'Администратор', waiter: 'Официант', hookah: 'Кальянщик' };

const TITLES = {
  dashboard: ['Обзор', 'Сводка по смене в реальном времени'],
  menu:      ['Меню · стоп-лист', 'Управление доступностью позиций меню. Позиция «в стопе» помечается на сайте «Нет в наличии» и недоступна к онлайн-заказу'],
  tobacco:   ['Табаки для кальянов · стоп-лист', 'Отключение отдельных вкусов — гость не сможет выбрать их в конструкторе кальяна, на сайте вкус помечается «Закончился»'],
  orders:    ['Заказы', 'Все заказы зала — статусы, состав, выручка смены'],
  stoplist:  ['Стоп-лист', 'Позиции, недоступные к заказу прямо сейчас (управляет администратор)'],
  users:     ['Сотрудники', 'Официанты и администраторы — создание и удаление. Доступно только владельцу'],
  reports:   ['Отчёты по заказам', 'Выручка, заказы и топ позиций за выбранный период — из базы данных'],
  neworder:  ['Новый заказ', 'Заказ из зала вручную: стол, кальяны и позиции меню — кальяны добавляет кальянщик'],
  halls:     ['Залы и столы', 'Занятость столов и зон: свободно/занято, таймер до освобождения'],
  mixes:     ['Миксы', 'Фирменные миксы для страницы «Миксы НЕОНа» на сайте — название и вкусы, пропорции делает кальянщик'],
  notes:     ['Заметки и задачи', 'Общая доска и приватные доски владельца с админами. Доступны в любое время — без привязки к смене'],
  games:     ['Игры', 'Библиотека бара: PS5 и настолки. Что есть — сразу видно, гостям предлагайте свободные'],
};

function renderChrome() {
  const roleLabel = ROLE_LABELS[state.role] || state.role;
  document.getElementById('userName').textContent = state.name;
  document.getElementById('userRole').textContent = roleLabel;
  document.getElementById('userAvatar').textContent = (state.name || '?').slice(0, 1);
  document.getElementById('brandRole').textContent = roleLabel;

  const newCount = state.orders.filter((o) => o.status === 'new').length;
  const nav = document.getElementById('nav');
  nav.innerHTML = NAV[state.role].map((n) => `
    <button class="nav-item ${state.view === n.id ? 'active' : ''}" data-nav="${n.id}" type="button">
      <span class="ico">${n.ico}</span>${n.label}
      ${n.id === 'orders' && newCount ? `<span class="nav-badge">${newCount}</span>` : ''}
    </button>`).join('');
}

function renderTopbar() {
  let t, s;
  if (state.view === 'orders' && SHIFT_ROLES_JS.includes(state.role)) {
    t = 'Мои заказы';
    s = 'Новые заказы с сайта и из зала — принимайте и отмечайте выдачу';
  } else {
    [t, s] = TITLES[state.view] || ['—', ''];
    if (state.view === 'mixes' && state.role === 'hookah') {
      s = 'Фирменные миксы для страницы «Миксы НЕОНа» на сайте — название, вкусы, крепость, холодок, цена и теги';
    }
  }
  document.getElementById('pageTitle').textContent = t;
  document.getElementById('pageSub').textContent = s;
  const newCount = state.orders.filter((o) => o.status === 'new').length;
  const bell = document.getElementById('bellBtn');
  const cnt = document.getElementById('bellCount');
  cnt.textContent = newCount;
  cnt.classList.toggle('hidden', !newCount);
  bell.classList.toggle('has-new', !!newCount);
}

/* ---------------- вьюхи ---------------- */

/* занятость стола/зоны из состояния залов (обновляется в общем опросе) */
function hallByName(name) {
  return state.halls.find((x) => x.name === name) || null;
}

function hallBadge(name) {
  const st = hallByName(name);
  const res = st && (st.reservations || [])[0];
  const resHint = res ? ` · 🔒 ${fmtTime(res.from)}` : '';
  if (!st || !st.busy) return `<span class="badge b-done"><span class="b-dot"></span>Свободен${resHint}</span>`;
  if (st.busy_until) {
    return `<span class="badge b-stop"><span class="b-dot"></span>Занят · `
      + `<span class="busy-timer" data-deadline="${new Date(st.busy_until).getTime()}"></span>${resHint}</span>`;
  }
  return `<span class="badge b-stop"><span class="b-dot"></span>Занят · без таймера${resHint}</span>`;
}

function viewDashboard() {
  const active = state.orders.filter((o) => o.status === 'active').length;
  const done = state.orders.filter((o) => o.status === 'done').length;
  const stoppedMenu = state.menu.filter((m) => m.stopped && !m.deleted);
  const stoppedTob = state.tobacco.filter((t) => t.stopped && !t.deleted);
  const revenue = state.orders.filter((o) => o.status === 'done').reduce((s, o) => s + orderTotal(o), 0);
  const durs = state.orders.filter((o) => o.duration_seconds != null).map((o) => o.duration_seconds);
  const avgDur = durs.length ? Math.round(durs.reduce((a, b) => a + b, 0) / durs.length) : null;

  const miniOrders = [...state.orders]
    .sort((a, b) => b.id - a.id).slice(0, 5)
    .map((o) => `
      <div class="mini-order">
        <span class="mo-num">№${o.number}</span>
        <span class="mo-info">${esc(o.table)} · ${o.items.length} поз. · ${money(orderTotal(o))}</span>
        <span class="badge ${STATUS[o.status].cls}">${STATUS[o.status].label}</span>
      </div>`).join('');

  const hallList = halls.map((h) => `
    <div class="hall ${hallByName(h.name)?.busy ? 'hall-busy' : ''}">
      <div>
        <div class="h-name">${esc(h.name)}</div>
        <div class="h-sub">${esc(h.sub)}</div>
      </div>
      ${hallBadge(h.name)}
    </div>`).join('');

  const stopItems = [
    ...stoppedMenu.map((m) => ({ name: m.name, type: 'Меню', id: m.id, kind: 'menu' })),
    ...stoppedTob.map((t) => ({ name: t.flavor, type: 'Табак · ' + t.brand, id: t.id, kind: 'tobacco' })),
  ].map((s) => `
    <div class="stop-item">
      <span class="si-ico">⛔</span>${esc(s.name)}
      <span class="si-type">${esc(s.type)}</span>
      <button class="btn btn-ghost" data-unstop="${s.kind}:${encodeURIComponent(s.id)}" type="button">Вернуть</button>
    </div>`).join('');

  return `
    <div class="stats-grid">
      <div class="stat c-cyan"><div class="num">${state.orders.filter(o => o.status === 'new').length}</div><div class="lbl">Новых заказов</div><div class="sub">ожидают подтверждения</div></div>
      <div class="stat c-purple"><div class="num">${active}</div><div class="lbl">В работе</div><div class="sub">кальяны и кухня готовят</div></div>
      <div class="stat c-green"><div class="num">${done}</div><div class="lbl">Выдано сегодня</div><div class="sub">выручка ${money(revenue)}</div></div>
      <div class="stat c-red"><div class="num">${stoppedMenu.length + stoppedTob.length}</div><div class="lbl">Позиций в стопе</div><div class="sub">${stoppedMenu.length} ${plural(stoppedMenu.length, ['позиция', 'позиции', 'позиций'])} меню · ${stoppedTob.length} ${plural(stoppedTob.length, ['табак', 'табака', 'табаков'])}</div></div>
      <div class="stat c-cyan"><div class="num${avgDur != null ? ' txt' : ''}">${avgDur != null ? fmtDur(avgDur) : '—'}</div><div class="lbl">Средняя подача</div><div class="sub">от принятия до выдачи</div></div>
    </div>

    <div class="dash-grid">
      <div class="panel">
        <div class="panel-title">Последние заказы <small>сейчас</small></div>
        <div class="mini-orders">${miniOrders}</div>
      </div>

      <div style="display:flex;flex-direction:column;gap:16px">
        ${!SHIFT_ROLES_JS.includes(state.role) ? `
        <div class="panel">
          <div class="panel-title">Сейчас на смене</div>
          ${state.onShiftList.length
            ? `<div class="mini-orders">${state.onShiftList.map((s) => `
                <div class="mini-order">
                  <span class="mo-num">${esc(s.name)}</span>
                  <span class="mo-info">на смене с ${fmtTime(s.started_at)}</span>
                  <button class="btn btn-danger btn-sm" data-shiftkick="${esc(s.login)}" type="button" title="Снять со смены">Снять</button>
                </div>`).join('')}</div>`
            : '<div class="stop-empty">Никто не на смене</div>'}
          ${(() => {
            const off = state.staffList.filter((s) => !s.on_shift);
            if (!off.length) return '';
            return `<div class="panel-title" style="margin-top:12px;margin-bottom:8px">Записать на смену</div>
              <div class="chips">
                ${off.map((s) => `<button class="chip" data-shiftreg="${esc(s.login)}" type="button">+ ${esc(s.name)}</button>`).join('')}
              </div>`;
          })()}
        </div>` : ''}
        <div class="panel">
          <div class="panel-title">Залы</div>
          <div class="hall-list">${hallList}</div>
        </div>
        <div class="panel">
          <div class="panel-title">Сейчас в стопе</div>
          <div class="stop-now">${stopItems || '<div class="stop-empty">Стоп-лист пуст — всё доступно</div>'}</div>
        </div>
      </div>
    </div>`;
}

/* ---------------- сортировка списков (владелец) ---------------- */

const MENU_SORTS = [
  ['default', 'по умолчанию'],
  ['name', 'название А→Я'],
  ['name_desc', 'название Я→А'],
  ['price_asc', 'цена ↑'],
  ['price_desc', 'цена ↓'],
  ['category', 'по категории'],
  ['stopped_first', 'в стопе сверху'],
];
const TOBACCO_SORTS = [
  ['default', 'по умолчанию'],
  ['flavor', 'вкус А→Я'],
  ['brand', 'по бренду'],
  ['strength_asc', 'лёгкие сверху'],
  ['strength_desc', 'крепкие сверху'],
];
const MIX_SORTS = [
  ['default', 'по умолчанию'],
  ['name', 'название А→Я'],
  ['price_asc', 'цена ↑'],
  ['price_desc', 'цена ↓'],
  ['strength_asc', 'лёгкие сверху'],
  ['strength_desc', 'крепкие сверху'],
];

const ruCmp = (key) => (a, b) => String(a[key] || '').localeCompare(String(b[key] || ''), 'ru');
/* цена/крепость могут быть не заданы (миксы мастера) — пустые всегда внизу */
const numCmp = (key, dir) => (a, b) => {
  const av = a[key] == null ? Infinity : a[key];
  const bv = b[key] == null ? Infinity : b[key];
  return (av - bv) * dir;
};

const sortSelect = (id, options, value) => `
  <select class="sort-select" id="${id}" aria-label="Сортировка" title="Сортировка списка">
    ${options.map(([v, label]) => `<option value="${v}" ${value === v ? 'selected' : ''}>${label}</option>`).join('')}
  </select>`;

function viewMenu() {
  const cats = ['Все', ...new Set(state.menu.map((m) => m.category))];
  const q = state.menuQuery.trim().toLowerCase();
  const isNov = (m) => m.custom && isNewItem(m.created_at);
  // новинки — вверху списка, остальные по категории и названию
  // сортировка: «по умолчанию» держит новинки вверху, остальные — по ключу
  const menuSorters = {
    default: (a, b) => (isNov(b) ? 1 : 0) - (isNov(a) ? 1 : 0),
    name: ruCmp('name'),
    name_desc: (a, b) => ruCmp('name')(b, a),
    price_asc: (a, b) => a.price - b.price,
    price_desc: (a, b) => b.price - a.price,
    category: (a, b) => String(a.category).localeCompare(String(b.category), 'ru') || ruCmp('name')(a, b),
    stopped_first: (a, b) => (b.stopped ? 1 : 0) - (a.stopped ? 1 : 0) || ruCmp('name')(a, b),
  };
  const items = state.menu
    .filter((m) =>
      (state.menuCat === 'Все' || m.category === state.menuCat) &&
      (!q || m.name.toLowerCase().includes(q)))
    .sort(menuSorters[state.menuSort] || menuSorters.default);
  const isOwner = state.role === 'owner';
  const canAccent = state.role === 'owner' || state.role === 'admin';

  /* поштучный учёт (владелец): кнопка включения/прихода/выключения.
     Бейдж остатка виден всем — админ и персонал понимают, сколько осталось */
  const stockControls = (m) => {
    if (m.stock == null) {
      return isOwner
        ? `<button class="btn btn-ghost btn-sm" data-stock-on="${esc(m.id)}" type="button" title="Включить поштучный учёт: пиво, энергетики, банки">📦 штучный учёт</button>`
        : '';
    }
    return `
      ${isOwner ? `<button class="btn btn-ghost btn-sm" data-stock-add="${esc(m.id)}" type="button" title="Докупили — прибавить к остатку">+ приход</button>
      <button class="btn btn-ghost btn-sm" data-stock-off="${esc(m.id)}" type="button" title="Выключить поштучный учёт">✕</button>` : ''}`;
  };
  const stockBadge = (m) => (m.stock == null ? '' :
    `<span class="stock-badge ${m.stock === 0 ? 'is-zero' : ''}" title="Поштучный учёт: остаток на полке">📦 ${m.stock} шт</span>`);

  const accentPicker = (m) => {
    if (state.accentFor !== m.id) return '';
    return `
      <div class="accent-palette">
        <span class="switch-label">Подсветка на сайте:</span>
        ${NEON_ACCENTS.map((c) => `
          <button class="chip ${m.accent === c ? 'active' : ''}" data-set-accent="${c}"
            data-set-item="${esc(m.id)}" type="button" title="${c}">
            <span style="display:inline-block;width:14px;height:14px;border-radius:50%;background:${c}"></span></button>`).join('')}
        ${m.accent ? `<button class="chip" data-set-accent="" data-set-item="${esc(m.id)}" type="button">как у всех</button>` : ''}
      </div>`;
  };

  const rows = items.map((m) => `
    <div class="menu-row ${m.deleted ? 'row-deleted' : m.stopped ? 'stopped' : ''}">
      <div>
        <div class="m-name">${esc(m.name)}</div>
        <div class="m-cat">${esc(m.category)}${m.portion ? ' · ' + esc(m.portion) : ''}${m.custom && isNewItem(m.created_at) ? ' · ✨ новинка' : ''}${m.has_photo ? ' · 🖼' : ''}</div>
      </div>
      <div class="m-price">${money(m.price)}</div>
      ${m.deleted
        ? '<span class="badge b-cancel"><span class="b-dot"></span>Удалена</span>'
        : m.stopped
          ? `<span class="badge b-stop"><span class="b-dot"></span>В стопе${m.stock != null && m.stock === 0 ? ' · закончился' : ''} · скрыто с сайта</span>`
          : '<span class="badge b-done"><span class="b-dot"></span>Доступна</span>'}
      <div class="m-stopcell">
        ${stockBadge(m)}
      ${m.deleted
        ? (isOwner ? `<button class="btn btn-ghost btn-sm" data-restore="menu:${esc(m.id)}" type="button">Вернуть</button>${m.custom ? `<button class="btn btn-danger btn-sm" data-purge="menu:${esc(m.id)}" type="button" title="Стереть позицию из базы — восстановить будет нельзя">Удалить навсегда</button>` : ''}` : '')
        : `
        <label class="switch">
          <input type="checkbox" data-menu-stop="${esc(m.id)}" ${m.stopped ? 'checked' : ''} aria-label="Стоп-лист для ${esc(m.name)}">
          <span class="track"></span>
        </label>
        <span class="switch-label">${m.stopped ? 'стоп' : 'в работе'}</span>
        ${isOwner && m.custom ? `<button class="btn btn-ghost btn-sm" data-menuedit="${esc(m.id)}" type="button" title="Изменить название, цену, порцию или категорию">✎</button>` : ''}
        ${canAccent ? `<button class="btn btn-ghost btn-sm" data-accent-menu="${esc(m.id)}" type="button"
          title="Подсветка карточки на сайте"><span class="accent-dot" style="background:${m.accent || 'var(--muted-2)'}"></span>🎨</button>` : ''}
        ${isOwner ? `<button class="btn btn-ghost btn-sm" data-photo="${esc(m.id)}" type="button" title="Загрузить фото для сайта">${m.has_photo ? '📷 фото ✓' : '📷 фото'}</button>` : ''}
        ${isOwner ? `<button class="btn btn-danger btn-sm" data-del="menu:${esc(m.id)}" type="button" title="Удалить позицию">Удалить</button>` : ''}`}
        ${m.deleted ? '' : stockControls(m)}
      </div>
      ${accentPicker(m)}
    </div>`).join('');

  return `
    ${state.role === 'owner' ? `
    <div class="panel" style="margin-bottom:16px">
      <div class="panel-title">${state.menuEditId ? 'Редактирование позиции' : 'Добавить позицию'} <small>${state.menuEditId ? 'изменения появятся на сайте сразу' : 'появится на сайте с пометкой «Новинка» на 7 дней'}</small></div>
      <form class="user-form" id="menuForm" autocomplete="off">
        <input type="text" id="newMenuName" placeholder="Название позиции" required>
        <select id="newMenuCat" aria-label="Категория">
          ${cats.filter((c) => c !== 'Все').map((c) => `<option value="${esc(c)}">${esc(c)}</option>`).join('')}
        </select>
        <input type="number" id="newMenuPrice" placeholder="Цена, ₽" min="0" step="1" required>
        <input type="text" id="newMenuPortion" placeholder="Порция, напр. 900 мл">
        ${state.menuEditId ? '' : '<input type="number" id="newMenuStock" placeholder="Кол-во, шт (пиво/банки)" min="0" step="1" title="Заполните, чтобы включить поштучный учёт: при продаже остаток будет уменьшаться, по нулю позиция уйдёт в стоп-лист">'}
        <button class="btn btn-neon" type="submit">${state.menuEditId ? 'Сохранить изменения' : 'Добавить'}</button>
        ${state.menuEditId ? '<button class="btn btn-ghost" data-menu-cancel="1" type="button">Отмена</button>' : ''}
      </form>
    </div>` : ''}
    <div class="note"><span class="n-ico">ℹ</span>
      <span>Переключите тумблер, чтобы отправить позицию <b>в стоп</b> — на сайте neon-bar86.ru она мгновенно помечается как <b>«нет в наличии»</b> и исчезает из онлайн-заказа. ${isOwner ? '📦 <b>Штучный учёт</b>: вбейте купленное количество банок — при выдаче заказа остаток уменьшится сам, а по нулю позиция уйдёт в стоп-лист.' : ''}</span>
    </div>
    <div class="toolbar">
      <div class="chips">
        ${cats.map((c) => `<button class="chip ${state.menuCat === c ? 'active' : ''}" data-cat="${esc(c)}" type="button">${esc(c)}</button>`).join('')}
      </div>
      ${sortSelect('menuSortSel', MENU_SORTS, state.menuSort)}
      <div class="search"><input type="text" id="menuSearch" placeholder="Поиск по названию…" value="${esc(state.menuQuery)}"></div>
    </div>
    <div class="menu-list">${rows || '<div class="stop-empty">Ничего не найдено</div>'}</div>`;
}

const strengthLabel = (s) => (s <= 1 ? 'Лёгкая' : s <= 2 ? 'Средняя' : 'Крепкая');

function viewTobacco() {
  const brands = ['Все', ...new Set(state.tobacco.filter((t) => !t.deleted).map((t) => t.brand))];
  const q = state.tobaccoQuery.trim().toLowerCase();
  const isNov = (t) => t.custom && isNewItem(t.created_at);
  // сортировка: «по умолчанию» держит новинки вверху
  const tobSorters = {
    default: (a, b) => (isNov(b) ? 1 : 0) - (isNov(a) ? 1 : 0),
    flavor: ruCmp('flavor'),
    brand: (a, b) => ruCmp('brand')(a, b) || ruCmp('flavor')(a, b),
    strength_asc: (a, b) => a.strength - b.strength || ruCmp('flavor')(a, b),
    strength_desc: (a, b) => b.strength - a.strength || ruCmp('flavor')(a, b),
  };
  const items = state.tobacco
    .filter((t) =>
      (state.tobBrand === 'Все' || t.brand === state.tobBrand) &&
      (!q || (t.flavor + ' ' + t.brand + ' ' + (t.note || '')).toLowerCase().includes(q)))
    .sort(tobSorters[state.tobaccoSort] || tobSorters.default);
  const isOwner = state.role === 'owner';

  const rows = items.map((t) => `
    <div class="menu-row ${t.deleted ? 'row-deleted' : t.stopped ? 'stopped' : ''}">
      <div>
        <div class="m-name">${esc(t.flavor)}</div>
        <div class="m-cat">${esc(t.brand)}${t.note ? ' · ' + esc(t.note) : ''}${t.cooling ? ' · ❄ холодок' : ''}${t.custom && isNewItem(t.created_at) ? ' · ✨ новинка' : ''}</div>
      </div>
      <div class="m-price">${strengthLabel(t.strength)}</div>
      ${t.deleted
        ? '<span class="badge b-cancel"><span class="b-dot"></span>Удалён</span>'
        : t.stopped
          ? '<span class="badge b-stop"><span class="b-dot"></span>В стопе</span>'
          : '<span class="badge b-done"><span class="b-dot"></span>Доступен</span>'}
      <div class="m-stopcell">
        ${t.deleted
          ? (isOwner ? `<button class="btn btn-ghost btn-sm" data-restore="tobacco:${encodeURIComponent(t.id)}" type="button">Вернуть</button>${t.custom ? `<button class="btn btn-danger btn-sm" data-purge="tobacco:${encodeURIComponent(t.id)}" type="button" title="Стереть вкус из базы — восстановить будет нельзя">Удалить навсегда</button>` : ''}` : '')
          : `
        <label class="switch">
          <input type="checkbox" data-tob-stop="${encodeURIComponent(t.id)}" ${t.stopped ? 'checked' : ''} aria-label="Стоп-лист для ${esc(t.flavor)}">
          <span class="track"></span>
        </label>
        <span class="switch-label">${t.stopped ? 'стоп' : 'в работе'}</span>
        ${isOwner ? `<button class="btn btn-danger btn-sm" data-del="tobacco:${encodeURIComponent(t.id)}" type="button" title="Удалить вкус">Удалить</button>` : ''}`}
      </div>
    </div>`).join('');

  return `
    ${state.role === 'owner' ? `
    <div class="panel" style="margin-bottom:16px">
      <div class="panel-title">Добавить вкус <small>появится на сайте с пометкой «Новинка» на 7 дней</small></div>
      <form class="user-form" id="tobaccoForm" autocomplete="off">
        <input type="text" id="newTobBrand" placeholder="Бренд" required>
        <input type="text" id="newTobFlavor" placeholder="Название вкуса" required>
        <input type="text" id="newTobNote" placeholder="Описание вкуса">
        <select id="newTobStrength" aria-label="Крепость">
          <option value="1">Лёгкая</option>
          <option value="2" selected>Средняя</option>
          <option value="3">Крепкая</option>
        </select>
        <label class="check-inline"><input type="checkbox" id="newTobCooling"> холодок</label>
        <button class="btn btn-neon" type="submit">Добавить</button>
      </form>
    </div>` : ''}
    <div class="note"><span class="n-ico">ℹ</span>
      <span>Стоп-лист ведётся по <b>отдельным вкусам</b>, а не по маркам. Вкус <b>в стопе</b> нельзя выбрать в конструкторе кальяна на сайте — карточка вкуса помечается «Закончился». Используйте при окончании запаса конкретной позиции.</span>
    </div>
    <div class="toolbar">
      <div class="chips">
        ${brands.map((b) => `<button class="chip ${state.tobBrand === b ? 'active' : ''}" data-tobcat="${esc(b)}" type="button">${esc(b)}</button>`).join('')}
      </div>
      ${sortSelect('tobSortSel', TOBACCO_SORTS, state.tobaccoSort)}
      <div class="search"><input type="text" id="tobSearch" placeholder="Поиск по вкусу…" value="${esc(state.tobaccoQuery)}"></div>
    </div>
    <div class="menu-list">${rows || '<div class="stop-empty">Ничего не найдено</div>'}</div>`;
}

/* ---------------- миксы для сайта (владелец и кальянщик) ---------------- */

/* подписи крепости/холодка миксов — как на сайте (MixesPage) */
const MIX_STRENGTH_LABELS = { 1: 'лёгкий', 2: 'ниже среднего', 3: 'средняя', 4: 'выше средней', 5: 'крепкий' };
const MIX_COOLING_LABELS = { 0: 'без холодка', 1: 'лёгкий', 2: 'средний', 3: 'сильный' };
/* теги миксов: по ним сайт подмешивает микс мастера в автоподбор
   (пересечение с категориями запроса гостя) */
const MIX_TAGS = ['фрукты', 'ягоды', 'цитрус', 'тропики', 'десерты', 'напитки',
  'пряности', 'цветы', 'мята', 'сливки', 'орехи', 'лёд'];

function viewMixes() {
  const available = state.tobacco.filter((t) => !t.deleted);
  const brands = ['Все', ...new Set(available.map((t) => t.brand))];
  const q = state.mixQuery.trim().toLowerCase();
  const choices = available.filter((t) =>
    (state.mixBrand === 'Все' || t.brand === state.mixBrand) &&
    (!q || (t.flavor + ' ' + t.brand).toLowerCase().includes(q)));
  const chosen = state.newMix.flavorIds
    .map((id) => available.find((t) => t.id === id))
    .filter(Boolean);
  const err = state.mixErrors || {};
  const fieldError = (key) => (err[key]
    ? `<div class="form-error" role="alert">⚠ ${esc(err[key])}</div>` : '');
  const errClass = (key) => (err[key] ? ' field-error' : '');

  const mixMeta = (m) => {
    const bits = [];
    if (m.strength != null) bits.push(`крепость ${m.strength}/5${MIX_STRENGTH_LABELS[m.strength] ? ' · ' + MIX_STRENGTH_LABELS[m.strength] : ''}`);
    if (m.cooling != null) bits.push(`холодок ${m.cooling}/3${MIX_COOLING_LABELS[m.cooling] ? ' · ' + MIX_COOLING_LABELS[m.cooling] : ''}`);
    if (m.price != null) bits.push(money(m.price));
    if ((m.tags || []).length) bits.push('🏷 ' + m.tags.map(esc).join(', '));
    return bits.length ? ' · ' + bits.join(' · ') : '';
  };

  /* сортировка списка миксов; «по умолчанию» — как отдал сервер (свежие сверху) */
  const mixSorters = {
    default: null,
    name: ruCmp('name'),
    price_asc: numCmp('price', 1),
    price_desc: numCmp('price', -1),
    strength_asc: numCmp('strength', 1),
    strength_desc: numCmp('strength', -1),
  };
  const sorter = mixSorters[state.mixSort];
  const sortedMixes = sorter ? [...state.mixes].sort(sorter) : state.mixes;
  const rows = sortedMixes.map((m) => `
    <div class="menu-row">
      <div>
        <div class="m-name">${esc(m.name)}</div>
        <div class="m-cat">${m.flavors.map((f) => `${esc(f.brand)} ${esc(f.flavor)}`).join(' · ')}${m.note ? ' · ' + esc(m.note) : ''}${mixMeta(m)}</div>
      </div>
      <div class="m-price">${fmtDate(m.created_at)}</div>
      <span class="badge b-done"><span class="b-dot"></span>На сайте</span>
      <div class="m-stopcell">
        <button class="btn btn-ghost btn-sm" data-mixedit="${esc(m.id)}" type="button" title="Изменить название, состав, крепость, холодок, цену или теги">✎ Изменить</button>
        ${state.role === 'owner' ? `<button class="btn btn-danger btn-sm" data-purge="mixes:${esc(m.id)}" type="button" title="Стереть микс из базы — восстановить будет нельзя">Удалить навсегда</button>` : ''}
        <button class="btn btn-danger btn-sm" data-mixdel="${esc(m.id)}" type="button">Удалить</button>
      </div>
    </div>`).join('');

  /* авторские миксы сайта (seed catalog.ts): название/описание/состав/цена
   правятся здесь и применяются на сайте через /api/catalog */
  const siteRows = state.siteMixes.map((m) => `
    <div class="menu-row">
      <div>
        <div class="m-name">${esc(m.name)}${m.featured ? ' ⭐' : ''}${m.edited ? ' ✏️' : ''}</div>
        <div class="m-cat">${esc(m.note || '')}</div>
        ${m.flavors ? `<div class="m-cat">${m.flavors.map((f) => `${esc(f.brand)} ${esc(f.flavor)}`).join(' · ')}</div>` : ''}
        <div class="m-cat">${esc((m.flavor_tags || []).join(', '))}</div>
      </div>
      <div class="m-price">${typeof m.price === 'number' ? money(m.price) : esc(m.price || '')}</div>
      <span class="badge b-new"><span class="b-dot"></span>сила ${m.strength}/5 · холодок ${m.cooling}/3${m.edited ? ' · правка из CRM' : ''}</span>
      <div class="m-stopcell">
        ${state.role === 'owner' ? `
        <button class="btn btn-ghost btn-sm" data-sitemixedit="${esc(m.id)}" type="button" title="Изменить название, описание, состав, крепость, холодок или цену">✎ Изменить</button>
        ${m.edited ? `<button class="btn btn-ghost btn-sm" data-sitemixreset="${esc(m.id)}" type="button" title="Вернуть исходный вид микса">Вернуть оригинал</button>` : ''}
        ` : '<span class="switch-label">витрина сайта</span>'}
      </div>
    </div>`).join('');

  return `
    <div class="note"><span class="n-ico">ℹ</span>
      <span>${state.role === 'hookah'
        ? 'Миксы видны гостям в разделе <b>«Миксы НЕОНа»</b> на сайте: название и состав, крепость, холодок, цена. Теги подмешивают микс в автоподбор на сайте. Пропорции забивки гость не видит. Кнопка ✎ — изменить название или состав микса.'
        : 'Миксы видны гостям в разделе <b>«Миксы НЕОНа»</b> на сайте. Указывайте только сочетание вкусов — <b>пропорции подбирает кальянщик</b>, гость их не видит. Кнопка ✎ у микса — правка названия, состава и описания; в блоке «Авторские миксы сайта» ✎ правит витринный микс, «Вернуть оригинал» отменяет правку.'}</span>
    </div>
    <div class="panel" style="margin-bottom:16px">
      <div class="panel-title">${state.siteMixEditId ? 'Правка витринного микса' : state.mixEditId ? 'Редактирование микса' : 'Добавить микс'} <small>${state.siteMixEditId ? 'изменения появятся на сайте сразу · очистите состав, чтобы вернуть исходный' : state.mixEditId ? 'изменения появятся на сайте сразу' : 'появится на сайте сразу · заметка не обязательна'}</small></div>
      <form class="user-form" id="mixForm" autocomplete="off" novalidate>
        <input type="text" id="newMixName" placeholder="Название микса" maxlength="120" class="${errClass('newMixName')}">
        <input type="text" id="newMixNote" placeholder="Заметка, напр. «крепкий, на большую чашу» (необязательно)" maxlength="200">
        <select id="newMixStrength" aria-label="Крепость микса" class="${errClass('newMixStrength')}">
          <option value="">Крепость — выберите</option>
          ${[1, 2, 3, 4, 5].map((s) => `<option value="${s}">${s}/5 — ${MIX_STRENGTH_LABELS[s]}</option>`).join('')}
        </select>
        <select id="newMixCooling" aria-label="Холодок микса" class="${errClass('newMixCooling')}">
          <option value="">Холодок — выберите</option>
          ${[0, 1, 2, 3].map((c) => `<option value="${c}">${c}/3 — ${MIX_COOLING_LABELS[c]}</option>`).join('')}
        </select>
        <input type="number" id="newMixPrice" placeholder="Цена, ₽" min="0" step="1" class="${errClass('newMixPrice')}">
        <button class="btn btn-neon" type="submit">${state.siteMixEditId || state.mixEditId ? 'Сохранить изменения' : 'Добавить микс'}</button>
        ${state.siteMixEditId || state.mixEditId ? '<button class="btn btn-ghost" data-mix-cancel="1" type="button">Отмена</button>' : ''}
        ${fieldError('newMixName')}${fieldError('newMixStrength')}${fieldError('newMixCooling')}${fieldError('newMixPrice')}
      </form>
      ${state.siteMixEditId && state.newMix.flavorIds.length === 0 ? '<p class="switch-label" style="margin-top:8px">Состав не выбран — на сайте останется исходный состав этого микса</p>' : ''}
      <div class="chips ${err.tags ? 'field-error-block' : ''}" id="mixTagChips" style="margin-top:10px">
        <span class="switch-label">Теги (для автоподбора):</span>
        ${MIX_TAGS.map((t) => `
          <button class="chip ${state.newMix.tags.includes(t) ? 'active' : ''}" data-mixtag="${t}" type="button"
            title="Микс будет подмешиваться в автоподбор по этому тегу">${t}</button>`).join('')}
      </div>
      ${fieldError('tags')}
      <div class="chips ${err.flavors ? 'field-error-block' : ''}" id="mixFlavorChips" style="margin-top:10px">
        ${chosen.length
          ? `Состав (${chosen.length}): ` + chosen.map((t) =>
              `<button class="chip active" data-mixflavor="${esc(t.id)}" type="button" title="убрать">${esc(t.brand)} ${esc(t.flavor)} ✕</button>`).join('')
          : '<span class="switch-label">Выберите 2–5 вкусов из списка ниже</span>'}
      </div>
      ${fieldError('flavors')}
      <div class="toolbar" style="margin-top:10px">
        <div class="chips">
          ${brands.map((b) => `<button class="chip ${state.mixBrand === b ? 'active' : ''}" data-mixbrand="${esc(b)}" type="button">${esc(b)}</button>`).join('')}
        </div>
        <div class="search"><input type="text" id="mixSearch" placeholder="Поиск по вкусу…" value="${esc(state.mixQuery)}"></div>
      </div>
      <div class="chips" style="margin-top:10px;max-height:220px;overflow:auto">
        ${choices.map((t) => `
          <button class="chip ${state.newMix.flavorIds.includes(t.id) ? 'active' : ''}"
            data-mixflavor="${esc(t.id)}" type="button">${esc(t.brand)} ${esc(t.flavor)}</button>`).join('')
          || '<span class="switch-label">Ничего не найдено</span>'}
      </div>
    </div>
    <div class="toolbar" style="margin-top:16px">
      <span class="switch-label">Миксов: ${sortedMixes.length}</span>
      ${sortSelect('mixSortSel', MIX_SORTS, state.mixSort)}
    </div>
    <div class="menu-list">${rows || '<div class="stop-empty">Миксов пока нет — добавьте первый</div>'}</div>
    ${state.siteMixes.length ? `
    <div class="panel" style="margin-top:16px">
      <div class="panel-title">Авторские миксы сайта <small>${state.siteMixes.length} шт. — читаются из каталога сайта, здесь только просмотр</small></div>
      <div class="menu-list">${siteRows}</div>
    </div>` : ''}`;
}

function orderCard(o, actions) {
  const items = o.items.map((i) => {
    // 💨 у кальянов (в каталоге их ровно два, оба начинаются со «Кальян»):
    // на планшете кальянщика свой ли это заказ видно без чтения списка
    const hookah = /^кальян/i.test(i.name);
    return `
    <li${hookah ? ' class="is-hookah"' : ''}><span>${hookah ? '💨 ' : ''}<span class="q">${i.qty}</span>${esc(i.name)}</span><span class="p">${money(i.price * i.qty)}</span></li>`;
  }).join('');
  const dur = o.status === 'done' && o.duration_seconds != null
    ? `<div class="o-dur">⏱ принят → выдан за ${fmtDur(o.duration_seconds)}</div>` : '';
  const guest = o.guest_name
    ? `<div class="o-waiter">гость: ${esc(o.guest_name)}${o.guest_phone ? ' · ' + esc(o.guest_phone) : ''}</div>` : '';
  const comment = o.comment ? `<div class="o-comment">💬 ${esc(o.comment)}</div>` : '';
  const origin = o.source === 'site' ? 'заказ с сайта' : 'заказ из зала';
  return `
    <div class="order-card is-${o.status}">
      <div class="o-head">
        <span class="o-num">Заказ №${o.number}</span>
        <span class="o-table">${esc(o.table)}</span>
        <span class="o-time">${fmtTime(o.created_at)}</span>
      </div>
      <ul class="o-items">${items}</ul>
      <div class="o-foot">
        <div>
          <div class="o-total">${money(orderTotal(o))}</div>
          <div class="o-waiter">${o.waiter ? 'официант: ' + esc(o.waiter) : origin}</div>
          ${guest}
          ${comment}
          ${dur}
        </div>
        ${actions}
      </div>
    </div>`;
}

/* выданные заказы исчезают из канбана официанта через час после выдачи
   (админ и владелец видят полный список в таблице заказов) */
const DONE_TTL_MS = 60 * 60 * 1000;

function isDoneLongAgo(o) {
  if (!o.delivered_at) return false;
  const ts = new Date(o.delivered_at).getTime();
  return Number.isFinite(ts) && Date.now() - ts > DONE_TTL_MS;
}

function viewWaiterOrders() {
  // вне смены управление заблокировано: смотрим заказы, кнопок нет
  const blocked = !state.onShift;
  const cols = [
    { key: 'new',    cls: 'kan-new',    title: 'Новые' },
    { key: 'active', cls: 'kan-active', title: 'В работе' },
    { key: 'done',   cls: 'kan-done',   title: 'Выданные' },
  ].map((c) => {
    const orders = state.orders.filter((o) =>
      o.status === c.key && !(c.key === 'done' && isDoneLongAgo(o)));
    // кнопки в отдельной группе: на телефоне .o-actions перестраивается
    // в свои ряды и не выезжает за карточку
    const action = blocked ? () => '' :
      c.key === 'new' ? (o) => `
        <div class="o-actions">
          <button class="btn btn-neon btn-sm" data-accept="${esc(o.id)}" type="button">Принять</button>
          <button class="btn btn-green btn-sm" data-fastdone="${esc(o.id)}" type="button" title="Заказ отдали гостю сразу — один тап вместо двух">✓ Сразу выдать</button>
          <button class="btn btn-danger btn-sm" data-cancel="${esc(o.id)}" type="button">Отменить</button>
        </div>` :
      c.key === 'active' ? (o) => `
        <div class="o-actions">
          <button class="btn btn-green btn-sm" data-deliver="${esc(o.id)}" type="button">✓ Выдать</button>
          <button class="btn btn-danger btn-sm" data-cancel="${esc(o.id)}" type="button">Отменить</button>
        </div>` :
      () => '';
    const cards = orders.map((o) => orderCard(o, action(o))).join('');
    return `
      <div class="kan-col ${c.cls}">
        <div class="kan-head">${c.title}<span class="cnt">${orders.length}</span></div>
        <div class="stack">${cards || '<div class="kan-empty">Пусто</div>'}</div>
      </div>`;
  }).join('');

  return `
    <div class="note"><span class="n-ico">${blocked ? '🔒' : '💡'}</span>
      <span>${blocked
        ? 'Смена закрыта — управление заблокировано. Кнопка <b>«Выйти на смену»</b> появится за 20 минут до начала, отсчёт — в шапке.'
        : 'Нажмите <b>«Принять»</b>, когда взяли заказ в работу, затем <b>«Выдать»</b>. Мгновенный заказ (напиток из холодильника) — <b>«✓ Сразу выдать»</b> в один тап. 💨 в составе — кальян. Ошибочный или отменённый гостем заказ — <b>«Отменить»</b>.'}</span>
    </div>
    <div class="kanban">${cols}</div>`;
}

function viewAdminOrders() {
  const f = state.orderFilter;
  const orders = [...state.orders]
    .filter((o) => f === 'all' || o.status === f)
    .sort((a, b) => b.id - a.id);

  const chips = [
    { key: 'all', label: 'Все' },
    { key: 'new', label: 'Новые' },
    { key: 'active', label: 'В работе' },
    { key: 'done', label: 'Выданные' },
    { key: 'cancelled', label: 'Отменённые' },
  ].map((c) => {
    const n = c.key === 'all' ? state.orders.length : state.orders.filter((o) => o.status === c.key).length;
    return `<button class="chip ${f === c.key ? 'active' : ''}" data-ofilter="${c.key}" type="button">${c.label}<span class="cnt">${n}</span></button>`;
  }).join('');

  const rows = orders.map((o) => `
    <div class="ot-row">
      <span class="ot-num">№${o.number}</span>
      <span class="ot-time-cell">${fmtTime(o.created_at)}</span>
      <span class="ot-items-cell">${o.items.map((i) => `${i.qty}×${esc(i.name)}`).join(' · ')}${o.comment ? ` · 💬 ${esc(o.comment)}` : ''}</span>
      <span class="ot-waiter-cell">${esc(o.waiter || '—')}</span>
      <span class="ot-total-cell">${money(orderTotal(o))}</span>
      <span class="ot-dur-cell" title="Время от принятия до выдачи">⏱ ${fmtDur(o.duration_seconds)}</span>
      <select class="status-select s-${o.status}" data-status="${esc(o.id)}" title="Сменить статус заказа">
        ${Object.entries(STATUS).map(([key, v]) =>
          `<option value="${key}" ${o.status === key ? 'selected' : ''}>${v.label}</option>`).join('')}
      </select>
    </div>`).join('');

  return `
    ${state.role === 'owner' ? `
    <div class="toolbar" style="margin-bottom:10px">
      <button class="btn btn-ghost btn-sm" data-numreset="1" type="button"
        title="Следующий заказ получит №1 — до конца текущей недели нумерации">⟲ Сбросить нумерацию</button>
    </div>` : ''}
    <div class="toolbar"><div class="chips">${chips}</div></div>
    <div class="order-table">
      <div class="ot-row head">
        <span>Заказ</span><span>Время</span><span>Состав</span><span class="h-waiter">Официант</span><span>Сумма</span><span class="h-dur">Выполнен за</span><span>Статус</span>
      </div>
      ${rows || '<div class="stop-empty">Нет заказов по фильтру</div>'}
    </div>`;
}

function viewStopList() {
  // кальянщику важен только табак: его стоп-лист — вкусы для кальянов
  const hookahOnly = state.role === 'hookah';
  const m = hookahOnly ? [] : state.menu.filter((x) => x.stopped && !x.deleted);
  const t = state.tobacco.filter((x) => x.stopped && !x.deleted);
  if (!m.length && !t.length) {
    return `<div class="panel"><div class="stop-empty" style="padding:48px 20px">Стоп-лист пуст — все позиции доступны 😉</div></div>`;
  }
  const row = (name, type, price) => `
    <div class="menu-row stopped">
      <div><div class="m-name">${esc(name)}</div><div class="m-cat">${esc(type)}</div></div>
      <div class="m-price">${price || '—'}</div>
      <span class="badge b-stop"><span class="b-dot"></span>В стопе</span>
      <span></span>
    </div>`;
  return `
    <div class="note"><span class="n-ico">ℹ</span>
      <span>${hookahOnly
        ? 'Эти <b>вкусы табака</b> сейчас <b>нельзя забить в кальян</b> — вкус помечен «Закончился» в конструкторе на сайте. Снять или вернуть стоп можно во вкладке <b>«Табаки»</b>.'
        : 'Эти позиции <b>нельзя заказать</b> — сообщайте гостям при приёме заказа. Изменить стоп-лист может только администратор.'}</span>
    </div>
    <div class="menu-list">
      ${t.map((x) => row(x.flavor, 'Табак · ' + x.brand)).join('')}
      ${m.map((x) => row(x.name, 'Меню · ' + x.category, money(x.price))).join('')}
    </div>`;
}

/* ---------------- залы: занятость столов и зон + брони ---------------- */

/* «90» — минуты; «23:30»/«01:30» — время, до которого занят стол.
   Время раньше текущего означает следующие сутки (бар работает до утра). */
function parseUntilMinutes(raw) {
  const s = (raw || '').trim();
  if (!s) return null;
  const tm = s.match(/^(\d{1,2}):(\d{2})$/);
  if (tm) {
    const now = new Date();
    const target = new Date(now);
    target.setHours(Number(tm[1]), Number(tm[2]), 0, 0);
    if (target <= now) target.setDate(target.getDate() + 1);
    return Math.round((target - now) / 60000);
  }
  const mins = Number(s);
  return Number.isFinite(mins) && mins >= 5 ? Math.round(mins) : null;
}

/* напоминание о брони: окно за 20 минут до прихода гостя; каждый тост один раз */
const RESERVE_REMIND_MS = 20 * 60 * 1000;

function checkReserveReminders() {
  const now = Date.now();
  for (const h of state.halls) {
    for (const r of h.reservations || []) {
      const from = new Date(r.from).getTime();
      if (from - RESERVE_REMIND_MS <= now && now < from && !state.resReminded.has(r.id)) {
        state.resReminded.add(r.id);
        const mins = Math.max(1, Math.round((from - now) / 60000));
        beep();
        toast(`🔔 Бронь: ${h.name} в ${fmtTime(r.from)}`
          + (r.guest ? ` — ${r.guest}` : '') + ` (через ${mins} мин)`, '');
      }
    }
  }
}

function hallReserveBlock(h, canManage) {
  const res = (h.reservations || [])[0];
  if (!res) return '';
  const now = Date.now();
  const from = new Date(res.from).getTime();
  const until = new Date(res.until).getTime();
  const ongoing = now >= from && now < until;
  const more = (h.reservations || []).slice(1).map((r) => fmtTime(r.from)).join(', ');
  return `
    <div class="h-reserve ${ongoing ? 'is-ongoing' : ''}">
      <span class="h-reserve-ico">🔒</span>
      <span class="h-reserve-what">Бронь ${fmtTime(res.from)}–${fmtTime(res.until)}${res.guest ? ' · ' + esc(res.guest) : ''}</span>
      ${ongoing
        ? `<span class="h-reserve-count">идёт · до ${fmtTime(res.until)}</span>`
        : `<span class="h-reserve-count">через&nbsp;<span class="busy-timer" data-deadline="${from}" data-done="началась"></span></span>`}
      ${canManage ? `<button class="icon-btn" data-hall-res-cancel="${esc(res.id)}" type="button" title="Отменить бронь">✕</button>` : ''}
    </div>
    ${more ? `<div class="h-reserve-more">ещё брони: ${more}</div>` : ''}`;
}

function viewHalls() {
  const canManage = state.role === 'owner' || state.role === 'admin';
  const isOwner = state.role === 'owner';
  const cards = (state.halls.length ? state.halls : halls.map((h) => ({ name: h.name, sub: h.sub })))
    .map((h) => {
      const timer = h.busy && h.busy_until
        ? `<div class="h-timer"><span class="h-timer-ico">⏳</span><span class="busy-timer" data-deadline="${new Date(h.busy_until).getTime()}"></span></div>`
        : '';
      const meta = h.busy
        ? `<div class="h-busyby">занял: ${esc(h.busy_by || '—')}${h.busy_until ? ' · до ' + fmtTime(h.busy_until) : ' · без таймера'}</div>`
        : '';
      const reserve = hallReserveBlock(h, canManage);
      const controls = !canManage ? '' : h.busy ? `
        <div class="h-actions">
          <button class="btn btn-ghost btn-sm" data-hall-ext="${esc(h.name)}:30" type="button">+30 мин</button>
          <button class="btn btn-ghost btn-sm" data-hall-ext="${esc(h.name)}:60" type="button">+1 час</button>
          <button class="btn btn-ghost btn-sm" data-hall-custom-ext="${esc(h.name)}" type="button">Своё время…</button>
          <button class="btn btn-ghost btn-sm" data-hall-reserve="${esc(h.name)}" type="button">🔒 Бронь…</button>
          <button class="btn btn-danger btn-sm" data-hall-free="${esc(h.name)}" type="button">Освободить</button>
        </div>` : `
        <div class="h-actions">
          <button class="btn btn-neon btn-sm" data-hall-busy="${esc(h.name)}" type="button">Занять</button>
          <button class="btn btn-ghost btn-sm" data-hall-busy-min="${esc(h.name)}:30" type="button">30 мин</button>
          <button class="btn btn-ghost btn-sm" data-hall-busy-min="${esc(h.name)}:60" type="button">1 час</button>
          <button class="btn btn-ghost btn-sm" data-hall-busy-min="${esc(h.name)}:120" type="button">2 часа</button>
          <button class="btn btn-ghost btn-sm" data-hall-custom-busy="${esc(h.name)}" type="button">До времени…</button>
          <button class="btn btn-ghost btn-sm" data-hall-reserve="${esc(h.name)}" type="button">🔒 Бронь…</button>
          ${isOwner ? `<button class="btn btn-danger btn-sm" data-hall-del="${esc(h.name)}" type="button" title="Удалить стол: исчезнет из CRM и из выбора столика на сайте">Удалить</button>` : ''}
        </div>`;
      return `
        <div class="hall-card ${h.busy ? 'is-busy' : ''}">
          <div class="h-top">
            <div>
              <div class="h-name">${esc(h.name)}</div>
              <div class="h-sub">${esc(h.sub || '')}</div>
            </div>
            ${h.busy
              ? '<span class="badge b-stop"><span class="b-dot"></span>Занят</span>'
              : '<span class="badge b-done"><span class="b-dot"></span>Свободен</span>'}
          </div>
          ${meta}${timer}${reserve}${controls}
        </div>`;
    })
    .join('');

  return `
    <div class="note"><span class="n-ico">ℹ</span>
      <span>${canManage
        ? 'Помечайте столы и зоны занятыми — по желанию с таймером до освобождения. 🔒 Бронь: стол помечается на нужное время, отсчёт виден всем, а за 20 минут до прихода гостя панель напомнит. До начала брони стол остаётся свободным для гостей.'
        : 'Занятость и брони ведут администратор и владелец. Видно, какие столы заняты, сколько осталось до освобождения и когда ожидается гость с бронью.'}</span>
    </div>
    ${isOwner ? `
    <div class="panel" style="margin-bottom:16px">
      <div class="panel-title">Добавить стол или зал <small>сразу появится в залах CRM и в выборе столика на сайте</small></div>
      <form class="user-form" id="hallForm" autocomplete="off">
        <input type="text" id="newHallName" placeholder="Название, напр. Стол 6" maxlength="60" required>
        <input type="text" id="newHallSub" placeholder="Подпись, напр. «терраса» (необязательно)" maxlength="60">
        <button class="btn btn-neon" type="submit">Добавить</button>
      </form>
    </div>` : ''}
    <div class="hall-grid">${cards || '<div class="stop-empty">Загрузка состояния залов…</div>'}</div>`;
}

/* ---------------- владелец: сотрудники и отчёты ---------------- */

function viewUsers() {
  const roleBadge = (r) =>
    r === 'owner' ? '<span class="badge b-new"><span class="b-dot"></span>Владелец</span>' :
    r === 'admin' ? '<span class="badge b-active"><span class="b-dot"></span>Администратор</span>' :
    r === 'hookah' ? '<span class="badge b-active"><span class="b-dot"></span>Кальянщик</span>' :
    '<span class="badge b-done"><span class="b-dot"></span>Официант</span>';
  const shiftByLogin = {};
  for (const sc of state.shiftCounts) shiftByLogin[sc.login] = sc.shifts;
  const rows = state.users.map((u) => `
    <div class="menu-row">
      <div>
        <div class="m-name">${esc(u.name)}</div>
        <div class="m-cat">${esc(u.login)}${SHIFT_ROLES_JS.includes(u.role) ? ' · смен: ' + (shiftByLogin[u.login] || 0) : ''}</div>
      </div>
      <div class="m-price">${(u.role === 'waiter' || u.role === 'hookah' || u.role === 'admin')
        ? `<button class="btn btn-ghost btn-sm" data-user-pass="${esc(u.login)}" type="button" title="Задать новый пароль: сотрудник войдёт с ним, его открытые сессии закроются">Пароль</button>`
        : ''}</div>
      ${roleBadge(u.role)}
      <div class="m-stopcell">
        ${(u.role === 'waiter' || u.role === 'hookah' || u.role === 'admin') && u.login !== state.login
          ? `<button class="btn btn-danger btn-sm" data-user-del="${esc(u.login)}" type="button">Удалить</button>`
          : `<span class="switch-label">${u.login === state.login ? 'это вы' : ''}</span>`}
      </div>
    </div>`).join('');

  return `
    <div class="note"><span class="n-ico">ℹ</span>
      <span>Владелец создаёт <b>официантов и администраторов</b> — имя, логин, пароль. Администратор управляет меню, табаками и заказами; официант — только заказами. Кнопка «Пароль» задаёт сотруднику новый пароль (его сессии закроются). Удалённый сотрудник теряет доступ сразу.</span>
    </div>
    <div class="panel">
      <div class="panel-title">Добавить сотрудника</div>
      <form class="user-form" id="userForm" autocomplete="off">
        <input type="text" id="newUserName" placeholder="Имя (например, Алиса)" required>
        <input type="text" id="newUserLogin" placeholder="Логин (латиница)" required>
        <input type="password" id="newUserPass" placeholder="Пароль" required>
        <select id="newUserRole" aria-label="Роль сотрудника">
          <option value="waiter">Официант</option>
          <option value="hookah">Кальянщик</option>
          <option value="admin">Администратор</option>
        </select>
        <button class="btn btn-neon" type="submit">Создать</button>
      </form>
    </div>
    <div class="menu-list">${rows || '<div class="stop-empty">Сотрудников нет</div>'}</div>`;
}

function viewReports() {
  const r = state.report;
  return `
    <div class="note"><span class="n-ico">ℹ</span>
      <span>Отчёт собирается из базы заказов. Выручка — только по <b>выданным</b> заказам, отменённые показываются отдельно и в выручку не входят.</span>
    </div>
    <div class="panel">
      <div class="panel-title">Период</div>
      <div class="report-controls">
        <label>С <input type="date" id="repFrom" value="${esc(state.reportFrom)}"></label>
        <label>По <input type="date" id="repTo" value="${esc(state.reportTo)}"></label>
        <button class="btn btn-neon" data-rep="build" type="button">Построить отчёт</button>
        <button class="btn btn-ghost" data-rep="all" type="button">Отчёт за всё время</button>
        <button class="btn btn-ghost" data-rep="excel" type="button" title="Скачать отчёт за выбранный период в Excel (со сводкой, днями, часами, позициями, столами и сотрудниками)">⬇ Excel</button>
        <button class="btn btn-ghost" data-rep="excel-days" type="button" title="Excel с отдельным листом на каждый день периода (лист «Сводка» + день за днём; период до 31 дня)">⬇ Excel по дням</button>
      </div>
    </div>
    ${r ? reportBlock(r) : '<div class="panel"><div class="stop-empty">Выберите период и нажмите «Построить отчёт»</div></div>'}`;
}

function reportBlock(r) {
  const t = r.totals;
  const dur = t.avg_duration_seconds != null ? fmtDur(t.avg_duration_seconds) : '—';
  const days = r.by_day.map((d) => `
    <div class="report-row">
      <span>${esc(d.day)}</span><span>${d.orders}</span><span>${money(d.revenue)}</span><span>${d.cancelled}</span>
    </div>`).join('');
  const top = r.top_items.length
    ? r.top_items.map((i, idx) => `
      <div class="report-row">
        <span class="ri-name">${idx + 1}. ${esc(i.name)}</span><span>${i.qty} шт</span><span>${money(i.revenue)}</span>
      </div>`).join('')
    : '<div class="stop-empty">Нет проданных позиций за период</div>';
  const src = r.by_source || {};
  const totalOrders = Object.values(src).reduce((s, x) => s + (x.orders || 0), 0);
  const totalRevenue = Object.values(src).reduce((s, x) => s + (x.revenue || 0), 0);
  const sources = [['Сайт', src.site], ['Из зала', src.hall]]
    .filter(([, s]) => s)
    .map(([label, s]) => `
      <div class="report-row three"><span>${label}</span><span>${s.orders}</span><span>${money(s.revenue)}</span></div>`)
    .join('');
  const sourcesTotal = (src.site || src.hall) ? `
      <div class="report-row three"><span><b>Всего (сайт + зал)</b></span><span><b>${totalOrders}</b></span><span><b>${money(totalRevenue)}</b></span></div>`
    : '';
  const tables = (r.top_tables || []).map((x) => `
    <div class="report-row three"><span class="ri-name">${esc(x.table)}</span><span>${x.orders}</span><span>${money(x.revenue)}</span></div>`).join('');
  const hours = (r.by_hour || []).filter((h) => h.orders || h.revenue).map((h) => `
    <div class="report-row three">
      <span>${pad2(h.hour)}:00–${pad2((h.hour + 1) % 24)}:00</span><span>${h.orders}</span><span>${money(h.revenue)}</span>
    </div>`).join('');
  return `
    <div class="stats-grid">
      <div class="stat c-green"><div class="num">${money(t.revenue)}</div><div class="lbl">Выручка</div><div class="sub">выданные заказы</div></div>
      <div class="stat c-cyan"><div class="num">${t.orders}</div><div class="lbl">Заказов всего</div><div class="sub">новых: ${t.new} · в работе: ${t.active}</div></div>
      <div class="stat c-green"><div class="num">${t.done}</div><div class="lbl">Выдано</div><div class="sub">средний чек ${money(t.avg_check)}</div></div>
      <div class="stat c-red"><div class="num">${t.cancelled}</div><div class="lbl">Отменено</div><div class="sub">${money(t.cancelled_amount)}</div></div>
      <div class="stat c-cyan"><div class="num${dur !== '—' ? ' txt' : ''}">${dur}</div><div class="lbl">Средняя подача</div><div class="sub">от принятия до выдачи</div></div>
    </div>
    <div class="dash-grid">
      <div class="panel">
        <div class="panel-title">По дням</div>
        <div class="report-table">
          <div class="report-row head"><span>День</span><span>Заказов</span><span>Выручка</span><span>Отменено</span></div>
          ${days || '<div class="stop-empty">Нет заказов за период</div>'}
        </div>
      </div>
      <div class="panel">
        <div class="panel-title">Топ позиций <small>без отменённых</small></div>
        <div class="report-table">${top}</div>
      </div>
    </div>
    <div class="dash-grid">
      <div class="panel">
        <div class="panel-title">Источники заказов <small>без отменённых</small></div>
        <div class="report-table">
          <div class="report-row head three"><span>Источник</span><span>Заказов</span><span>Выручка</span></div>
          ${sources}${sourcesTotal}
        </div>
      </div>
      <div class="panel">
        <div class="panel-title">Топ столов и зон</div>
        <div class="report-table">
          <div class="report-row head three"><span>Стол / зона</span><span>Заказов</span><span>Выручка</span></div>
          ${tables || '<div class="stop-empty">Нет заказов за период</div>'}
        </div>
      </div>
    </div>
    <div class="panel" style="margin-top:16px">
      <div class="panel-title">По часам <small>когда идёт поток — заказы без отменённых</small></div>
      <div class="report-table">${hours || '<div class="stop-empty">Нет заказов за период</div>'}</div>
    </div>
    ${staffReportBlock()}`;
}

/* статистика сотрудников за тот же период, что и основной отчёт */
function staffReportBlock() {
  const s = state.staffReport;
  if (!s || !Array.isArray(s.staff)) return '';
  const roleLabel = { owner: 'Владелец', admin: 'Администратор', waiter: 'Официант', hookah: 'Кальянщик' };
  const rows = s.staff.map((u) => `
    <div class="report-row staff">
      <span class="ri-name"><b>${esc(u.name)}</b><small> · ${esc(roleLabel[u.role] || u.role)}</small></span>
      <span title="Смен за период · суммарное время">${u.shifts} см · ${fmtDur(u.hours_seconds)}</span>
      <span title="Заказов: принято / выдано / отменено">${u.orders_total} / ${u.orders_done} / ${u.orders_cancelled}</span>
      <span title="Выручка выданных · средний чек">${money(u.revenue)}${u.avg_check != null ? ' · ср. ' + money(u.avg_check) : ''}</span>
      <span title="Средняя подача">${u.avg_duration_seconds != null ? fmtDur(u.avg_duration_seconds) : '—'}</span>
      <span title="Заказов с сайта / из зала">🌐 ${u.site_orders} · 🏠 ${u.hall_orders}</span>
    </div>`).join('');
  return `
    <div class="panel" style="margin-top:16px">
      <div class="panel-title">Сотрудники за период <small>${esc(s.period ? s.period.from + ' — ' + s.period.to : '')}</small></div>
      <div class="report-table">
        <div class="report-row staff head">
          <span>Сотрудник</span><span>Смены</span><span>Заказы</span><span>Выручка</span><span>Подача</span><span>Источники</span>
        </div>
        ${rows || '<div class="stop-empty">Сотрудников нет</div>'}
      </div>
    </div>`;
}

/* ---------------- владелец/персонал: ручной заказ из зала ---------------- */

function viewNewOrder() {
  const blocked = SHIFT_ROLES_JS.includes(state.role) && !state.onShift;
  const isHookah = state.role === 'hookah';
  const q = state.newOrderQuery.trim().toLowerCase();
  // правка: «заказ кальяна» — только у кальянщика; у остальных в списке
  // и в быстрой панели кальянных позиций нет
  const items = state.menu.filter((m) => !m.deleted && !m.stopped &&
    (isHookah || m.category !== 'КАЛЬЯНЫ'));
  // фильтр по категории + поиск по названию
  const cats = ['Все', ...new Set(items.map((m) => m.category))];
  const list = items.filter((m) =>
    (state.newOrderCat === 'Все' || m.category === state.newOrderCat) &&
    (!q || m.name.toLowerCase().includes(q)));
  const hookahs = isHookah ? items.filter((m) => m.id === 'hookah-1400' || m.id === 'hookah-1800') : [];
  const priceOf = (id) => { const m = state.menu.find((x) => x.id === id); return m ? m.price : 0; };
  const nameOf = (id) => { const m = state.menu.find((x) => x.id === id); return m ? m.name : id; };

  const orderIds = Object.keys(state.newOrder.items);
  const orderRows = orderIds.map((id) => {
    const qty = state.newOrder.items[id];
    return `
      <div class="mini-order">
        <span class="mo-num">${esc(nameOf(id))}</span>
        <span class="mo-info">${money(priceOf(id))} × ${qty} = ${money(priceOf(id) * qty)}</span>
        <span class="no-qty">
          <button class="btn btn-ghost btn-sm" data-noqty="${esc(id)}:-1" type="button">−</button>
          <b>${qty}</b>
          <button class="btn btn-ghost btn-sm" data-noqty="${esc(id)}:1" type="button">+</button>
        </span>
      </div>`;
  }).join('');
  const total = orderIds.reduce((s, id) => s + priceOf(id) * state.newOrder.items[id], 0);
  // без стола заказ не создаётся: кнопка активна, но по клику показывает ошибку
  const tableError = state.newOrderError === 'table';
  const itemsError = state.newOrderError === 'items';

  return `
    ${blocked ? `<div class="note"><span class="n-ico">🔒</span>
      <span>Смена закрыта — создание заказов заблокировано. Выйдите на смену из шапки.</span></div>` : ''}
    <div class="dash-grid">
      <div style="display:flex;flex-direction:column;gap:16px">
        ${isHookah ? `
        <div class="panel">
          <div class="panel-title">Кальяны</div>
          <div class="chips">
            ${hookahs.map((h) => `<button class="btn btn-neon" data-noadd="${esc(h.id)}" type="button">+ ${esc(h.name)}${h.portion ? ' · ' + esc(h.portion) : ''}</button>`).join('')}
          </div>
        </div>` : ''}
        <div class="panel ${itemsError ? 'panel-error' : ''}" id="newOrderMenu">
          <div class="panel-title">Меню</div>
          <div class="toolbar">
            <div class="chips">
              ${cats.map((c) => `<button class="chip ${state.newOrderCat === c ? 'active' : ''}" data-nocat="${esc(c)}" type="button">${esc(c)}</button>`).join('')}
            </div>
            <div class="search"><input type="text" id="noSearch" placeholder="Поиск по названию…" value="${esc(state.newOrderQuery)}"></div>
          </div>
          <div class="menu-list" style="max-height:430px;overflow:auto">
            ${list.map((m) => `
              <div class="menu-row">
                <div>
                  <div class="m-name">${esc(m.name)}</div>
                  <div class="m-cat">${esc(m.category)}${m.portion ? ' · ' + esc(m.portion) : ''}${m.stock != null ? ` · 📦 осталось ${m.stock} шт` : ''}</div>
                </div>
                <div class="m-price">${money(m.price)}</div>
                <button class="btn btn-ghost btn-sm" data-noadd="${esc(m.id)}" type="button">+ Добавить</button>
              </div>`).join('') || '<div class="stop-empty">Ничего не найдено</div>'}
          </div>
        </div>
        ${itemsError ? '<div class="form-error" role="alert">⚠ добавьте хотя бы одну позицию из меню</div>' : ''}
      </div>
      <div style="display:flex;flex-direction:column;gap:16px">
        <div class="panel ${tableError ? 'panel-error' : ''}" id="newOrderTables">
          <div class="panel-title">Стол / зал</div>
          <div class="chips">
            ${halls.map((h) => {
              const busy = hallByName(h.name)?.busy;
              return `<button class="chip ${state.newOrder.table === h.name ? 'active' : ''} ${busy ? 'chip-busy' : ''}"
                data-notable="${esc(h.name)}" type="button" title="${busy ? 'стол занят' : 'свободен'}">${esc(h.name)}${busy ? ' · занят' : ''}</button>`;
            }).join('')}
          </div>
        </div>
        ${tableError ? '<div class="form-error" role="alert">⚠ выберите стол или зал — без него заказ не создать</div>' : ''}
        <div class="panel">
          <div class="panel-title">Ваш заказ <small>${esc(state.newOrder.table || 'стол не выбран')}</small></div>
          <div class="mini-orders">${orderRows || '<div class="stop-empty">Добавьте позиции из меню</div>'}</div>
          <div style="display:flex;justify-content:space-between;align-items:center;margin-top:12px">
            <span class="m-name">Итого</span><span class="o-total">${money(total)}</span>
          </div>
          <textarea id="noComment" class="order-comment" maxlength="300" rows="2"
            placeholder="Комментарий к заказу: пожелания гостя, крепость кальяна, куда ставить…">${esc(state.newOrder.comment)}</textarea>
          <button class="btn btn-neon btn-block" style="margin-top:12px" data-nocreate="1" type="button"
            ${blocked ? 'disabled' : ''}>Создать заказ</button>
        </div>
      </div>
    </div>`;
}

/* ---------------- рендер ---------------- */

/* Значения полей форм переживают перерисовку (опрос заказов рендерит каждые 10 с) */
const FORM_FIELD_IDS = [
  'newUserName', 'newUserLogin', 'newUserPass', 'newUserRole',
  'newMenuName', 'newMenuCat', 'newMenuPrice', 'newMenuPortion', 'newMenuStock',
  'newTobBrand', 'newTobFlavor', 'newTobNote', 'newTobStrength', 'newTobCooling',
  'newMixName', 'newMixNote', 'newMixStrength', 'newMixCooling', 'newMixPrice',
  'repFrom', 'repTo', 'noSearch', 'noComment',
  'ntTitle', 'ntBody', 'ntAssignee', 'ntDue', 'ntImportant',
  'nbTitle', 'nbAdmin',
  'newGameKind', 'newGameTitle', 'newGameNote', 'newGameDifficulty',
  'newHallName', 'newHallSub',
];

function preserveFormValues() {
  const saved = {};
  for (const id of FORM_FIELD_IDS) {
    const el = document.getElementById(id);
    if (!el) continue;
    saved[id] = el.type === 'checkbox' ? el.checked : el.value;
  }
  return () => {
    for (const id of FORM_FIELD_IDS) {
      const el = document.getElementById(id);
      if (!el || !(id in saved)) continue;
      if (el.type === 'checkbox') el.checked = saved[id];
      else el.value = saved[id];
    }
  };
}

function render() {
  if (!state.role) return;
  // перерисовка не должна выбивать фокус: опрос заказов дёргает render()
  // каждые 10 с, а официант в это время печатает комментарий к заказу
  const focused = document.activeElement;
  const focusKind = focused && focused.id && /^(INPUT|TEXTAREA|SELECT)$/.test(focused.tagName) ? focused.tagName : null;
  const focusId = focusKind ? focused.id : null;
  const caretStart = focusKind && focused.selectionStart != null ? focused.selectionStart : null;
  const caretEnd = caretStart != null ? focused.selectionEnd : null;
  renderChrome();
  renderTopbar();
  renderShiftActions();
  const root = document.getElementById('viewRoot');
  const restoreForms = preserveFormValues();
  switch (state.view) {
    case 'dashboard': root.innerHTML = viewDashboard(); break;
    case 'menu':      root.innerHTML = viewMenu();      break;
    case 'tobacco':   root.innerHTML = viewTobacco();   break;
    case 'orders':
      root.innerHTML = SHIFT_ROLES_JS.includes(state.role) ? viewWaiterOrders() : viewAdminOrders(); break;
    case 'stoplist':  root.innerHTML = viewStopList();  break;
    case 'halls':     root.innerHTML = viewHalls();     break;
    case 'mixes':     root.innerHTML = viewMixes();     break;
    case 'users':     root.innerHTML = viewUsers();     break;
    case 'reports':   root.innerHTML = viewReports();   break;
    case 'neworder':  root.innerHTML = viewNewOrder();  break;
    case 'notes':     root.innerHTML = viewNotes();     break;
    case 'games':     root.innerHTML = viewGames();     break;
  }
  restoreForms();
  if (focusId) {
    const el = document.getElementById(focusId);
    if (el && focusKind === el.tagName) {
      // preventScroll обязателен: обычный focus() скроллит к элементу, и
      // каждые 10 секунд страницу уносило к сфокусированной кнопке наверху
      el.focus({ preventScroll: true });
      if (caretStart != null) { try { el.setSelectionRange(caretStart, caretEnd); } catch (e) { /* тип поля не даёт caret */ } }
    }
  }
  updateScrollNav();
}

/* ---------------- действия ---------------- */

async function setMenuAccent(itemId, accent) {
  try {
    const updated = await api('/api/menu/' + encodeURIComponent(itemId), {
      method: 'PATCH', body: JSON.stringify({ accent }),
    });
    const i = state.menu.findIndex((m) => m.id === itemId);
    if (i !== -1) state.menu[i] = { ...state.menu[i], accent: updated.accent };
    toast(updated.accent
      ? `Подсветка «${updated.name}» обновится на сайте через минуту`
      : `«${updated.name}» — снова как у всех`, 't-green');
  } catch (e) {
    if (e.message !== 'session expired') toast('Ошибка: ' + e.message, 't-red');
  }
  render();
}

/* сброс нумерации заказов: следующий заказ получит №1 (только владелец) */
async function resetOrderNumbering() {
  if (!(await uiConfirm({
    title: 'Сбросить нумерацию заказов?',
    text: 'Следующий заказ получит №1, дальше 2, 3, …\nДействует до конца текущей недели нумерации (во вторник номера и так обнуляются).',
    ok: 'Сбросить',
  }))) return;
  try {
    const r = await api('/api/orders/numbering/reset', { method: 'POST' });
    toast(`Нумерация сброшена — следующий заказ будет №${r.next_number}`, 't-green');
  } catch (e) {
    if (e.message !== 'session expired') toast('Ошибка: ' + e.message, 't-red');
  }
}

async function toggleMenuStop(id, stopped) {
  try {
    const updated = await api('/api/menu/' + encodeURIComponent(id), {
      method: 'PATCH',
      body: JSON.stringify({ stopped }),
    });
    const i = state.menu.findIndex((m) => m.id === id);
    if (i !== -1) state.menu[i] = updated;
    toast(updated.stopped ? `«${updated.name}» — в стопе, скрыто с сайта` : `«${updated.name}» снова доступна`,
      updated.stopped ? 't-red' : 't-green');
  } catch (e) {
    if (e.message !== 'session expired') toast('Не удалось изменить стоп-лист: ' + e.message, 't-red');
  }
  render();
}

async function toggleTobaccoStop(id, stopped) {
  try {
    const updated = await api('/api/tobacco/' + encodeURIComponent(id), {
      method: 'PATCH',
      body: JSON.stringify({ stopped }),
    });
    const i = state.tobacco.findIndex((t) => t.id === id);
    if (i !== -1) state.tobacco[i] = updated;
    toast(updated.stopped ? `Вкус «${updated.flavor}» (${updated.brand}) — в стопе` : `Вкус «${updated.flavor}» снова доступен`,
      updated.stopped ? 't-red' : 't-green');
  } catch (e) {
    if (e.message !== 'session expired') toast('Не удалось изменить стоп-лист: ' + e.message, 't-red');
  }
  render();
}

/* владелец: мягкое удаление и восстановление позиций меню и вкусов */
async function setCatalogItemDeleted(kind, id, deleted) {  const path = (kind === 'menu' ? '/api/menu/' : '/api/tobacco/') + id;
  try {
    const updated = await api(path, { method: deleted ? 'DELETE' : 'PATCH', body: JSON.stringify({ deleted }) });
    if (kind === 'menu') {
      const i = state.menu.findIndex((m) => m.id === id);
      if (i !== -1) state.menu[i] = updated;
      toast(deleted ? `«${updated.name}» удалена — на сайте позиция скрыта` : `«${updated.name}» восстановлена`,
        deleted ? 't-red' : 't-green');
    } else {
      const i = state.tobacco.findIndex((t) => t.id === id);
      if (i !== -1) state.tobacco[i] = updated;
      toast(deleted ? `Вкус «${updated.flavor}» удалён — на сайте скрыт` : `Вкус «${updated.flavor}» восстановлен`,
        deleted ? 't-red' : 't-green');
    }
  } catch (e) {
    if (e.message !== 'session expired') toast('Ошибка: ' + e.message, 't-red');
  }
  render();
}

function deleteCatalogItem(kind, id) {
  setCatalogItemDeleted(kind, id, true);
}

function restoreCatalogItem(kind, id) {
  setCatalogItemDeleted(kind, id, false);
}

/* владелец: безвозвратное удаление позиции меню (только кастомной —
   стартовые позиции сайта восстанавливает сид при рестарте) */
async function purgeCatalogItem(kind, id) {
  try {
    await api(`/api/${kind}/${encodeURIComponent(id)}?purge=1`, { method: 'DELETE' });
    if (kind === 'menu') state.menu = state.menu.filter((m) => m.id !== id);
    else if (kind === 'tobacco') state.tobacco = state.tobacco.filter((t) => t.id !== id);
    else if (kind === 'mixes') await refreshMixes();
    toast('Позиция удалена из базы безвозвратно', 't-red');
  } catch (e) {
    if (e.message !== 'session expired') toast('Ошибка: ' + e.message, 't-red');
  }
  render();
}

/* ---------------- поштучный учёт (владелец) ---------------- */
/* Пиво, энергетики и прочие баночные товары: владелец вбивает купленное
   количество, при выдаче заказа остаток списывается сам, а по нулю
   позиция уходит в стоп-лист (см. storage.update_order). */

async function patchMenuStock(id, body, msg) {
  try {
    const updated = await api('/api/menu/' + encodeURIComponent(id), {
      method: 'PATCH', body: JSON.stringify(body),
    });
    const i = state.menu.findIndex((m) => m.id === id);
    if (i !== -1) state.menu[i] = { ...state.menu[i], ...updated };
    toast(msg(updated), 't-green');
  } catch (e) {
    if (e.message !== 'session expired') toast('Ошибка: ' + e.message, 't-red');
  }
  render();
}

/* включить учёт / задать новый общий остаток */
async function menuStockOn(id) {
  const m = state.menu.find((x) => x.id === id);
  if (!m) return;
  const raw = await uiPrompt({
    title: `Поштучный учёт «${m.name}»`,
    text: 'Сколько штук на полке сейчас? (например 20)',
    value: m.stock != null ? String(m.stock) : '20',
    numeric: true,
    ok: 'Сохранить',
  });
  if (raw === null) return;
  const n = Math.floor(Number(String(raw).trim()));
  if (!Number.isFinite(n) || n < 0) {
    toast('Укажите целое количество штук (0 и больше)', 't-red');
    return;
  }
  patchMenuStock(id, { stock: n },
    (u) => `«${u.name}»: учёт включён, на полке ${u.stock} шт`);
}

/* приход: докупили N банок — прибавить к остатку */
async function menuStockAdd(id) {
  const m = state.menu.find((x) => x.id === id);
  if (!m) return;
  const raw = await uiPrompt({
    title: `Приход: «${m.name}»`,
    text: `На полке ${m.stock} шт. Сколько штук докупили?`,
    value: '20',
    numeric: true,
    ok: 'Добавить',
  });
  if (raw === null) return;
  const n = Math.floor(Number(String(raw).trim()));
  if (!Number.isFinite(n) || n <= 0) {
    toast('Укажите целое количество штук (больше нуля)', 't-red');
    return;
  }
  patchMenuStock(id, { stock_add: n },
    (u) => `«${u.name}»: приход ${n} шт, на полке ${u.stock} шт${u.stopped ? '' : ' — снова в продаже'}`);
}

/* выключить учёт: позиция перестаёт быть штучной */
async function menuStockOff(id) {
  const m = state.menu.find((x) => x.id === id);
  if (!m) return;
  if (!(await uiConfirm({
    title: 'Выключить поштучный учёт?',
    text: `Для «${m.name}». Остаток (${m.stock} шт) будет забыт.`,
    ok: 'Выключить',
  }))) return;
  patchMenuStock(id, { stock: null }, (u) => `«${u.name}»: поштучный учёт выключен`);
}

/* ---------------- ручной заказ из зала ---------------- */

function newOrderAdd(id) {
  state.newOrder.items[id] = (state.newOrder.items[id] || 0) + 1;
  if (state.newOrderError === 'items') state.newOrderError = '';
  render();
}

function newOrderQty(id, delta) {
  const qty = (state.newOrder.items[id] || 0) + delta;
  if (qty <= 0) delete state.newOrder.items[id];
  else state.newOrder.items[id] = qty;
  if (!Object.keys(state.newOrder.items).length && state.newOrderError === 'items') {
    state.newOrderError = '';
  }
  render();
}

async function newOrderCreate() {
  const items = Object.entries(state.newOrder.items).map(([id, qty]) => ({ id, qty }));
  // без стола заказ не создаём: показываем, где именно незаполнено
  if (!state.newOrder.table || !items.length) {
    state.newOrderError = state.newOrder.table ? 'items' : 'table';
    render();
    const el = document.getElementById(state.newOrderError === 'table' ? 'newOrderTables' : 'newOrderMenu');
    if (el) el.scrollIntoView({ block: 'center', behavior: 'smooth' });
    toast('Заказ не создан: выберите стол и добавьте позиции', 't-red');
    return;
  }
  state.newOrderError = '';
  try {
    const order = await api('/api/orders/manual', {
      method: 'POST',
      body: JSON.stringify({
        table: state.newOrder.table,
        items,
        comment: state.newOrder.comment.trim() || undefined,
      }),
    });
    toast(`Заказ №${order.number} создан — ${money(order.price)}`, 't-green');
    state.newOrder = { table: '', items: {}, comment: '' };
  } catch (e) {
    if (e.message !== 'session expired') toast('Ошибка: ' + e.message, 't-red');
  }
  render();
}

/* ---------------- залы: занять / продлить / освободить ---------------- */

async function hallManage(name, busy, minutes) {
  try {
    await api('/api/halls/manage', {
      method: 'POST',
      body: JSON.stringify({ name, busy, minutes }),
    });
    toast(busy
      ? `${name} занят${minutes ? ` на ${minutes} мин` : ' — без таймера'}`
      : `${name} освобождён`, busy ? 't-red' : 't-green');
  } catch (e) {
    if (e.message !== 'session expired') toast('Ошибка: ' + e.message, 't-red');
  }
  await refreshHalls();
  render();
}

/* диалог «до какого времени»: «90» — минуты, «23:30» — время */
async function hallAskMinutes(name, busy) {
  const what = busy ? `На сколько занять «${name}»?` : `Добавить время таймеру «${name}»`;
  const raw = await uiPrompt({
    title: what,
    text: 'Минуты (например 90) или время (например 01:30):',
    value: busy ? '60' : '30',
    ok: 'Готово',
  });
  if (raw === null) return;
  const minutes = parseUntilMinutes(raw);
  if (!minutes) {
    toast('Не понял время — укажите минуты (5–720) или ЧЧ:ММ', 't-red');
    return;
  }
  if (minutes > 720) {
    toast('Максимум 720 минут (12 часов)', 't-red');
    return;
  }
  hallManage(name, true, minutes);
}

/* бронь стола: «со скольки» и «до скольки»; 01:30 означает следующие сутки */
async function hallAskReserve(name) {
  const rawFrom = await uiPrompt({
    title: `Бронь «${name}» — со скольки?`,
    text: 'ЧЧ:ММ, например 21:00',
    value: '21:00',
    ok: 'Далее',
  });
  if (rawFrom === null) return;
  const rawUntil = await uiPrompt({
    title: `Бронь «${name}» — до скольки?`,
    text: 'ЧЧ:ММ, например 23:00 (01:30 — следующие сутки)',
    value: '23:00',
    ok: 'Далее',
  });
  if (rawUntil === null) return;
  const guestRaw = await uiPrompt({
    title: 'Имя гостя',
    text: 'Можно оставить пустым',
    value: '',
    ok: 'Забронировать',
  });
  const guest = guestRaw === null ? '' : guestRaw;
  try {
    await api('/api/halls/reserve', {
      method: 'POST',
      body: JSON.stringify({
        name,
        from: rawFrom.trim(),
        until: rawUntil.trim(),
        guest: guest.trim() || undefined,
      }),
    });
    toast(`Бронь «${name}» на ${rawFrom.trim()}–${rawUntil.trim()} создана`, 't-green');
  } catch (e) {
    if (e.message !== 'session expired') toast('Не удалось создать бронь: ' + e.message, 't-red');
  }
  await refreshHalls();
  render();
}

async function hallReserveCancel(id) {
  if (!(await uiConfirm({ title: 'Отменить эту бронь?', ok: 'Да, отменить' }))) return;
  try {
    await api('/api/halls/reservations/' + id, { method: 'DELETE' });
    toast('Бронь отменена', 't-red');
  } catch (e) {
    if (e.message !== 'session expired') toast('Ошибка: ' + e.message, 't-red');
  }
  await refreshHalls();
  render();
}

/* ---------------- справочник столов и залов (владелец) ---------------- */

/* значения полей переживают перерисовку (restoreForms) — после добавления
   чистим и DOM, как у формы микса */
function syncHallFormDom() {
  const a = document.getElementById('newHallName');
  const b = document.getElementById('newHallSub');
  if (a) a.value = '';
  if (b) b.value = '';
}

async function addHall() {
  const name = document.getElementById('newHallName').value.trim();
  const sub = document.getElementById('newHallSub').value.trim();
  if (!name) {
    toast('Укажите название стола или зала', 't-red');
    return;
  }
  try {
    const h = await api('/api/halls', {
      method: 'POST',
      body: JSON.stringify({ name, sub: sub || undefined }),
    });
    toast(`«${h.name}» добавлен — виден в залах CRM и в выборе столика на сайте`, 't-green');
    await refreshHalls();
    render();
    syncHallFormDom();
  } catch (e) {
    if (e.message !== 'session expired') toast('Ошибка: ' + e.message, 't-red');
  }
}

async function deleteHall(name) {
  if (!(await uiConfirm({
    title: `Удалить «${name}»?`,
    text: 'Стол исчезнет из залов CRM и из выбора столика на сайте. История броней и занятости останется в базе.',
    ok: 'Удалить',
  }))) return;
  try {
    await api('/api/halls/' + encodeURIComponent(name), { method: 'DELETE' });
    toast(`«${name}» удалён`, 't-red');
    await refreshHalls();
  } catch (e) {
    if (e.message !== 'session expired') toast('Ошибка: ' + e.message, 't-red');
  }
  render();
}

/* ---------------- смены официантов ---------------- */

async function refreshShifts() {
  try {
    const data = await api('/api/shifts/current');
    state.onShiftList = data.on_shift || [];
    state.staffList = data.staff || [];
    state.onShift = SHIFT_ROLES_JS.includes(state.role) &&
      state.onShiftList.some((s) => s.login === state.login);
    renderShiftActions();
  } catch { /* сеть моргнула — попробуем в следующий тик */ }
}

async function clockIn() {
  try {
    await api('/api/shifts/clock-in', { method: 'POST' });
    toast('Вы вышли на смену — управления разблокированы', 't-green');
  } catch (e) {
    if (e.message !== 'session expired') toast(e.message, 't-red');
  }
  await refreshShifts();
  render();
}

async function clockOut() {
  try {
    await api('/api/shifts/clock-out', { method: 'POST' });
    toast('Смена завершена. Хорошего отдыха!', 't-green');
  } catch (e) {
    if (e.message !== 'session expired') toast(e.message, 't-red');
  }
  await refreshShifts();
  render();
}

/* владелец/админ вручную записывает или снимает официанта/кальянщика */
async function shiftManage(login, action) {
  const name = (state.staffList.find((s) => s.login === login) || {}).name || login;
  try {
    await api('/api/shifts/manage', {
      method: 'POST',
      body: JSON.stringify({ login, action }),
    });
    toast(action === 'in'
      ? `${name} записан на смену`
      : `${name} снят со смены`, action === 'in' ? 't-green' : 't-red');
  } catch (e) {
    if (e.message !== 'session expired') toast('Ошибка: ' + e.message, 't-red');
  }
  await refreshShifts();
  render();
}

/* ---------------- загрузка фото позиции ---------------- */

async function uploadPhoto(itemId, file) {
  try {
    const r = await fetch('/api/menu/' + encodeURIComponent(itemId) + '/photo', {
      method: 'POST',
      headers: {
        'Content-Type': file.type || 'application/octet-stream',
        'X-Auth-Token': localStorage.getItem(TOKEN_KEY),
      },
      body: file,
    });
    if (!r.ok) {
      const err = await r.json().catch(() => ({}));
      throw new Error(err.error || 'HTTP ' + r.status);
    }
    toast('Фото загружено — на сайте появится через минуту', 't-green');
    state.menu = await api('/api/menu');
  } catch (e) {
    if (e.message !== 'session expired') toast('Ошибка загрузки фото: ' + e.message, 't-red');
  }
  render();
}

async function patchOrder(id, body, successMsg) {
  try {
    const updated = await api('/api/orders/' + id, {
      method: 'PATCH',
      body: JSON.stringify(body),
    });
    const i = state.orders.findIndex((x) => x.id === Number(id));
    if (i !== -1) state.orders[i] = updated;
    toast(successMsg, body.status === 'done' ? 't-green' : '');
  } catch (e) {
    if (e.message !== 'session expired') toast('Ошибка: ' + e.message, 't-red');
  }
  render();
}

/* недельный номер заказа для сообщений (id в API — внутренний) */
function orderNumber(id) {
  const o = state.orders.find((x) => x.id === Number(id));
  return o ? o.number : id;
}

function acceptOrder(id) {
  patchOrder(id, { status: 'active', waiter: state.name }, `Заказ №${orderNumber(id)} принят в работу`);
}

/* быстрый заказ «приняли — сразу отдали»: один тап вместо двух.
   Метки «принят» не будет (нечего мерить) — отчёт корректно пропустит
   такой заказ в средней подаче */
function fastDoneOrder(id) {
  patchOrder(id, { status: 'done' }, `Заказ №${orderNumber(id)} выдан сразу ✓`);
}

function deliverOrder(id) {
  patchOrder(id, { status: 'done' }, `Заказ №${orderNumber(id)} выдан ✓`);
}

async function cancelOrder(id) {
  if (!(await uiConfirm({
    title: `Отменить заказ №${orderNumber(id)}?`,
    text: 'Действие необратимо.',
    ok: 'Да, отменить',
  }))) return;
  patchOrder(id, { status: 'cancelled' }, `Заказ №${orderNumber(id)} отменён`);
}

/* администратор меняет статус произвольно */
function setOrderStatus(id, status) {
  const o = state.orders.find((x) => x.id === Number(id));
  if (!o || o.status === status) return;
  patchOrder(id, { status }, `Заказ №${o.number}: статус «${STATUS[status].label}»`);
}

/* ---------------- владелец: сотрудники и отчёты ---------------- */

async function loadUsers() {
  try {
    const [users, counts] = await Promise.all([api('/api/users'), api('/api/shifts/counts')]);
    state.users = users;
    state.shiftCounts = counts;
  } catch (e) {
    if (e.message !== 'session expired') toast('Не удалось загрузить сотрудников: ' + e.message, 't-red');
  }
  render();
}

async function addUser(form) {
  const body = {
    name: document.getElementById('newUserName').value.trim(),
    login: document.getElementById('newUserLogin').value.trim(),
    password: document.getElementById('newUserPass').value,
    role: document.getElementById('newUserRole').value,
  };
  try {
    const created = await api('/api/users', { method: 'POST', body: JSON.stringify(body) });
    toast(`Сотрудник ${created.name} (${created.login}) создан`, 't-green');
    form.reset();
    state.users = await api('/api/users');
  } catch (e) {
    if (e.message !== 'session expired') toast('Ошибка: ' + e.message, 't-red');
  }
  render();
}

async function deleteUser(login) {
  if (!(await uiConfirm({
    title: `Удалить сотрудника ${login}?`,
    text: 'Доступ будет отозван сразу.',
    ok: 'Удалить',
  }))) return;
  try {
    await api('/api/users/' + encodeURIComponent(login), { method: 'DELETE' });
    toast(`Сотрудник ${login} удалён`, 't-red');
    state.users = await api('/api/users');
  } catch (e) {
    if (e.message !== 'session expired') toast('Ошибка: ' + e.message, 't-red');
  }
  render();
}

/* Владелец задаёт сотруднику новый пароль (текущий не требуется) */
async function resetUserPassword(login) {
  const pass = await uiNewPassword({
    title: `Новый пароль для ${login}`,
    text: 'Текущий пароль не нужен. Открытые сессии сотрудника закроются — он войдёт заново с новым паролем.',
    ok: 'Сбросить',
  });
  if (!pass) return;
  if (pass.length < 8) { toast('Пароль — минимум 8 символов', 't-red'); return; }
  try {
    await api('/api/users/password', {
      method: 'POST',
      body: JSON.stringify({ login, new_password: pass }),
    });
    toast(`Пароль ${login} изменён`, 't-green');
  } catch (e) {
    if (e.message !== 'session expired') toast('Ошибка: ' + e.message, 't-red');
  }
}

async function buildReport() {
  try {
    const qs = `from=${state.reportFrom}&to=${state.reportTo}`;
    const [report, staff] = await Promise.all([
      api(`/api/reports/orders?${qs}`),
      api(`/api/reports/staff?${qs}`),
    ]);
    state.report = report;
    state.staffReport = staff;
  } catch (e) {
    if (e.message !== 'session expired') toast('Не удалось построить отчёт: ' + e.message, 't-red');
  }
  render();
}

/* preserveFormValues возвращает в поля введённое после любой перерисовки,
   поэтому новые даты периода нужно после render() прописать и в DOM */
function syncReportRangeDom() {
  const f = document.getElementById('repFrom');
  const t = document.getElementById('repTo');
  if (f) f.value = state.reportFrom;
  if (t) t.value = state.reportTo;
}

/* отчёт с самого первого заказа по сегодня: даты периода отдаёт сервер */
async function buildAllTimeReport() {
  try {
    const [report, staff] = await Promise.all([
      api('/api/reports/orders?all=1'),
      api('/api/reports/staff?all=1'),
    ]);
    state.report = report;
    state.staffReport = staff;
    if (state.report.period) {
      state.reportFrom = state.report.period.from;
      state.reportTo = state.report.period.to;
    }
  } catch (e) {
    if (e.message !== 'session expired') toast('Не удалось построить отчёт: ' + e.message, 't-red');
  }
  render();
  syncReportRangeDom();
}

/* выгрузка отчёта в Excel (файл собирает сервер); byDay — отдельный
   лист на каждый день периода (сервер ограничивает период 31 днём) */
async function downloadReportExcel(byDay = false) {
  try {
    const qs = `from=${state.reportFrom}&to=${state.reportTo}` + (byDay ? '&by_day=1' : '');
    const r = await fetch(`/api/reports/orders/excel?${qs}`, {
      headers: { 'X-Auth-Token': localStorage.getItem(TOKEN_KEY) || '' },
    });
    if (!r.ok) {
      let msg = 'HTTP ' + r.status;
      try {
        const e = await r.json();
        if (e && e.error) msg = e.error;
      } catch { /* не JSON */ }
      throw new Error(msg);
    }
    const blob = await r.blob();
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `neon-report${byDay ? '-days' : ''}_${state.reportFrom}_${state.reportTo}.xlsx`;
    document.body.appendChild(a);
    a.click();
    a.remove();
    setTimeout(() => URL.revokeObjectURL(url), 4000);
    toast(byDay ? 'Excel по дням скачан — лист на каждый день' : 'Excel-отчёт скачан', 't-green');
  } catch (e) {
    toast('Не удалось скачать отчёт: ' + e.message, 't-red');
  }
}

async function addMenuItem(form) {
  const body = {
    name: document.getElementById('newMenuName').value.trim(),
    category: document.getElementById('newMenuCat').value,
    price: Number(document.getElementById('newMenuPrice').value),
    portion: document.getElementById('newMenuPortion').value.trim(),
  };
  // необязательное количество: заполнено — включаем поштучный учёт сразу
  const stockRaw = document.getElementById('newMenuStock').value.trim();
  if (stockRaw !== '') body.stock = Number(stockRaw);
  try {
    const item = await api('/api/menu', { method: 'POST', body: JSON.stringify(body) });
    toast(`«${item.name}» добавлена — на сайте появится с пометкой «новинка»` +
      (item.stock != null ? ` · учёт: ${item.stock} шт` : ''), 't-green');
    form.reset();
    state.menu = await api('/api/menu');
  } catch (e) {
    if (e.message !== 'session expired') toast('Ошибка: ' + e.message, 't-red');
  }
  render();
}

/* правка позиции меню (только владелец, только позиции из CRM):
   та же форма, что у добавления — с предзаполнением и PATCH вместо POST */
function menuEditOpen(id) {
  const m = state.menu.find((x) => x.id === id);
  if (!m) return;
  state.menuEditId = id;
  render();
  // предзаполняем после render(): restoreFormValues внутри него вернул бы
  // прежние значения формы, поэтому значения ставим поверх
  const set = (fieldId, v) => {
    const el = document.getElementById(fieldId);
    if (el) el.value = v;
  };
  set('newMenuName', m.name);
  set('newMenuCat', m.category);
  set('newMenuPrice', m.price);
  set('newMenuPortion', m.portion || '');
  window.scrollTo({ top: 0, behavior: 'smooth' });
}

function menuFormReset() {
  state.menuEditId = null;
  render();
  const form = document.getElementById('menuForm');
  if (form) form.reset();
}

async function saveMenuItem(form) {
  const body = {
    name: document.getElementById('newMenuName').value.trim(),
    category: document.getElementById('newMenuCat').value,
    price: Number(document.getElementById('newMenuPrice').value),
    portion: document.getElementById('newMenuPortion').value.trim(),
  };
  try {
    const item = await api('/api/menu/' + encodeURIComponent(state.menuEditId), {
      method: 'PATCH',
      body: JSON.stringify(body),
    });
    toast(`«${item.name}» обновлена — изменения уже на сайте`, 't-green');
    state.menuEditId = null;
    form.reset();
    state.menu = await api('/api/menu');
  } catch (e) {
    if (e.message !== 'session expired') toast('Ошибка: ' + e.message, 't-red');
  }
  render();
}

async function addTobacco(form) {
  const body = {
    brand: document.getElementById('newTobBrand').value.trim(),
    flavor: document.getElementById('newTobFlavor').value.trim(),
    note: document.getElementById('newTobNote').value.trim(),
    strength: Number(document.getElementById('newTobStrength').value),
    cooling: document.getElementById('newTobCooling').checked,
  };
  try {
    const item = await api('/api/tobacco', { method: 'POST', body: JSON.stringify(body) });
    toast(`Вкус «${item.flavor}» (${item.brand}) добавлен — на сайте появится как новинка`, 't-green');
    form.reset();
    state.tobacco = await api('/api/tobacco');
  } catch (e) {
    if (e.message !== 'session expired') toast('Ошибка: ' + e.message, 't-red');
  }
  render();
}

/* ---------------- миксы владельца: создание и удаление ---------------- */

function mixToggleFlavor(id) {
  const ids = state.newMix.flavorIds;
  if (ids.includes(id)) {
    // в правке витринного микса состав можно и очистить — пусто = исходный
    if (ids.length <= 1 && state.siteMixEditId == null) {
      toast('В миксе должно остаться хотя бы два вкуса', 't-red');
      return;
    }
    state.newMix.flavorIds = ids.filter((x) => x !== id);
  } else {
    if (ids.length >= 5) {
      toast('Максимум пять вкусов в миксе', 't-red');
      return;
    }
    state.newMix.flavorIds = [...ids, id];
  }
  if (state.mixErrors.flavors) delete state.mixErrors.flavors;
  render();
}

/* теги микса: максимум три — по ним сайт подбирает микс в автоподбор */
function mixToggleTag(tag) {
  const tags = state.newMix.tags;
  if (tags.includes(tag)) {
    state.newMix.tags = tags.filter((x) => x !== tag);
  } else {
    if (tags.length >= 3) {
      toast('Максимум три тега на микс', 't-red');
      return;
    }
    state.newMix.tags = [...tags, tag];
  }
  if (state.mixErrors.tags) delete state.mixErrors.tags;
  render();
}

/* значения полей формы микса переживают перерисовку (restoreForms),
   поэтому после сброса формы чистим и state, и DOM — как у заметок */
function syncMixFormDom() {
  const f = state.newMix;
  const set = (id, v) => {
    const el = document.getElementById(id);
    if (el) el.value = v;
  };
  set('newMixName', f.name);
  set('newMixNote', f.note);
  set('newMixStrength', f.strength);
  set('newMixCooling', f.cooling);
  set('newMixPrice', f.price);
}

/* проверка формы микса: обязательны все поля, кроме заметки.
   Возвращает словарь «ключ поля → текст ошибки» */
function validateMixForm() {
  const m = state.newMix;
  const errors = {};
  if (!m.name.trim()) errors.newMixName = 'укажите название микса';
  if (m.flavorIds.length < 2) errors.flavors = 'выберите 2–5 вкусов из списка ниже';
  if (!m.tags.length) errors.tags = 'выберите хотя бы один тег — по ним микс попадает в автоподбор';
  if (m.strength === '') errors.newMixStrength = 'выберите крепость микса';
  if (m.cooling === '') errors.newMixCooling = 'выберите уровень холодка';
  if (m.price === '' || !Number.isFinite(Number(m.price)) || Number(m.price) < 0) {
    errors.newMixPrice = 'укажите цену в рублях';
  }
  return errors;
}

/* прокрутить форму к первой ошибке и подсветить её */
function focusMixError(errors) {
  const firstKey = Object.keys(errors)[0];
  const targetId = { flavors: 'mixFlavorChips', tags: 'mixTagChips' }[firstKey] || firstKey;
  const el = document.getElementById(targetId);
  if (!el) return;
  el.scrollIntoView({ block: 'center', behavior: 'smooth' });
  if (/^(INPUT|SELECT)$/.test(el.tagName)) el.focus({ preventScroll: true });
}

async function addMix() {
  const errors = validateMixForm();
  if (Object.keys(errors).length) {
    state.mixErrors = errors;
    render();
    focusMixError(errors);
    toast('Микс не добавлен: заполните выделенные поля формы', 't-red');
    return;
  }
  const name = state.newMix.name.trim();
  const opt = (v) => (v === '' ? undefined : Number(v));
  try {
    const mix = await api('/api/mixes', {
      method: 'POST',
      body: JSON.stringify({
        name,
        note: state.newMix.note.trim() || undefined,
        flavor_ids: state.newMix.flavorIds,
        strength: opt(state.newMix.strength),
        cooling: opt(state.newMix.cooling),
        price: opt(state.newMix.price),
        tags: state.newMix.tags.length ? state.newMix.tags : undefined,
      }),
    });
    toast(`Микс «${mix.name}» добавлен — виден на сайте`, 't-green');
    // полная очистка формы: и state, и DOM (restoreForms вернул бы старое)
    state.newMix = { name: '', note: '', flavorIds: [], strength: '', cooling: '', price: '', tags: [] };
    state.mixErrors = {};
    state.mixQuery = '';
    state.mixBrand = 'Все';
    await refreshMixes();
    render();
    syncMixFormDom();
  } catch (e) {
    if (e.message !== 'session expired') toast('Ошибка: ' + e.message, 't-red');
  }
  render();
}

async function deleteMix(id) {
  const mix = state.mixes.find((m) => m.id === id);
  if (!mix) return;
  if (!(await uiConfirm({
    title: `Удалить микс «${mix.name}»?`,
    text: 'Он исчезнет с сайта.',
    ok: 'Удалить',
  }))) return;
  try {
    await api('/api/mixes/' + encodeURIComponent(id), { method: 'DELETE' });
    toast(`Микс «${mix.name}» удалён с сайта`, 't-red');
    await refreshMixes();
  } catch (e) {
    if (e.message !== 'session expired') toast('Ошибка: ' + e.message, 't-red');
  }
  render();
}

/* правка микса (владелец/кальянщик): та же форма, что у добавления —
   с предзаполнением и PATCH вместо POST */
function mixEditOpen(id) {
  const m = state.mixes.find((x) => x.id === id);
  if (!m) return;
  state.mixEditId = id;
  state.siteMixEditId = null;
  state.newMix = {
    name: m.name,
    note: m.note || '',
    flavorIds: m.flavors.map((f) => f.id),
    strength: m.strength == null ? '' : String(m.strength),
    cooling: m.cooling == null ? '' : String(m.cooling),
    price: m.price == null ? '' : String(m.price),
    tags: [...(m.tags || [])],
  };
  state.mixErrors = {};
  render();
  // значения полей живут в DOM (restoreFormValues вернул бы прежние),
  // поэтому предзаполняем поверх — из state, как при сбросе формы
  syncMixFormDom();
  window.scrollTo({ top: 0, behavior: 'smooth' });
}

/* правка витринного микса сайта (только владелец): состав опционален —
   пустой список означает «оставить исходный состав витрины» */
function siteMixEditOpen(id) {
  const m = state.siteMixes.find((x) => x.id === id);
  if (!m) return;
  state.siteMixEditId = id;
  state.mixEditId = null;
  const priceNum = typeof m.price === 'number'
    ? m.price
    : parseInt(String(m.price || '').replace(/\D/g, ''), 10);
  // теги витрины хранятся как в seed («Цитрус», «лёд») — приводим к палитре
  // чипов, чтобы активные чипы отражали их и не плодили дубли
  const tagNorm = (s) => s.toLocaleLowerCase('ru-RU').replace(/ё/g, 'е').trim();
  const tags = [...new Set((m.flavor_tags || [])
    .map((t) => MIX_TAGS.find((x) => tagNorm(x) === tagNorm(t)) || t))];
  state.newMix = {
    name: m.name,
    note: m.note || '',
    flavorIds: (m.flavors || []).map((f) => f.id),
    strength: m.strength == null ? '' : String(m.strength),
    cooling: m.cooling == null ? '' : String(m.cooling),
    price: Number.isFinite(priceNum) ? String(priceNum) : '',
    tags,
  };
  state.mixErrors = {};
  render();
  syncMixFormDom();
  window.scrollTo({ top: 0, behavior: 'smooth' });
}

async function saveSiteMix() {
  const m = state.newMix;
  const errors = {};
  if (!m.name.trim()) errors.newMixName = 'укажите название микса';
  if (m.flavorIds.length === 1) errors.flavors = 'выберите 2–5 вкусов или очистите состав, чтобы оставить исходный';
  if (m.strength === '') errors.newMixStrength = 'выберите крепость микса';
  if (m.cooling === '') errors.newMixCooling = 'выберите уровень холодка';
  if (m.price === '' || !Number.isFinite(Number(m.price)) || Number(m.price) < 0) {
    errors.newMixPrice = 'укажите цену в рублях';
  }
  if (Object.keys(errors).length) {
    state.mixErrors = errors;
    render();
    focusMixError(errors);
    toast('Изменения не сохранены: заполните выделенные поля формы', 't-red');
    return;
  }
  try {
    await api('/api/mixes-site/' + encodeURIComponent(state.siteMixEditId), {
      method: 'PATCH',
      body: JSON.stringify({
        name: m.name.trim(),
        note: m.note.trim(),
        strength: Number(m.strength),
        cooling: Number(m.cooling),
        price: Number(m.price),
        tags: m.tags,
        flavor_ids: m.flavorIds, // [] — оставить исходный состав витрины
      }),
    });
    toast('Витринный микс обновлён — изменения уже на сайте', 't-green');
    mixFormReset();
    await refreshMixes();
  } catch (e) {
    if (e.message !== 'session expired') toast('Ошибка: ' + e.message, 't-red');
  }
  render();
  syncMixFormDom();
}

async function siteMixReset(id) {
  const m = state.siteMixes.find((x) => x.id === id);
  if (!m) return;
  if (!(await uiConfirm({
    title: `Вернуть «${m.name}» к исходному виду?`,
    text: 'Правка из CRM будет стёрта, витрина сайта покажет первоначальный микс.',
    ok: 'Вернуть оригинал',
  }))) return;
  try {
    await api('/api/mixes-site/' + encodeURIComponent(id), { method: 'DELETE' });
    toast('Микс возвращён к исходному виду', 't-green');
    await refreshMixes();
  } catch (e) {
    if (e.message !== 'session expired') toast('Ошибка: ' + e.message, 't-red');
  }
  render();
}

function mixFormReset() {
  state.mixEditId = null;
  state.siteMixEditId = null;
  state.newMix = { name: '', note: '', flavorIds: [], strength: '', cooling: '', price: '', tags: [] };
  state.mixErrors = {};
  render();
  syncMixFormDom();
}

async function saveMix() {
  const errors = validateMixForm();
  if (Object.keys(errors).length) {
    state.mixErrors = errors;
    render();
    focusMixError(errors);
    toast('Изменения не сохранены: заполните выделенные поля формы', 't-red');
    return;
  }
  const opt = (v) => (v === '' ? undefined : Number(v));
  try {
    const mix = await api('/api/mixes/' + encodeURIComponent(state.mixEditId), {
      method: 'PATCH',
      body: JSON.stringify({
        name: state.newMix.name.trim(),
        note: state.newMix.note.trim() || undefined,
        flavor_ids: state.newMix.flavorIds,
        strength: opt(state.newMix.strength),
        cooling: opt(state.newMix.cooling),
        price: opt(state.newMix.price),
        tags: state.newMix.tags.length ? state.newMix.tags : undefined,
      }),
    });
    toast(`Микс «${mix.name}» обновлён — изменения уже на сайте`, 't-green');
    mixFormReset();
    state.mixQuery = '';
    state.mixBrand = 'Все';
    await refreshMixes();
  } catch (e) {
    if (e.message !== 'session expired') toast('Ошибка: ' + e.message, 't-red');
  }
  render();
  syncMixFormDom();
}

/* ---------------- заметки и задачи (доски) ---------------- */
/* Общая доска для всех ролей + приватные «владелец ↔ админ».
   К сменам не привязаны: владелец ставит задачи из дома, персонал
   проверяет до выхода. Поллинг с ?since= раз в 12 с. */

const NOTE_COLS = [
  { key: 'open',        cls: 'kan-new',    title: 'Новые' },
  { key: 'in_progress', cls: 'kan-active', title: 'В работе' },
  { key: 'done',        cls: 'kan-done',   title: 'Готово' },
];

const NOTE_ACTIONS = {
  created:       'создал(а) задачу',
  edited:        'изменил(а) задачу',
  status:        'статус',
  assigned:      'исполнитель',
  deleted:       'удалил(а) задачу',
  board_created: 'создал(а) доску',
};

const NOTE_STATUS_DONE = { open: 'Новые', in_progress: 'В работе', done: 'Готово' };

const todayStr = () => {
  const d = new Date();
  return d.getFullYear() + '-' + pad2(d.getMonth() + 1) + '-' + pad2(d.getDate());
};

const currentBoard = () => state.boards.find((b) => b.id === state.boardId) || null;

const isNoteOverdue = (n) =>
  !!n.due_date && n.status !== 'done' && n.due_date < todayStr();

const canDeleteNote = (n) =>
  state.role === 'owner' || state.role === 'admin' || n.author.id === state.login;

function noteFormReset() {
  state.noteEditId = null;
  state.noteForm = { title: '', body: '', assignee: '', due: '', important: false };
  render();
  syncNoteFormDom();
}

/* preserveFormValues возвращает в поля введённое после любой перерисовки,
   поэтому сброс/предзаполнение формы заметки проводим и в state, и в DOM */
function syncNoteFormDom() {
  const f = state.noteForm;
  const set = (id, v) => {
    const el = document.getElementById(id);
    if (el) el.value = v;
  };
  set('ntTitle', f.title);
  set('ntBody', f.body);
  set('ntAssignee', f.assignee);
  set('ntDue', f.due);
  const imp = document.getElementById('ntImportant');
  if (imp) imp.checked = f.important;
}

async function loadNotesData() {
  try {
    const data = await api('/api/boards');
    state.boards = data.boards;
    if (!state.boardId || !state.boards.some((b) => b.id === state.boardId)) {
      state.boardId = (state.boards[0] || {}).id || null;
    }
    await refreshNotes();
  } catch (e) {
    if (e.message !== 'session expired') toast('Не удалось загрузить заметки: ' + e.message, 't-red');
  }
  // без этого вкладка висит на «Загрузка заметок…» до 10 секунд —
  // пока её не перерисует очередной опрос заказов
  if (state.view === 'notes') render();
}

async function refreshNotes() {
  if (!state.boardId) return;
  try {
    const data = await api('/api/boards/' + state.boardId + '/notes');
    state.notes = data.notes;
    state.notesSince = data.server_time;
    const act = await api('/api/boards/' + state.boardId + '/activity?limit=8');
    state.boardActivity = act.events;
  } catch { /* сеть моргнула — покажем прошлые данные */ }
}

/* инкрементальный опрос: только изменённые заметки + id удалённых */
async function pollNotes() {
  if (!state.role || state.view !== 'notes' || !state.boardId || !state.notesSince) return;
  try {
    const data = await api('/api/boards/' + state.boardId
      + '/notes?since=' + encodeURIComponent(state.notesSince));
    if (!data.notes.length && !data.deleted_ids.length) return;
    for (const n of data.notes) {
      const i = state.notes.findIndex((x) => x.id === n.id);
      if (i === -1) state.notes.unshift(n);
      else state.notes[i] = n;
    }
    if (data.deleted_ids.length) {
      state.notes = state.notes.filter((n) => !data.deleted_ids.includes(n.id));
      if (state.noteEditId != null && data.deleted_ids.includes(state.noteEditId)) {
        noteFormReset();
      }
    }
    const act = await api('/api/boards/' + state.boardId + '/activity?limit=8');
    state.boardActivity = act.events;
    render();
  } catch { /* сеть моргнула — попробуем в следующий тик */ }
}

function noteCard(n) {
  const overdue = isNoteOverdue(n);
  const done = n.status === 'done';
  const moves = [];
  if (n.status === 'open') moves.push(['in_progress', '→', 'в работу']);
  if (n.status === 'in_progress') {
    moves.push(['open', '←', 'в новые']);
    moves.push(['done', '→', 'в готово']);
  }
  if (done) moves.push(['open', '←', 'вернуть в новые']);
  const moveBtns = moves.map(([st, ico, tip]) =>
    `<button class="btn btn-ghost btn-sm n-move" data-nmove="${esc(n.id)}:${st}" type="button" title="${tip}">${ico}</button>`).join('');
  return `
    <div class="order-card note-card ${done ? 'is-done' : ''} ${n.important ? 'is-important' : ''} ${overdue ? 'is-overdue' : ''}"
      draggable="true" data-nedit="${esc(n.id)}" title="Нажмите, чтобы редактировать">
      <div class="o-head">
        <span class="o-num">${n.important ? '❗ ' : ''}${esc(n.title)}</span>
        ${overdue ? '<span class="n-flag-over">просрочено</span>' : ''}
        ${n.important ? '<span class="n-flag-imp">важно</span>' : ''}
      </div>
      ${n.body ? `<div class="n-body">${esc(n.body)}</div>` : ''}
      <div class="o-foot">
        <div>
          <div class="o-waiter">👤 ${n.assignee ? esc(n.assignee.name) : 'исполнитель не назначен'}</div>
          <div class="o-waiter">${n.due_date ? '⏳ до ' + fmtDate(n.due_date) + ' · ' : ''}автор: ${esc(n.author.name)}</div>
        </div>
        <div class="n-moves">${moveBtns}</div>
      </div>
    </div>`;
}

function viewNotes() {
  const board = currentBoard();
  if (!board) {
    /* доски ещё грузятся или выбранная только что удалена */
    return '<div class="panel"><div class="stop-empty">Загрузка заметок…</div></div>';
  }
  const isShared = board.kind === 'shared';
  const members = board.members || [];

  /* селектор доски: официант видит одну «Общую» — это норма */
  const boardChips = state.boards.map((b) => `
    <button class="chip ${b.id === state.boardId ? 'active' : ''}" data-nboard="${esc(b.id)}" type="button">
      ${b.kind === 'shared' ? '🌐' : '🔒'} ${esc(b.title)}${b.kind === 'private' ? ' · ' + esc((b.members || []).map((m) => m.name).join(' + ')) : ''}
    </button>`).join('');
  const ownerChips = state.role === 'owner'
    ? `<button class="chip ${state.boardFormOpen ? 'active' : ''}" data-nboard-form="1" type="button">＋ доска с админом</button>
       ${!isShared ? `<button class="chip" data-nboard-rename="1" type="button">✎ переименовать</button>
       <button class="chip chip-busy" data-nboard-del="${esc(board.id)}" type="button">✕ удалить доску</button>` : ''}`
    : (state.role === 'admin' && !isShared
      ? '<button class="chip" data-nboard-rename="1" type="button">✎ переименовать</button>'
      : '');

  const boardForm = state.boardFormOpen && state.role === 'owner' ? `
    <div class="panel" style="margin:14px 0">
      <div class="panel-title">Новая приватная доска <small>ровно двое: вы и администратор</small></div>
      <form class="user-form" id="boardForm" autocomplete="off">
        <input type="text" id="nbTitle" placeholder="Название, напр. «Задачи для Ирины»" maxlength="200" required>
        <select id="nbAdmin" aria-label="Администратор" required>
          <option value="">— выберите администратора —</option>
          ${members.filter((m) => m.role === 'admin').map((m) =>
            `<option value="${esc(m.login)}">${esc(m.name)} (${esc(m.login)})</option>`).join('')}
        </select>
        <button class="btn btn-neon" type="submit">Создать доску</button>
      </form>
    </div>` : '';

  /* фильтр «все / мои» */
  const filtered = state.notes.filter((n) => state.noteFilter === 'all' ||
    (n.assignee && n.assignee.id === state.login));
  const filterChips = [
    { key: 'all', label: 'Все', n: state.notes.length },
    { key: 'my',  label: 'Мои', n: state.notes.filter((n) => n.assignee && n.assignee.id === state.login).length },
  ].map((c) => `
    <button class="chip ${state.noteFilter === c.key ? 'active' : ''}" data-nfilter="${c.key}" type="button">
      ${c.label}<span class="cnt">${c.n}</span>
    </button>`).join('');

  const editing = state.noteEditId != null;
  const editNote = editing ? state.notes.find((n) => n.id === state.noteEditId) : null;
  const f = state.noteForm;
  const noteForm = `
    <div class="panel" style="margin:14px 0">
      <div class="panel-title">${editing ? 'Редактировать задачу' : 'Новая задача'}
        <small>${isShared ? 'видна всем сотрудникам' : 'видна только вам двоим'}</small></div>
      <form class="user-form" id="noteForm" autocomplete="off">
        <input type="text" id="ntTitle" placeholder="Что сделать" maxlength="200" required value="${esc(f.title)}">
        <select id="ntAssignee" aria-label="Исполнитель">
          <option value="">— исполнитель —</option>
          ${members.map((m) => `
            <option value="${esc(m.login)}" ${f.assignee === m.login ? 'selected' : ''}>${esc(m.name)}</option>`).join('')}
        </select>
        <input type="date" id="ntDue" value="${esc(f.due)}" aria-label="Срок">
        <label class="nt-imp"><input type="checkbox" id="ntImportant" ${f.important ? 'checked' : ''}> ❗ важно</label>
        <button class="btn btn-neon" type="submit">${editing ? 'Сохранить' : 'Добавить'}</button>
        ${editing ? `
          <button class="btn btn-ghost" data-nform-cancel="1" type="button">Отмена</button>
          ${editNote && canDeleteNote(editNote)
            ? `<button class="btn btn-danger" data-ndel="${state.noteEditId}" type="button">Удалить</button>` : ''}` : ''}
      </form>
      <textarea id="ntBody" class="order-comment" maxlength="4000" rows="2"
        placeholder="Детали: как, где, до какого времени…">${esc(f.body)}</textarea>
    </div>`;

  const cols = NOTE_COLS.map((c) => {
    const notes = filtered.filter((n) => n.status === c.key);
    return `
      <div class="kan-col ${c.cls}" data-nstatus="${c.key}">
        <div class="kan-head">${c.title}<span class="cnt">${notes.length}</span></div>
        <div class="stack">${notes.map(noteCard).join('') || '<div class="kan-empty">Пусто</div>'}</div>
      </div>`;
  }).join('');

  const feed = state.boardActivity.map((e) => {
    const what = NOTE_ACTIONS[e.action] || e.action;
    let extra = '';
    if (e.action === 'status') extra = ': ' + (NOTE_STATUS_DONE[e.details] || e.details);
    else if (e.action === 'assigned') extra = e.details ? ': ' + e.details : ' снят';
    else if (e.action === 'created') extra = ` «${e.details}»`;
    return `
      <div class="act-row">
        <span class="act-who">${esc(e.user_name)}</span>
        <span class="act-what">${esc(what + extra)}</span>
        <span class="act-when">${fmtTime(e.created_at)}</span>
      </div>`;
  }).join('');

  return `
    <div class="note"><span class="n-ico">🗒</span>
      <span>Задачи не привязаны к смене — доступны всегда после входа. Перетащите карточку мышью или кнопками, чтобы сменить статус. Клик по карточке — редактирование.</span>
    </div>
    <div class="toolbar"><div class="chips">${boardChips}${ownerChips}</div></div>
    ${boardForm}
    <div class="toolbar" style="margin-top:10px"><div class="chips">${filterChips}</div></div>
    ${noteForm}
    <div class="kanban">${cols}</div>
    <div class="panel" style="margin-top:16px">
      <div class="panel-title">Последние события <small>журнал доски</small></div>
      <div class="act-feed">${feed || '<div class="stop-empty">Пока тихо</div>'}</div>
    </div>`;
}

/* защита от двойного сабмита (двойной клик по кнопке создаёт дубль) */
let noteBusy = false;

async function noteSubmit() {
  if (noteBusy) return;
  noteBusy = true;
  try {
    await noteSubmitInner();
  } finally {
    noteBusy = false;
  }
}

async function noteSubmitInner() {
  const titleEl = document.getElementById('ntTitle');
  const title = (titleEl.value || '').trim();
  if (!title) {
    toast('Укажите заголовок задачи', 't-red');
    return;
  }
  const payload = {
    title,
    body: document.getElementById('ntBody').value || '',
    assignee: document.getElementById('ntAssignee').value || null,
    due_date: document.getElementById('ntDue').value || null,
    important: document.getElementById('ntImportant').checked,
  };
  try {
    if (state.noteEditId != null) {
      const r = await api('/api/notes/' + state.noteEditId, {
        method: 'PATCH', body: JSON.stringify(payload),
      });
      const i = state.notes.findIndex((x) => x.id === r.note.id);
      if (i !== -1) state.notes[i] = r.note;
      else state.notes.unshift(r.note);
      toast('Задача обновлена', 't-green');
    } else {
      const r = await api('/api/boards/' + state.boardId + '/notes', {
        method: 'POST', body: JSON.stringify(payload),
      });
      state.notes.unshift(r.note);
      toast('Задача добавлена', 't-green');
    }
    noteFormReset();
    refreshNotesActivity();
  } catch (e) {
    if (e.message !== 'session expired') toast('Ошибка: ' + e.message, 't-red');
  }
  render();
}

/* лента событий без перезагрузки заметок (после мутаций) */
async function refreshNotesActivity() {
  if (!state.boardId) return;
  try {
    const act = await api('/api/boards/' + state.boardId + '/activity?limit=8');
    state.boardActivity = act.events;
  } catch { /* некритично */ }
}

/* оптимистичное перемещение: перерисовка → запрос; при ошибке откат */
async function noteMove(id, status) {
  const i = state.notes.findIndex((n) => n.id === id);
  if (i === -1 || state.notes[i].status === status) return;
  const prev = state.notes[i].status;
  state.notes[i] = { ...state.notes[i], status,
    done_at: status === 'done' ? new Date().toISOString() : null };
  render();
  try {
    const r = await api('/api/notes/' + id, { method: 'PATCH', body: JSON.stringify({ status }) });
    const j = state.notes.findIndex((n) => n.id === id);
    if (j !== -1) state.notes[j] = r.note;
    refreshNotesActivity();
  } catch (e) {
    const j = state.notes.findIndex((n) => n.id === id);
    if (j !== -1) state.notes[j] = { ...state.notes[j], status: prev, done_at: null };
    if (e.message !== 'session expired') toast('Не удалось переместить: ' + e.message, 't-red');
  }
  render();
}

function noteEditOpen(id) {
  const n = state.notes.find((x) => x.id === id);
  if (!n) return;
  state.noteEditId = id;
  state.noteForm = {
    title: n.title,
    body: n.body || '',
    assignee: n.assignee ? n.assignee.id : '',
    due: n.due_date || '',
    important: !!n.important,
  };
  render();
  syncNoteFormDom();
  const el = document.getElementById('ntTitle');
  if (el) el.focus();
}

async function noteDelete(id) {
  const n = state.notes.find((x) => x.id === id);
  if (!n) return;
  if (!(await uiConfirm({ title: `Удалить задачу «${n.title}»?`, ok: 'Удалить' }))) return;
  try {
    await api('/api/notes/' + id, { method: 'DELETE' });
    state.notes = state.notes.filter((x) => x.id !== id);
    if (state.noteEditId === id) noteFormReset();
    toast('Задача удалена', 't-red');
    refreshNotesActivity();
  } catch (e) {
    if (e.message !== 'session expired') toast('Ошибка: ' + e.message, 't-red');
  }
  render();
}

let boardBusy = false;

async function boardCreate() {
  if (boardBusy) return;
  boardBusy = true;
  try {
    await boardCreateInner();
  } finally {
    boardBusy = false;
  }
}

async function boardCreateInner() {
  const title = (document.getElementById('nbTitle').value || '').trim();
  const admin = document.getElementById('nbAdmin').value;
  if (!title || !admin) {
    toast('Название и администратор обязательны', 't-red');
    return;
  }
  try {
    const r = await api('/api/boards', {
      method: 'POST', body: JSON.stringify({ title, admin_login: admin }),
    });
    state.boardFormOpen = false;
    state.boardId = r.board.id;
    noteFormReset();
    toast('Доска создана — видна вам и админу', 't-green');
    await loadNotesData();
  } catch (e) {
    if (e.message !== 'session expired') toast('Ошибка: ' + e.message, 't-red');
  }
  render();
}

async function boardRename() {
  const board = currentBoard();
  if (!board) return;
  const title = await uiPrompt({
    title: 'Новое название доски',
    value: board.title,
    ok: 'Переименовать',
  });
  if (title === null) return;
  const clean = title.trim();
  if (!clean) {
    toast('Название не может быть пустым', 't-red');
    return;
  }
  try {
    await api('/api/boards/' + board.id, { method: 'PATCH', body: JSON.stringify({ title: clean }) });
    board.title = clean;
    toast('Доска переименована', 't-green');
  } catch (e) {
    if (e.message !== 'session expired') toast('Ошибка: ' + e.message, 't-red');
  }
  render();
}

async function boardDelete(id) {
  const board = state.boards.find((b) => b.id === id);
  if (!board) return;
  if (!(await uiConfirm({
    title: `Удалить доску «${board.title}»?`,
    text: 'Вместе со всеми задачами.',
    ok: 'Удалить',
  }))) return;
  try {
    await api('/api/boards/' + id, { method: 'DELETE' });
    toast('Доска удалена', 't-red');
    await loadNotesData();
  } catch (e) {
    if (e.message !== 'session expired') toast('Ошибка: ' + e.message, 't-red');
  }
  render();
}

/* drag&drop карточек (desktop): колонки помечены data-nstatus */
document.addEventListener('dragstart', (e) => {
  if (state.view !== 'notes' || !e.target.closest) return;
  const card = e.target.closest('[data-nedit]');
  if (!card) return;
  e.dataTransfer.setData('text/plain', card.dataset.nedit);
  e.dataTransfer.effectAllowed = 'move';
  card.classList.add('dragging');
});
document.addEventListener('dragover', (e) => {
  if (state.view !== 'notes' || !e.target.closest) return;
  const col = e.target.closest('.kan-col[data-nstatus]');
  if (!col) return;
  e.preventDefault();
  e.dataTransfer.dropEffect = 'move';
  col.classList.add('drag-over');
});
document.addEventListener('dragleave', (e) => {
  if (!e.target.closest) return;
  const col = e.target.closest('.kan-col[data-nstatus]');
  if (col) col.classList.remove('drag-over');
});
document.addEventListener('drop', (e) => {
  if (state.view !== 'notes' || !e.target.closest) return;
  const col = e.target.closest('.kan-col[data-nstatus]');
  if (!col) return;
  e.preventDefault();
  col.classList.remove('drag-over');
  const id = Number(e.dataTransfer.getData('text/plain'));
  if (id) noteMove(id, col.dataset.nstatus);
});
document.addEventListener('dragend', () => {
  document.querySelectorAll('.note-card.dragging').forEach((el) => el.classList.remove('dragging'));
  document.querySelectorAll('.kan-col.drag-over').forEach((el) => el.classList.remove('drag-over'));
});

/* ---------------- игры: PS5 и настолки ---------------- */
/* Библиотека видна всем ролям (официант подбирает игру гостю),
   добавление/удаление — админ и владелец. Обложки — только у PS5. */

const GAME_KIND_LABELS = { ps5: 'PS5', board: 'Настолка' };
const GAME_KIND_ICONS = { ps5: '🎮', board: '🎲' };
/* логотипы настолок: ключи иконок сайта + эмодзи для CRM (набор BoardGamesPage) */
const GAME_ICONS = [
  { key: 'eye', emoji: '👁' }, { key: 'skull', emoji: '💀' }, { key: 'spade', emoji: '♠' },
  { key: 'crown', emoji: '👑' }, { key: 'dices', emoji: '🎲' }, { key: 'grid', emoji: '▦' },
  { key: 'circle', emoji: '⭕' }, { key: 'hash', emoji: '#️⃣' }, { key: 'landmark', emoji: '🏛' },
  { key: 'layout', emoji: '🔲' }, { key: 'brain', emoji: '🧠' }, { key: 'puzzle', emoji: '🧩' },
  { key: 'users', emoji: '👥' }, { key: 'club', emoji: '♣' }, { key: 'ghost', emoji: '👻' },
  { key: 'castle', emoji: '🏰' }, { key: 'heart', emoji: '❤' }, { key: 'target', emoji: '🎯' },
];
const GAME_ICON_EMOJI = Object.fromEntries(GAME_ICONS.map((x) => [x.key, x.emoji]));
/* неоновые цвета сайта — палитра подсветки (игры и меню) */
const NEON_ACCENTS = ['#00f0ff', '#b026ff', '#ff4d6d', '#2ee6a8', '#ffc857', '#ff8a00',
  '#ec4899', '#22c55e', '#38bdf8', '#eab308', '#c084fc', '#ef4444'];

async function refreshGames() {
  try {
    const canManage = state.role === 'owner'; // правка: библиотеку ведёт владелец
    const data = await api('/api/games' + (canManage ? '?all=1' : ''));
    state.games = data.games;
  } catch { /* сеть моргнула — покажем прошлые данные */ }
}

async function refreshSiteMixes() {
  if (state.role !== 'owner' && state.role !== 'hookah') return;
  try {
    const data = await api('/api/mixes/site');
    state.siteMixes = data.site_mixes;
  } catch { /* сеть моргнула — покажем прошлые данные */ }
}

function gameCard(g, canManage) {
  const emoji = GAME_ICON_EMOJI[g.icon] || GAME_KIND_ICONS[g.kind];
  const accentColor = g.accent || (g.kind === 'board' ? '#b026ff' : null);
  const cover = g.cover
    ? `<img class="g-cover-img" src="${esc(g.cover)}" alt="" loading="lazy">`
    : `<div class="g-cover-img g-cover-empty" ${accentColor ? `style="color:${accentColor};background:linear-gradient(150deg, ${accentColor}26 0%, #0a0a0f 62%)"` : ''}>${emoji}</div>`;
  const controls = g.deleted
    ? `<button class="btn btn-ghost btn-sm" data-game-restore="${esc(g.id)}" type="button">↩ Восстановить</button>`
    : `
      ${g.kind === 'ps5' && canManage ? `
        <button class="btn btn-ghost btn-sm" data-gphoto="${esc(g.id)}" type="button">
          ${g.cover ? '📷 заменить' : '📷 обложка'}</button>` : ''}
      ${canManage ? `<button class="btn btn-ghost btn-sm" data-game-edit="${esc(g.id)}" type="button">✎</button>
      <button class="btn btn-danger btn-sm" data-game-del="${esc(g.id)}" type="button">Удалить</button>` : ''}`;
  return `
    <div class="game-card ${g.deleted ? 'is-deleted' : ''}">
      <div class="g-cover">${cover}</div>
      <div class="g-body">
        <span class="badge ${g.kind === 'ps5' ? 'b-new' : 'b-active'}"><span class="b-dot"></span>${GAME_KIND_LABELS[g.kind]}</span>
        <div class="g-title">${esc(g.title)}</div>
        ${g.note ? `<div class="g-note">${esc(g.note)}</div>` : ''}
        <div class="g-actions">${controls}</div>
      </div>
    </div>`;
}

/* форма добавления/редактирования игры; у настолок — сложность и логотип */
function gameFormHtml() {
  const editing = state.gameEditId != null;
  const f = state.gameForm;
  const isBoard = f.kind === 'board';
  return `
    <div class="panel" style="margin-bottom:16px">
      <div class="panel-title">${editing ? 'Редактировать игру' : 'Добавить игру'}
        <small>${isBoard ? 'сложность и логотип — как на сайте' : ''}</small></div>
      <form class="user-form" id="gamesForm" autocomplete="off">
        <select id="newGameKind" aria-label="Вид игры" ${editing ? 'disabled' : ''}>
          <option value="ps5" ${f.kind === 'ps5' ? 'selected' : ''}>🎮 PS5</option>
          <option value="board" ${f.kind === 'board' ? 'selected' : ''}>🎲 Настолка</option>
        </select>
        <input type="text" id="newGameTitle" placeholder="Название, напр. FIFA 25" maxlength="120" required value="${esc(f.title)}">
        <input type="text" id="newGameNote" placeholder="Пометка, напр. «2–4 игрока»" maxlength="160" value="${esc(f.note)}">
        ${isBoard ? `
        <select id="newGameDifficulty" aria-label="Сложность">
          <option value="1" ${Number(f.difficulty) === 1 ? 'selected' : ''}>Простая</option>
          <option value="2" ${Number(f.difficulty) === 2 ? 'selected' : ''}>Средняя</option>
          <option value="3" ${Number(f.difficulty) === 3 ? 'selected' : ''}>Сложная</option>
        </select>` : ''}
        <button class="btn btn-neon" type="submit">${editing ? 'Сохранить' : 'Добавить'}</button>
        ${editing ? '<button class="btn btn-ghost" data-game-cancel="1" type="button">Отмена</button>' : ''}
      </form>
      ${isBoard ? `
      <div class="chips" style="margin-top:10px">
        <span class="switch-label">Логотип:</span>
        ${GAME_ICONS.map((i) => `
          <button class="chip ${f.icon === i.key ? 'active' : ''}" data-gicon="${i.key}" type="button"
            title="${i.key}">${i.emoji}</button>`).join('')}
      </div>
      <div class="chips" style="margin-top:8px">
        <span class="switch-label">Цвет:</span>
        ${NEON_ACCENTS.map((c) => `
          <button class="chip ${f.accent === c ? 'active' : ''}" data-gaccent="${c}" type="button"
            title="${c}"><span style="display:inline-block;width:14px;height:14px;border-radius:50%;background:${c}"></span></button>`).join('')}
      </div>` : ''}
    </div>`;
}

function viewGames() {
  // правка: редактирует библиотеку только владелец; админ видит список,
  // официант и кальянщик раздела не имеют вовсе
  const canManage = state.role === 'owner';
  const active = state.games.filter((g) => !g.deleted);
  const pool = state.gameTrash && canManage ? state.games : active;
  const kinds = [
    { key: 'all', label: 'Все' },
    { key: 'ps5', label: '🎮 PS5' },
    { key: 'board', label: '🎲 Настолки' },
  ].map((k) => {
    const n = k.key === 'all' ? pool.length
      : pool.filter((g) => g.kind === k.key).length;
    return `<button class="chip ${state.gameFilter === k.key ? 'active' : ''}"
      data-gfilter="${k.key}" type="button">${k.label}<span class="cnt">${n}</span></button>`;
  }).join('');
  const trashChip = canManage && state.games.some((g) => g.deleted)
    ? `<button class="chip ${state.gameTrash ? 'active chip-busy' : ''}" data-gtrash="1" type="button">
         🗑 корзина<span class="cnt">${state.games.filter((g) => g.deleted).length}</span></button>`
    : '';

  const filtered = pool.filter((g) => state.gameFilter === 'all' || g.kind === state.gameFilter);
  const cards = filtered.map((g) => gameCard(g, canManage)).join('');

  return `
    <div class="note"><span class="n-ico">🎮</span>
      <span>${canManage
        ? 'Ведите библиотеку: игры PS5 — с обложкой (до 6 МБ), настолки — со сложностью и логотипом (цвет+значок, как на сайте). Кнопка ✎ — редактирование.'
        : 'Список игр бара: предлагайте гостям то, что свободно прямо сейчас. Библиотеку ведёт владелец.'}</span>
    </div>
    ${canManage ? gameFormHtml() : ''}
    <div class="toolbar"><div class="chips">${kinds}${trashChip}</div></div>
    <div class="games-grid">${cards || '<div class="stop-empty">Игр пока нет — добавьте первую</div>'}</div>`;
}

function gameFormReset() {
  state.gameEditId = null;
  state.gameForm = { kind: 'ps5', title: '', note: '', difficulty: 2, icon: 'dices', accent: '#b026ff' };
  render();
}

function gameEditOpen(id) {
  const g = state.games.find((x) => x.id === id);
  if (!g) return;
  state.gameEditId = id;
  state.gameForm = {
    kind: g.kind,
    title: g.title,
    note: g.note || '',
    difficulty: g.difficulty || 2,
    icon: g.icon || 'dices',
    accent: g.accent || '#b026ff',
  };
  render();
  window.scrollTo({ top: 0, behavior: 'smooth' });
}

function readGameForm() {
  const f = state.gameForm;
  return {
    kind: f.kind,
    title: (document.getElementById('newGameTitle').value || '').trim(),
    note: (document.getElementById('newGameNote').value || '').trim(),
    difficulty: f.kind === 'board' ? Number((document.getElementById('newGameDifficulty') || {}).value || f.difficulty) : null,
    icon: f.kind === 'board' ? f.icon : null,
    accent: f.kind === 'board' ? f.accent : null,
  };
}

async function addGame() {
  const payload = readGameForm();
  if (!payload.title) {
    toast('Укажите название игры', 't-red');
    return;
  }
  try {
    const r = await api('/api/games', {
      method: 'POST', body: JSON.stringify(payload),
    });
    state.games.unshift(r.game);
    toast(`Игра «${r.game.title}» добавлена`, 't-green');
    gameFormReset();
  } catch (e) {
    if (e.message !== 'session expired') toast('Ошибка: ' + e.message, 't-red');
  }
  render();
}

async function saveGame() {
  const payload = readGameForm();
  if (!payload.title) {
    toast('Укажите название игры', 't-red');
    return;
  }
  delete payload.kind; // вид игры при редактировании не меняется
  try {
    const r = await api('/api/games/' + state.gameEditId, {
      method: 'PATCH', body: JSON.stringify(payload),
    });
    const i = state.games.findIndex((x) => x.id === r.game.id);
    if (i !== -1) state.games[i] = r.game;
    toast('Игра обновлена', 't-green');
    gameFormReset();
  } catch (e) {
    if (e.message !== 'session expired') toast('Ошибка: ' + e.message, 't-red');
  }
  render();
}

async function deleteGame(id) {
  const g = state.games.find((x) => x.id === id);
  if (!g) return;
  if (!(await uiConfirm({ title: `Удалить игру «${g.title}»?`, text: 'Из библиотеки.', ok: 'Удалить' }))) return;
  try {
    await api('/api/games/' + id, { method: 'DELETE' });
    toast(`Игра «${g.title}» удалена — вернётся из корзины, если что`, 't-red');
  } catch (e) {
    if (e.message !== 'session expired') toast('Ошибка: ' + e.message, 't-red');
  }
  await refreshGames();
  render();
}

async function restoreGame(id) {
  try {
    await api('/api/games/' + id, { method: 'PATCH', body: JSON.stringify({ deleted: false }) });
    toast('Игра восстановлена', 't-green');
  } catch (e) {
    if (e.message !== 'session expired') toast('Ошибка: ' + e.message, 't-red');
  }
  await refreshGames();
  render();
}

/* обложка игры: тот же скрытый photoInput, другой endpoint */
async function uploadGameCover(gameId, file) {
  try {
    const r = await fetch('/api/games/' + gameId + '/photo', {
      method: 'POST',
      headers: {
        'Content-Type': file.type || 'application/octet-stream',
        'X-Auth-Token': localStorage.getItem(TOKEN_KEY),
      },
      body: file,
    });
    if (!r.ok) {
      const err = await r.json().catch(() => ({}));
      throw new Error(err.error || 'HTTP ' + r.status);
    }
    toast('Обложка загружена', 't-green');
    await refreshGames();
  } catch (e) {
    if (e.message !== 'session expired') toast('Ошибка загрузки обложки: ' + e.message, 't-red');
  }
  render();
}

/* ---------------- события ---------------- */

document.addEventListener('click', async (e) => {
  const t = e.target.closest('[data-nav],[data-cat],[data-tobcat],[data-nocat],[data-ofilter],[data-accept],[data-fastdone],[data-deliver],[data-cancel],[data-unstop],[data-user-del],[data-user-pass],[data-rep],[data-del],[data-restore],[data-purge],[data-photo],[data-shift],[data-shiftkick],[data-shiftreg],[data-noadd],[data-noqty],[data-notable],[data-nocreate],[data-hall-busy],[data-hall-busy-min],[data-hall-ext],[data-hall-free],[data-hall-custom-busy],[data-hall-custom-ext],[data-hall-reserve],[data-hall-res-cancel],[data-hall-del],[data-mixflavor],[data-mixbrand],[data-mixdel],[data-mixedit],[data-mix-cancel],[data-sitemixedit],[data-sitemixreset],[data-menuedit],[data-menu-cancel],[data-mixtag],[data-nboard],[data-nboard-form],[data-nboard-rename],[data-nboard-del],[data-nfilter],[data-nedit],[data-nmove],[data-nform-cancel],[data-ndel],[data-gfilter],[data-gtrash],[data-game-del],[data-game-restore],[data-game-edit],[data-game-cancel],[data-gicon],[data-gaccent],[data-accent-menu],[data-set-accent],[data-numreset],[data-gphoto],[data-stock-on],[data-stock-add],[data-stock-off]');
  if (!t) return;

  if (t.dataset.nav) {
    state.view = t.dataset.nav;
    // уходим со вкладки — выходим из режима правки, иначе вернёмся
    // к «Редактированию» с чужими данными в форме
    if (state.view !== 'mixes' && (state.mixEditId != null || state.siteMixEditId != null)) {
      state.mixEditId = null;
      state.siteMixEditId = null;
      state.newMix = { name: '', note: '', flavorIds: [], strength: '', cooling: '', price: '', tags: [] };
      state.mixErrors = {};
    }
    if (state.view !== 'menu') state.menuEditId = null;
    if (state.view === 'users' && state.role === 'owner') loadUsers();
    if (state.view === 'mixes' && (state.role === 'owner' || state.role === 'hookah')) refreshMixes();
    if (state.view === 'notes') loadNotesData();
    if (state.view === 'games') refreshGames();
    render();
    return;
  }
  if (t.dataset.stockOn) { menuStockOn(t.dataset.stockOn); return; }
  if (t.dataset.stockAdd) { menuStockAdd(t.dataset.stockAdd); return; }
  if (t.dataset.stockOff) { menuStockOff(t.dataset.stockOff); return; }
  if (t.dataset.cat) { state.menuCat = t.dataset.cat; render(); return; }
  if (t.dataset.tobcat) { state.tobBrand = t.dataset.tobcat; render(); return; }
  if (t.dataset.nocat) { state.newOrderCat = t.dataset.nocat; render(); return; }
  if (t.dataset.ofilter) { state.orderFilter = t.dataset.ofilter; render(); return; }
  if (t.dataset.accept) { acceptOrder(t.dataset.accept); return; }
  if (t.dataset.fastdone) { fastDoneOrder(t.dataset.fastdone); return; }
  if (t.dataset.deliver) { deliverOrder(t.dataset.deliver); return; }
  if (t.dataset.cancel) { cancelOrder(t.dataset.cancel); return; }
  if (t.dataset.userDel) { deleteUser(t.dataset.userDel); return; }
  if (t.dataset.userPass) { resetUserPassword(t.dataset.userPass); return; }
  if (t.dataset.rep === 'build') { buildReport(); return; }
  if (t.dataset.rep === 'all') { buildAllTimeReport(); return; }
  if (t.dataset.rep === 'excel') { downloadReportExcel(false); return; }
  if (t.dataset.rep === 'excel-days') { downloadReportExcel(true); return; }
  if (t.dataset.shift === 'in') { clockIn(); return; }
  if (t.dataset.shift === 'out') { clockOut(); return; }
  if (t.dataset.shiftkick) {
    const login = t.dataset.shiftkick;
    const name = (state.onShiftList.find((s) => s.login === login) || {}).name || login;
    if (await uiConfirm({
      title: `Снять ${name} со смены?`,
      text: 'Управление заказами для него заблокируется.',
      ok: 'Снять',
    })) {
      shiftManage(login, 'out');
    }
    return;
  }
  if (t.dataset.shiftreg) { shiftManage(t.dataset.shiftreg, 'in'); return; }
  if (t.dataset.photo) {
    state.photoKind = 'menu';
    state.photoTarget = t.dataset.photo;
    // input статичный (в index.html): переживает перерисовки списков
    const inp = document.getElementById('photoInput');
    if (inp) {
      inp.value = '';
      inp.click();
    }
    return;
  }
  if (t.dataset.noadd) { newOrderAdd(t.dataset.noadd); return; }
  if (t.dataset.noqty) {
    const sep = t.dataset.noqty.lastIndexOf(':');
    newOrderQty(t.dataset.noqty.slice(0, sep), Number(t.dataset.noqty.slice(sep + 1)));
    return;
  }
  if (t.dataset.notable) {
    state.newOrder.table = t.dataset.notable;
    if (state.newOrderError === 'table') state.newOrderError = '';
    render();
    return;
  }
  if (t.dataset.nocreate) { newOrderCreate(); return; }
  if (t.dataset.hallBusy) { hallManage(t.dataset.hallBusy, true, undefined); return; }
  if (t.dataset.hallBusyMin) {
    const sep = t.dataset.hallBusyMin.lastIndexOf(':');
    hallManage(t.dataset.hallBusyMin.slice(0, sep), true, Number(t.dataset.hallBusyMin.slice(sep + 1)));
    return;
  }
  if (t.dataset.hallExt) {
    const sep = t.dataset.hallExt.lastIndexOf(':');
    hallManage(t.dataset.hallExt.slice(0, sep), true, Number(t.dataset.hallExt.slice(sep + 1)));
    return;
  }
  if (t.dataset.hallFree) { hallManage(t.dataset.hallFree, false, undefined); return; }
  if (t.dataset.hallCustomBusy) { hallAskMinutes(t.dataset.hallCustomBusy, true); return; }
  if (t.dataset.hallCustomExt) { hallAskMinutes(t.dataset.hallCustomExt, false); return; }
  if (t.dataset.hallReserve) { hallAskReserve(t.dataset.hallReserve); return; }
  if (t.dataset.hallResCancel) { hallReserveCancel(Number(t.dataset.hallResCancel)); return; }
  if (t.dataset.hallDel) { deleteHall(t.dataset.hallDel); return; }
  if (t.dataset.mixflavor) { mixToggleFlavor(t.dataset.mixflavor); return; }
  if (t.dataset.mixtag) { mixToggleTag(t.dataset.mixtag); return; }
  if (t.dataset.mixbrand) { state.mixBrand = t.dataset.mixbrand; render(); return; }
  if (t.dataset.mixdel) { deleteMix(t.dataset.mixdel); return; }
  if (t.dataset.mixedit) { mixEditOpen(t.dataset.mixedit); return; }
  if (t.dataset.mixCancel) { mixFormReset(); return; }
  if (t.dataset.sitemixedit) { siteMixEditOpen(t.dataset.sitemixedit); return; }
  if (t.dataset.sitemixreset) { siteMixReset(t.dataset.sitemixreset); return; }
  if (t.dataset.menuedit) { menuEditOpen(t.dataset.menuedit); return; }
  if (t.dataset.menuCancel) { menuFormReset(); return; }
  /* --- заметки и доски --- */
  if (t.dataset.nboard) {
    state.boardId = Number(t.dataset.nboard);
    state.noteEditId = null;
    state.boardFormOpen = false;
    state.notesSince = null;
    refreshNotes();
    render();
    return;
  }
  if (t.dataset.nboardForm) { state.boardFormOpen = !state.boardFormOpen; render(); return; }
  if (t.dataset.nboardRename) { boardRename(); return; }
  if (t.dataset.nboardDel) { boardDelete(Number(t.dataset.nboardDel)); return; }
  if (t.dataset.nfilter) { state.noteFilter = t.dataset.nfilter; render(); return; }
  if (t.dataset.nmove) {
    const sep = t.dataset.nmove.lastIndexOf(':');
    noteMove(Number(t.dataset.nmove.slice(0, sep)), t.dataset.nmove.slice(sep + 1));
    return;
  }
  if (t.dataset.nedit) { noteEditOpen(Number(t.dataset.nedit)); return; }
  if (t.dataset.nformCancel) { noteFormReset(); return; }
  if (t.dataset.ndel) { noteDelete(Number(t.dataset.ndel)); return; }
  /* --- игры --- */
  if (t.dataset.gfilter) { state.gameFilter = t.dataset.gfilter; render(); return; }
  if (t.dataset.gtrash) { state.gameTrash = !state.gameTrash; render(); return; }
  if (t.dataset.gameRestore) { restoreGame(Number(t.dataset.gameRestore)); return; }
  if (t.dataset.gameEdit) { gameEditOpen(Number(t.dataset.gameEdit)); return; }
  if (t.dataset.gameCancel) { gameFormReset(); return; }
  if (t.dataset.gicon) { state.gameForm.icon = t.dataset.gicon; render(); return; }
  if (t.dataset.gaccent) { state.gameForm.accent = t.dataset.gaccent; render(); return; }
  if (t.dataset.accentMenu) { state.accentFor = state.accentFor === t.dataset.accentMenu ? '' : t.dataset.accentMenu; render(); return; }
  if (t.dataset.setAccent) {
    setMenuAccent(t.dataset.setItem, t.dataset.setAccent === '' ? null : t.dataset.setAccent);
    return;
  }
  if (t.dataset.numreset) { resetOrderNumbering(); return; }
  if (t.dataset.gameDel) { deleteGame(Number(t.dataset.gameDel)); return; }
  if (t.dataset.gphoto) {
    // обложка игры: тот же скрытый file-input, но с признаком «игра»
    state.photoKind = 'game';
    state.photoTarget = t.dataset.gphoto;
    const inp = document.getElementById('photoInput');
    if (inp) {
      inp.value = '';
      inp.click();
    }
    return;
  }
  if (t.dataset.del) {
    const [kind, id] = t.dataset.del.split(':');
    if (state.role === 'owner' && await uiConfirm({
      title: kind === 'menu' ? 'Удалить позицию меню?' : 'Удалить вкус табака?',
      text: kind === 'menu' ? 'Она скроется с сайта и из заказа.' : 'Он скроется с сайта.',
      ok: 'Удалить',
    })) {
      deleteCatalogItem(kind, decodeURIComponent(id));
    }
    return;
  }
  if (t.dataset.purge) {
    const [kind, id] = t.dataset.purge.split(':');
    const what = kind === 'menu' ? 'позицию' : kind === 'tobacco' ? 'вкус' : 'микс';
    const warn = kind === 'menu'
      ? 'Позиция будет стёрта из базы, восстановить её будет нельзя (в отличие от обычного удаления). История заказов сохранится.'
      : kind === 'tobacco'
        ? 'Вкус будет стёрт из базы, восстановить его будет нельзя (в отличие от обычного удаления). Миксы с этим вкусом сохранятся.'
        : 'Микс будет стёрт из базы, восстановить его будет нельзя (в отличие от обычного удаления). История заказов сохранится.';
    if (await uiConfirm({
      title: `Удалить ${what} навсегда?`,
      text: warn,
      ok: 'Удалить навсегда',
    })) {
      purgeCatalogItem(kind, id);
    }
    return;
  }
  if (t.dataset.restore) {
    if (state.role === 'owner') {
      const [kind, id] = t.dataset.restore.split(':');
      restoreCatalogItem(kind, decodeURIComponent(id));
    }
    return;
  }
  if (t.dataset.unstop) {
    if (state.role !== 'owner' && state.role !== 'admin') return;
    const [kind, id] = t.dataset.unstop.split(':');
    const decoded = decodeURIComponent(id);
    if (kind === 'menu') toggleMenuStop(decoded, false);
    else toggleTobaccoStop(decoded, false);
    return;
  }
});

document.addEventListener('change', (e) => {
  if (e.target.dataset.menuStop) toggleMenuStop(e.target.dataset.menuStop, e.target.checked);
  if (e.target.dataset.tobStop) toggleTobaccoStop(decodeURIComponent(e.target.dataset.tobStop), e.target.checked);
  if (e.target.dataset.status) setOrderStatus(e.target.dataset.status, e.target.value);
  if (e.target.id === 'repFrom') state.reportFrom = e.target.value;
  if (e.target.id === 'repTo') state.reportTo = e.target.value;
  if (e.target.id === 'menuSortSel') { state.menuSort = e.target.value; render(); }
  if (e.target.id === 'tobSortSel') { state.tobaccoSort = e.target.value; render(); }
  if (e.target.id === 'mixSortSel') { state.mixSort = e.target.value; render(); }
  if (e.target.id === 'newGameKind') { state.gameForm.kind = e.target.value; render(); }
  if (e.target.id === 'newGameDifficulty') state.gameForm.difficulty = Number(e.target.value);
  if (e.target.id === 'photoInput') {
    const file = e.target.files && e.target.files[0];
    if (file && state.photoTarget && state.photoKind === 'game') uploadGameCover(state.photoTarget, file);
    else if (file && state.photoTarget) uploadPhoto(state.photoTarget, file);
    else if (file && !state.photoTarget) toast('Не удалось определить позицию для фото — выберите заново', 't-red');
    e.target.value = '';
  }
});

/* отмена диалога выбора фото — сбрасываем цель, чтобы следующий выбор
   не ушёл в никуда */
document.addEventListener('cancel', (e) => {
  if (e.target.id === 'photoInput') state.photoTarget = '';
});

document.addEventListener('submit', (e) => {
  if (e.target.id === 'userForm') { e.preventDefault(); addUser(e.target); }
  if (e.target.id === 'hallForm') { e.preventDefault(); addHall(); }
  if (e.target.id === 'menuForm') { e.preventDefault(); state.menuEditId != null ? saveMenuItem(e.target) : addMenuItem(e.target); }
  if (e.target.id === 'tobaccoForm') { e.preventDefault(); addTobacco(e.target); }
  if (e.target.id === 'mixForm') {
    e.preventDefault();
    if (state.siteMixEditId != null) saveSiteMix();
    else if (state.mixEditId != null) saveMix();
    else addMix();
  }
  if (e.target.id === 'noteForm') { e.preventDefault(); noteSubmit(); }
  if (e.target.id === 'boardForm') { e.preventDefault(); boardCreate(); }
  if (e.target.id === 'gamesForm') { e.preventDefault(); state.gameEditId != null ? saveGame() : addGame(); }
});

document.addEventListener('input', (e) => {
  if (e.target.id === 'menuSearch' || e.target.id === 'tobSearch' || e.target.id === 'noSearch' || e.target.id === 'mixSearch') {
    const key = e.target.id === 'menuSearch' ? 'menuQuery'
      : e.target.id === 'tobSearch' ? 'tobaccoQuery'
      : e.target.id === 'mixSearch' ? 'mixQuery' : 'newOrderQuery';
    state[key] = e.target.value;
    const pos = e.target.selectionStart;
    render();
    const inp = document.getElementById(e.target.id);
    if (inp) { inp.focus(); inp.setSelectionRange(pos, pos); }
  }
  /* комментарий заказа живёт в state — перерисовка не нужна */
  if (e.target.id === 'noComment') state.newOrder.comment = e.target.value;
  /* поля формы микса — в state, чтобы переживать перерисовку;
     исправление поля снимает его ошибку валидации */
  const MIX_ERROR_FIELDS = { newMixName: 'newMixName', newMixStrength: 'newMixStrength',
    newMixCooling: 'newMixCooling', newMixPrice: 'newMixPrice' };
  if (MIX_ERROR_FIELDS[e.target.id]) {
    state.newMix[e.target.id === 'newMixName' ? 'name'
      : e.target.id === 'newMixStrength' ? 'strength'
      : e.target.id === 'newMixCooling' ? 'cooling' : 'price'] = e.target.value;
    if (state.mixErrors[MIX_ERROR_FIELDS[e.target.id]]) {
      delete state.mixErrors[MIX_ERROR_FIELDS[e.target.id]];
      render();
    }
    return;
  }
  if (e.target.id === 'newMixNote') state.newMix.note = e.target.value;
  /* поля формы заметки — тоже в state (переживают перерисовку опроса) */
  if (e.target.id === 'ntTitle') state.noteForm.title = e.target.value;
  if (e.target.id === 'ntBody') state.noteForm.body = e.target.value;
  if (e.target.id === 'ntAssignee') state.noteForm.assignee = e.target.value;
  if (e.target.id === 'ntDue') state.noteForm.due = e.target.value;
  if (e.target.id === 'ntImportant') state.noteForm.important = e.target.checked;
});

document.getElementById('loginForm').addEventListener('submit', (e) => {
  e.preventDefault();
  const loginValue = document.getElementById('loginUser').value.trim();
  const password = document.getElementById('loginPass').value;
  if (!loginValue || !password) {
    showLoginError('Введите логин и пароль');
    return;
  }
  login(loginValue, password);
});
document.getElementById('logoutBtn').addEventListener('click', () => logout());
document.getElementById('passwordBtn').addEventListener('click', async () => {
  const v = await uiPassword({ title: 'Сменить пароль' });
  if (!v) return;
  if (!v.current || !v.next) { toast('Заполните оба поля', 't-red'); return; }
  if (v.next.length < 8) { toast('Новый пароль — минимум 8 символов', 't-red'); return; }
  try {
    await api('/api/session/password', {
      method: 'PATCH',
      body: JSON.stringify({ current_password: v.current, new_password: v.next }),
    });
    toast('Пароль изменён — все другие сессии выключены', 't-green');
  } catch (e) {
    if (e.message !== 'session expired') toast('Ошибка: ' + e.message, 't-red');
  }
});
document.getElementById('offlineRetry').addEventListener('click', retryConnection);
document.getElementById('bellBtn').addEventListener('click', () => {
  state.view = 'orders';
  render();
});

function renderShiftActions() {
  const el = document.getElementById('shiftActions');
  if (!el || !state.role) return;
  if (SHIFT_ROLES_JS.includes(state.role)) {
    if (state.onShift) {
      const mine = state.onShiftList.find((s) => s.login === state.login);
      el.innerHTML = `<span class="badge b-done"><span class="b-dot"></span>На смене${mine ? ' с ' + fmtTime(mine.started_at) : ''}</span>
        <button class="btn btn-ghost btn-sm" data-shift="out" type="button">Закончить смену</button>`;
    } else if (clockInAllowed()) {
      el.innerHTML = `<button class="btn btn-neon btn-sm" data-shift="in" type="button">Выйти на смену</button>`;
    } else {
      el.innerHTML = `<span class="chip shift-countdown" id="shiftCountdown">${countdownText()}</span>`;
    }
    return;
  }
  // владелец и администратор видят, кто вышел на смену
  el.innerHTML = state.onShiftList.length
    ? `<span class="chip">На смене: ${state.onShiftList.map((s) => esc(s.name)).join(', ')}</span>`
    : '';
}

/* ---------------- часы + смена: расписание зависит от дня недели (Пн — выходной) ---------------- */
const SHIFT_SCHEDULE = {
  0: '19:00–01:00',   // Вс
  1: null,            // Пн — выходной
  2: '19:00–01:00',   // Вт
  3: '19:00–01:00',   // Ср
  4: '19:00–01:00',   // Чт
  5: '19:00–03:00',   // Пт
  6: '19:00–03:00',   // Сб
};
const WEEKDAY_SHORT = ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'];

function renderShift() {
  const el = document.getElementById('shift');
  if (!el) return;
  // идущая смена (в т.ч. перетёкшая через полночь) важнее календарного дня:
  // пока она не закончилась, расписание на следующий день не показываем
  for (const off of [-1, 0]) {
    const w = shiftWindow(off);
    if (w && Date.now() <= w.end.getTime()) {
      const day = w.start.getDay();
      el.textContent = `Смена · ${WEEKDAY_SHORT[day]} · ${SHIFT_SCHEDULE[day]}`;
      return;
    }
  }
  const day = new Date().getDay();
  const hours = SHIFT_SCHEDULE[day];
  el.textContent = hours
    ? `Смена · ${WEEKDAY_SHORT[day]} · ${hours}`
    : `Сегодня выходной · ${WEEKDAY_SHORT[day]}`;
}

/* окно смены (начало/конец) для дня со смещением; null — выходной */
function shiftWindow(dayOffset) {
  const d = new Date();
  d.setDate(d.getDate() + dayOffset);
  const hours = SHIFT_SCHEDULE[d.getDay()];
  if (!hours) return null;
  const start = new Date(d);
  start.setHours(19, 0, 0, 0);
  // конец берём из расписания: «19:00–01:00» → 01:00 следующего дня
  const endH = parseInt(hours.split('–')[1].split(':')[0], 10);
  const end = new Date(d);
  end.setHours(endH, 0, 0, 0);
  if (end <= start) end.setDate(end.getDate() + 1); // смена переходит через полночь
  return { start, end };
}

function clockInAllowed() {
  const now = Date.now();
  for (const off of [-1, 0]) {
    const w = shiftWindow(off);
    if (w && w.start.getTime() - 20 * 60000 <= now && now <= w.end.getTime()) return true;
  }
  return false;
}

function nextShiftStart() {
  const now = Date.now();
  for (let off = 0; off < 8; off++) {
    const w = shiftWindow(off);
    if (w && now < w.start.getTime()) return w.start;
  }
  return null;
}

function countdownText() {
  const next = nextShiftStart();
  if (!next) return 'Заведение закрыто';
  const mins = Math.max(0, Math.round((next - Date.now()) / 60000));
  const h = Math.floor(mins / 60);
  const m = mins % 60;
  return h ? `До смены ${h} ч ${m} мин` : `До смены ${m} мин`;
}

/* обратный отсчёт таймеров занятости: элементы с data-deadline (epoch ms) */
function tickTimers() {
  const now = Date.now();
  for (const el of document.querySelectorAll('[data-deadline]')) {
    const left = Number(el.dataset.deadline) - now;
    if (!Number.isFinite(left)) continue;
    if (left <= 0) {
      el.textContent = el.dataset.done || 'освобождается…';
      continue; // сервер сам очистит истёкший таймер в очередном опросе
    }
    const s = Math.floor(left / 1000);
    const h = Math.floor(s / 3600);
    const m = Math.floor((s % 3600) / 60);
    el.textContent = h
      ? `${h}:${pad2(m)}:${pad2(s % 60)}`
      : `${m}:${pad2(s % 60)}`;
  }
}

function tickClock() {
  const d = new Date();
  document.getElementById('clock').textContent =
    pad2(d.getHours()) + ':' + pad2(d.getMinutes());
  if (d.getSeconds() === 0) renderShift(); // раз в минуту достаточно
  // обратный отсчёт до смены у официанта
  const cd = document.getElementById('shiftCountdown');
  if (cd) {
    if (clockInAllowed()) renderShiftActions(); // пора показать кнопку
    else cd.textContent = countdownText();
  }
  tickTimers();
}
setInterval(tickClock, 1000);
tickClock();
renderShift();

/* ---------------- автопрокрутка (кнопки ▲/▼) ---------------- */
/* Длинные списки (меню, табаки, канбан) листаем плавно: кнопки в правом
   нижнем углу, видны только когда страница действительно скроллится. */
const SCROLL_STEP = Math.round(window.innerHeight * 0.75);

function scrollPage(dir) {
  window.scrollBy({ top: dir * SCROLL_STEP, behavior: 'smooth' });
}

function updateScrollNav() {
  const nav = document.getElementById('scrollNav');
  if (!nav || !state.role) return;
  const scrollable = document.documentElement.scrollHeight - window.innerHeight > 120;
  nav.classList.toggle('hidden', !scrollable);
  const up = document.getElementById('scrollUp');
  const down = document.getElementById('scrollDown');
  up.classList.toggle('is-edge', window.scrollY <= 4);
  down.classList.toggle('is-edge',
    window.scrollY + window.innerHeight >= document.documentElement.scrollHeight - 4);
}

document.getElementById('scrollUp').addEventListener('click', () => scrollPage(-1));
document.getElementById('scrollDown').addEventListener('click', () => scrollPage(1));
window.addEventListener('scroll', updateScrollNav, { passive: true });
window.addEventListener('resize', updateScrollNav);

/* автологин по сохранённой сессии + опрос заказов */
(async function boot() {
  if (!localStorage.getItem(TOKEN_KEY)) return;
  try {
    const me = await api('/api/session');
    state.role = me.role;
    state.login = me.login;
    state.name = me.name;
    state.view = SHIFT_ROLES_JS.includes(me.role) ? 'orders' : 'dashboard';
    document.getElementById('loginScreen').classList.add('hidden');
    document.getElementById('app').classList.remove('hidden');
    await Promise.all([refreshOrders(), refreshCatalog(), refreshShifts(), refreshHalls()]);
    state.lastOrderNumber = state.orders.reduce((m, o) => Math.max(m, o.id), 0);
    render();
  } catch {
    logout(true);
  }
})();

setInterval(pollOrders, 10_000);
setInterval(pollNotes, 12_000);

/* период отчёта по умолчанию: с начала месяца по сегодня */
(function initReportRange() {
  const pad = (n) => String(n).padStart(2, '0');
  const now = new Date();
  const iso = (d) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
  state.reportTo = iso(now);
  state.reportFrom = iso(new Date(now.getFullYear(), now.getMonth(), 1));
})();