// SRI App — shell chrome: top bar (universal search), spine rail, context panel, composer.
// Matured from canvas-shell.jsx: Priya-only (role divergence is a later phase), Present affordance.
// Loads after sri-stage.jsx.

// ── Spine — the feature switcher. Stateless; navigation costs nothing. ──
const SPINE_ITEMS = [
  { id: "home", icon: "home", label: "Home" },
  { id: "businesses", icon: "building", label: "Businesses" },
  { id: "opportunities", icon: "briefcase", label: "Opportunity workspace" },
  { id: "shared", icon: "share", label: "Lists" },
  { id: "reports", icon: "chart", label: "Reports" },
];

function Spine({ feature, filter, navCounts, onSwitch, needsYou, role, wide, onToggleWide }) {
  const [menu, setMenu] = React.useState(null); // "settings" | "user" | null
  const [bizOpen, setBizOpen] = React.useState(true);
  const bizActive = feature === "businesses" || feature === "shared";
  const counts = navCounts || { all: 0, intake: 0, lists: 0 };
  const user = role === "sam"
    ? { init: "SC", name: "Sam Cole", role: "VP Partnerships, LA28" }
    : { init: "PN", name: "Priya Nair", role: "Procurement Lead, LA28" };

  React.useEffect(() => {
    if (!menu) return;
    const close = () => setMenu(null);
    window.addEventListener("click", close);
    window.addEventListener("keydown", close);
    return () => { window.removeEventListener("click", close); window.removeEventListener("keydown", close); };
  }, [menu]);

  React.useEffect(() => {
    const onKey = (e) => { if ((e.metaKey || e.ctrlKey) && e.key === ".") { e.preventDefault(); onToggleWide(); } };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onToggleWide]);

  return (
    <nav className={"cvSpine" + (wide ? " isWide" : "")} aria-label="Features">
      <div className="cvSpineSection">
        <button type="button"
          className={"cvSpineBtn" + (feature === "home" ? " isOn" : "")}
          aria-label="Home" onClick={() => onSwitch("home")}>
          <Icon name="home" size={17} />
          <span className="cvSpineLabel">Home</span>
          {needsYou.home > 0 && <span className="cvSpineBadge tabular">{needsYou.home}</span>}
          {!wide && <span className="cvSpineTip">Home{needsYou.home > 0 ? " · " + needsYou.home + " waiting" : ""}</span>}
        </button>
        <button type="button"
          className={"cvSpineBtn" + (feature === "opportunities" ? " isOn" : "")}
          aria-label="Opportunity workspace" onClick={() => onSwitch("opportunities")}>
          <Icon name="briefcase" size={17} />
          <span className="cvSpineLabel">Opportunity workspace</span>
          {needsYou.opportunities > 0 && <span className="cvSpineBadge tabular">{needsYou.opportunities}</span>}
          {!wide && <span className="cvSpineTip">Opportunity workspace</span>}
        </button>
      </div>

      <div className="cvSpineSection">
        {wide && <div className="cvSpineHdr">Businesses</div>}
        <button type="button"
          className={"cvSpineBtn cvSpineParent" + (bizActive && !(bizOpen && wide) ? " isOn" : "") + (bizOpen && wide ? " isExpanded" : "")}
          aria-label="Businesses" aria-expanded={wide ? bizOpen : undefined}
          onClick={() => { if (wide) setBizOpen((o) => !o); else onSwitch("businesses", { filter: "all" }); }}>
          <Icon name="building" size={17} />
          <span className="cvSpineLabel">Businesses</span>
          {wide && <span className="cvSpineChev"><Icon name="chevR" size={13} /></span>}
          {!wide && <span className="cvSpineTip">Businesses</span>}
        </button>
        {wide && bizOpen && (
          <div className="cvSpineSub">
            <button type="button" className={"cvSpineSubBtn" + (feature === "businesses" && filter !== "interest" ? " isOn" : "")}
              onClick={() => onSwitch("businesses", { filter: "all" })}>
              <span className="cvSpineDot"></span>
              <Icon name="list" size={14} />
              <span className="cvSpineSubT">All businesses</span>
              {counts.all > 0 && <span className="cvSpineSubBadge tabular">{counts.all}</span>}
            </button>
            <button type="button" className={"cvSpineSubBtn" + (feature === "businesses" && filter === "interest" ? " isOn" : "")}
              onClick={() => onSwitch("businesses", { filter: "interest" })}>
              <span className="cvSpineDot"></span>
              <Icon name="clipboard" size={14} />
              <span className="cvSpineSubT">Sourcing</span>
              {counts.intake > 0 && <span className="cvSpineSubBadge tabular">{counts.intake}</span>}
            </button>
            <button type="button" className={"cvSpineSubBtn" + (feature === "shared" ? " isOn" : "")}
              onClick={() => onSwitch("shared")}>
              <span className="cvSpineDot"></span>
              <Icon name="share" size={14} />
              <span className="cvSpineSubT">Lists</span>
              {counts.lists > 0 && <span className="cvSpineSubBadge tabular">{counts.lists}</span>}
            </button>
          </div>
        )}
      </div>

      <div className="cvSpineSection">
        <button type="button"
          className={"cvSpineBtn" + (feature === "reports" ? " isOn" : "")}
          aria-label="Reports" onClick={() => onSwitch("reports")}>
          <Icon name="chart" size={17} />
          <span className="cvSpineLabel">Reports</span>
          {!wide && <span className="cvSpineTip">Reports</span>}
        </button>
      </div>

      <div className="cvSpineSection">
        {wide && <div className="cvSpineHdr">Coming soon</div>}
        <button type="button" className="cvSpineBtn isSoon" disabled aria-disabled="true">
          <Icon name="pieChart" size={17} />
          <span className="cvSpineLabel">Analytics</span>
          {!wide && <span className="cvSpineTip">Analytics · coming soon</span>}
        </button>
        <button type="button" className="cvSpineBtn isSoon" disabled aria-disabled="true">
          <Icon name="sparkles" size={17} />
          <span className="cvSpineLabel">Intelligence</span>
          {!wide && <span className="cvSpineTip">Intelligence · coming soon</span>}
        </button>
      </div>

      <div className="cvSpineFoot">
        <div className="cvSpineMenuWrap">
          <button type="button" aria-label="Settings" aria-expanded={menu === "settings"}
            className={"cvSpineBtn" + (menu === "settings" ? " isPressed" : "")}
            onClick={(e) => { e.stopPropagation(); setMenu(menu === "settings" ? null : "settings"); }}>
            <Icon name="settings" size={17} />
            <span className="cvSpineLabel">Settings</span>
            {!wide && <span className="cvSpineTip">Settings</span>}
          </button>
          {menu === "settings" && (
            <div className="cvSpineMenu" onClick={(e) => e.stopPropagation()}>
              <button type="button" className="cvSpineMenuRow" onClick={() => setMenu(null)}>
                <Icon name="users" size={13} /><span>Workspace &amp; members</span></button>
              <button type="button" className="cvSpineMenuRow" onClick={() => setMenu(null)}>
                <Icon name="list" size={13} /><span>Data sources</span><span className="cvSpineMenuD">3 connected</span></button>
              <button type="button" className="cvSpineMenuRow" onClick={() => setMenu(null)}>
                <Icon name="eye" size={13} /><span>Notifications</span></button>
            </div>
          )}
        </div>

        <div className="cvSpineMenuWrap">
          <button type="button" aria-label={user.name} aria-expanded={menu === "user"}
            className={"cvSpineBtn cvSpineUserBtn" + (menu === "user" ? " isPressed" : "")}
            onClick={(e) => { e.stopPropagation(); setMenu(menu === "user" ? null : "user"); }}>
            <span className="cvSpineAvatar">{user.init}</span>
            <span className="cvSpineLabel">
              <span className="cvSpineUserN">{user.name}</span>
              <span className="cvSpineUserR">{user.role}</span>
            </span>
            {!wide && <span className="cvSpineTip">{user.name} · {user.role}</span>}
          </button>
          {menu === "user" && (
            <div className="cvSpineMenu" onClick={(e) => e.stopPropagation()}>
              <div className="cvSpineMenuH"><b>{user.name}</b><span>{user.role}</span></div>
              <button type="button" className="cvSpineMenuRow" onClick={() => setMenu(null)}>
                <Icon name="user" size={13} /><span>Profile</span></button>
              <button type="button" className="cvSpineMenuRow" onClick={() => setMenu(null)}>
                <Icon name="logout" size={13} /><span>Sign out</span></button>
            </div>
          )}
        </div>

        <button type="button" className="cvSpineBtn cvSpineToggle"
          aria-label={wide ? "Collapse sidebar" : "Expand sidebar"} onClick={onToggleWide}>
          <Icon name="panelL" size={17} />
          <span className="cvSpineLabel">Collapse</span>
          {!wide && <span className="cvSpineTip">Expand<span className="mono">⌘.</span></span>}
        </button>
      </div>
    </nav>
  );
}

