/* Nutshell shell prototype — APP (harness + window frame + keys) — v3
   v3: portable-only. Rich/Portable adaptive toggle removed. */
(function () {
  const { Icon } = window.NSIcons;
  const C = window.SHELL_CORE;
  const { EngineProvider, useEngine } = C;
  const { Concept1 } = window.SHELL_CONCEPTS;
  const { QueueProvider } = window.SHELL_QUEUE;

  function KeyHandler() {
    const e = useEngine();
    React.useEffect(() => {
      const h = (ev) => {
        const tag = (ev.target.tagName || "").toLowerCase();
        const typing = tag === "input" || tag === "textarea";
        if (ev.key === "Escape") { if (e.overlay) e.closeOverlay(); else if (e.chatOpen) e.setChatOpen(false); return; }
        if (typing) return;
        if ((ev.metaKey || ev.ctrlKey) && ev.key.toLowerCase() === "k") { ev.preventDefault(); e.openOverlay(e.overlay === "palette" ? null : "palette"); }
        else if ((ev.metaKey || ev.ctrlKey) && ev.key.toLowerCase() === "l") { ev.preventDefault(); e.openOverlay("library"); }
        else if ((ev.metaKey || ev.ctrlKey) && ev.key.toLowerCase() === "n") { ev.preventDefault(); e.openOverlay("qcompose"); }
        else if ((ev.metaKey || ev.ctrlKey) && ev.key === ",") { ev.preventDefault(); e.openOverlay("settings"); }
        else if (ev.key === " ") { ev.preventDefault(); e.togglePlay(); }
        else if (ev.key.toLowerCase() === "c") { e.toggleCaptions(); }
        else if (ev.key === "ArrowRight") { e.forward(); }
        else if (ev.key === "ArrowLeft") { e.rewind(); }
      };
      window.addEventListener("keydown", h);
      return () => window.removeEventListener("keydown", h);
    }, [e]);
    return null;
  }

  function Harness() {
    const e = useEngine();
    return (
      <React.Fragment>
        <KeyHandler />
        <div className="harness">
          <div className="harness-brand">
            <img src="../../assets/nutshell-icon.svg" width="22" height="22" alt="" />
            <div><b>Nutshell — shell concept</b><span>working prototype v3 · Portable · generation queue lives in the Library</span></div>
          </div>
          <div className="harness-right">
            <button className="harness-theme" onClick={e.toggleTheme} title="Toggle light / dark">
              <Icon name={e.theme === "dark" ? "info" : "dot"} size={15} />{e.theme === "dark" ? "Dark" : "Light"}
            </button>
          </div>
        </div>

        <div className="winframe">
          <QueueProvider><Concept1 /></QueueProvider>
        </div>

        <div className="harness-foot">
          <span><b>Try:</b> <kbd>⌘N</kbd> new walkthrough → joins the queue · open <b>Library</b> (<kbd>⌘L</kbd>) for In&nbsp;progress + history · top hairline = background work · <kbd>Space</kbd> play</span>
        </div>
      </React.Fragment>
    );
  }

  ReactDOM.createRoot(document.getElementById("root")).render(
    React.createElement(EngineProvider, { initialAdaptive: "portable", initialTheme: "light" }, React.createElement(Harness))
  );
})();