const POWER_MENU_TEMPLATE = `
<section class="power-overlay" data-power-overlay hidden>
  <div class="power-panel panel">
    <h2 class="power-title">Power Menu</h2>
    <div class="power-options" data-power-focus-root>
      <button class="focusable power-option" data-focusable="true" data-row="0" data-col="0" data-action="sleep">Sleep</button>
      <button class="focusable power-option" data-focusable="true" data-row="1" data-col="0" data-action="restart-nebula">Restart NebulaOS</button>
      <button class="focusable power-option" data-focusable="true" data-row="2" data-col="0" data-action="restart-system">Restart System</button>
      <button class="focusable power-option" data-focusable="true" data-row="3" data-col="0" data-action="shutdown">Shut Down</button>
      <button class="focusable power-option" data-focusable="true" data-row="4" data-col="0" data-action="cancel">Cancel</button>
    </div>
  </div>
</section>
`;

const ACTION_LOG = {
  sleep: "Sleep requested (stub)",
  "restart-nebula": "Restart NebulaOS requested (stub)",
  "restart-system": "Restart System requested (stub)",
  shutdown: "Shut Down requested (stub)",
};

export const createPowerMenuOverlay = ({ mountRoot }) => {
  mountRoot.insertAdjacentHTML("beforeend", POWER_MENU_TEMPLATE);

  const overlay = mountRoot.querySelector("[data-power-overlay]");
  const focusables = Array.from(overlay?.querySelectorAll("[data-focusable='true']") ?? []);
  let focusedIndex = 0;
  let openState = false;
  let onClose = null;

  if (overlay) {
    overlay.hidden = true;
  }

  const focusAt = (index) => {
    focusables.forEach((element) => {
      element.classList.remove("is-focused");
      element.setAttribute("aria-selected", "false");
    });

    focusedIndex = Math.max(0, Math.min(index, focusables.length - 1));
    const target = focusables[focusedIndex];
    target.classList.add("is-focused");
    target.setAttribute("aria-selected", "true");
    target.focus({ preventScroll: true });
  };

  const close = () => {
    openState = false;
    overlay.hidden = true;
    onClose?.();
    onClose = null;
  };

  const open = (options = {}) => {
    openState = true;
    onClose = options.onClose ?? null;
    overlay.hidden = false;
    focusAt(0);
  };

  const runAction = (action) => {
    if (action === "cancel") {
      close();
      return;
    }

    if (ACTION_LOG[action]) {
      console.log(`[PowerMenu] ${ACTION_LOG[action]}`);
      close();
    }
  };

  const handleAction = (action) => {
    if (!openState) {
      return;
    }

    if (action === "up") {
      focusAt(focusedIndex - 1);
      return;
    }

    if (action === "down") {
      focusAt(focusedIndex + 1);
      return;
    }

    if (action === "accept") {
      const current = focusables[focusedIndex];
      runAction(current?.dataset.action ?? "cancel");
      return;
    }

    if (action === "back" || action === "menu") {
      close();
    }
  };

  return {
    open,
    close,
    isOpen: () => openState,
    handleAction,
  };
};
