const FRAME_IDS = [
  "formation-review",
  "approach-contact",
  "damage-feedback",
  "heal-response",
  "ranged-finish",
  "first-diagnosis",
];

const ASSETS = {
  field: "assets/backgrounds/first_expedition_field.png",
  farstring: "assets/actors/farstring.png",
  kindhand: "assets/actors/kindhand.png",
  farstringIdle: "assets/actions/farstring/idle.png",
  farstringShot: "assets/actions/farstring/draw-release.png",
  kindhandIdle: "assets/actions/kindhand/idle.png",
  kindhandHeal: "assets/actions/kindhand/lantern-heal.png",
  enemy: "assets/enemies/riftblade-idle.png",
  damage: "assets/vfx/damage-heavy.png",
  heal: "assets/vfx/heal-safe.png",
};

const frame = new URLSearchParams(window.location.search).get("frame") || FRAME_IDS[0];
const selectedFrame = FRAME_IDS.includes(frame) ? frame : FRAME_IDS[0];

function img(src, className, alt) {
  return `<img class="${className}" src="${src}" alt="${alt}">`;
}

function icon(name) {
  const icons = {
    home: '<path d="M4 11 12 4l8 7v8h-5v-5H9v5H4z"/>',
    restart: '<path d="M5 8a8 8 0 1 1-1 7m1-7V3m0 5h5"/>',
    pause: '<path d="M7 5h3v14H7zm7 0h3v14h-3z"/>',
    inspect: '<circle cx="11" cy="11" r="6"/><path d="m16 16 4 4"/>',
    captions: '<path d="M4 6h16v11H9l-4 3v-3H4z"/><path d="M8 10h3m2 0h3m-8 3h5"/>',
    arrow: '<path d="m7 12 9-7v14z"/>',
    check: '<path d="m5 12 4 4L19 6"/>',
  };
  return `<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">${icons[name]}</svg>`;
}

function statusRail(context, battle = false) {
  return `
    <header class="status-rail layer-ui">
      <button class="tool" aria-label="返回首页">${icon("home")}</button>
      <div class="status-copy">
        <span class="eyebrow">第一份委托 · 断裂风路</span>
        <strong>${context}</strong>
      </div>
      <div class="status-spacer"></div>
      ${battle ? '<div class="battle-index"><span>战斗 1 / 5</span><b>自动战斗</b></div>' : '<div class="resource"><span>小队</span><b>2</b></div>'}
      <button class="tool" aria-label="重新开始">${icon("restart")}</button>
      ${battle ? `<button class="tool" aria-label="暂停">${icon("pause")}</button><button class="tool" aria-label="查看事件">${icon("inspect")}</button><button class="tool active" aria-label="字幕开启">${icon("captions")}</button>` : ''}
    </header>`;
}

function actor({who, action = "idle", x, y, order, label, hp = 100, urgent = ""}) {
  const actorSrc = who === "farstring"
    ? (action === "shot" ? ASSETS.farstringShot : action === "full" ? ASSETS.farstring : ASSETS.farstringIdle)
    : (action === "heal" ? ASSETS.kindhandHeal : action === "full" ? ASSETS.kindhand : ASSETS.kindhandIdle);
  const name = who === "farstring" ? "妮娅" : "赛布尔";
  const role = who === "farstring" ? "弓手" : "治疗";
  return `
    <section class="actor actor-${who} ${urgent ? "urgent" : ""} layer-actors" style="--x:${x}px;--y:${y}px" aria-label="${order} ${name} ${role} 生命 ${hp}">
      <div class="actor-badge"><b>${order}</b><span>${label}</span></div>
      <img src="${actorSrc}" alt="${name} · ${role}">
      <div class="actor-meta">
        <strong>${name} · ${role}</strong>
        <span class="hp"><i style="--hp:${hp}%"></i></span>
        <small>${hp} / 100${urgent ? ` · ${urgent}` : ""}</small>
      </div>
    </section>`;
}

function enemy(hp = 100, urgent = "") {
  return `
    <section class="enemy ${urgent ? "urgent" : ""} layer-actors" aria-label="裂影刃手 生命 ${hp}">
      <div class="enemy-name"><strong>裂影刃手</strong><span>路线守卫</span></div>
      ${img(ASSETS.enemy, "enemy-sprite", "裂影刃手")}
      <span class="hp enemy-hp"><i style="--hp:${hp}%"></i></span>
      <small>${hp} / 100${urgent ? ` · ${urgent}` : ""}</small>
    </section>`;
}