// ── Context panel — the active feature's working set; selection lives here ──
function ContextPanel({ feature, filter, onFilter, selection, onClearSel, rows, waiting, onWaiting, shortlistExists, onOpenShortlist, day, onCollapse }) {
  const counts = {
    all: rows.length,
    catering: rows.filter((r) => r.category === "catering").length,
    dormant: rows.filter((r) => r.dormantSince).length,
    interest: rows.filter((r) => r.bucket === "interest").length,
  };
  const FILTERS = [
    { id: "all", label: "All businesses", n: counts.all },
    { id: "catering", label: "Catering", n: counts.catering },
    { id: "dormant", label: "Quiet since 2024", n: counts.dormant },
    { id: "interest", label: "Shown interest", n: counts.interest },
  ];
  return (
    <aside className="cvCtx">
      <div className="cvCtxTitleRow">
        <div className="cvCtxTitle">{SPINE_ITEMS.find((s) => s.id === feature).label}</div>
        {onCollapse && (
          <button type="button" className="cvCtxCollapse" onClick={onCollapse}
            aria-label="Collapse panel" title="Collapse panel"><Icon name="chevL" size={13} /></button>
        )}
      </div>

      {day === "zero" && (
        <div className="cvCtxEmpty">Working sets appear here once your first import lands.</div>
      )}

      {day !== "zero" && feature === "home" && (
        <React.Fragment>
          <div className="cvCtxH">Waiting on you</div>
          {waiting.map((w) => (
            <button key={w.t} type="button" className="cvCtxRow cvCtxWait" onClick={() => onWaiting(w)}>
              <span className="cvCtxRowT">{w.t}</span>
              <span className="cvCtxRowD">{w.d}</span>
            </button>
          ))}
          <div className="cvCtxH">Recent</div>
          {window.CanvasData.search.recents.map((r) => (
            <div key={r.t} className="cvCtxRow"><span className="cvCtxRowT">{r.t}</span><span className="cvCtxRowD">{r.d}</span></div>
          ))}
        </React.Fragment>
      )}

      {day !== "zero" && feature === "businesses" && (
        <React.Fragment>
          <div className="cvCtxH">Filters</div>
          {FILTERS.map((f) => (
            <button key={f.id} type="button"
              className={"cvCtxFilter" + (filter === f.id ? " isOn" : "")}
              onClick={() => onFilter(f.id)}>
              <span>{f.label}</span><span className="tabular">{f.n}</span>
            </button>
          ))}
          {shortlistExists && (
            <React.Fragment>
              <div className="cvCtxH">Lists</div>
              <button type="button" className="cvCtxRow" onClick={onOpenShortlist}>
                <span className="cvCtxRowT"><Icon name="list" size={12} style={{ marginRight: 5, verticalAlign: -1 }} />Q3 caterers</span>
                <span className="cvCtxRowD">12 businesses · created today</span>
              </button>
            </React.Fragment>
          )}
          <div className="cvCtxH">Selection</div>
          {selection.length === 0
            ? <div className="cvCtxEmpty">Nothing selected. Selected rows become "them" when you talk to this page.</div>
            : <div className="cvCtxSel">
                <span className="tabular">{selection.length} selected</span>
                <button type="button" onClick={onClearSel}>Clear</button>
              </div>}
        </React.Fragment>
      )}

      {day !== "zero" && feature === "opportunities" && (
        <React.Fragment>
          <div className="cvCtxH">Open</div>
          <div className="cvCtxRow"><span className="cvCtxRowT">Opening-ceremony catering</span><span className="cvCtxRowD">RFX · due Aug 15 · 3 matches</span></div>
          <div className="cvCtxRow"><span className="cvCtxRowT">Broadcast compound AV</span><span className="cvCtxRowD">project · scoping</span></div>
        </React.Fragment>
      )}

      {day !== "zero" && feature === "shared" && (
        <React.Fragment>
          <div className="cvCtxH">Spaces</div>
          <div className="cvCtxRow"><span className="cvCtxRowT">Legacy Sports Partners</span><span className="cvCtxRowD">joint sourcing · no re-export</span></div>
          <div className="cvCtxH">Standing intake</div>
          <div className="cvCtxRow"><span className="cvCtxRowT">Relationship intake</span><span className="cvCtxRowD">la28.stimulus.link/intake · always on</span></div>
        </React.Fragment>
      )}

      {day !== "zero" && feature === "reports" && (
        <React.Fragment>
          <div className="cvCtxH">Monthly</div>
          <div className="cvCtxRow isOn"><span className="cvCtxRowT">June 2026</span><span className="cvCtxRowD">assembling on the stage</span></div>
          <div className="cvCtxRow"><span className="cvCtxRowT">May 2026</span><span className="cvCtxRowD">sent to leadership · May 31</span></div>
        </React.Fragment>
      )}
    </aside>
  );
}

