(() => {
  "use strict";

  const SAMPLE_QUESTION = "我是否要接受这次工作调整？怎样做能更稳妥？";
  const SAMPLE_LINES = [9, 8, 8, 8, 8, 8];
  const SAMPLE_HISTORY = [
    {
      id: "sample-1",
      date: "今天 · 21:10",
      lines: [9, 8, 8, 8, 8, 8],
      question: SAMPLE_QUESTION,
      explanationSource: "AI 生成",
      action: "写下三条已知事实，再约一次不超过 20 分钟的信息沟通。"
    },
    {
      id: "sample-2",
      date: "昨天 · 07:40",
      lines: [8, 8, 7, 8, 8, 8],
      question: null,
      explanationSource: "本地解读",
      action: null
    },
    {
      id: "sample-3",
      date: "7 月 30 日 · 22:15",
      lines: [7, 7, 8, 8, 7, 6],
      question: "这段合作应该怎样调整边界？",
      explanationSource: null,
      action: "先把需要确认的职责写成一页清单。"
    }
  ];

  const HEXAGRAM_NAMES = [
    "", "乾", "坤", "屯", "蒙", "需", "讼", "师", "比", "小畜", "履", "泰", "否",
    "同人", "大有", "谦", "豫", "随", "蛊", "临", "观", "噬嗑", "贲", "剥", "复",
    "无妄", "大畜", "颐", "大过", "坎", "离", "咸", "恒", "遁", "大壮", "晋",
    "明夷", "家人", "睽", "蹇", "解", "损", "益", "夬", "姤", "萃", "升", "困",
    "井", "革", "鼎", "震", "艮", "渐", "归妹", "丰", "旅", "巽", "兑", "涣",
    "节", "中孚", "小过", "既济", "未济"
  ];

  // 行为下卦、列为上卦；三位编码均按自下而上排列，1 为阳、0 为阴。
  const KING_WEN = {
    "111": { "111": 1, "100": 34, "010": 5, "001": 26, "000": 11, "011": 9, "101": 14, "110": 43 },
    "100": { "111": 25, "100": 51, "010": 3, "001": 27, "000": 24, "011": 42, "101": 21, "110": 17 },
    "010": { "111": 6, "100": 40, "010": 29, "001": 4, "000": 7, "011": 59, "101": 64, "110": 47 },
    "001": { "111": 33, "100": 62, "010": 39, "001": 52, "000": 15, "011": 53, "101": 56, "110": 31 },
    "000": { "111": 12, "100": 16, "010": 8, "001": 23, "000": 2, "011": 20, "101": 35, "110": 45 },
    "011": { "111": 44, "100": 32, "010": 48, "001": 18, "000": 46, "011": 57, "101": 50, "110": 28 },
    "101": { "111": 13, "100": 55, "010": 63, "001": 22, "000": 36, "011": 37, "101": 30, "110": 49 },
    "110": { "111": 10, "100": 54, "010": 60, "001": 41, "000": 19, "011": 61, "101": 38, "110": 58 }
  };

  const icons = {
    lock: '<svg aria-hidden="true" viewBox="0 0 24 24"><rect x="5" y="10" width="14" height="10" rx="2"/><path d="M8.5 10V7.5a3.5 3.5 0 017 0V10"/></svg>',
    arrow: '<svg aria-hidden="true" viewBox="0 0 24 24"><path d="M5 12h14M14 7l5 5-5 5"/></svg>',
    chevron: '<svg aria-hidden="true" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg>',
    shield: '<svg aria-hidden="true" viewBox="0 0 24 24"><path d="M12 3l7 3v5c0 4.7-2.8 8-7 10-4.2-2-7-5.3-7-10V6l7-3z"/><path d="M9.2 12l1.8 1.8 3.9-4"/></svg>',
    book: '<svg aria-hidden="true" viewBox="0 0 24 24"><path d="M4 5.5A2.5 2.5 0 016.5 3H11v16H6.5A2.5 2.5 0 004 21.5v-16zM20 5.5A2.5 2.5 0 0017.5 3H13v16h4.5a2.5 2.5 0 012.5 2.5v-16z"/></svg>'
  };

  const screen = document.querySelector("#screen");
  const modalRoot = document.querySelector("#modal-root");
  const toastRegion = document.querySelector("#toast-region");
  const backButton = document.querySelector("[data-action='back']");

  const state = {
    screen: "welcome",
    question: "",
    lines: [],
    coins: [null, null, null],
    modal: null,
    consent: false,
    explanationSource: "ai",
    aiError: false,
    historyRecords: [],
    selectedRecordId: null,
    autoSaveHistory: true,
    saveQuestion: true,
    saveExplanation: true,
    saveAction: true,
    saved: false,
    currentRecordId: "current-session",
    currentSessionOptedOut: false,
    currentSaveMode: null,
    explanationGenerated: false,
    questionOrigin: "welcome",
    settingsOrigin: "home",
    deleteReturnScreen: "history"
  };

  function sampleHistory() {
    return SAMPLE_HISTORY.map((record) => ({ ...record, lines: [...record.lines] }));
  }

  function escapeHtml(value) {
    return String(value)
      .replaceAll("&", "&amp;")
      .replaceAll("<", "&lt;")
      .replaceAll(">", "&gt;")
      .replaceAll('"', "&quot;")
      .replaceAll("'", "&#039;");
  }

  function lineIsYang(value) {
    return value === 7 || value === 9;
  }

  function lineIsMoving(value) {
    return value === 6 || value === 9;
  }

  function transformLines(lines) {
    return lines.map((value) => {
      if (value === 6) return 7;
      if (value === 9) return 8;
      return value;
    });
  }

  function lookupHexagram(lines) {
    const bits = lines.map((value) => lineIsYang(value) ? "1" : "0");
    const lower = bits.slice(0, 3).join("");
    const upper = bits.slice(3, 6).join("");
    const number = KING_WEN[lower][upper];
    return { number, name: HEXAGRAM_NAMES[number] };
  }

  function lineName(value, index) {
    const position = ["初", "二", "三", "四", "五", "上"][index];
    const polarity = lineIsYang(value) ? "九" : "六";
    if (index === 0) return `${position}${polarity}`;
    if (index === 5) return `${position}${polarity}`;
    return `${polarity}${position}`;
  }

  function resultData() {
    const sourceLines = state.lines.length === 6 ? state.lines : SAMPLE_LINES;
    const changedLines = transformLines(sourceLines);
    return {
      sourceLines,
      changedLines,
      primary: lookupHexagram(sourceLines),
      changed: lookupHexagram(changedLines),
      movingIndexes: sourceLines
        .map((value, index) => lineIsMoving(value) ? index : -1)
        .filter((index) => index >= 0)
    };
  }

  function hasSavableQuestion() {
    return Boolean(state.question && !state.question.startsWith("未记录具体问题"));
  }

  function generatedExplanationSource() {
    if (!state.explanationGenerated || !state.saveExplanation) return null;
    return state.explanationSource === "ai" ? "AI 生成" : "本地解读";
  }

  function currentSessionRecord() {
    return state.historyRecords.find((record) => record.id === state.currentRecordId);
  }

  function persistCurrentSession(mode = "manual") {
    if (state.lines.length !== 6) return;
    const data = resultData();
    const existing = currentSessionRecord();
    const record = {
      id: state.currentRecordId,
      date: "刚刚",
      lines: [...data.sourceLines],
      question: state.saveQuestion && hasSavableQuestion() ? state.question : null,
      explanationSource: generatedExplanationSource(),
      action: state.explanationGenerated && state.saveAction
        ? "写下三条已知事实，再进行一次短沟通。"
        : null
    };

    if (existing) Object.assign(existing, record);
    else state.historyRecords.unshift(record);
    state.saved = true;
    state.currentSessionOptedOut = false;
    state.currentSaveMode = mode;
  }

  function attachExplanationToCurrentSession() {
    const record = currentSessionRecord();
    if (!record || !state.saved) return;
    if (state.saveExplanation) record.explanationSource = generatedExplanationSource();
    if (state.saveAction) {
      record.action = "写下三条已知事实，再进行一次短沟通。";
    }
  }

  function prepareNewSession() {
    state.currentRecordId = `current-session-${Date.now()}-${state.historyRecords.length}`;
    state.saved = false;
    state.currentSessionOptedOut = false;
    state.currentSaveMode = null;
    state.explanationGenerated = false;
    state.aiError = false;
  }

  function stepper(current, total) {
    const progress = Math.round((current / total) * 100);
    return `
      <div class="stepper" aria-label="第 ${current} 步，共 ${total} 步">
        <span>${String(current).padStart(2, "0")}</span>
        <span class="stepper__track" style="--progress:${progress}%"></span>
        <span>${String(total).padStart(2, "0")}</span>
      </div>`;
  }

  function welcomeView() {
    return `
      <section class="page page--welcome" aria-labelledby="welcome-title">
        <div>
          <p class="eyebrow">慢一点，看清当下</p>
          <h1 id="welcome-title">把一个犹豫，安静地放在这里。</h1>
          <p class="lede">用你手中的三枚硬币，依次记录六次结果。这里提供文化文本与反思线索，不替你预测，也不替你决定。</p>

          <div class="hero-mark" aria-hidden="true">
            <span class="hero-mark__dot">观</span>
          </div>

          <ul class="principles" aria-label="产品原则">
            <li>手动记录</li>
            <li>本地成卦</li>
            <li>选择解读</li>
          </ul>
        </div>

        <div class="bottom-action">
          <button class="button button--primary" type="button" data-action="begin">
            写下此刻所问 ${icons.arrow}
          </button>
          <p class="fine-print" style="margin:0;text-align:center">工作名“一问”仅用于本轮视觉评审</p>
        </div>
      </section>`;
  }

  function historyRecordData(record) {
    const changedLines = transformLines(record.lines);
    const movingIndexes = record.lines
      .map((value, index) => lineIsMoving(value) ? index : -1)
      .filter((index) => index >= 0);
    return {
      primary: lookupHexagram(record.lines),
      changed: lookupHexagram(changedLines),
      changedLines,
      movingIndexes
    };
  }

  function recordRoute(record) {
    const data = historyRecordData(record);
    return data.movingIndexes.length
      ? `${data.primary.name} <span>之</span> ${data.changed.name}`
      : data.primary.name;
  }

  function recentRecordCard(record) {
    const data = historyRecordData(record);
    return `
      <button class="recent-card" type="button" data-action="open-history-detail" data-record-id="${record.id}">
        <span class="recent-card__top">
          <span>${record.date}</span>
          <span class="source-badge">最近一次</span>
        </span>
        <span class="recent-card__route">${recordRoute(record)}</span>
        <span class="recent-card__question">${escapeHtml(record.question ?? "未保存问题原文")}</span>
        <span class="recent-card__meta">
          <span>${data.movingIndexes.length ? `${data.movingIndexes.length} 个动爻` : "无动爻"}</span>
          <span>${record.explanationSource ?? "仅保存卦象"}</span>
          ${icons.chevron}
        </span>
      </button>`;
  }

  function homeView() {
    const latest = state.historyRecords[0];
    return `
      <section class="page page--home" aria-labelledby="home-title">
        <header class="home-intro">
          <p class="eyebrow">慢一点，看清当下</p>
          <h1 id="home-title">此刻，有什么想安静看清？</h1>
          <p class="lede">你投币，应用记录；结果用于整理想法，不替你预测或决定。</p>
          <button class="button button--primary home-primary" type="button" data-action="begin">
            开始一问 ${icons.arrow}
          </button>
        </header>

        <section class="home-shelf" aria-labelledby="reflection-shelf-title">
          <div class="section-heading home-shelf__heading">
            <h2 id="reflection-shelf-title">你的观照</h2>
            <button class="text-link" type="button" data-action="open-history">查看问卦簿</button>
          </div>
          ${latest ? recentRecordCard(latest) : `
            <button class="home-empty-card" type="button" data-action="open-history">
              <span class="home-empty-card__icon">${icons.book}</span>
              <span><strong>问卦簿尚无记录</strong><small>${state.autoSaveHistory ? "完成起卦后会默认保存在本机" : "自动保存已关闭，可在结果页保存本次"}</small></span>
              ${icons.chevron}
            </button>`}
          <aside class="local-data-card" data-local-data-notice>
            <span class="local-data-card__icon">${icons.lock}</span>
            <div>
              <strong>起卦与历史默认保存在本机，不主动上传。</strong>
              <p>只有你选择 AI 解读时，本次所需内容才会发送。</p>
              <button class="text-link" type="button" data-action="open-settings">管理保存设置</button>
            </div>
          </aside>
        </section>
      </section>`;
  }

  function historyCard(record) {
    const data = historyRecordData(record);
    return `
      <li>
        <button class="history-card" type="button" data-action="open-history-detail" data-record-id="${record.id}">
          <span class="history-card__top">
            <span>${record.date}</span>
            <span>${data.movingIndexes.length ? `${data.movingIndexes.length} 个动爻` : "无动爻"}</span>
          </span>
          <span class="history-card__route">${recordRoute(record)}</span>
          <span class="history-card__question">${escapeHtml(record.question ?? "未保存问题原文")}</span>
          <span class="history-card__footer">
            <span>${record.explanationSource ?? "仅保存卦象"}</span>
            ${icons.chevron}
          </span>
        </button>
      </li>`;
  }

  function historyView() {
    const hasRecords = state.historyRecords.length > 0;
    return `
      <section class="page page--compact page--history" aria-labelledby="history-title">
        <p class="eyebrow">本机记录</p>
        <div class="history-title-row">
          <h1 id="history-title">问卦簿</h1>
          ${hasRecords ? `<span class="source-badge">${state.historyRecords.length} 条</span>` : ""}
        </div>
        <p class="lede">回看当时看见了什么，而不是用旧结果替今天做决定。</p>

        <div class="privacy-strip">
          ${icons.lock}
          <span>记录只在本机，默认排除系统备份与设备迁移；你可随时删除。</span>
        </div>

        ${hasRecords ? `
          <ol class="history-list" data-history-list>
            ${state.historyRecords.map(historyCard).join("")}
          </ol>` : `
          <div class="history-empty" data-history-empty>
            <span class="history-empty__mark" aria-hidden="true"><i></i><i></i></span>
            <h2>还没有保存的记录</h2>
            <p>${state.autoSaveHistory ? "完成一次起卦后，会默认把问题、卦象与后续解读保存在本机。" : "自动保存已经关闭；完成后仍可在结果页选择保存本次。"}</p>
            <button class="text-link" type="button" data-action="open-settings">管理保存设置</button>
          </div>`}

        <div class="bottom-action">
          <button class="button button--primary" type="button" data-action="begin">
            ${hasRecords ? "开始新的一问" : "开始第一次记录"} ${icons.arrow}
          </button>
        </div>
      </section>`;
  }

  function settingRow({ action, title, description, checked, disabled = false, detail = false }) {
    return `
      <label class="setting-row${detail ? " setting-row--detail" : ""}${disabled ? " setting-row--disabled" : ""}">
        <span class="setting-row__copy"><strong>${title}</strong><small>${description}</small></span>
        <input
          class="switch-control"
          type="checkbox"
          role="switch"
          data-action="${action}"
          ${checked ? "checked" : ""}
          ${disabled ? "disabled" : ""}
        />
      </label>`;
  }

  function settingsView() {
    const detailsDisabled = !state.autoSaveHistory;
    return `
      <section class="page page--compact page--settings" aria-labelledby="settings-title">
        <p class="eyebrow">本机与隐私</p>
        <h1 id="settings-title">保存设置</h1>
        <p class="lede">默认留住完整的反思过程；你可以全局关闭，也可以只调整保存内容。</p>

        <div class="settings-boundary">
          ${icons.shield}
          <div>
            <strong>只保存在 App 私有存储</strong>
            <p>历史不会主动上传，并默认排除系统备份、设备迁移与云同步。</p>
          </div>
        </div>

        <section class="settings-card" aria-label="历史保存选项">
          ${settingRow({
            action: "auto-save-toggle",
            title: "自动保存完整记录",
            description: state.autoSaveHistory ? "已开启 · 完成起卦后立即保存到本机" : "已关闭 · 结果页仍可手动保存本次",
            checked: state.autoSaveHistory
          })}
          <div class="settings-card__details${detailsDisabled ? " settings-card__details--disabled" : ""}">
            ${settingRow({
              action: "save-question-setting",
              title: "保存问题原文",
              description: "与你写下的卦象背景一同回顾",
              checked: state.saveQuestion,
              disabled: detailsDisabled,
              detail: true
            })}
            ${settingRow({
              action: "save-explanation-setting",
              title: "保存解读全文",
              description: "本地或 AI 解读会加入同一次记录",
              checked: state.saveExplanation,
              disabled: detailsDisabled,
              detail: true
            })}
            ${settingRow({
              action: "save-action-setting",
              title: "保存行动记录",
              description: "保留“可以试的一小步”与完成状态",
              checked: state.saveAction,
              disabled: detailsDisabled,
              detail: true
            })}
          </div>
        </section>

        <p class="settings-ai-note">这些开关只控制本机历史，不会允许或触发 AI。每次 AI 解读仍需要你主动选择并确认发送范围。</p>

        <section class="settings-danger" aria-labelledby="history-management-title">
          <div>
            <h2 id="history-management-title">管理本机记录</h2>
            <p>当前原型会话中有 ${state.historyRecords.length} 条记录。</p>
          </div>
          <button class="button button--danger-quiet" type="button" data-action="open-clear-all" ${state.historyRecords.length ? "" : "disabled"}>清空全部问卦记录</button>
        </section>
      </section>`;
  }

  function historyDetailView() {
    const record = state.historyRecords.find((item) => item.id === state.selectedRecordId);
    if (!record) return historyView();
    const data = historyRecordData(record);
    const hasMoving = data.movingIndexes.length > 0;
    return `
      <article class="page page--compact page--history-detail" aria-labelledby="history-detail-title">
        <header class="history-detail-header">
          <p class="eyebrow">${record.date}</p>
          <h1 id="history-detail-title">${recordRoute(record)}</h1>
          <p>保存的起卦快照</p>
        </header>

        <div class="result-hero history-result-hero">
          <div class="result-kicker"><span>coin-v1 · 本地快照</span><span>${hasMoving ? `${data.movingIndexes.length} 个动爻` : "无动爻"}</span></div>
          <div class="hexagram-pair${hasMoving ? "" : " hexagram-pair--single"}">
            ${hexagramFigure(record.lines, data.primary, true)}
            ${hasMoving ? `<div class="transform-arrow" aria-label="变化为">之</div>${hexagramFigure(data.changedLines, data.changed, false)}` : ""}
          </div>
        </div>

        <section class="content-section" aria-labelledby="saved-question-title">
          <div class="section-heading"><h2 id="saved-question-title">当时所问</h2><span class="source-badge">${record.question ? "已保存" : "未保存"}</span></div>
          <div class="content-card"><p>${escapeHtml(record.question ?? "这条记录没有保存问题原文。卦象结果和方法版本仍可独立复核。")}</p></div>
        </section>

        <section class="content-section" aria-labelledby="saved-content-title">
          <div class="section-heading"><h2 id="saved-content-title">保存内容</h2></div>
          <dl class="record-facts">
            <div><dt>起卦结果</dt><dd>${data.primary.name}${hasMoving ? `之${data.changed.name}` : ""} · ${data.movingIndexes.length ? data.movingIndexes.map((index) => lineName(record.lines[index], index)).join("、") : "无动爻"}</dd></div>
            <div><dt>解释来源</dt><dd>${record.explanationSource ?? "未保存解释"}</dd></div>
            <div><dt>版本</dt><dd>coin-v1 · content-demo</dd></div>
          </dl>
        </section>

        ${record.action ? `
          <section class="content-section" aria-labelledby="saved-action-title">
            <div class="small-step"><div class="small-step__label" id="saved-action-title">当时记下的一小步</div><p>${escapeHtml(record.action)}</p></div>
          </section>` : ""}

        <div class="detail-danger-zone">
          <button class="button button--danger-quiet" type="button" data-action="delete-record">删除这条记录</button>
          <p>删除前会再次确认；原型刷新后恢复演示数据。</p>
        </div>
      </article>`;
  }

  function questionView() {
    return `
      <section class="page" aria-labelledby="question-title">
        ${stepper(1, 2)}
        <p class="eyebrow">起念</p>
        <h1 id="question-title">你想看清什么？</h1>
        <p class="lede">写成一个开放的问题，比只问“会不会”更容易照见可行动的部分。</p>

        <label class="field-label" for="question-input">此刻的问题</label>
        <textarea
          id="question-input"
          class="question-input"
          maxlength="120"
          placeholder="例如：面对这次工作调整，我怎样做能更稳妥？"
          data-question-input
        >${escapeHtml(state.question)}</textarea>
        <div class="field-meta">
          <span>${state.autoSaveHistory ? "完成起卦后默认保存在本机" : "自动保存已关闭，本次可稍后手动保存"}</span>
          <span data-char-count>${state.question.length}/120</span>
        </div>

        <div class="privacy-note">
          ${icons.lock}
          <p>起卦计算在本地完成。只有你主动选择 AI 解读并再次确认后，所需内容才会被发送。</p>
        </div>

        <button class="text-link" type="button" data-action="skip-question">不写具体内容，直接开始</button>

        <div class="bottom-action">
          <button class="button button--primary" type="button" data-action="start-casting" ${state.question.trim() ? "" : "disabled"}>
            开始记录六爻 ${icons.arrow}
          </button>
        </div>
      </section>`;
  }

  function lineStack(lines) {
    return [5, 4, 3, 2, 1, 0].map((index) => {
      const value = lines[index];
      if (!value) {
        return '<div class="line-slot line-slot--empty" aria-label="尚未记录"></div>';
      }
      const kind = lineIsYang(value) ? "yang" : "yin";
      const moving = lineIsMoving(value) ? " line-slot--moving" : "";
      return `<div class="line-slot line-slot--${kind}${moving}" aria-label="${lineName(value, index)}，数值 ${value}${lineIsMoving(value) ? "，动爻" : ""}">
        ${lineIsMoving(value) ? `<span class="line-slot__number">${value}</span>` : ""}
      </div>`;
    }).join("");
  }

  function coinButton(value, index) {
    const face = value === 2 ? "字" : value === 3 ? "背" : "点选";
    const score = value ? String(value) : "字 ↔ 背";
    const valueAttr = value ? `data-value="${value}"` : "";
    const next = value === null ? "字，2 分" : value === 2 ? "背，3 分" : "字，2 分";
    return `
      <div class="coin-wrap">
        <button
          class="coin"
          type="button"
          data-action="toggle-coin"
          data-index="${index}"
          ${valueAttr}
          aria-label="第 ${index + 1} 枚硬币，当前${value ? `${face}，${score} 分` : "未记录"}；点击切换为${next}"
        >
          <span class="coin__value">
            <span class="coin__face">${face}</span>
            <span class="coin__score">${score}</span>
          </span>
        </button>
        <span>硬币 ${index + 1}</span>
      </div>`;
  }

  function castingView() {
    const round = state.lines.length + 1;
    const selected = state.coins.every((value) => value !== null);
    const sum = selected ? state.coins.reduce((total, value) => total + value, 0) : null;
    const currentType = sum
      ? ({ 6: "老阴 · 动", 7: "少阳", 8: "少阴", 9: "老阳 · 动" })[sum]
      : "";

    return `
      <section class="page page--compact" aria-labelledby="casting-title">
        ${stepper(2, 2)}
        <div class="question-chip" title="${escapeHtml(state.question)}">${escapeHtml(state.question)}</div>

        <div class="casting-layout">
          <div class="line-progress-card">
            <div class="line-progress-copy">
              <strong>${state.lines.length} / 6</strong>
              <p>从下往上记录</p>
              ${state.lines.length ? '<button class="text-link" type="button" data-action="undo-line">撤销上一爻</button>' : ""}
            </div>
            <div class="line-stack" aria-label="已记录的六爻">${lineStack(state.lines)}</div>
          </div>

          <div class="coin-prompt">
            <h2 id="casting-title">第 ${round} 爻</h2>
            <p>依照手中硬币，逐枚点选“字”或“背”</p>
          </div>

          <div class="coins" aria-label="三枚硬币录入">
            ${state.coins.map(coinButton).join("")}
          </div>

          <div class="round-sum" aria-live="polite">
            ${sum ? `本次合计 <strong>${sum}</strong> · ${currentType}` : "点按硬币可在“字 2”与“背 3”间切换"}
          </div>
        </div>

        <div class="bottom-action">
          <button class="button button--primary" type="button" data-action="confirm-line" ${selected ? "" : "disabled"}>
            ${round === 6 ? "记录并查看结果" : `确认第 ${round} 爻`} ${icons.arrow}
          </button>
        </div>
      </section>`;
  }

  function hexLine(value, index, showMoving) {
    const kind = lineIsYang(value) ? "yang" : "yin";
    const moving = showMoving && lineIsMoving(value) ? " hex-line--moving" : "";
    return `<div class="hex-line hex-line--${kind}${moving}" aria-label="${lineName(value, index)}${moving ? "，动爻" : ""}"><span></span><span></span></div>`;
  }

  function hexagramFigure(lines, hexagram, showMoving) {
    const rendered = [5, 4, 3, 2, 1, 0]
      .map((index) => hexLine(lines[index], index, showMoving))
      .join("");
    return `
      <div class="hexagram-view">
        <div class="hexagram-lines" role="img" aria-label="第 ${hexagram.number} 卦，${hexagram.name}卦">${rendered}</div>
        <div class="hexagram-name">${hexagram.name}</div>
        <div class="hexagram-number">第 ${hexagram.number} 卦</div>
      </div>`;
  }

  function resultCopy(data) {
    if (data.primary.number === 24) {
      return {
        classic: "复：亨。出入无疾，朋来无咎。反复其道，七日来复。利有攸往。",
        plain: "“复”提醒人把注意力放回可返回、可重新开始之处。它不是替你判断成败，而是邀请你看见：此刻是否有一条更朴素、更合乎本心的路。",
        moving: "初九：不远复，无祇悔，元吉。",
        movingPlain: "偏离尚不远时就察觉并回转，代价通常较小。先修正一个最近的动作，比一次解决所有问题更可行。"
      };
    }
    return {
      classic: `${data.primary.name}卦 · 第 ${data.primary.number} 卦。本原型仅演示排盘与阅读层级，正式经典文本将从经校勘的本地内容包读取。`,
      plain: "先观察卦象呈现的张力与变化，再回到你能核实的事实、感受和资源。不要把符号当成替你下结论的证据。",
      moving: data.movingIndexes.length ? `${data.movingIndexes.map((index) => lineName(data.sourceLines[index], index)).join("、")}发生变化。` : "",
      movingPlain: "变化的位置可作为反思入口：哪里正在松动，哪里仍需要保留余地？"
    };
  }

  function errorCard() {
    return `
      <div class="error-card" role="alert">
        <h3>AI 解读暂时没有返回</h3>
        <p class="quiet">起卦结果仍完整保存在本页。你可以改看本地解读，或稍后重试。</p>
        <div class="error-actions">
          <button class="button button--secondary" type="button" data-action="choose-local">本地解读</button>
          <button class="button button--danger-quiet" type="button" data-action="retry-ai">重试</button>
        </div>
      </div>`;
  }

  function currentSavePanel({ compact = false } = {}) {
    if (state.saved) {
      const explanationAttached = state.explanationGenerated && state.saveExplanation;
      const savedContext = state.saveQuestion && hasSavableQuestion() ? "问题、卦象" : "卦象";
      return `
        <div class="current-save-panel${compact ? " current-save-panel--compact" : ""}" data-current-save-status>
          <div class="current-save-panel__status">
            <span class="current-save-panel__icon">${icons.book}</span>
            <span>
              <strong>${explanationAttached ? "解读已加入本次记录" : state.currentSaveMode === "automatic" ? "已自动保存到本机" : "已保存到本机问卦簿"}</strong>
              <small>${explanationAttached ? `与${savedContext}归在同一次观照中` : `${savedContext}快照已进入问卦簿`}</small>
            </span>
          </div>
          <div class="current-save-panel__actions">
            <button class="text-link" type="button" data-action="open-history">查看问卦簿</button>
            <button class="text-link text-link--danger" type="button" data-action="remove-current-record">本次不保存</button>
          </div>
        </div>`;
    }

    return `
      <div class="current-save-panel current-save-panel--off${compact ? " current-save-panel--compact" : ""}" data-current-save-status>
        <div class="current-save-panel__status">
          <span class="current-save-panel__icon">${icons.lock}</span>
          <span>
            <strong>本次未保存</strong>
            <small>${state.currentSessionOptedOut ? "你已选择不保留这次记录" : "自动保存已关闭；不会写入问卦簿"}</small>
          </span>
        </div>
        <button class="button button--secondary" type="button" data-action="save-current">保存本次</button>
      </div>`;
  }

  function resultView() {
    const data = resultData();
    const copy = resultCopy(data);
    const hasMoving = data.movingIndexes.length > 0;
    const question = state.question || "未记录具体问题";

    return `
      <section class="page page--compact" aria-labelledby="result-title">
        <div class="result-hero">
          <div class="result-kicker">
            <span>起卦结果 · 本地计算</span>
            <span>${hasMoving ? `${data.movingIndexes.length} 个动爻` : "无动爻"}</span>
          </div>

          <div class="hexagram-pair${hasMoving ? "" : " hexagram-pair--single"}">
            ${hexagramFigure(data.sourceLines, data.primary, true)}
            ${hasMoving ? `<div class="transform-arrow" aria-label="变化为">之</div>${hexagramFigure(data.changedLines, data.changed, false)}` : ""}
          </div>
          ${hasMoving ? "" : '<div class="static-indicator">卦象稳定 · 不显示之卦</div>'}
        </div>

        <div class="content-section">
          <div class="section-heading">
            <h2 id="result-title">你所问</h2>
            <span class="source-badge">本次记录</span>
          </div>
          <p class="question-chip" style="white-space:normal">${escapeHtml(question)}</p>
        </div>

        ${state.aiError ? errorCard() : ""}

        <div class="content-section">
          <div class="section-heading">
            <h2>经典原文</h2>
            <span class="source-badge">经典文本</span>
          </div>
          <blockquote class="classic-quote">${copy.classic}</blockquote>
        </div>

        <div class="content-section">
          <div class="section-heading">
            <h2>本地白话</h2>
            <span class="source-badge">本地内容</span>
          </div>
          <div class="plain-copy"><p>${copy.plain}</p></div>
        </div>

        ${hasMoving ? `
          <div class="content-section">
            <div class="section-heading"><h2>动爻</h2><span class="source-badge">变化处</span></div>
            <div class="moving-card">
              <div class="moving-card__label">${data.movingIndexes.map((index) => lineName(data.sourceLines[index], index)).join(" · ")}</div>
              <h3>${copy.moving}</h3>
              <p class="quiet">${copy.movingPlain}</p>
            </div>
          </div>` : ""}

        <hr class="divider" />
        <div class="result-secondary-actions">
          ${currentSavePanel()}
          <button class="text-link" type="button" data-action="restart">重新起一卦</button>
        </div>

        <div class="bottom-action">
          <button class="button button--primary" type="button" data-action="open-interpretation">
            解 · 选择一种解读方式 ${icons.arrow}
          </button>
        </div>
      </section>`;
  }

  function loadingView() {
    return `
      <section class="page" aria-labelledby="loading-title">
        <div class="loading-state">
          <div class="loading-orbit" aria-hidden="true"></div>
          <h1 id="loading-title" style="font-size:27px">正在整理反思线索</h1>
          <p class="lede">结果已经生成。AI 只在此处协助组织文字，不参与起卦。</p>
        </div>
      </section>`;
  }

  function explanationView() {
    const data = resultData();
    const ai = state.explanationSource === "ai";
    return `
      <article class="page page--compact" aria-labelledby="explanation-title">
        <header class="interpretation-header">
          <p class="eyebrow">${ai ? "辅助反思" : "离线阅读"}</p>
          <h1 id="explanation-title">从“回到起点”开始</h1>
          <div class="interpretation-meta">
            <span class="source-badge">${ai ? "AI 生成" : "本地解读"}</span>
            <span>${data.primary.name}卦 · 第 ${data.primary.number} 卦</span>
          </div>
        </header>

        <p class="interpretation-lead">眼前更重要的，也许不是立刻选定一条路，而是辨认哪一步能让你重新获得稳定与判断力。</p>

        <section class="content-section" aria-labelledby="observation-title">
          <div class="section-heading"><h2 id="observation-title">可以先观察</h2></div>
          <ul class="reflection-list">
            <li>你对“调整”的担心里，哪些是已经发生的事实，哪些是尚未验证的推测？</li>
            <li>复卦的动处在最初一爻，适合把注意力放在能尽早修正的小偏差。</li>
            <li>之卦为坤，提示行动时给现实条件、协作关系与节奏留出空间。</li>
          </ul>
        </section>

        <section class="content-section" aria-labelledby="questions-title">
          <div class="section-heading"><h2 id="questions-title">问问自己</h2></div>
          <ol class="question-list">
            <li>如果暂时不追求一次做对，我最想先确认的一个事实是什么？</li>
            <li>哪一种选择更容易保留回转余地，而不是把自己锁死？</li>
            <li>我可以向谁说明顾虑，并获得一条具体信息？</li>
          </ol>
        </section>

        <section class="content-section" aria-labelledby="step-title">
          <div class="small-step">
            <div class="small-step__label" id="step-title">可以试的一小步</div>
            <p>在今天结束前，写下“已知事实、尚待确认、我的底线”各一条，再约一次不超过 20 分钟的信息沟通。</p>
          </div>
        </section>

        <p class="safety-note">这是一种文化反思与文字整理，不是预测、诊断或替代你的判断。涉及医疗、法律、财务或人身安全时，请寻求相应专业支持。</p>

        <div class="bottom-action">
          ${currentSavePanel({ compact: true })}
          <button class="button button--quiet" type="button" data-action="back-to-result">回到起卦结果</button>
        </div>
      </article>`;
  }

  function deleteRecordModal() {
    return `
      <div class="modal-backdrop" data-action="dismiss-modal">
        <section class="modal-sheet modal-sheet--dialog" role="alertdialog" aria-modal="true" aria-labelledby="delete-modal-title" aria-describedby="delete-modal-description" data-modal-sheet>
          <div class="modal-handle" aria-hidden="true"></div>
          <header class="modal-header">
            <div>
              <h2 id="delete-modal-title">删除这条记录？</h2>
              <p id="delete-modal-description">卦象、问题、已保存解读和行动记录会一并从本机删除。</p>
            </div>
            <button class="icon-button" type="button" data-action="close-modal" aria-label="关闭"><svg aria-hidden="true" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg></button>
          </header>
          <div class="notice notice--danger">
            ${icons.shield}<p>原型使用演示数据；正式版删除不可恢复，因此必须在这里再次确认。</p>
          </div>
          <div class="modal-actions">
            <button class="button button--danger" type="button" data-action="confirm-delete">确认删除</button>
            <button class="button button--secondary" type="button" data-action="close-modal">取消</button>
          </div>
        </section>
      </div>`;
  }

  function clearAllModal() {
    return `
      <div class="modal-backdrop" data-action="dismiss-modal">
        <section class="modal-sheet modal-sheet--dialog" role="alertdialog" aria-modal="true" aria-labelledby="clear-modal-title" aria-describedby="clear-modal-description" data-modal-sheet>
          <div class="modal-handle" aria-hidden="true"></div>
          <header class="modal-header">
            <div>
              <h2 id="clear-modal-title">清空全部记录？</h2>
              <p id="clear-modal-description">当前 ${state.historyRecords.length} 条记录的卦象、问题、解读和行动内容都会从本机删除。</p>
            </div>
            <button class="icon-button" type="button" data-action="close-modal" aria-label="关闭"><svg aria-hidden="true" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg></button>
          </header>
          <div class="notice notice--danger">
            ${icons.shield}<p>这项操作不可恢复，但不会改变你的自动保存设置。</p>
          </div>
          <div class="modal-actions">
            <button class="button button--danger" type="button" data-action="confirm-clear-all">确认清空全部</button>
            <button class="button button--secondary" type="button" data-action="close-modal">取消</button>
          </div>
        </section>
      </div>`;
  }

  function interpretationModal() {
    return `
      <div class="modal-backdrop" data-action="dismiss-modal">
        <section class="modal-sheet" role="dialog" aria-modal="true" aria-labelledby="interpretation-modal-title" data-modal-sheet>
          <div class="modal-handle" aria-hidden="true"></div>
          <header class="modal-header">
            <div>
              <h2 id="interpretation-modal-title">选择解读方式</h2>
              <p>起卦结果不会改变，只切换阅读材料的来源。</p>
            </div>
            <button class="icon-button" type="button" data-action="close-modal" aria-label="关闭"><svg aria-hidden="true" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg></button>
          </header>
          <div class="option-list">
            <button class="option-card" type="button" data-action="choose-local">
              <span class="option-card__icon" aria-hidden="true">本</span>
              <span><strong>先看本地解读</strong><small>离线可用，不发送任何内容</small></span>
              ${icons.chevron}
            </button>
            <button class="option-card" type="button" data-action="choose-ai">
              <span class="option-card__icon" aria-hidden="true">解</span>
              <span><strong>使用 AI 辅助解读</strong><small>确认发送范围后再开始</small></span>
              ${icons.chevron}
            </button>
          </div>
        </section>
      </div>`;
  }

  function consentModal() {
    return `
      <div class="modal-backdrop" data-action="dismiss-modal">
        <section class="modal-sheet" role="dialog" aria-modal="true" aria-labelledby="consent-modal-title" data-modal-sheet>
          <div class="modal-handle" aria-hidden="true"></div>
          <header class="modal-header">
            <div>
              <h2 id="consent-modal-title">发送前，请你确认</h2>
              <p>AI 不参与起卦，只根据既有结果整理反思线索。</p>
            </div>
            <button class="icon-button" type="button" data-action="close-modal" aria-label="关闭"><svg aria-hidden="true" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg></button>
          </header>

          <div class="notice">
            ${icons.shield}
            <p>将发送以下内容；不会发送设备标识、历史记录或其他本地数据。</p>
          </div>
          <ul class="data-list">
            <li>你本次写下的问题</li>
            <li>本卦、之卦与动爻结果</li>
            <li>用于约束语气和安全边界的提示</li>
          </ul>

          <label class="consent-check">
            <input type="checkbox" data-action="consent-toggle" ${state.consent ? "checked" : ""} />
            <span>我已了解发送范围，并同意仅为本次 AI 解读使用这些内容。</span>
          </label>

          <div class="modal-actions">
            <button class="button button--primary" type="button" data-action="confirm-ai" ${state.consent ? "" : "disabled"}>同意并开始解读</button>
            <button class="button button--quiet" type="button" data-action="choose-local">改看本地解读</button>
          </div>
        </section>
      </div>`;
  }

  function methodModal() {
    return `
      <div class="modal-backdrop" data-action="dismiss-modal">
        <section class="modal-sheet" role="dialog" aria-modal="true" aria-labelledby="method-modal-title" data-modal-sheet>
          <div class="modal-handle" aria-hidden="true"></div>
          <header class="modal-header">
            <div>
              <h2 id="method-modal-title">三枚硬币法</h2>
              <p>原型采用明确、可复核的固定规则。</p>
            </div>
            <button class="icon-button" type="button" data-action="close-modal" aria-label="关闭"><svg aria-hidden="true" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg></button>
          </header>

          <ol class="method-steps">
            <li>准备三枚硬币，在现实中投掷一次。</li>
            <li>在页面逐枚记录字面或背面，确认后形成一爻。</li>
            <li>从下往上重复六次；程序只换算，不替你随机生成。</li>
          </ol>

          <div class="score-table" aria-label="硬币计分规则">
            <div><strong>字 · 2</strong><span>字面记两分</span></div>
            <div><strong>背 · 3</strong><span>背面记三分</span></div>
          </div>
          <p class="fine-print">合计 6 为老阴、7 为少阳、8 为少阴、9 为老阳；6 与 9 是动爻。</p>
          <button class="button button--secondary" style="width:100%" type="button" data-action="close-modal">知道了</button>
        </section>
      </div>`;
  }

  function renderModal() {
    if (state.modal === "interpretation") modalRoot.innerHTML = interpretationModal();
    else if (state.modal === "consent") modalRoot.innerHTML = consentModal();
    else if (state.modal === "method") modalRoot.innerHTML = methodModal();
    else if (state.modal === "delete") modalRoot.innerHTML = deleteRecordModal();
    else if (state.modal === "clear-all") modalRoot.innerHTML = clearAllModal();
    else modalRoot.innerHTML = "";

    document.body.style.overflow = state.modal ? "hidden" : "";
    if (state.modal) {
      window.setTimeout(() => {
        modalRoot.querySelector("button, input")?.focus();
      }, 20);
    }
  }

  function render(options = {}) {
    if (state.screen === "welcome") screen.innerHTML = welcomeView();
    else if (state.screen === "home") screen.innerHTML = homeView();
    else if (state.screen === "history") screen.innerHTML = historyView();
    else if (state.screen === "history-detail") screen.innerHTML = historyDetailView();
    else if (state.screen === "settings") screen.innerHTML = settingsView();
    else if (state.screen === "question") screen.innerHTML = questionView();
    else if (state.screen === "casting") screen.innerHTML = castingView();
    else if (state.screen === "result") screen.innerHTML = resultView();
    else if (state.screen === "loading") screen.innerHTML = loadingView();
    else if (state.screen === "explanation") screen.innerHTML = explanationView();

    backButton.hidden = state.screen === "welcome" || state.screen === "home";
    renderModal();

    if (!options.preserveFocus) {
      screen.focus({ preventScroll: true });
      window.scrollTo({ top: 0, behavior: "auto" });
    }
  }

  function showToast(message) {
    toastRegion.innerHTML = `<div class="toast">${escapeHtml(message)}</div>`;
    window.setTimeout(() => {
      toastRegion.innerHTML = "";
    }, 1800);
  }

  function closeModal() {
    state.modal = null;
    state.consent = false;
    renderModal();
  }

  function goBack() {
    if (state.modal) {
      closeModal();
      return;
    }
    if (state.screen === "question") state.screen = state.questionOrigin;
    else if (state.screen === "history") state.screen = "home";
    else if (state.screen === "history-detail") state.screen = "history";
    else if (state.screen === "settings") state.screen = state.settingsOrigin;
    else if (state.screen === "casting") state.screen = "question";
    else if (state.screen === "result") state.screen = "question";
    else if (state.screen === "loading" || state.screen === "explanation") state.screen = "result";
    render();
  }

  function beginAiExplanation() {
    state.modal = null;
    state.screen = "loading";
    state.explanationSource = "ai";
    render();
    window.setTimeout(() => {
      if (state.screen !== "loading") return;
      state.explanationGenerated = true;
      attachExplanationToCurrentSession();
      state.screen = "explanation";
      render();
    }, 900);
  }

  document.addEventListener("input", (event) => {
    if (!event.target.matches("[data-question-input]")) return;
    state.question = event.target.value;
    document.querySelector("[data-char-count]").textContent = `${state.question.length}/120`;
    const startButton = document.querySelector("[data-action='start-casting']");
    if (startButton) startButton.disabled = !state.question.trim();
  });

  document.addEventListener("change", (event) => {
    if (event.target.matches("[data-action='consent-toggle']")) {
      state.consent = event.target.checked;
      const confirm = document.querySelector("[data-action='confirm-ai']");
      if (confirm) confirm.disabled = !state.consent;
    } else if (event.target.matches("[data-action='auto-save-toggle']")) {
      state.autoSaveHistory = event.target.checked;
      render({ preserveFocus: true });
      document.querySelector("[data-action='auto-save-toggle']")?.focus();
    } else if (event.target.matches("[data-action='save-question-setting']")) {
      state.saveQuestion = event.target.checked;
    } else if (event.target.matches("[data-action='save-explanation-setting']")) {
      state.saveExplanation = event.target.checked;
    } else if (event.target.matches("[data-action='save-action-setting']")) {
      state.saveAction = event.target.checked;
    }
  });

  document.addEventListener("click", (event) => {
    const actionTarget = event.target.closest("[data-action]");
    if (!actionTarget) return;
    const action = actionTarget.dataset.action;

    if (action === "dismiss-modal" && event.target.closest("[data-modal-sheet]")) return;

    if (action === "back") goBack();
    else if (action === "begin") {
      state.questionOrigin = state.screen;
      state.screen = "question";
      render();
    } else if (action === "open-history") {
      state.screen = "history";
      render();
    } else if (action === "open-settings") {
      state.settingsOrigin = state.screen === "settings" ? "home" : state.screen;
      state.screen = "settings";
      render();
    } else if (action === "open-history-detail") {
      state.selectedRecordId = actionTarget.dataset.recordId;
      state.screen = "history-detail";
      render();
    } else if (action === "skip-question") {
      prepareNewSession();
      state.question = "未记录具体问题（仅作自我观察）";
      state.lines = [];
      state.coins = [null, null, null];
      state.screen = "casting";
      render();
    } else if (action === "start-casting") {
      if (!state.question.trim()) return;
      prepareNewSession();
      state.lines = [];
      state.coins = [null, null, null];
      state.screen = "casting";
      render();
    } else if (action === "toggle-coin") {
      const index = Number(actionTarget.dataset.index);
      const current = state.coins[index];
      state.coins[index] = current === null || current === 3 ? 2 : 3;
      render({ preserveFocus: true });
      document.querySelector(`[data-action='toggle-coin'][data-index='${index}']`)?.focus();
    } else if (action === "confirm-line") {
      if (!state.coins.every((value) => value !== null)) return;
      state.lines.push(state.coins.reduce((total, value) => total + value, 0));
      state.coins = [null, null, null];
      if (state.lines.length === 6) {
        if (state.autoSaveHistory) persistCurrentSession("automatic");
        state.screen = "result";
      }
      render();
    } else if (action === "undo-line") {
      state.lines.pop();
      state.coins = [null, null, null];
      render();
      showToast("已撤销上一爻");
    } else if (action === "open-interpretation") {
      state.modal = "interpretation";
      renderModal();
    } else if (action === "choose-ai") {
      state.modal = "consent";
      state.consent = false;
      renderModal();
    } else if (action === "choose-local") {
      state.modal = null;
      state.explanationSource = "local";
      state.explanationGenerated = true;
      attachExplanationToCurrentSession();
      state.screen = "explanation";
      render();
    } else if (action === "confirm-ai") {
      if (!state.consent) return;
      beginAiExplanation();
    } else if (action === "retry-ai") {
      state.aiError = false;
      state.modal = "consent";
      state.consent = false;
      renderModal();
    } else if (action === "save-current") {
      persistCurrentSession();
      render();
      showToast("本次记录已保存到本机");
    } else if (action === "remove-current-record") {
      if (!state.saved) return;
      state.selectedRecordId = state.currentRecordId;
      state.deleteReturnScreen = state.screen;
      state.modal = "delete";
      renderModal();
    } else if (action === "delete-record") {
      state.deleteReturnScreen = "history";
      state.modal = "delete";
      renderModal();
    } else if (action === "confirm-delete") {
      const deletedCurrentSession = state.selectedRecordId === state.currentRecordId;
      state.historyRecords = state.historyRecords.filter((record) => record.id !== state.selectedRecordId);
      state.selectedRecordId = null;
      state.modal = null;
      if (deletedCurrentSession) {
        state.saved = false;
        state.currentSessionOptedOut = true;
        state.currentSaveMode = null;
      }
      state.screen = state.deleteReturnScreen;
      render();
      showToast("记录已从本机删除");
    } else if (action === "open-clear-all") {
      if (!state.historyRecords.length) return;
      state.modal = "clear-all";
      renderModal();
    } else if (action === "confirm-clear-all") {
      const includedCurrentSession = Boolean(currentSessionRecord());
      state.historyRecords = [];
      state.selectedRecordId = null;
      state.modal = null;
      if (includedCurrentSession) {
        state.saved = false;
        state.currentSessionOptedOut = true;
        state.currentSaveMode = null;
      }
      render();
      showToast("已清空全部本机记录");
    } else if (action === "restart") {
      state.question = "";
      state.lines = [];
      state.coins = [null, null, null];
      prepareNewSession();
      state.questionOrigin = state.historyRecords.length ? "home" : "welcome";
      state.screen = "question";
      render();
    } else if (action === "back-to-result") {
      state.screen = "result";
      render();
    } else if (action === "open-method") {
      state.modal = "method";
      renderModal();
    } else if (action === "close-modal" || action === "dismiss-modal") {
      closeModal();
    }
  });

  document.addEventListener("keydown", (event) => {
    if (event.key === "Escape" && state.modal) closeModal();
  });

  function seedPreview() {
    const view = new URLSearchParams(window.location.search).get("view");
    if (!view || view === "welcome") return;

    if (view === "question") {
      state.screen = "question";
      state.question = SAMPLE_QUESTION;
      return;
    }

    if (["home", "home-empty", "history", "history-empty", "history-detail", "delete", "settings", "settings-off", "clear-all"].includes(view)) {
      state.historyRecords = view === "home-empty" || view === "history-empty" ? [] : sampleHistory();
      state.screen = view.startsWith("home")
        ? "home"
        : view === "history-detail" || view === "delete"
          ? "history-detail"
          : view === "settings" || view === "settings-off" || view === "clear-all"
            ? "settings"
            : "history";
      state.selectedRecordId = state.historyRecords[0]?.id ?? null;
      if (view === "settings-off") state.autoSaveHistory = false;
      if (view === "delete") state.modal = "delete";
      if (view === "clear-all") state.modal = "clear-all";
      return;
    }

    state.question = SAMPLE_QUESTION;
    if (view === "casting") {
      state.screen = "casting";
      state.lines = [9, 8];
      state.coins = [2, 3, null];
      return;
    }

    state.lines = view === "static" ? [7, 7, 7, 7, 7, 7] : [...SAMPLE_LINES];
    state.screen = "result";
    if (view === "result-not-saved") state.autoSaveHistory = false;
    if (state.autoSaveHistory) persistCurrentSession("automatic");

    if (view === "consent") state.modal = "consent";
    else if (view === "explanation") {
      state.screen = "explanation";
      state.explanationSource = "ai";
      state.explanationGenerated = true;
      attachExplanationToCurrentSession();
    } else if (view === "local") {
      state.screen = "explanation";
      state.explanationSource = "local";
      state.explanationGenerated = true;
      attachExplanationToCurrentSession();
    } else if (view === "error") {
      state.aiError = true;
    }
  }

  seedPreview();
  render();
})();