function battlefieldBase(title, objective) {
  return `
    ${statusRail(title, true)}
    <section class="battlefield layer-environment">
      <img class="field-art" src="${ASSETS.field}" alt="断裂风路遗迹战场">
      <div class="field-wash"></div>
      <div class="objective layer-ui"><span>当前目标</span><strong>${objective}</strong></div>
      <div class="party-ground layer-connectors"><i></i><i></i></div>
    </section>`;
}

function eventRibbon(step, text, source, action, target, result) {
  return `
    <footer class="event-ribbon layer-captions">
      <span class="event-step">事件 ${step}</span>
      <strong>${text}</strong>
      <div class="event-chain"><span>${source}</span><i>→</i><span>${action}</span><i>→</i><span>${target}</span><i>→</i><b>${result}</b></div>
    </footer>`;
}

function formationReview() {
  return `
    ${statusRail("系统编队 · 检查两人的职责")}
    <section class="formation-world layer-environment">
      <img class="field-art" src="${ASSETS.field}" alt="断裂风路遗迹">
      <div class="formation-wash"></div>
      <div class="formation-cord layer-connectors"><span></span></div>
      ${actor({who:"kindhand", action:"full", x:64, y:82, order:"1", label:"第二位", hp:100})}
      ${actor({who:"farstring", action:"full", x:282, y:74, order:"0", label:"先行位", hp:100, urgent:"暴露"})}
      <div class="threat-gap layer-connectors"><span>敌人方向</span><i></i></div>
      <div class="formation-note note-second layer-ui"><b>第二位 · 1</b><span>受击后举灯，为先行者恢复生命</span></div>
      <div class="formation-note note-lead layer-ui"><b>先行位 · 0</b><span>先接触威胁，以弓术回应敌人</span></div>
    </section>
    <aside class="context-rail layer-ui">
      <span class="rail-kicker">系统排序原因</span>
      <h2>职责决定顺序</h2>
      <p>妮娅先接近威胁；赛布尔留在受保护位置，等待实际受伤目标。</p>
      <div class="evidence-row"><i class="symbol order">0</i><span><b>妮娅 · 弓手</b>远程职责先行，但会承受更高暴露。</span></div>
      <div class="evidence-row"><i class="symbol heal">+</i><span><b>赛布尔 · 治疗</b>第二位行动，恢复实际受伤成员。</span></div>
      <p class="system-note">系统依据两人的当前职责形成此顺序。</p>
    </aside>
    <footer class="action-dock layer-ui">
      <button class="secondary">重新选择成员</button>
      <span>选择顺序不会改变系统编队</span>
      <button class="primary">${icon("arrow")}确认编队并出发</button>
    </footer>`;
}

function approachContact() {
  return `
    ${battlefieldBase("第一战 · 接敌", "守住断裂风路 · 读取敌人锁定")}
    ${actor({who:"kindhand", x:112, y:137, order:"1", label:"第二位", hp:100})}
    ${actor({who:"farstring", x:270, y:125, order:"0", label:"先行位", hp:100, urgent:"被锁定"})}
    ${enemy(100, "蓄势")}
    <div class="target-line layer-connectors"><span>锁定先行者</span></div>
    <div class="threat-mark layer-feedback"><i></i><i></i><span>!</span></div>
    ${eventRibbon("01 · 1.20s", "危险：裂影刃手锁定妮娅", "裂影刃手", "重击预兆", "妮娅 · 先行位", "即将命中")}`;
}

function damageFeedback() {
  return `
    ${battlefieldBase("第一战 · 敌方压力", "确认受击对象与生命变化")}
    ${actor({who:"kindhand", x:112, y:137, order:"1", label:"第二位", hp:100})}
    ${actor({who:"farstring", x:270, y:125, order:"0", label:"先行位", hp:58, urgent:"高暴露"})}
    ${enemy(100, "攻击已结算")}
    <div class="impact-line layer-connectors"></div>
    <div class="damage-burst layer-feedback">${img(ASSETS.damage, "vfx", "重击伤害")}</div>
    <div class="number damage-number layer-feedback"><b>-42</b><span>100 → 58</span></div>
    ${eventRibbon("02 · 2.35s", "妮娅在先行位承受高额伤害", "裂影刃手", "裂隙重击", "妮娅", "-42 · 58/100")}`;
}

