/* =====================================================================
 * 框子（OrderBox）- 运动提醒宝 Web 端核心业务逻辑
 * 原生 JS 实现，无框架、无构建工具
 * 模块分区：
 *   主题常量 / 双模式控制 / 工具函数 / API 封装层 / Toast 系统 /
 *   弹窗系统 / 交互追踪 / 按钮 Loading / 页面路由 / Hub 逻辑 /
 *   Tab 切换 / 卡片列表 / 卡片编辑器 / 执行器 / 语音播报 /
 *   提示音 / 屏幕常亮 / 历史列表 / 初始化
 * ===================================================================== */
(function () {
  'use strict';

  // ==================== 主题常量 ====================
  const THEME = {
    bg: '#080b12', surface: '#121826', surfaceSoft: '#1a2234', surfaceStrong: '#202b42',
    primary: '#f0b35f', primarySoft: 'rgba(240,179,95,0.16)',
    text: '#f6f7fb', textSecondary: '#9ba7bc', textDisabled: '#5a6578',
    border: '#2a3449', success: '#4ade80', warning: '#fbbf24', error: '#ef4444'
  };

  // ==================== 双模式控制 ====================
  // debug：所有交互弹窗完整显示，3s 自动关闭
  // normal：查看类操作降级为 Toast，普通弹窗 2s 关闭
  const UI_MODE_KEY = 'order_box_ui_mode';

  function getUiMode() {
    try {
      const mode = localStorage.getItem(UI_MODE_KEY);
      if (mode === 'normal' || mode === 'debug') return mode;
    } catch (e) { /* localStorage 不可用时按 debug 处理 */ }
    return 'debug';
  }

  function setUiMode(mode) {
    try {
      localStorage.setItem(UI_MODE_KEY, mode === 'normal' ? 'normal' : 'debug');
    } catch (e) { /* 静默失败 */ }
  }

  // ==================== 工具函数 ====================

  /** mm:ss 格式，如 "01:30" */
  function formatDuration(seconds) {
    const safe = Math.max(0, Math.floor(Number(seconds) || 0));
    const mm = Math.floor(safe / 60);
    const ss = safe % 60;
    return String(mm).padStart(2, '0') + ':' + String(ss).padStart(2, '0');
  }

  /** "N分N秒" 或 "N秒" */
  function formatDurationLong(seconds) {
    const safe = Math.max(0, Math.floor(Number(seconds) || 0));
    const mm = Math.floor(safe / 60);
    const ss = safe % 60;
    if (mm > 0) return mm + '分' + ss + '秒';
    return ss + '秒';
  }

  /** 语音播报专用时长文案："N分钟N秒" */
  function formatSpeechDuration(seconds) {
    const safe = Math.max(0, Math.floor(Number(seconds) || 0));
    const mm = Math.floor(safe / 60);
    const ss = safe % 60;
    const parts = [];
    if (mm > 0) parts.push(mm + '分钟');
    if (ss > 0) parts.push(ss + '秒');
    return parts.length ? parts.join('') : '0秒';
  }

  /** 北京时间格式 "yyyy/M/d HH:mm:ss"（项目规则：所有时间展示一律 Asia/Shanghai） */
  function formatDateTime(isoString) {
    if (!isoString) return '—';
    const date = new Date(isoString);
    if (Number.isNaN(date.getTime())) return String(isoString);
    return date.toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai', hour12: false });
  }

  /** 循环模式文案 */
  function formatLoopText(loopMode, loopCount) {
    if (loopMode === 'once') return '单次执行';
    if (loopMode === 'repeat_forever') return '无限循环';
    return '循环 ' + Math.max(1, Number(loopCount || 1)) + ' 次';
  }

  /** UUID 生成（crypto.randomUUID 优先，降级手写 v4） */
  function generateId() {
    try {
      if (window.crypto && typeof window.crypto.randomUUID === 'function') {
        return window.crypto.randomUUID();
      }
    } catch (e) { /* 降级 */ }
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
      const r = (Math.random() * 16) | 0;
      const v = c === 'x' ? r : (r & 0x3) | 0x8;
      return v.toString(16);
    });
  }

  /** HTML 转义 */
  function escHtml(s) {
    return String(s === null || s === undefined ? '' : s)
      .replace(/&/g, '&')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#39;');
  }

  /** JSON 安全序列化（超长截断），用于交互详情展示 */
  function safeJsonStringify(value) {
    try {
      let text = JSON.stringify(value, null, 2);
      if (text === undefined) return String(value);
      if (text.length > 4000) text = text.slice(0, 4000) + '\n...（内容过长已截断）';
      return text;
    } catch (e) {
      return String(value);
    }
  }

  // ==================== API 封装层 ====================
  const API_TIMEOUT_MS = 15000;

  function formatApiError(json, status, rawText) {
    if (json && json.error) return String(json.error);
    if (rawText) return 'HTTP ' + status + '：' + String(rawText).slice(0, 200);
    return 'HTTP ' + status;
  }

  /**
   * 通用请求封装
   * 返回统一结构：{ ok, data, error, status, duration, url, method, requestBody, responseBody }
   */
  async function apiFetch(method, path, body) {
    const startedAt = Date.now();
    const result = {
      ok: false,
      data: null,
      error: '',
      status: 0,
      duration: 0,
      url: path,
      method: method,
      requestBody: body === undefined ? null : body,
      responseBody: null
    };
    const controller = new AbortController();
    const timeoutId = setTimeout(function () { controller.abort(); }, API_TIMEOUT_MS);
    try {
      const options = { method: method, headers: {}, signal: controller.signal };
      if (body !== undefined && body !== null) {
        options.headers['Content-Type'] = 'application/json';
        options.body = JSON.stringify(body);
      }
      const resp = await fetch(path, options);
      result.status = resp.status;
      const text = await resp.text();
      let json = null;
      try { json = text ? JSON.parse(text) : null; } catch (e) { json = null; }
      result.responseBody = json !== null ? json : (text || null);
      if (resp.ok && json && json.ok !== false) {
        result.ok = true;
        result.data = (json && json.data !== undefined) ? json.data : json;
      } else {
        result.error = formatApiError(json, resp.status, text);
      }
    } catch (e) {
      if (e && e.name === 'AbortError') {
        result.error = '请求超时（' + API_TIMEOUT_MS / 1000 + ' 秒）';
      } else {
        result.error = '网络请求失败：' + String((e && e.message) || e);
      }
    } finally {
      clearTimeout(timeoutId);
      result.duration = Date.now() - startedAt;
    }
    return result;
  }

  // ==================== Toast 系统 ====================
  // info=蓝 / success=绿 / error=红，默认 2s 自动消失，不可点击关闭
  let toastTimer = null;

  function showToast(msg, type, duration) {
    const el = document.getElementById('toast');
    if (!el) return;
    const toastType = (type === 'success' || type === 'error') ? type : 'info';
    el.textContent = msg;
    el.className = 'toast toast-show toast-' + toastType;
    if (toastTimer) clearTimeout(toastTimer);
    toastTimer = setTimeout(function () {
      el.className = 'toast';
    }, Number(duration) > 0 ? Number(duration) : 2000);
  }

  // ==================== 弹窗系统 ====================

  /** 通用弹窗。actions: [{ text, style: 'default'|'primary'|'danger', closeOnClick, onPress(btn) }] */
  function showDialog(title, bodyHtml, actions) {
    document.getElementById('dialogTitle').textContent = title;
    document.getElementById('dialogBody').innerHTML = bodyHtml;
    const actionsEl = document.getElementById('dialogActions');
    actionsEl.innerHTML = '';
    const list = (Array.isArray(actions) && actions.length) ? actions : [{ text: '知道了', style: 'primary' }];
    list.forEach(function (action) {
      const btn = document.createElement('button');
      btn.type = 'button';
      btn.className = 'dialog-btn' + (action.style ? ' dialog-btn-' + action.style : '');
      btn.textContent = action.text || '确定';
      btn.addEventListener('click', function () {
        if (action.closeOnClick !== false) closeDialog();
        if (typeof action.onPress === 'function') action.onPress(btn);
      });
      actionsEl.appendChild(btn);
    });
    document.getElementById('dialogOverlay').style.display = 'flex';
  }

  function closeDialog() {
    document.getElementById('dialogOverlay').style.display = 'none';
  }

  /** 确认弹窗：双模式均保留，永不降级。onConfirm(btn) 需自行调用 closeDialog() */
  function showConfirm(title, bodyHtml, onConfirm) {
    showDialog(title, bodyHtml, [
      { text: '取消', style: 'default' },
      {
        text: '确认',
        style: 'danger',
        closeOnClick: false,
        onPress: function (btn) { if (typeof onConfirm === 'function') onConfirm(btn); }
      }
    ]);
  }

  function showAlert(title, bodyHtml) {
    showDialog(title, bodyHtml, [{ text: '知道了', style: 'primary' }]);
  }

  // ---- 交互详情弹窗（带复制按钮与自动关闭倒计时） ----
  let interactionCloseTimer = null;
  let interactionCountdown = 0;

  function buildInteractionText(d) {
    const reqText = (d.requestBody === null || d.requestBody === undefined) ? '—' : safeJsonStringify(d.requestBody);
    let respText = '—';
    if (d.responseBody !== null && d.responseBody !== undefined) {
      respText = typeof d.responseBody === 'string' ? d.responseBody : safeJsonStringify(d.responseBody);
    }
    return [
      '操作：' + d.label,
      '时间：' + d.time + '（北京时间）',
      '接口：' + d.method + ' ' + d.url,
      'HTTP 状态：' + (d.status || '—'),
      '耗时：' + d.duration + ' ms',
      '当前状态：' + (d.success ? '成功' : '失败'),
      '',
      '请求参数：',
      reqText,
      '',
      '返回结果：',
      respText,
      '',
      '错误信息：' + (d.error || '—')
    ].join('\n');
  }

  function clearInteractionTimer() {
    if (interactionCloseTimer) {
      clearInterval(interactionCloseTimer);
      interactionCloseTimer = null;
    }
  }

  function hideInteractionDialog() {
    clearInteractionTimer();
    const overlay = document.getElementById('interactionOverlay');
    if (overlay) overlay.style.display = 'none';
  }

  /**
   * 交互详情弹窗
   * autoCloseMs > 0：显示倒计时并自动关闭；为 0/null：停留（异常排障场景）
   */
  function showInteractionDialog(detail, autoCloseMs) {
    clearInteractionTimer();
    const box = document.getElementById('interactionBox');
    document.getElementById('interactionTitle').textContent = detail.success ? '交互详情' : '交互异常';
    document.getElementById('interactionContent').textContent = buildInteractionText(detail);
    box.classList.toggle('dialog-error', !detail.success);

    const actionsEl = document.getElementById('interactionActions');
    actionsEl.innerHTML = '';
    const closeBtn = document.createElement('button');
    closeBtn.type = 'button';
    closeBtn.className = 'dialog-btn dialog-btn-primary';
    closeBtn.textContent = '关闭';
    closeBtn.addEventListener('click', hideInteractionDialog);
    actionsEl.appendChild(closeBtn);

    document.getElementById('interactionOverlay').style.display = 'flex';

    if (Number(autoCloseMs) > 0) {
      interactionCountdown = Math.ceil(Number(autoCloseMs) / 1000);
      closeBtn.textContent = '关闭（' + interactionCountdown + 's）';
      interactionCloseTimer = setInterval(function () {
        interactionCountdown -= 1;
        if (interactionCountdown <= 0) {
          hideInteractionDialog();
        } else {
          closeBtn.textContent = '关闭（' + interactionCountdown + 's）';
        }
      }, 1000);
    }
  }

  /** 复制交互日志到剪贴板 */
  async function handleCopyInteraction() {
    const contentEl = document.getElementById('interactionContent');
    const text = contentEl ? (contentEl.textContent || '') : '';
    try {
      if (navigator.clipboard && navigator.clipboard.writeText) {
        await navigator.clipboard.writeText(text);
      } else {
        const ta = document.createElement('textarea');
        ta.value = text;
        ta.style.position = 'fixed';
        ta.style.opacity = '0';
        document.body.appendChild(ta);
        ta.select();
        document.execCommand('copy');
        document.body.removeChild(ta);
      }
      showToast('已复制交互日志', 'success');
    } catch (e) {
      showToast('复制失败', 'error');
    }
  }

  // ==================== 交互追踪 ====================
  // 所有 API 调用统一经由此函数包装：
  //   debug  模式：成功 → 交互详情弹窗 3s 自动关闭
  //   normal 模式：options.mode === 'view' → Toast；其余 → 弹窗 2s 关闭
  //   失败/异常：弹窗停留（中断自动关闭），便于排障
  //   options.silent：高频后台同步（执行器逐步 sync）静默记录，不打扰前台
  let lastInteractionLog = null;

  async function runTrackedInteraction(label, fn, options) {
    const opts = options || {};
    const startedAt = Date.now();
    let res = null;
    let thrown = null;
    try {
      res = await fn();
    } catch (e) {
      thrown = e;
    }
    const detail = {
      label: label,
      time: formatDateTime(new Date(startedAt).toISOString()),
      method: (res && res.method) || '—',
      url: (res && res.url) || '—',
      requestBody: res ? res.requestBody : null,
      responseBody: res ? res.responseBody : null,
      duration: (res && typeof res.duration === 'number') ? res.duration : (Date.now() - startedAt),
      status: (res && res.status) || 0,
      error: thrown ? String((thrown && thrown.message) || thrown) : (res && res.ok ? '' : ((res && res.error) || '未知错误')),
      success: !thrown && !!(res && res.ok)
    };
    lastInteractionLog = detail;

    if (opts.silent) {
      // 高频后台同步：仅记录日志，不弹窗、不 Toast
      console.log('[interaction:silent]', detail);
    } else if (!detail.success) {
      showInteractionDialog(detail, 0); // 异常：停留弹窗，中断自动关闭
    } else if (getUiMode() === 'debug') {
      showInteractionDialog(detail, 3000);
    } else if (opts.mode === 'view') {
      showToast(label + '成功', 'success', 2000);
    } else {
      showInteractionDialog(detail, 2000);
    }

    if (thrown) {
      return {
        ok: false, data: null, error: detail.error, status: 0,
        duration: detail.duration, url: detail.url, method: detail.method,
        requestBody: null, responseBody: null
      };
    }
    return res;
  }

  // ==================== 按钮 Loading ====================
  // 异步操作期间：disabled + 文字切换（如"保存中…"），完成后恢复

  function getButtonTextEl(btn) {
    if (!btn) return null;
    return btn.querySelector('.btn-text') || btn.querySelector('span') || btn;
  }

  function setButtonLoading(btn, loadingText) {
    if (!btn) return;
    const textEl = getButtonTextEl(btn);
    if (textEl.dataset.originalText === undefined) {
      textEl.dataset.originalText = textEl.textContent;
    }
    btn.disabled = true;
    btn.classList.add('btn-loading');
    if (loadingText) textEl.textContent = loadingText;
  }

  function resetButton(btn, originalText) {
    if (!btn) return;
    const textEl = getButtonTextEl(btn);
    btn.disabled = false;
    btn.classList.remove('btn-loading');
    const restore = (originalText !== undefined) ? originalText : textEl.dataset.originalText;
    if (restore !== undefined) textEl.textContent = restore;
    delete textEl.dataset.originalText;
  }

  // ==================== 页面路由 ====================
  let currentView = 'hub';   // 'hub' | 'motion'
  let currentTab = 'cards';  // 'cards' | 'history'

  function showView(viewName) {
    currentView = viewName;
    document.getElementById('viewHub').style.display = (viewName === 'hub') ? '' : 'none';
    document.getElementById('viewMotion').style.display = (viewName === 'motion') ? '' : 'none';
  }

  function switchTab(tabName) {
    currentTab = tabName;
    document.querySelectorAll('.tab-item').forEach(function (el) {
      el.classList.toggle('active', el.dataset.tab === tabName);
    });
    document.getElementById('pageCards').style.display = (tabName === 'cards') ? '' : 'none';
    document.getElementById('pageHistory').style.display = (tabName === 'history') ? '' : 'none';
    if (tabName === 'cards') {
      loadCards();
    } else {
      loadHistory();
    }
  }

  // ==================== Hub 逻辑 ====================
  let appMeta = null;
  let appState = null;
  let cardsCache = [];

  /** 静默刷新服务端全局状态（activeKit / runningSession） */
  async function refreshState(silent) {
    const res = await runTrackedInteraction('刷新全局状态', function () {
      return apiFetch('GET', '/api/app_order_box/state');
    }, { mode: 'view', silent: silent !== false });
    if (res && res.ok) appState = res.data;
    return appState;
  }

  async function initHub() {
    const metaRes = await runTrackedInteraction('获取应用元信息', function () {
      return apiFetch('GET', '/api/app_order_box/meta');
    }, { mode: 'view' });
    if (!metaRes.ok) {
      showAlert('初始化失败', escHtml(metaRes.error || '无法获取应用元信息，请刷新重试'));
      return;
    }
    appMeta = metaRes.data;

    const stateRes = await runTrackedInteraction('获取全局状态', function () {
      return apiFetch('GET', '/api/app_order_box/state');
    }, { mode: 'view' });
    if (!stateRes.ok) {
      showAlert('初始化失败', escHtml(stateRes.error || '无法获取全局状态，请刷新重试'));
      return;
    }
    appState = stateRes.data;

    const enterBtn = document.getElementById('btnEnterMotion');
    enterBtn.disabled = false;

    // activeKit 已指向运动提醒宝：跳过 Hub 直接进入
    if (appState && appState.activeKit === 'motion_reminder') {
      showView('motion');
      switchTab('cards');
    }
  }

  async function handleEnterMotion() {
    const btn = document.getElementById('btnEnterMotion');
    setButtonLoading(btn, '进入中…');
    const res = await runTrackedInteraction('设置激活 kit（motion_reminder）', function () {
      return apiFetch('PUT', '/api/app_order_box/state/active-kit', { kitId: 'motion_reminder' });
    });
    if (!res.ok) {
      resetButton(btn);
      showAlert('进入失败', escHtml(res.error || '请稍后重试'));
      return;
    }
    resetButton(btn);
    await refreshState(true);
    showView('motion');
    switchTab('cards');
  }

  async function handleBackHub() {
    await runTrackedInteraction('返回框子（清除激活 kit）', function () {
      return apiFetch('PUT', '/api/app_order_box/state/active-kit', { kitId: '' });
    }, { mode: 'view' });
    showView('hub');
    await refreshState(true);
  }

  // ==================== Tab 切换 ====================
  // （switchTab 已在"页面路由"分区实现，此处负责静态事件绑定的入口见 init）

  // ==================== 卡片列表 ====================

  function updateStaleWarning() {
    const el = document.getElementById('staleWarning');
    if (!el) return;
    const show = !!(appState && appState.runningSession && !runnerState);
    el.style.display = show ? '' : 'none';
  }

  function renderCards() {
    const listEl = document.getElementById('cardsList');
    const emptyEl = document.getElementById('cardsEmpty');
    if (!cardsCache.length) {
      listEl.innerHTML = '';
      listEl.style.display = 'none';
      emptyEl.style.display = '';
      return;
    }
    emptyEl.style.display = 'none';
    listEl.style.display = '';
    listEl.innerHTML = cardsCache.map(function (card) {
      const steps = Array.isArray(card.steps) ? card.steps : [];
      const previews = steps.slice(0, 4).map(function (s, i) {
        return '<div class="step-preview-line">' + (i + 1) + '. ' + escHtml(s.name) + ' · ' + formatDuration(Number(s.durationSec) || 0) + '</div>';
      }).join('');
      const more = steps.length > 4
        ? '<div class="step-preview-more">还有 ' + (steps.length - 4) + ' 个步骤…</div>'
        : '';
      const perRound = steps.reduce(function (sum, s) { return sum + Math.max(1, Number(s.durationSec) || 0); }, 0);
      return '' +
        '<div class="card-item" data-id="' + escHtml(card.id) + '">' +
          '<div class="card-item-header">' +
            '<div class="card-title">' + escHtml(card.title) + '</div>' +
            '<div class="card-meta">' + escHtml(formatLoopText(card.loopMode, card.loopCount)) + '</div>' +
          '</div>' +
          '<div class="card-sub">' + steps.length + ' 个步骤 · 单轮 ' + formatDurationLong(perRound) + '</div>' +
          '<div class="step-preview">' + previews + more + '</div>' +
          '<div class="card-actions">' +
            '<button type="button" class="btn-card-primary btn-start-card">' +
              '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>' +
              '<span class="btn-text">启动</span>' +
            '</button>' +
            '<button type="button" class="btn-card-ghost btn-edit-card"><span class="btn-text">编辑</span></button>' +
            '<button type="button" class="btn-card-ghost btn-delete-card"><span class="btn-text btn-text-danger">删除</span></button>' +
          '</div>' +
        '</div>';
    }).join('');
  }

  async function loadCards() {
    const listEl = document.getElementById('cardsList');
    const emptyEl = document.getElementById('cardsEmpty');
    const loadingEl = document.getElementById('cardsLoading');
    loadingEl.style.display = '';
    listEl.style.display = 'none';
    listEl.innerHTML = '';
    emptyEl.style.display = 'none';

    const res = await runTrackedInteraction('加载卡片列表', function () {
      return apiFetch('GET', '/api/app_order_box/kits/motion_reminder/cards');
    }, { mode: 'view' });

    loadingEl.style.display = 'none';
    if (!res.ok) {
      showAlert('加载失败', escHtml(res.error || '卡片列表加载失败'));
      return;
    }
    cardsCache = Array.isArray(res.data) ? res.data : [];
    renderCards();
    updateStaleWarning();
  }

  // ---- 卡片操作（事件委托） ----

  function handleCardsListClick(e) {
    const btn = e.target.closest ? e.target.closest('button') : null;
    if (!btn) return;
    const item = btn.closest('.card-item');
    if (!item) return;
    const card = cardsCache.find(function (c) { return c.id === item.dataset.id; });
    if (!card) return;
    if (btn.classList.contains('btn-start-card')) handleStartCard(card, btn);
    else if (btn.classList.contains('btn-edit-card')) openEditor(card);
    else if (btn.classList.contains('btn-delete-card')) handleDeleteCard(card);
  }

  function handleDeleteCard(card) {
    showConfirm('确认删除', '确定删除「' + escHtml(card.title) + '」吗？<br>删除后不可恢复。', async function (confirmBtn) {
      setButtonLoading(confirmBtn, '删除中…');
      const res = await runTrackedInteraction('删除卡片', function () {
        return apiFetch('DELETE', '/api/app_order_box/kits/motion_reminder/cards?id=' + encodeURIComponent(card.id));
      });
      closeDialog();
      if (!res.ok) {
        resetButton(confirmBtn);
        return; // 失败详情已由交互弹窗停留展示
      }
      await loadCards();
    });
  }

  async function handleStartCard(card, btn) {
    if (!Array.isArray(card.steps) || !card.steps.length) {
      showAlert('无法启动', '当前卡片没有可执行步骤');
      return;
    }
    if (appState && appState.runningSession) {
      showAlert('无法启动', '服务端存在运行中的 session，请先清理占用或等待其结束。');
      updateStaleWarning();
      return;
    }
    setButtonLoading(btn, '启动中…');
    const res = await runTrackedInteraction('启动执行会话', function () {
      return apiFetch('POST', '/api/app_order_box/kits/motion_reminder/sessions/start', { card: card });
    });
    if (!res.ok) {
      resetButton(btn);
      if (res.status === 409) {
        showToast('已有运行中的会话，请先清理占用', 'error');
        await refreshState(true);
        updateStaleWarning();
      }
      return;
    }
    resetButton(btn);
    const session = res.data;
    await refreshState(true);
    updateStaleWarning();
    openRunner(session, (session && session.cardSnapshot) || card);
  }

  async function handleCleanStale() {
    const btn = document.getElementById('btnCleanStale');
    setButtonLoading(btn, '清理中…');
    const res = await runTrackedInteraction('清理残留 session', function () {
      return apiFetch('POST', '/api/app_order_box/state/reset-running');
    });
    resetButton(btn);
    if (!res.ok) return;
    await refreshState(true);
    updateStaleWarning();
  }

  // ==================== 卡片编辑器 ====================
  let editorOpen = false;
  let editorDraft = null;
  let editorDragIndex = null;

  function createDefaultStep(type) {
    const isRest = type === 'rest';
    return {
      id: generateId(),
      type: isRest ? 'rest' : 'action',
      name: isRest ? '休息' : '',
      durationSec: isRest ? 30 : 60,
      voiceText: ''
    };
  }

  /** 默认草稿：1 个动作(60s) + 1 个休息(30s)，循环 3 次 */
  function createDraftCard() {
    return {
      id: '',
      title: '',
      steps: [createDefaultStep('action'), createDefaultStep('rest')],
      loopMode: 'repeat_count',
      loopCount: 3
    };
  }

  function openEditor(card) {
    if (card) {
      editorDraft = {
        id: card.id || '',
        title: card.title || '',
        steps: (Array.isArray(card.steps) ? card.steps : []).map(function (s) {
          return {
            id: s.id || generateId(),
            type: s.type === 'rest' ? 'rest' : 'action',
            name: s.name || '',
            durationSec: Number(s.durationSec) || 0,
            voiceText: s.voiceText || ''
          };
        }),
        loopMode: ['once', 'repeat_count', 'repeat_forever'].indexOf(card.loopMode) >= 0 ? card.loopMode : 'once',
        loopCount: card.loopCount === null || card.loopCount === undefined ? 3 : Number(card.loopCount)
      };
      if (!editorDraft.steps.length) editorDraft.steps = [createDefaultStep('action')];
    } else {
      editorDraft = createDraftCard();
    }
    document.getElementById('editorTitle').textContent = card ? '编辑流程卡片' : '新建流程卡片';
    renderEditor();
    document.getElementById('editorModal').style.display = 'flex';
    editorOpen = true;
  }

  function closeEditor() {
    document.getElementById('editorModal').style.display = 'none';
    editorOpen = false;
    editorDraft = null;
    editorDragIndex = null;
  }

  function editorTotalDuration() {
    return editorDraft.steps.reduce(function (sum, s) { return sum + Math.max(1, Number(s.durationSec) || 0); }, 0);
  }

  function updateEditorStats() {
    if (!editorDraft) return;
    const total = editorTotalDuration();
    const previewEl = document.getElementById('editorTotalPreview');
    if (previewEl) {
      previewEl.innerHTML =
        '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><polyline points="12 7 12 12 15 15"/></svg>' +
        '<span>总时长：' + formatDurationLong(total) + '</span>';
    }
    const perRoundEl = document.getElementById('editorPerRound');
    if (perRoundEl) perRoundEl.textContent = formatDurationLong(total);
    const globalEl = document.getElementById('editorGlobal');
    if (globalEl) {
      if (editorDraft.loopMode === 'repeat_forever') {
        globalEl.textContent = '无限循环（单轮 ' + formatDurationLong(total) + '）';
      } else if (editorDraft.loopMode === 'repeat_count') {
        const loops = Math.max(1, Number(editorDraft.loopCount || 1));
        globalEl.textContent = formatDurationLong(total * loops);
      } else {
        globalEl.textContent = formatDurationLong(total);
      }
    }
  }

  function renderStepEditor(step, index, total) {
    const isAction = step.type !== 'rest';
    const canRemove = total > 1;
    return '' +
      '<div class="step-editor ' + (isAction ? 'step-action' : 'step-rest') + '" data-step-id="' + escHtml(step.id) + '">' +
        '<div class="step-editor-header">' +
          '<div class="step-title-row">' +
            '<span class="step-badge">' + (isAction ? '动作' : '休息') + '</span>' +
            '<span class="step-index">步骤 ' + (index + 1) + '</span>' +
          '</div>' +
          '<div class="step-actions">' +
            '<button type="button" class="btn-step-icon btn-step-copy" title="复制步骤">' +
              '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>' +
            '</button>' +
            '<button type="button" class="btn-step-icon btn-step-remove' + (canRemove ? '' : ' disabled') + '" title="删除步骤"' + (canRemove ? '' : ' disabled') + '>' +
              '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>' +
            '</button>' +
            '<span class="step-drag-handle" title="拖拽排序">' +
              '<svg viewBox="0 0 24 24" fill="currentColor"><circle cx="9" cy="6" r="1.6"/><circle cx="15" cy="6" r="1.6"/><circle cx="9" cy="12" r="1.6"/><circle cx="15" cy="12" r="1.6"/><circle cx="9" cy="18" r="1.6"/><circle cx="15" cy="18" r="1.6"/></svg>' +
            '</span>' +
          '</div>' +
        '</div>' +
        '<input class="editor-input step-name-input" type="text" placeholder="' + (isAction ? '例如：俯卧撑' : '例如：休息') + '" value="' + escHtml(step.name) + '">' +
        '<input class="editor-input step-duration-input" type="text" inputmode="numeric" placeholder="时长（秒）" value="' + escHtml(String(step.durationSec || '')) + '">' +
        '<div class="step-duration-hint">时长：' + formatDurationLong(Number(step.durationSec) || 0) + '</div>' +
      '</div>';
  }

  function renderEditor() {
    if (!editorDraft) return;
    const d = editorDraft;
    const body = document.getElementById('editorBody');
    const segments = [
      { label: '单次', value: 'once' },
      { label: 'N 次', value: 'repeat_count' },
      { label: '无限', value: 'repeat_forever' }
    ];
    const stepsHtml = d.steps.map(function (step, index) {
      return renderStepEditor(step, index, d.steps.length);
    }).join('');

    body.innerHTML = '' +
      '<div class="editor-field">' +
        '<label class="editor-label" for="editorCardTitle">卡片名称</label>' +
        '<input id="editorCardTitle" class="editor-input" type="text" placeholder="例如：晨练循环" value="' + escHtml(d.title) + '">' +
      '</div>' +
      '<div class="editor-field">' +
        '<label class="editor-label">循环方式</label>' +
        '<div class="segment-row">' +
          segments.map(function (s) {
            return '<button type="button" class="segment-btn' + (d.loopMode === s.value ? ' active' : '') + '" data-loop="' + s.value + '">' + s.label + '</button>';
          }).join('') +
        '</div>' +
      '</div>' +
      (d.loopMode === 'repeat_count' ? (
        '<div class="editor-field">' +
          '<label class="editor-label" for="editorLoopCount">循环次数</label>' +
          '<input id="editorLoopCount" class="editor-input" type="text" inputmode="numeric" placeholder="输入循环次数" value="' + escHtml(String(d.loopCount || '')) + '">' +
        '</div>'
      ) : '') +
      '<div class="editor-steps-header">' +
        '<span class="editor-section-title">流程步骤</span>' +
        '<div class="editor-steps-buttons">' +
          '<button type="button" class="btn-small" id="btnAddAction">+ 加动作</button>' +
          '<button type="button" class="btn-small" id="btnAddRest">+ 加休息</button>' +
        '</div>' +
      '</div>' +
      '<div class="editor-total-duration" id="editorTotalPreview"></div>' +
      '<div class="editor-steps-list" id="editorStepsList">' + stepsHtml + '</div>' +
      '<div class="editor-duration-info">' +
        '<div class="duration-info-row"><span class="duration-info-label">单轮时长</span><span class="duration-info-value" id="editorPerRound"></span></div>' +
        '<div class="duration-info-row"><span class="duration-info-label">全局总时长</span><span class="duration-info-value duration-info-highlight" id="editorGlobal"></span></div>' +
      '</div>' +
      '<div class="editor-footer">' +
        '<button type="button" class="btn-primary btn-editor-save" id="btnEditorSave"><span class="btn-text">保存</span></button>' +
      '</div>';

    bindEditorEvents();
    updateEditorStats();
  }

  function bindEditorEvents() {
    const body = document.getElementById('editorBody');

    const titleInput = document.getElementById('editorCardTitle');
    titleInput.addEventListener('input', function () { editorDraft.title = titleInput.value; });

    body.querySelectorAll('.segment-btn').forEach(function (btn) {
      btn.addEventListener('click', function () {
        if (editorDraft.loopMode === btn.dataset.loop) return;
        editorDraft.loopMode = btn.dataset.loop;
        renderEditor();
      });
    });

    const loopCountInput = document.getElementById('editorLoopCount');
    if (loopCountInput) {
      loopCountInput.addEventListener('input', function () {
        const digits = loopCountInput.value.replace(/[^0-9]/g, '');
        if (digits !== loopCountInput.value) loopCountInput.value = digits;
        editorDraft.loopCount = digits === '' ? 0 : parseInt(digits, 10);
        updateEditorStats();
      });
    }

    document.getElementById('btnAddAction').addEventListener('click', function () {
      editorDraft.steps.push(createDefaultStep('action'));
      renderEditor();
    });
    document.getElementById('btnAddRest').addEventListener('click', function () {
      editorDraft.steps.push(createDefaultStep('rest'));
      renderEditor();
    });
    document.getElementById('btnEditorSave').addEventListener('click', handleEditorSave);

    body.querySelectorAll('.step-editor').forEach(function (stepEl) {
      const stepId = stepEl.dataset.stepId;
      const step = editorDraft.steps.find(function (s) { return s.id === stepId; });
      if (!step) return;
      const index = editorDraft.steps.indexOf(step);

      const nameInput = stepEl.querySelector('.step-name-input');
      nameInput.addEventListener('input', function () { step.name = nameInput.value; });

      const durationInput = stepEl.querySelector('.step-duration-input');
      durationInput.addEventListener('input', function () {
        const digits = durationInput.value.replace(/[^0-9]/g, '');
        if (digits !== durationInput.value) durationInput.value = digits;
        step.durationSec = digits === '' ? 0 : parseInt(digits, 10);
        const hintEl = stepEl.querySelector('.step-duration-hint');
        if (hintEl) hintEl.textContent = '时长：' + formatDurationLong(step.durationSec);
        updateEditorStats();
      });

      stepEl.querySelector('.btn-step-copy').addEventListener('click', function () {
        const idx = editorDraft.steps.findIndex(function (s) { return s.id === stepId; });
        if (idx < 0) return;
        const src = editorDraft.steps[idx];
        editorDraft.steps.splice(idx + 1, 0, {
          id: generateId(),
          type: src.type,
          name: (src.name || '') + ' (副本)',
          durationSec: src.durationSec,
          voiceText: src.voiceText || ''
        });
        renderEditor();
      });

      stepEl.querySelector('.btn-step-remove').addEventListener('click', function () {
        if (editorDraft.steps.length <= 1) return;
        editorDraft.steps = editorDraft.steps.filter(function (s) { return s.id !== stepId; });
        renderEditor();
      });

      bindStepDrag(stepEl, index);
    });
  }

  // ---- HTML5 拖拽排序：仅拖拽手柄可发起拖放 ----
  function bindStepDrag(stepEl, index) {
    const handle = stepEl.querySelector('.step-drag-handle');

    handle.addEventListener('mousedown', function () { stepEl.draggable = true; });
    handle.addEventListener('mouseup', function () { stepEl.draggable = false; });

    stepEl.addEventListener('dragstart', function (e) {
      editorDragIndex = index;
      e.dataTransfer.effectAllowed = 'move';
      try { e.dataTransfer.setData('text/plain', String(index)); } catch (err) { /* 兼容旧内核 */ }
      requestAnimationFrame(function () { stepEl.classList.add('step-dragging'); });
    });

    stepEl.addEventListener('dragend', function () {
      stepEl.draggable = false;
      editorDragIndex = null;
      document.querySelectorAll('.step-editor').forEach(function (el) {
        el.classList.remove('step-dragging', 'step-drag-over', 'drag-over-before', 'drag-over-after');
      });
    });

    stepEl.addEventListener('dragover', function (e) {
      if (editorDragIndex === null || editorDragIndex === index) return;
      e.preventDefault();
      e.dataTransfer.dropEffect = 'move';
      const rect = stepEl.getBoundingClientRect();
      const before = (e.clientY - rect.top) < rect.height / 2;
      stepEl.classList.add('step-drag-over');
      stepEl.classList.toggle('drag-over-before', before);
      stepEl.classList.toggle('drag-over-after', !before);
    });

    stepEl.addEventListener('dragleave', function () {
      stepEl.classList.remove('step-drag-over', 'drag-over-before', 'drag-over-after');
    });

    stepEl.addEventListener('drop', function (e) {
      e.preventDefault();
      const from = editorDragIndex;
      stepEl.classList.remove('step-drag-over', 'drag-over-before', 'drag-over-after');
      if (from === null || from === index) return;
      const rect = stepEl.getBoundingClientRect();
      const before = (e.clientY - rect.top) < rect.height / 2;
      let to = before ? index : index + 1;
      if (from < to) to -= 1;
      if (to === from) return;
      const moved = editorDraft.steps.splice(from, 1)[0];
      editorDraft.steps.splice(to, 0, moved);
      editorDragIndex = null;
      renderEditor();
    });
  }

  async function handleEditorSave() {
    if (!editorDraft) return;
    const saveBtn = document.getElementById('btnEditorSave');

    // 保存校验
    const title = String(editorDraft.title || '').trim();
    if (!title) {
      showAlert('无法保存', '请输入卡片名称');
      return;
    }
    const invalidSteps = editorDraft.steps.filter(function (s) {
      return !(Number(s.durationSec) > 0);
    });
    if (invalidSteps.length) {
      showAlert('无法保存', invalidSteps.length + ' 个步骤的时长无效，请输入大于 0 的数字');
      return;
    }
    // 保存前清洗：trim 名称、durationSec 取 floor 最小 1、过滤空名称步骤
    const cleanSteps = editorDraft.steps
      .map(function (s) {
        return {
          id: s.id,
          type: s.type === 'rest' ? 'rest' : 'action',
          name: String(s.name || '').trim(),
          durationSec: Math.max(1, Math.floor(Number(s.durationSec) || 0)),
          voiceText: String(s.voiceText || '').trim()
        };
      })
      .filter(function (s) { return s.name !== ''; });
    if (!cleanSteps.length) {
      showAlert('无法保存', '至少保留一个有效步骤（步骤名称不能为空）');
      return;
    }
    let loopCount = null;
    if (editorDraft.loopMode === 'repeat_count') {
      loopCount = Math.floor(Number(editorDraft.loopCount || 0));
      if (loopCount < 1) {
        showAlert('无法保存', '循环次数至少为 1');
        return;
      }
    }

    const isEdit = !!editorDraft.id;
    const payload = {
      title: title,
      steps: cleanSteps,
      loopMode: editorDraft.loopMode,
      loopCount: loopCount
    };
    if (isEdit) payload.id = editorDraft.id;

    setButtonLoading(saveBtn, '保存中…');
    const res = await runTrackedInteraction(isEdit ? '更新流程卡片' : '新建流程卡片', function () {
      return apiFetch(isEdit ? 'PUT' : 'POST', '/api/app_order_box/kits/motion_reminder/cards', payload);
    });
    if (!res.ok) {
      resetButton(saveBtn);
      return; // 失败详情已由交互弹窗停留展示
    }
    resetButton(saveBtn);
    closeEditor();
    await loadCards();
  }

  // ==================== 执行器 ====================
  let runnerState = null;
  let runnerTimerId = null;
  let runnerAnnounceKey = '';
  let runnerFinishing = false;

  function perRoundSec(card) {
    return ((card && card.steps) || []).reduce(function (sum, s) {
      return sum + Math.max(1, Number(s.durationSec) || 0);
    }, 0);
  }

  function runnerTotalLoops() {
    if (!runnerState) return null;
    return runnerState.card.loopMode === 'repeat_count'
      ? Math.max(1, Number(runnerState.card.loopCount || 1))
      : null;
  }

  /** 预计剩余总秒数：当前步骤剩余 + 本轮剩余步骤 + 剩余整轮 */
  function computeRemainingSec(rs) {
    const steps = rs.card.steps;
    let total = Math.max(0, Number(rs.remainingSec) || 0);
    for (let i = rs.currentStepIndex + 1; i < steps.length; i++) {
      total += Math.max(1, Number(steps[i].durationSec) || 0);
    }
    const totalLoops = rs.card.loopMode === 'repeat_count'
      ? Math.max(1, Number(rs.card.loopCount || 1))
      : null;
    if (totalLoops !== null) {
      const roundsLeft = Math.max(0, totalLoops - rs.currentLoop);
      total += roundsLeft * perRoundSec(rs.card);
    }
    return total;
  }

  function openRunner(session, card) {
    const steps = (card && Array.isArray(card.steps)) ? card.steps : [];
    if (!steps.length) {
      showAlert('无法启动', '当前卡片没有可执行步骤');
      return;
    }
    const startIndex = Math.min(Math.max(0, Number(session.currentStepIndex) || 0), steps.length - 1);
    runnerState = {
      sessionId: session.id,
      card: card,
      status: 'running',
      currentLoop: Math.max(1, Number(session.currentLoop) || 1),
      completedLoops: Math.max(0, Number(session.completedLoops) || 0),
      currentStepIndex: startIndex,
      remainingSec: Math.max(1, Number(steps[startIndex].durationSec) || 1),
      manualStopped: false
    };
    runnerAnnounceKey = '';
    runnerFinishing = false;
    document.getElementById('runnerModal').style.display = 'flex';
    requestWakeLock();
    onRunnerStepChanged(true);
    startRunnerTimer();
  }

  function closeRunner() {
    stopRunnerTimer();
    runnerState = null;
    runnerAnnounceKey = '';
    stopSpeech();
    releaseWakeLock();
    document.getElementById('runnerModal').style.display = 'none';
  }

  function startRunnerTimer() {
    stopRunnerTimer();
    runnerTimerId = setInterval(runnerTick, 1000);
  }

  function stopRunnerTimer() {
    if (runnerTimerId) {
      clearInterval(runnerTimerId);
      runnerTimerId = null;
    }
  }

  /** 每秒递减；5/3 秒播报；到 0 自动切下一步 */
  function runnerTick() {
    if (!runnerState || runnerState.status !== 'running' || runnerFinishing) return;
    const step = runnerState.card.steps[runnerState.currentStepIndex];
    const pitch = (step && step.type === 'action') ? 1.1 : 0.9;
    if (runnerState.remainingSec === 5 || runnerState.remainingSec === 3) {
      speakText('还有 ' + runnerState.remainingSec + ' 秒', pitch);
    }
    if (runnerState.remainingSec <= 1) {
      advanceStep();
      return;
    }
    runnerState.remainingSec -= 1;
    updateRunnerDynamic();
  }

  /** 步骤推进：非末步→下一步；末步→下一轮或完成 */
  function advanceStep() {
    if (!runnerState || runnerFinishing) return;
    const steps = runnerState.card.steps;
    const isLastStep = runnerState.currentStepIndex >= steps.length - 1;

    if (!isLastStep) {
      runnerState.currentStepIndex += 1;
      runnerState.remainingSec = Math.max(1, Number(steps[runnerState.currentStepIndex].durationSec) || 1);
      onRunnerStepChanged(false);
      return;
    }

    const nextCompletedLoops = runnerState.completedLoops + 1;
    const totalLoops = runnerTotalLoops();
    if (runnerState.card.loopMode === 'once' || (totalLoops !== null && nextCompletedLoops >= totalLoops)) {
      void finishRunner('completed', false);
      return;
    }

    runnerState.completedLoops = nextCompletedLoops;
    runnerState.currentLoop += 1;
    runnerState.currentStepIndex = 0;
    runnerState.remainingSec = Math.max(1, Number(steps[0].durationSec) || 1);
    onRunnerStepChanged(false);
  }

  /** 步骤切换统一入口：渲染 + 播报 + 提示音 + 振动 + 服务端同步 */
  function onRunnerStepChanged(isFirst) {
    renderRunner();
    updateRunnerDynamic();
    announceStep();
    playBeep();
    vibrate([50]);
    if (!isFirst) syncRunnerSilent();
  }

  /** 静默同步进度到服务端（高频调用，不弹窗） */
  function syncRunnerSilent() {
    if (!runnerState) return Promise.resolve(null);
    const rs = runnerState;
    return runTrackedInteraction('同步执行进度', function () {
      return apiFetch('POST', '/api/app_order_box/kits/motion_reminder/sessions/sync', {
        id: rs.sessionId,
        status: rs.status,
        currentLoop: rs.currentLoop,
        completedLoops: rs.completedLoops,
        currentStepIndex: rs.currentStepIndex,
        manualStopped: rs.manualStopped
      });
    }, { silent: true });
  }

  async function finishRunner(status, manualStopped) {
    if (!runnerState || runnerFinishing) return;
    runnerFinishing = true;
    const rs = runnerState;
    stopRunnerTimer();
    const body = {
      id: rs.sessionId,
      status: status,
      currentLoop: rs.currentLoop,
      completedLoops: rs.completedLoops,
      currentStepIndex: rs.currentStepIndex,
      manualStopped: !!manualStopped
    };
    const res = await runTrackedInteraction(
      status === 'completed' ? '会话正常完成' : '手动结束会话',
      function () {
        return apiFetch('POST', '/api/app_order_box/kits/motion_reminder/sessions/finish', body);
      }
    );
    closeRunner();
    runnerFinishing = false;
    if (res.ok) {
      showToast(status === 'completed' ? '流程已完成' : '已提前结束', 'success');
    }
    await refreshState(true);
    updateStaleWarning();
    if (currentView === 'motion' && currentTab === 'cards') {
      await loadCards();
    }
  }

  // ---- 执行器控制按钮 ----

  async function handleRunnerPause() {
    if (!runnerState || runnerFinishing) return;
    vibrate([50]);
    const pausing = runnerState.status === 'running';
    runnerState.status = pausing ? 'paused' : 'running';
    const container = document.getElementById('runnerContainer');
    container.classList.toggle('is-paused', runnerState.status === 'paused');
    const btn = document.getElementById('btnRunnerPause');
    if (btn) {
      const textEl = getButtonTextEl(btn);
      textEl.textContent = runnerState.status === 'paused' ? '继续' : '暂停';
    }
    if (runnerState.status === 'paused') {
      stopSpeech();
    }
    await syncRunnerSilent();
  }

  function handleRunnerSkip() {
    if (!runnerState || runnerFinishing) return;
    vibrate([50]);
    advanceStep();
  }

  function handleRunnerStop() {
    if (!runnerState || runnerFinishing) return;
    vibrate([30]);
    showConfirm('结束执行', '确定提前结束本次执行吗？这会记录为手动提前结束。', async function () {
      closeDialog();
      await finishRunner('stopped', true);
    });
  }

  // ---- 执行器渲染 ----

  function renderRunner() {
    const rs = runnerState;
    if (!rs) return;
    const container = document.getElementById('runnerContainer');
    const step = rs.card.steps[rs.currentStepIndex] || {};
    const nextStep = rs.card.steps[rs.currentStepIndex + 1] || null;
    const isAction = step.type !== 'rest';
    const totalSteps = rs.card.steps.length;
    const totalLoops = runnerTotalLoops();
    const globalDurationSec = totalLoops !== null ? perRoundSec(rs.card) * totalLoops : null;

    container.innerHTML = '' +
      '<div class="runner-header">' +
        '<span class="runner-badge ' + (isAction ? 'badge-action' : 'badge-rest') + '">' + (isAction ? '动作' : '休息') + '</span>' +
        '<div class="runner-title">' + escHtml(rs.card.title) + '</div>' +
        '<div class="runner-loop-text">第 ' + rs.currentLoop + ' 轮 ' + (totalLoops ? '/ 共 ' + totalLoops + ' 轮' : '/ 无限循环') + ' · 步骤 ' + (rs.currentStepIndex + 1) + ' / ' + totalSteps + '</div>' +
      '</div>' +
      '<div class="runner-progress"><div class="runner-progress-bar" id="runnerStepBar"></div></div>' +
      '<div class="runner-main">' +
        '<div class="runner-label">当前动作</div>' +
        '<div class="runner-current ' + (isAction ? 'current-action' : 'current-rest') + '">' + escHtml(step.name || '—') + '</div>' +
        '<div class="runner-timer" id="runnerTimer">--:--</div>' +
        '<div class="runner-next-card">' +
          '<div class="runner-label">下一个动作</div>' +
          '<div class="runner-next">' + (nextStep ? escHtml(nextStep.name) : '本轮结束') + '</div>' +
        '</div>' +
      '</div>' +
      '<div class="runner-footer">' +
        '<div class="runner-info-card">' +
          '<div class="runner-info-row"><span class="runner-info-label">已执行</span><span class="runner-info-value">第 ' + rs.currentLoop + ' 轮，步骤 ' + (rs.currentStepIndex + 1) + '/' + totalSteps + '</span></div>' +
          '<div class="runner-info-row"><span class="runner-info-label">预计剩余</span><span class="runner-info-value runner-info-highlight" id="runnerInfoRemaining">—</span></div>' +
          '<div class="runner-info-row"><span class="runner-info-label">全局时长</span><span class="runner-info-value runner-info-highlight">' + (globalDurationSec !== null ? '约 ' + formatDuration(globalDurationSec) : '无限循环') + '</span></div>' +
        '</div>' +
        '<div class="runner-buttons">' +
          '<button type="button" class="runner-btn" id="btnRunnerPause"><span class="btn-text">' + (rs.status === 'paused' ? '继续' : '暂停') + '</span></button>' +
          '<button type="button" class="runner-btn" id="btnRunnerSkip"><span class="btn-text">跳过</span></button>' +
          '<button type="button" class="runner-btn runner-btn-danger" id="btnRunnerStop"><span class="btn-text">结束</span></button>' +
        '</div>' +
        (globalDurationSec !== null && globalDurationSec > 0 ? (
          '<div class="runner-global">' +
            '<div class="runner-global-header"><span class="runner-global-label">执行进度</span><span class="runner-global-percent" id="runnerGlobalPercent">0%</span></div>' +
            '<div class="runner-global-bar-wrap"><div class="runner-global-bar" id="runnerGlobalBar"></div></div>' +
            '<div class="runner-global-stats">' +
              '<span id="runnerGlobalExecuted">已执行 ' + formatDuration(0) + '</span>' +
              '<span class="runner-global-divider">/</span>' +
              '<span>总时长 ' + formatDuration(globalDurationSec) + '</span>' +
              '<span class="runner-global-divider">·</span>' +
              '<span class="runner-global-remaining" id="runnerGlobalRemaining">剩余 ' + formatDuration(0) + '</span>' +
            '</div>' +
          '</div>'
        ) : '') +
      '</div>';

    container.classList.toggle('is-paused', rs.status === 'paused');
    document.getElementById('btnRunnerPause').addEventListener('click', handleRunnerPause);
    document.getElementById('btnRunnerSkip').addEventListener('click', handleRunnerSkip);
    document.getElementById('btnRunnerStop').addEventListener('click', handleRunnerStop);
  }

  /** 每 tick 局部刷新：倒计时、进度条、预计剩余、全局进度 */
  function updateRunnerDynamic() {
    const rs = runnerState;
    if (!rs) return;
    const step = rs.card.steps[rs.currentStepIndex];
    const stepDuration = Math.max(1, Number((step && step.durationSec) || 1));
    const stepProgress = Math.max(0, Math.min(1, 1 - (rs.remainingSec / stepDuration)));

    const timerEl = document.getElementById('runnerTimer');
    if (timerEl) timerEl.textContent = formatDuration(rs.remainingSec);
    const barEl = document.getElementById('runnerStepBar');
    if (barEl) barEl.style.width = (stepProgress * 100).toFixed(2) + '%';

    const remainingSec = computeRemainingSec(rs);
    const remEl = document.getElementById('runnerInfoRemaining');
    if (remEl) remEl.textContent = '约 ' + formatDuration(remainingSec);

    const totalLoops = runnerTotalLoops();
    const globalDurationSec = totalLoops !== null ? perRoundSec(rs.card) * totalLoops : null;
    if (globalDurationSec !== null && globalDurationSec > 0) {
      const executedSec = Math.max(0, globalDurationSec - remainingSec);
      const progress = Math.max(0, Math.min(1, executedSec / globalDurationSec));
      const pctEl = document.getElementById('runnerGlobalPercent');
      if (pctEl) pctEl.textContent = Math.round(progress * 100) + '%';
      const gBarEl = document.getElementById('runnerGlobalBar');
      if (gBarEl) gBarEl.style.width = (progress * 100).toFixed(2) + '%';
      const exEl = document.getElementById('runnerGlobalExecuted');
      if (exEl) exEl.textContent = '已执行 ' + formatDuration(executedSec);
      const reEl = document.getElementById('runnerGlobalRemaining');
      if (reEl) reEl.textContent = '剩余 ' + formatDuration(remainingSec);
    }
  }

  // ==================== 语音播报 ====================
  // Web Speech API：动作 pitch=1.1，休息 pitch=0.9，rate=0.95，lang=zh-CN
  // 去重：同一步骤（sessionId:loop:stepIndex）不重复播报

  function speakText(text, pitch) {
    try {
      if (!('speechSynthesis' in window)) return;
      window.speechSynthesis.cancel();
      const utterance = new SpeechSynthesisUtterance(text);
      utterance.lang = 'zh-CN';
      utterance.pitch = Number(pitch) || 1;
      utterance.rate = 0.95;
      window.speechSynthesis.speak(utterance);
    } catch (e) { /* 不支持时静默 */ }
  }

  function stopSpeech() {
    try {
      if ('speechSynthesis' in window) window.speechSynthesis.cancel();
    } catch (e) { /* 静默 */ }
  }

  /** 步骤切换播报："第N轮，{名称}，{时长}。下一步，{nextName}" */
  function announceStep() {
    if (!runnerState) return;
    const key = runnerState.sessionId + ':' + runnerState.currentLoop + ':' + runnerState.currentStepIndex;
    if (runnerAnnounceKey === key) return; // 去重
    runnerAnnounceKey = key;

    const step = runnerState.card.steps[runnerState.currentStepIndex];
    if (!step) return;
    const nextStep = runnerState.card.steps[runnerState.currentStepIndex + 1] || null;
    const pitch = step.type === 'action' ? 1.1 : 0.9;
    const title = (step.voiceText && String(step.voiceText).trim())
      ? String(step.voiceText).trim()
      : (step.name + '，' + formatSpeechDuration(step.durationSec));
    const nextText = nextStep ? '。下一步，' + nextStep.name : '';
    speakText('第 ' + runnerState.currentLoop + ' 轮，' + title + nextText, pitch);
  }

  // ==================== 提示音 ====================
  // Web Audio API：步骤切换时播放短促蜂鸣（200ms, 880Hz）

  let audioCtx = null;

  function playBeep() {
    try {
      const AudioContextCtor = window.AudioContext || window.webkitAudioContext;
      if (!AudioContextCtor) return;
      if (!audioCtx) audioCtx = new AudioContextCtor();
      if (audioCtx.state === 'suspended') { void audioCtx.resume(); }
      const osc = audioCtx.createOscillator();
      const gain = audioCtx.createGain();
      osc.type = 'sine';
      osc.frequency.value = 880;
      const now = audioCtx.currentTime;
      gain.gain.setValueAtTime(0.0001, now);
      gain.gain.exponentialRampToValueAtTime(0.22, now + 0.02);
      gain.gain.exponentialRampToValueAtTime(0.0001, now + 0.2);
      osc.connect(gain);
      gain.connect(audioCtx.destination);
      osc.start(now);
      osc.stop(now + 0.2);
    } catch (e) { /* 不支持时静默 */ }
  }

  /** 振动反馈（不支持时静默） */
  function vibrate(pattern) {
    try {
      if (navigator.vibrate) navigator.vibrate(pattern);
    } catch (e) { /* 静默 */ }
  }

  // ==================== 屏幕常亮 ====================
  // Wake Lock API：执行期间保持屏幕不灭；页面恢复可见时自动重新申请

  let wakeLockSentinel = null;

  async function requestWakeLock() {
    try {
      if ('wakeLock' in navigator) {
        wakeLockSentinel = await navigator.wakeLock.request('screen');
        wakeLockSentinel.addEventListener('release', function () { wakeLockSentinel = null; });
      }
    } catch (e) { /* 不支持或权限受限时静默 */ }
  }

  function releaseWakeLock() {
    try {
      if (wakeLockSentinel) { void wakeLockSentinel.release(); }
    } catch (e) { /* 静默 */ }
    wakeLockSentinel = null;
  }

  function handleVisibilityChange() {
    if (document.visibilityState === 'visible' && runnerState) {
      requestWakeLock();
    }
  }

  // ==================== 历史列表 ====================

  function renderHistory(list) {
    const listEl = document.getElementById('historyList');
    const emptyEl = document.getElementById('historyEmpty');
    if (!list.length) {
      listEl.innerHTML = '';
      listEl.style.display = 'none';
      emptyEl.style.display = '';
      return;
    }
    emptyEl.style.display = 'none';
    listEl.style.display = '';
    listEl.innerHTML = list.map(function (item) {
      const title = (item.cardSnapshot && item.cardSnapshot.title) || '未知流程';
      const endText = item.manualStopped ? '手动提前结束' : (item.status === 'completed' ? '正常完成' : '停止');
      const badgeClass = item.manualStopped ? 'badge-warning' : (item.status === 'completed' ? 'badge-success' : 'badge-muted');
      return '' +
        '<div class="history-item">' +
          '<div class="history-title">' + escHtml(title) + '</div>' +
          '<div class="history-line">开始：' + formatDateTime(item.startedAt) + '</div>' +
          '<div class="history-line">结束：' + formatDateTime(item.endedAt) + '</div>' +
          '<div class="history-line">完成轮次：' + Math.max(0, Number(item.completedLoops) || 0) + '</div>' +
          '<div class="history-line">结束方式：<span class="history-badge ' + badgeClass + '">' + endText + '</span></div>' +
        '</div>';
    }).join('');
  }

  async function loadHistory() {
    const listEl = document.getElementById('historyList');
    const emptyEl = document.getElementById('historyEmpty');
    const loadingEl = document.getElementById('historyLoading');
    loadingEl.style.display = '';
    listEl.style.display = 'none';
    listEl.innerHTML = '';
    emptyEl.style.display = 'none';

    const res = await runTrackedInteraction('加载执行历史', function () {
      return apiFetch('GET', '/api/app_order_box/kits/motion_reminder/history');
    }, { mode: 'view' });

    loadingEl.style.display = 'none';
    if (!res.ok) {
      showAlert('加载失败', escHtml(res.error || '执行历史加载失败'));
      return;
    }
    renderHistory(Array.isArray(res.data) ? res.data : []);
  }

  // ==================== 初始化 ====================

  /** 键盘快捷键：执行器内 空格=暂停/继续，Esc=结束 */
  function handleGlobalKeydown(e) {
    if (!runnerState) return;
    const tag = String((e.target && e.target.tagName) || '').toLowerCase();
    if (tag === 'input' || tag === 'textarea') return;
    if (e.code === 'Space') {
      e.preventDefault();
      handleRunnerPause();
    } else if (e.key === 'Escape') {
      handleRunnerStop();
    }
  }

  function bindStaticEvents() {
    document.getElementById('btnEnterMotion').addEventListener('click', handleEnterMotion);
    document.getElementById('btnBackHub').addEventListener('click', handleBackHub);
    document.getElementById('btnNewCard').addEventListener('click', function () { openEditor(null); });
    document.getElementById('btnCleanStale').addEventListener('click', handleCleanStale);
    document.getElementById('btnEditorClose').addEventListener('click', closeEditor);
    document.getElementById('btnInteractionCopy').addEventListener('click', handleCopyInteraction);
    document.getElementById('cardsList').addEventListener('click', handleCardsListClick);

    document.querySelectorAll('.tab-item').forEach(function (el) {
      el.addEventListener('click', function () { switchTab(el.dataset.tab); });
    });

    document.addEventListener('keydown', handleGlobalKeydown);
    document.addEventListener('visibilitychange', handleVisibilityChange);
  }

  async function init() {
    bindStaticEvents();
    await initHub();
  }

  document.addEventListener('DOMContentLoaded', init);

  // 调试辅助：控制台查看当前 UI 模式与最近一次交互日志
  window.__orderBox = {
    getUiMode: getUiMode,
    setUiMode: setUiMode,
    get lastInteraction() { return lastInteractionLog; },
    THEME: THEME
  };
})();