export const createPlaceholderView = (context, { id, title, subtitle, backTarget = "home" }) => ({
  id,
  render: () => `
    <section class="view placeholder-view" data-view="${id}">
      <header class="shell-topbar">
        <div class="shell-topbar-content">
          <p class="shell-brand">Nebula OS</p>
          <div class="shell-status">
            <span class="shell-avatar" aria-hidden="true"></span>
            <p class="shell-time" data-clock>--:--</p>
          </div>
        </div>
        <div class="shell-accent-line"></div>
      </header>
      <section class="placeholder-body panel" data-focus-root>
        <p class="muted">${subtitle}</p>
        <h1 class="view-title">${title}</h1>
        <p class="placeholder-copy">This area is part of the NebulaOS shell roadmap. Navigation is wired; content ships in a future update.</p>
        <button
          type="button"
          class="focusable placeholder-back"
          data-focusable="true"
          data-row="0"
          data-col="0"
          data-target="${backTarget}"
          data-focus-key="placeholder-back"
        >Back to Home</button>
      </section>
    </section>
  `,
  mount() {},
  getNavigationContract: () => {
    const focusRoot = document.querySelector(`[data-view="${id}"] [data-focus-root]`);
    const defaultFocus = focusRoot?.querySelector("[data-focusable='true']");
    return {
      focusRoot,
      defaultFocus,
      hintsTemplate: "#global-hints-template",
      onAccept(focused) {
        const target = focused?.dataset?.target;
        if (target) {
          context.renderView(target);
        }
      },
      onBack() {
        context.renderView(backTarget);
      },
    };
  },
});