function healResponse() {
  return `
    ${battlefieldBase("第一战 · 职业回应", "赛布尔恢复实际受伤的妮娅")}
    ${actor({who:"kindhand", action:"heal", x:112, y:137, order:"1", label:"第二位", hp:100, urgent:"正在恢复"})}
    ${actor({who:"farstring", x:270, y:125, order:"0", label:"先行位", hp:70, urgent:"恢复后"})}
    ${enemy(100, "等待")}
    <div class="heal-path layer-connectors"><i></i><i></i><i></i></div>
    <div class="heal-burst layer-feedback">${img(ASSETS.heal, "vfx", "恢复效果")}</div>
    <div class="number heal-number layer-feedback"><b>+12</b><span>58 → 70</span></div>
    ${eventRibbon("03 · 3.60s", "赛布尔从第二位举灯恢复妮娅", "赛布尔", "灵灯恢复", "妮娅", "+12 · 70/100")}`;
}

function rangedFinish() {
  return `
    ${battlefieldBase("第一战 · 两人连携", "妮娅完成本轮远程回应")}
    ${actor({who:"kindhand", x:112, y:137, order:"1", label:"第二位", hp:100})}
    ${actor({who:"farstring", action:"shot", x:270, y:125, order:"0", label:"先行位", hp:70, urgent:"远程射击"})}
    ${enemy(34, "即将倒下")}
    <div class="projectile-line layer-connectors"><span></span></div>
    <div class="number enemy-number layer-feedback"><b>-30</b><span>64 → 34</span></div>
    ${eventRibbon("04 · 5.10s", "妮娅以弓术把敌人压入终结线", "妮娅", "远程射击", "裂影刃手", "-30 · 34/100")}`;
}

function firstDiagnosis() {
  return `
    ${statusRail("第一战诊断 · 这支小队如何配合")}
    <section class="result-world layer-environment">
      <img class="field-art" src="${ASSETS.field}" alt="战后断裂风路">
      <div class="result-wash"></div>
      <div class="result-party layer-actors">
        ${img(ASSETS.kindhand, "result-kindhand", "赛布尔 · 治疗")}
        ${img(ASSETS.farstring, "result-farstring", "妮娅 · 弓手")}
        <span class="result-order second">1 · 第二位</span>
        <span class="result-order lead">0 · 先行位</span>
      </div>
      <div class="cause-path layer-connectors">
        <div class="cause-node decision"><span>系统编队</span><b>妮娅先行</b><small>远程职责，但高暴露</small></div>
        <i></i>
        <div class="cause-node divergence"><span>最早差异 · 2.35s</span><b>重击 -42</b><small>妮娅 100 → 58</small></div>
        <i></i>
        <div class="cause-node response"><span>职业回应 · 3.60s</span><b>恢复 +12</b><small>妮娅 58 → 70</small></div>
      </div>
    </section>
    <aside class="context-rail result-rail layer-ui">
      <span class="rail-kicker">首战因果结果</span>
      <h2>治疗补回部分损失</h2>
      <dl class="result-copy">
        <div><dt>发生了什么</dt><dd>系统让妮娅先行；她承受重击后完成远程回应。</dd></div>
        <div><dt>为什么</dt><dd>赛布尔随后为实际受伤的妮娅恢复 12 生命。</dd></div>
        <div><dt>系统编队造成的差异</dt><dd>远程成员先行而高暴露；治疗只补回部分损失。</dd></div>
        <div><dt>现在改变了</dt><dd>妮娅 70/100；金币 0 → 20（仅一次）。</dd></div>
        <div><dt>下一步</dt><dd>比较安全与节奏两种应对方案。</dd></div>
      </dl>
    </aside>
    <footer class="action-dock result-dock layer-ui">
      <button class="secondary">${icon("inspect")}查看完整事件</button>
      <span class="receipt">${icon("check")}奖励已结算一次 · 金币 +20</span>
      <button class="primary">${icon("arrow")}查看下一场威胁</button>
    </footer>`;
}

const renderers = {
  "formation-review": formationReview,
  "approach-contact": approachContact,
  "damage-feedback": damageFeedback,
  "heal-response": healResponse,
  "ranged-finish": rangedFinish,
  "first-diagnosis": firstDiagnosis,
};

const root = document.querySelector("#slice");
root.dataset.frame = selectedFrame;
root.innerHTML = renderers[selectedFrame]();
document.documentElement.dataset.ready = "true";