export function startDemo(api, inlineFixtures) {
  const { createOrgChart, JsonOrgChartDataSource } = api;
  const container = document.getElementById('chart-host');
  const status = document.getElementById('status');
  const stylesheetUrls = {
    engine: new URL('./assets/engine.css', location.href).href,
    core: new URL('./assets/style.css', location.href).href,
  };
  const source = () => new JsonOrgChartDataSource(inlineFixtures ? inlineFixtures.initial : './data-v1.json');
  let chart;
  function create() {
    chart?.destroy();
    chart = createOrgChart({ container, dataSource: source(), stylesheetUrls, onStateChange(state) {
      status.textContent = state.status === 'ready' ? `Ready · ${state.dataVersion}`
        : state.status === 'error' ? `Error · ${state.issues.map(issue => issue.code).join(', ')}` : state.status;
    } });
    return chart.mount();
  }
  async function update() {
    const data = inlineFixtures ? inlineFixtures.changed : await (await fetch('./data-v2.json')).json();
    await chart.update(data);
  }
  function destroy() { chart.destroy(); status.textContent = 'Destroyed · 새 인스턴스로 다시 생성할 수 있습니다.'; }
  const actions = { reload: () => chart.reload(), update, destroy, recreate: create };
  for (const [id, action] of Object.entries(actions)) document.getElementById(id).addEventListener('click', () => {
    Promise.resolve().then(action).catch(() => { status.textContent = 'Core 호출 순서를 확인하세요.'; });
  });
  window.addEventListener('pagehide', () => chart.destroy(), { once: true });
  // This example's inspection seam uses only public Core APIs, never engine internals.
  window.OrgChartDemo = { api, container, stylesheetUrls, source, create, update, destroy, get chart() { return chart; } };
  create().then(() => { window.orgChartReady = true; }).catch(() => { status.textContent = 'Mount failed'; });
}