const panel = document.querySelector("#panel");
const buttons = Array.from(document.querySelectorAll("[data-view]"));

const views = {
  orders: {
    title: "订单工作台",
    body: "状态从列表切换到业务面板，浏览器负责把 DOM 更新过渡成连续动画。",
    metrics: ["128 个待处理", "96.4% 准时率"],
  },
  analytics: {
    title: "实时分析",
    body: "适合展示页面状态、卡片位置、详情视图之间的平滑切换。",
    metrics: ["42ms INP", "3 条异常趋势"],
  },
  settings: {
    title: "权限设置",
    body: "在支持的浏览器里使用 View Transitions；不支持时保留普通状态切换。",
    metrics: ["7 个角色", "24 项权限"],
  },
};

function render(view) {
  const data = views[view];
  panel.innerHTML = `
    <article class="card">
      <p class="eyebrow">Current view</p>
      <h2>${data.title}</h2>
      <p>${data.body}</p>
    </article>
    <section class="summary">
      ${data.metrics
        .map((metric) => `<article class="card"><strong>${metric}</strong><span>View transition keeps the context visible.</span></article>`)
        .join("")}
    </section>
  `;
}

function setActive(view) {
  buttons.forEach((button) => {
    button.classList.toggle("active", button.dataset.view === view);
  });
  render(view);
}

buttons.forEach((button) => {
  button.addEventListener("click", () => {
    const next = button.dataset.view;
    if (document.startViewTransition) {
      document.startViewTransition(() => setActive(next));
      return;
    }
    setActive(next);
  });
});

setActive("orders");