// ── Universal search — popup for lookups, escalation for questions ───────
function UniversalSearch({ role, onOpenEntity, onEscalate }) {
  const [q, setQ] = React.useState("");
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  const wrapRef = React.useRef(null);
  const data = window.CanvasData.search;

  React.useEffect(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key === "k") { e.preventDefault(); ref.current && ref.current.focus(); }
      if (e.key === "Escape") setOpen(false);
    };
    window.addEventListener("keydown", onKey);
    const onDocDown = (e) => { if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false); };
    document.addEventListener("mousedown", onDocDown);
    return () => { window.removeEventListener("keydown", onKey); document.removeEventListener("mousedown", onDocDown); };
  }, []);

  const ql = q.trim().toLowerCase();
  const isQuestion = ql.split(/\s+/).length >= 4 || ql.includes("?");
  const hits = [];
  if (ql && !isQuestion) {
    if ("meridian catering".includes(ql) || ql.includes("meri")) hits.push({
      id: "meridian", t: "Meridian Catering Co.", d: data.meridianContext[role], icon: "building" });
    if ("skyline av staging".includes(ql) || ql.includes("sky")) hits.push({
      id: "skyline", t: "Skyline AV & Staging", d: role === "sam" ? "2 shared crew leads · your meeting Tuesday" : "Match candidate on your opening-ceremony RFX", icon: "building" });
    if ("q3 caterers shortlist".includes(ql)) hits.push({
      id: "shortlist", t: "Q3 caterers", d: "shortlist · 12 businesses", icon: "list" });
  }

  return (
    <div className="cvSearchWrap" ref={wrapRef}>
      <div className={"cvSearch" + (open ? " isOpen" : "")}
        onClick={() => { if (ref.current) ref.current.focus(); setOpen(true); }}
        style={{ cursor: "text" }}>
        <Icon name="search" size={13} />
        <input ref={ref} value={q} placeholder="Search businesses, lists, spaces — or ask"
          onChange={(e) => setQ(e.target.value)}
          onFocus={() => setOpen(true)}
          onKeyDown={(e) => {
            if (e.key === "Enter" && ql) {
              if (isQuestion || hits.length === 0) { onEscalate(q); setQ(""); setOpen(false); e.target.blur(); }
              else { onOpenEntity(hits[0].id); setQ(""); setOpen(false); e.target.blur(); }
            }
          }} />
        <span className="cvSearchK mono">⌘K</span>
      </div>
      {open && (
        <div className="cvSearchPop" onMouseDown={(e) => e.preventDefault()}>
          {!ql && (
            <React.Fragment>
              <div className="cvPopH">Waiting on you</div>
              {data.waiting.map((w) => (
                <button key={w.t} type="button" className="cvPopRow" onClick={() => { setOpen(false); onEscalate("__waiting:" + w.t); }}>
                  <Icon name={w.icon === "gate" ? "pause" : "check"} size={13} />
                  <span className="cvPopT">{w.t}</span><span className="cvPopD">{w.d}</span>
                </button>
              ))}
              <div className="cvPopH">Recent</div>
              {data.recents.map((r) => (
                <button key={r.t} type="button" className="cvPopRow"
                  onClick={() => { setOpen(false); if (r.t.startsWith("Meridian")) onOpenEntity("meridian"); }}>
                  <Icon name={r.icon === "list" ? "list" : "building"} size={13} />
                  <span className="cvPopT">{r.t}</span><span className="cvPopD">{r.d}</span>
                </button>
              ))}
            </React.Fragment>
          )}
          {ql && hits.map((h) => (
            <button key={h.id} type="button" className="cvPopRow"
              onClick={() => { setQ(""); setOpen(false); h.id === "shortlist" ? onEscalate("__openShortlist") : onOpenEntity(h.id); }}>
              <Icon name={h.icon} size={13} />
              <span className="cvPopT">{h.t}</span><span className="cvPopD">{h.d}</span>
            </button>
          ))}
          {ql && (
            <button type="button" className="cvPopEscalate"
              onClick={() => { const v = q; setQ(""); setOpen(false); onEscalate(v); }}>
              <span className="cvPopEscGlyph" aria-hidden="true">
                <svg width="9" height="9" viewBox="0 0 8 8"><path d="M1 7 7 4 1 1v2.4L4.4 4 1 4.6Z" fill="currentColor"></path></svg>
              </span>
              <span>Ask the agent — <b>“{q.trim()}”</b></span>
              <span className="cvPopD">runs on this page</span>
            </button>
          )}
          {ql && hits.length === 0 && !isQuestion && (
            <div className="cvPopNone">No direct match — asking runs a real search across the record.</div>
          )}
        </div>
      )}
    </div>
  );
}

