// Unity で動かした様子（2026-11-03）。図面のある店ごとに、引き→問題の場所→寄りの動画を1本。
// 条件は Unity の録画の回のもの（試算で選んでいる人数・台数とは別）。動画と表紙の画像は R2（/media/）
const UNITY = {
  fam_p0: { video: "/media/series8_unity_fam_p0_v1.mp4", poster: "/media/series8_unity_fam_p0_v1.jpg", staff: 2, note: "引きで店全体を見たあと、ロボットが長く止まった場所に3か所寄ります（約70秒）" },
  fam_p1: { video: "/media/series8_unity_fam_p1_v1.mp4", poster: "/media/series8_unity_fam_p1_v1.jpg", staff: 4, note: "引きで店全体を見たあと、ロボットが長く止まった場所に3か所寄ります（約70秒）" },
  fam_p2: { video: "/media/series8_unity_fam_p2_v1.mp4", poster: "/media/series8_unity_fam_p2_v1.jpg", staff: 2, note: "引きで店全体を見たあと、ロボットが長く止まった場所に3か所寄ります（約70秒）" },
  fam_p3: { video: "/media/series8_unity_fam_p3_v1.mp4", poster: "/media/series8_unity_fam_p3_v1.jpg", staff: 4, note: "引きで店全体を見たあと、ロボットが長く止まった場所に3か所寄ります（約55秒）" },
  fam_p4: { video: "/media/series8_unity_fam_p4_v1.mp4", poster: "/media/series8_unity_fam_p4_v1.jpg", staff: 3, note: "ロボットが30秒以上止まった場所がなかったので、引きだけです（8秒）" },
  fam_p5: { video: "/media/series8_unity_fam_p5_v1.mp4", poster: "/media/series8_unity_fam_p5_v1.jpg", staff: 4, note: "引きで店全体を見たあと、ロボットが長く止まった場所に3か所寄ります（約70秒）" }
};
let planView = "plan";
function unityPane(k) {
  const u = UNITY[k]; if (!u) return "";
  return `<div class="pv-unity"${planView === "unity" ? "" : " hidden"}>`
    + `<video controls muted playsinline preload="none" poster="${u.poster}" data-src="${u.video}" aria-label="${STORES[k].short}を Unity で動かした様子"></video>`
    + `<p class="pn">${u.note}。動画の条件はふつうの混み具合・スタッフ${u.staff}人・ロボット2台で、上で選んでいる条件とは別です。Unity の中で起きたことで、実際のロボットや人が同じ動きをするとは限りません。</p></div>`;
}
function bigPlan(k) {
  const s = STORES[k], p = PLANS[k];
  if (!p) return "";
  const seats = p.tables.reduce((n, a) => n + a[4], 0);
  const u = UNITY[k], v = u ? planView : "plan";
  const sw = u ? `<div class="pv-sw" role="tablist" aria-label="平面図と動画"><button type="button" role="tab" data-pv="plan" aria-selected="${v === "plan"}">平面図</button><button type="button" role="tab" data-pv="unity" aria-selected="${v === "unity"}">Unity で動かすと</button></div>` : "";
  return `<div class="plan-big"><div class="ph"><b>${s.short}</b><span>${s.tables}卓・${seats}席・外形 ${p.w}m×${p.d}m・厨房（受け渡し口）から卓まで ${s.dist_m[0]}〜${s.dist_m[1]}m（平均${s.dist_mean}m）</span>${sw}</div>`
    + `<div class="pv-plan"${v === "plan" ? "" : " hidden"}>` + bigPlanSvg(p)
    + `<p class="pn">白い四角が卓（数字は席数）、黒い帯が料理の受け渡し口、点線がロボットの待機場所、灰色の線が壁・仕切りです。寸法はすべて仮の値です。</p></div>`
    + unityPane(k) + `</div>`;
}
function buildLayouts() {
  const el = document.getElementById("layouts");
  const base = baseOf(state.store);
  const on = LAYOUT_BASES.includes(base);
  el.hidden = !on;
  if (!on) return;
  const fam = STORES[base];
  const items = [[base, base === "family" ? "① 図面なし" : "図面なし", `${fam.tables}卓・${fam.dist_m[0]}〜${fam.dist_m[1]}m`, `<div class="noplan">距離の幅だけで試算</div>`]]
    .concat(LAYOUT_KEYS.filter(k => baseOf(k) === base).map(k => { const s = STORES[k]; return [k, s.short, `${s.tables}卓・${s.dist_m[0]}〜${s.dist_m[1]}m`, PLANS[k] ? planSvg(PLANS[k]) : ""]; }));
  el.innerHTML = `<p class="lay-h">店の形を選ぶ（${fam.label}）。平面図から、卓の数と厨房から卓までの距離を取ります</p>`
    + `<div class="lay-grid" role="radiogroup" aria-label="店の形">`
    + items.map(([k, name, sub, pic], i) => `<input type="radio" name="layout" id="layout-${i}" value="${k}"${state.store === k ? " checked" : ""}><label for="layout-${i}">${pic}<b>${name}</b><span>${sub}</span></label>`).join("")
    + `</div>` + (isLayout(state.store) ? bigPlan(state.store) : "");
  // 動画を見ている状態で店を替えたら、替えた先の店の動画をそのまま読み込んで流す（2026-11-03）
  const vid = planView === "unity" && el.querySelector(".pv-unity:not([hidden]) video");
  if (vid) { vid.src = vid.dataset.src; vid.play().catch(() => {}); }
  el.onchange = e => { state.store = e.target.value; state.staff = S().staff[1]; state.cbase = S().staff[1]; state.reg = S().registers; buildStores(); buildLayouts(); buildControls(); render(); };
  // 平面図と動画の切り替え。動画は押したときに初めて読み込み、そのまま再生する
  el.onclick = e => {
    const b = e.target.closest("[data-pv]"); if (!b) return;
    planView = b.dataset.pv;
    const box = b.closest(".plan-big");
    box.querySelectorAll("[data-pv]").forEach(x => x.setAttribute("aria-selected", String(x === b)));
    box.querySelector(".pv-plan").hidden = planView !== "plan";
    const pane = box.querySelector(".pv-unity"); pane.hidden = planView !== "unity";
    const vid = pane.querySelector("video");
    if (planView === "unity") { if (!vid.src) vid.src = vid.dataset.src; vid.play().catch(() => {}); } else vid.pause();
  };
}