/* Nutshell shell prototype — CONCEPT (v3, portable-only)
   v3: forked from v2. Rich (hosted) mode removed — this is the Portable
   (saved .html) shell only: Floating chrome, chat = right drawer, Library
   modal, collapsible zoom + actions + transport.
   window.SHELL_CONCEPTS = { Concept1 } */
(function () {
  const { Icon } = window.NSIcons;
  const C = window.SHELL_CORE;
  const O = window.SHELL_OVERLAYS;
  const useEngine = C.useEngine;
  const { DiagramCanvas, ZoomPanel, CaptionStrip, Transport, IBtn, Pill, Avatar } = C;
  const { ChatBody, NuggetsBody, SourceBody, LibraryBody, OverlayHost, Scrim } = O;
  const Q = window.SHELL_QUEUE;
  const { LibBadge, Hairline, QueueLibrary, QueueCompose, AudioStage } = Q;
  const D = window.SHELL;

  const Traffic = () => <div className="traffic"><i className="r" /><i className="y" /><i className="g" /></div>;

  // click-away popover anchored by CSS class
  function Pop({ where, onClose, children }) {
    return (
      <React.Fragment>
        <div className="pop-catch" onPointerDown={onClose} />
        <div className={"pop-anchor pop-anchor--" + where}>{children}</div>
      </React.Fragment>
    );
  }

  // small dropdown menu (⋯)
  function Menu({ items, onClose, where }) {
    return (
      <Pop where={where} onClose={onClose}>
        <div className="menu glassT">
          {items.map((it, i) => it.sep
            ? <div key={i} className="menu-sep" />
            : <button key={i} className="menu-row" onClick={() => { onClose(); it.go(); }}>
                <Icon name={it.ic} size={15} /><span>{it.label}</span>{it.kbd && <kbd>{it.kbd}</kbd>}{it.right && <span className="menu-right">{it.right}</span>}
              </button>)}
        </div>
      </Pop>
    );
  }

  function Toast() {
    const e = useEngine();
    if (!e.toast) return null;
    return <div className="toast glassT"><Icon name="check" size={14} />{e.toast}</div>;
  }

  // =========================================================================
  //  FLOATING CHROME  (portable shell · chat = right drawer)
  // =========================================================================
  function Concept1() {
    const e = useEngine();
    const [pop, setPop] = React.useState(null);             // nuggets | menu
    const [actOpen, setActOpen] = React.useState(false);    // hover-reveal the action controls
    const [actPinned, setActPinned] = React.useState(false); // fixate the action controls open
    const actExpanded = actOpen || actPinned;
    const actions = (
      <React.Fragment>
        <IBtn icon="sparkles" label="Gold nuggets" active={pop === "nuggets"} onClick={() => setPop(pop === "nuggets" ? null : "nuggets")} />
        <IBtn icon="chat" label="Ask" active={e.chatOpen} onClick={e.toggleChat} />
        <IBtn icon="wand" label="Change audience" onClick={() => e.openOverlay("audience")} />
        <IBtn icon="share" label="Share" onClick={() => e.flash("Link copied")} />
        <IBtn icon="settings" label="Settings" onClick={() => e.openOverlay("settings")} />
      </React.Fragment>
    );
    return (
      <div className="c1">
        {e.playbackMode === "audio" ? <AudioStage /> : <DiagramCanvas />}
        <Hairline />

        {/* top-left row — brand/Library pill + zoom pill, side by side but separate */}
        <div className="c1-topleft">
          <div className="c1-brand glass">
            <Traffic />
            <button className="c1-libword" onClick={() => e.openOverlay("library")} title="Open Library">
              <Icon name="collection" size={14} /><span>Library</span>
            </button>
            <Pill variant="pri" icon="plus" onClick={() => e.openOverlay("qcompose")}>New</Pill>
            <LibBadge />
          </div>
          {e.playbackMode !== "audio" && <ZoomPanel collapsible />}
        </div>

        {/* top-right actions — collapses to a single button that reveals the set (hover to preview, click chevron to pin) */}
        <div className="c1-actions glass"
          onMouseEnter={() => setActOpen(true)}
          onMouseLeave={() => { if (!pop) setActOpen(false); }}>
          {actExpanded ? (
            <React.Fragment>
              <button className={"ib" + (actPinned ? " ib--on" : "")} onClick={() => setActPinned((p) => !p)} title={actPinned ? "Unpin (collapses when you move away)" : "Pin controls open"} aria-label="Pin controls" aria-pressed={actPinned}><Icon name="chevronRight" size={16} /></button>
              {actions}
            </React.Fragment>
          ) : (
            <IBtn icon="chevronLeft" label="Show controls" onClick={() => setActPinned(true)} />
          )}
        </div>

        {pop === "nuggets" && <Pop where="tr" onClose={() => setPop(null)}><NuggetsBody onClose={() => setPop(null)} /></Pop>}

        {/* transport — single floating object; caption folds inside it. Collapses to a bottom-left mini pill. */}
        <div className="c1-bottom">
          <Transport caption collapsible />
        </div>

        {/* chat = right drawer */}
        {e.chatOpen && (
          <div className="c1-drawer">
            <div className="glassT drawer-card"><ChatBody variant="drawer" unifiedHead onClose={() => e.setChatOpen(false)} /></div>
          </div>
        )}

        {/* library = generation queue + finished walkthroughs (Option C) */}
        {e.overlay === "library" && <QueueLibrary />}
        {e.overlay === "qcompose" && <QueueCompose />}
        {e.overlay === "source" && <Scrim onClose={e.closeOverlay} blur center><div onPointerDown={(ev) => ev.stopPropagation()}><SourceBody onClose={e.closeOverlay} openFull={() => e.openOverlay("sourceFull")} /></div></Scrim>}
        <OverlayHost />
        <Toast />
      </div>
    );
  }

  window.SHELL_CONCEPTS = { Concept1 };
})();