// ── Top bar ───────────────────────────────────────────────────────────────
function TopBar({ role, onOpenEntity, onEscalate }) {
  return (
    <header className="cvTop">
      <img src={(window.__resources && window.__resources.wordmark) || "../../assets/stimulus-wordmark.svg"} alt="Stimulus" className="cvTopLogo" />
      <UniversalSearch role={role} onOpenEntity={onOpenEntity} onEscalate={onEscalate} />
      <div className="cvTopRight">
        <span className="cvAvatar" title={role === "priya" ? "Priya Nair · Procurement Lead, LA28" : "Sam Cole · VP Partnerships, LA28"}>{role === "priya" ? "PN" : "SC"}</span>
      </div>
    </header>
  );
}

// ── Composer — one input; the frame chip shows what the agent sees ───────
function Composer({ feature, selection, subject, acting, busy, onSubmit, onFocus, onBlur, value, setValue, onFresh, freshDisabled }) {
  const featureLabel = SPINE_ITEMS.find((s) => s.id === feature).label;
  const taRef = React.useRef(null);
  const submit = () => { if (value.trim() && !busy) onSubmit(value.trim()); };
  const grow = (el) => { if (!el) return; el.style.height = "auto"; el.style.height = Math.min(el.scrollHeight, 168) + "px"; };
  React.useEffect(() => { grow(taRef.current); }, [value]);
  return (
    <div className="cvComposer">
      <FrameChip feature={featureLabel} selection={selection.length} subject={subject} acting={acting} />
      <form className="cvComposerBox" onSubmit={(e) => { e.preventDefault(); submit(); }}>
        <div className="cvComposerField">
          <textarea ref={taRef} rows={1} value={value}
            onChange={(e) => setValue(e.target.value)} onFocus={onFocus} onBlur={onBlur}
            onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); submit(); } }}
            placeholder={busy ? "Working \u2014 you can keep typing" : "Ask about any relationship, @mention a business, or tell this page what to do\u2026"} />
          <span className="cvComposerFocusHint"><kbd>⌘L</kbd> to focus</span>
        </div>
        <div className="cvComposerBar">
          <div className="cvComposerTools">
            <button type="button" className="cvComposerModel" aria-label="Agent scope">
              <Icon name="sparkles" size={14} /><span>Agent · {featureLabel}</span><Icon name="chevD" size={12} />
            </button>
            <button type="button" className="cvComposerMode" aria-label="Depth" title="Reasoning depth">
              <Icon name="bolt" size={14} /><span>Deep</span>
            </button>
          </div>
          <div className="cvComposerRight">
            {onFresh && (
              <button type="button" className="cvComposerIcon" onClick={onFresh} disabled={freshDisabled}
                aria-label="Fresh session" title="Fresh session \u2014 clears the view, not the memory">
                <Icon name="penSquare" size={16} />
              </button>
            )}
            <button type="button" className="cvComposerIcon" aria-label="Add context" title="Attach a business, list, or file">
              <Icon name="plus" size={17} />
            </button>
            <button type="submit" className="cvComposerSend" disabled={!value.trim() || busy} aria-label="Send">
              <Icon name={busy ? "sparkles" : "arrowUp"} size={16} />
            </button>
          </div>
        </div>
      </form>
    </div>
  );
}

Object.assign(window, { Spine, ContextPanel, UniversalSearch, TopBar, Composer, SPINE_ITEMS });