/* Waypath Platform — premium shell. Floating composer · status groups · slide-in inspector. */
const {
  Btn, Arr, Row, CustomerRow, GroupH, Subhead,
  CustomerInspector, OppInspector, FirstRunView, ThreadView, ReportsView, STATUSES,
  AsciiStatus, Ticker, AtmosField, ThreadBg, StrengthStrip, TickStrip
} = window.WP_VIEWS;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "scenario": "active",
  "destination": "today",
  "showInspector": true,
  "accent": "#ff5a1f"
}/*EDITMODE-END*/;

/* ───────── topbar ───────── */
function Topbar({ crumbs }) {
  return (
    <header className="top">
      <div className="ws">
        <span className="av">
          <AsciiStatus status="run" size={22} invertMouse />
        </span>
        <span className="nm">WAYPATH<small>acme</small></span>
        <span className="chev">▾</span>
      </div>
      <div className="crumbs">
        {crumbs.map((c, i) => (
          <React.Fragment key={i}>
            {i > 0 ? <span className="sep">/</span> : null}
            <span className={i === crumbs.length - 1 ? "cur" : ""}>{c.label}</span>
          </React.Fragment>
        ))}
        {crumbs[crumbs.length - 1] && crumbs[crumbs.length - 1].id ? (
          <span className="tag"><kbd>{crumbs[crumbs.length - 1].id}</kbd></span>
        ) : null}
      </div>
      <div className="signal-strip" title="Signal">
        <span className="ss-label">SIG</span>
        <TickStrip ticks={['lo','hi','lo','md','hi','lo','hi','lo']} />
        <span className="ss-num">4/8</span>
        <span className="ss-help" tabIndex={0} aria-label="What is this?">
          ?
          <span className="ss-tip" role="tooltip">
            <b>Signal strength</b><br />
            Live readout of inbound buying-intent signals across your active accounts. Tall vermillion bars are hot signals firing right now; muted bars are background noise. <b>4/8</b> = 4 hot signals in the last 60s.
          </span>
        </span>
      </div>
      <div className="ract">
        <div className="cmdk"><span>Search</span><kbd>⌘ K</kbd></div>
        <span className="live-tag"><span className="pulse" /><b>5</b>agents</span>
        <span className="user-chip">sc</span>
      </div>
    </header>
  );
}

/* ───────── rail ───────── */
function Rail({ dest, setDest, scenario, onDemo }) {
  const nav = [
    { id: "today", label: "Today", count: "12", k: "T", icon: (
      <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.3"><circle cx="7" cy="7" r="5.5" /><path d="M7 4v3l2 1.5" /></svg>
    ) },
    { id: "pipeline", label: "Pipeline", count: "42", k: "P", icon: (
      <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.3"><rect x="1.5" y="2.5" width="11" height="2" /><rect x="1.5" y="6" width="8" height="2" /><rect x="1.5" y="9.5" width="5" height="2" /></svg>
    ) },
    { id: "customers", label: "Customers", count: "2.1k", k: "C", icon: (
      <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.3"><circle cx="5" cy="5" r="2.5" /><path d="M1 12c0-2.2 1.8-4 4-4s4 1.8 4 4" /><circle cx="10" cy="6" r="2" /><path d="M8 12c0-1.8 1.3-3.3 3-3.9" /></svg>
    ) },
    { id: "atlas", label: "Atlas", count: "ATL-01", k: "A", icon: (
      <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.3">
        <circle cx="7" cy="7" r="1.8" fill="currentColor" stroke="none" />
        <circle cx="2.5" cy="3" r="1" fill="currentColor" stroke="none" />
        <circle cx="11.5" cy="3.5" r="1.1" fill="currentColor" stroke="none" />
        <circle cx="11" cy="11" r="1" fill="currentColor" stroke="none" />
        <circle cx="3" cy="11" r="1.1" fill="currentColor" stroke="none" />
        <path d="M7 7L2.5 3M7 7l4.5-3.5M7 7l4 4M7 7l-4 4" opacity=".55" />
      </svg>
    ) }
  ];

  return (
    <aside className="rail">
      <div className="r-group">
        {nav.map(n => (
          <div key={n.id} className={`r-item${dest === n.id && scenario !== "firstrun" ? " on" : ""}${n.id === "atlas" ? " r-atlas" : ""}`} onClick={() => setDest(n.id)}>
            <span className="ic">{n.icon}</span>
            <span className="lab">{n.label}</span>
            <span className="ct">{n.count}</span>
            <span className="kbd" style={{ position: "absolute", right: 24 }}>{n.k}</span>
          </div>
        ))}
        <div className={`r-item r-demo${scenario === "firstrun" ? " on" : ""}`} onClick={onDemo}>
          <span className="ic">
            <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.3">
              <polygon points="4.5,3 11,7 4.5,11" fill="currentColor" stroke="none" />
            </svg>
          </span>
          <span className="lab">Demo</span>
          <span className="ct"><span className="r-demo-live"><i />tour</span></span>
          <span className="kbd" style={{ position: "absolute", right: 24 }}>D</span>
        </div>
      </div>

      <div className="r-group">
        <div className="r-sec"><span>Agents</span><span className="ct">5 live</span></div>
        {window.WP_DATA.agents.map(a => (
          <div key={a.name} className={`r-sub${!a.live ? " idle" : ""}`}>
            <i />
            <span>{a.name}</span>
            <span className="st">{a.live ? "" : "idle"}</span>
          </div>
        ))}
      </div>

      <div className="r-group">
        <div className="r-sec"><span>Playbooks</span><span className="ct">7</span></div>
        {[
          { id: "PPL-04", name: "expand-loop" },
          { id: "PPL-02", name: "stakeholder-fan" },
          { id: "PPL-07", name: "retain-fast" },
          { id: "PPL-01", name: "activate" }
        ].map(p => (
          <div key={p.id} className="r-sub">
            <i />
            <span>{p.name}</span>
            <span className="st">{p.id}</span>
          </div>
        ))}
      </div>

      <div className="r-group">
        <div className="r-sec"><span>Integrations</span><span className="ct">4 ok</span></div>
        {["HubSpot", "Customer.io", "Stripe", "Segment"].map(s => (
          <div key={s} className="r-sub">
            <i />
            <span>{s}</span>
          </div>
        ))}
      </div>

      <div className="rail-foot">
        <div className="l">
          <span className="av-sm">SC</span>
          <span>Sarah Chen <br /><b>Operator</b></span>
        </div>
        <button className="iconbtn" style={{ width: 22, height: 22, color: "var(--fg-3)" }}>⚙</button>
      </div>
    </aside>
  );
}

/* ───────── floating composer ───────── */
function Composer({ suggestions, onSend, onSuggest, contextLabel }) {
  const [val, setVal] = useState("");
  const ref = useRef(null);
  const send = () => { if (val.trim()) { onSend(val); setVal(""); } };

  useEffect(() => {
    const focus = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key === "/") { e.preventDefault(); ref.current && ref.current.focus(); }
    };
    window.addEventListener("keydown", focus);
    return () => window.removeEventListener("keydown", focus);
  }, []);

  return (
    <div className="composer-float">
      <div className="pill">
        <div className="meta">
          <div className="l">
            <span className="agent-tag"><i />Orchestrator</span>
            <span style={{ color: "var(--fg-4)" }}>·</span>
            <span>{contextLabel}</span>
          </div>
          <div className="r">
            {suggestions.slice(0, 3).map((s, i) => (
              <button key={i} className="s-chip" onClick={() => onSuggest(s)}>
                {s.label}<kbd>{s.k || i + 1}</kbd>
              </button>
            ))}
          </div>
        </div>
        <div className="input-row">
          <span className="prefix">
            <span className="ic">▸</span>
          </span>
          <input
            ref={ref}
            value={val}
            onChange={e => setVal(e.target.value)}
            onKeyDown={e => { if (e.key === "Enter") { e.preventDefault(); send(); } }}
            placeholder="ask the agent — who should I reach out to today, or @customer · /playbook"
          />
          <button className="send-mini" onClick={send}>send<kbd>⏎</kbd></button>
        </div>
      </div>
    </div>
  );
}

/* ───────── inspector wrapper ───────── */
function Inspector({ scenario, selected, onFire, onOpenCustomer, onClose }) {
  if (scenario === "drill" || (selected && selected.id && selected.id.startsWith("CST"))) {
    return <CustomerInspector data={window.WP_DATA.sarah} onFire={onFire} onClose={onClose} />;
  }
  if (selected && selected.id && selected.id.startsWith("OPP")) {
    return <OppInspector o={selected} onFire={onFire} onOpenCustomer={onOpenCustomer} onClose={onClose} />;
  }
  return null;
}

/* ───────── list pane with status groups ───────── */
function ListPane({ dest, view, selected, setSelected }) {
  const filterFn = (o) => {
    if (view === "all") return true;
    if (dest === "customers") {
      if (view === "high") return o.health > 75;
      if (view === "warm") return o.health >= 50 && o.health <= 75;
      return o.health < 50;
    }
    return o.stage === view;
  };

  if (dest === "customers") {
    const custs = window.WP_DATA.customers.filter(filterFn);
    const groups = {
      "Healthy": custs.filter(c => c.health > 75),
      "Watch": custs.filter(c => c.health >= 50 && c.health <= 75),
      "At-risk": custs.filter(c => c.health < 50)
    };
    return (
      <div className="list">
        {Object.entries(groups).map(([k, list]) =>
          list.length ? (
            <React.Fragment key={k}>
              <GroupH label={k} count={list.length} meta={k === "Healthy" ? "expansion candidates" : k === "Watch" ? "stable, monitoring" : "needs attention"} />
              {list.map((c, i) => (
                <CustomerRow key={c.id} c={c} idx={i} selected={selected && selected.id === c.id} onSelect={setSelected} />
              ))}
            </React.Fragment>
          ) : null
        )}
      </div>
    );
  }

  const opps = window.WP_DATA.opps.filter(filterFn);
  const groups = [
    { id: "high", label: "In progress", meta: "agents firing now", list: opps.filter(o => o.stage === "high") },
    { id: "warm", label: "Ready for review", meta: "awaiting your call", list: opps.filter(o => o.stage === "warm") },
    { id: "cool", label: "Cooling", meta: "low signal", list: opps.filter(o => o.stage === "cool") }
  ];
  return (
    <div className="list">
      {groups.map(g =>
        g.list.length ? (
          <React.Fragment key={g.id}>
            <GroupH label={g.label} count={g.list.length} meta={g.meta} />
            {g.list.map((o, i) => (
              <Row key={o.id} o={o} idx={i} selected={selected && selected.id === o.id} onSelect={setSelected} />
            ))}
          </React.Fragment>
        ) : null
      )}
    </div>
  );
}

/* ───────── APP ───────── */
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [scenario, setScenario] = useState(t.scenario || "active");
  const [dest, setDest] = useState(t.destination || "today");
  const [view, setView] = useState("all");
  const [selected, setSelected] = useState(window.WP_DATA.opps[0]);
  const [inspectorOpen, setInspectorOpen] = useState(t.showInspector !== false);
  const [todayTab, setTodayTab] = useState("queue");

  useEffect(() => { setScenario(t.scenario); }, [t.scenario]);
  useEffect(() => { setDest(t.destination); }, [t.destination]);
  useEffect(() => { document.documentElement.style.setProperty("--orange", t.accent); document.documentElement.style.setProperty("--signal", t.accent); }, [t.accent]);

  // drill scenario → force Sarah Chen + inspector
  useEffect(() => {
    if (scenario === "drill") {
      setDest("customers"); setTweak("destination", "customers");
      const sarah = window.WP_DATA.customers.find(c => c.id === "CST-217");
      setSelected(sarah);
      setInspectorOpen(true);
    }
  }, [scenario]);

  /* keyboard nav */
  useEffect(() => {
    const handler = (e) => {
      if (e.target.tagName === "INPUT" || e.target.tagName === "TEXTAREA") return;
      const list = dest === "customers" ? window.WP_DATA.customers : window.WP_DATA.opps;
      const idx = list.findIndex(x => x.id === (selected && selected.id));
      if (e.key === "j") { e.preventDefault(); setSelected(list[Math.min(list.length - 1, idx + 1)]); setInspectorOpen(true); }
      if (e.key === "k") { e.preventDefault(); setSelected(list[Math.max(0, idx - 1)]); setInspectorOpen(true); }
      if (e.key === "t") { setDest("today"); setTweak("destination", "today"); goToScenario("active"); }
      if (e.key === "r" && dest === "today") { setTodayTab(tt => tt === "reports" ? "queue" : "reports"); setInspectorOpen(false); }
      if (e.key === "p") { setDest("pipeline"); setTweak("destination", "pipeline"); goToScenario("active"); }
      if (e.key === "c") { setDest("customers"); setTweak("destination", "customers"); goToScenario("active"); }
      if (e.key === "a") { setDest("atlas"); setTweak("destination", "atlas"); goToScenario("active"); setInspectorOpen(false); }
      if (e.key === "d") { goToScenario("firstrun"); }
      if (e.key === "Escape") { setInspectorOpen(false); }
    };
    window.addEventListener("keydown", handler);
    return () => window.removeEventListener("keydown", handler);
  }, [selected, dest]);

  const suggestions = useMemo(() => {
    if (scenario === "reply") return [
      { label: "Draft 3", k: "D" },
      { label: "Show reasoning", k: "R" },
      { label: "Fire all", k: "⏎" }
    ];
    if (dest === "pipeline") return [
      { label: "Most urgent", k: "1" },
      { label: "What's cooling", k: "2" },
      { label: "Fire high-conf", k: "3" }
    ];
    if (dest === "atlas") return [
      { label: "Find dead ends", k: "1" },
      { label: "Cluster by stage", k: "2" },
      { label: "Isolate Sarah Chen", k: "3" }
    ];
    if (dest === "customers") return [
      { label: "Who's at risk", k: "1" },
      { label: "Ready to expand", k: "2" },
      { label: "New this week", k: "3" }
    ];
    if (dest === "today" && todayTab === "reports") return [
      { label: "Open most recent", k: "1" },
      { label: "What changed today", k: "2" },
      { label: "Email me the digest", k: "3" }
    ];
    return [
      { label: "Reach out today", k: "1", q: "today" },
      { label: "What moved overnight", k: "2" },
      { label: "Draft 3 outreaches", k: "3" }
    ];
  }, [scenario, dest, todayTab]);

  const goToScenario = (s) => { setScenario(s); setTweak("scenario", s); };

  const handleSelect = (item) => { setSelected(item); setInspectorOpen(true); };
  const handleSuggest = (s) => goToScenario("reply");
  const handleSend = () => goToScenario("reply");
  const onFire = () => goToScenario("reply");
  const onOpenCustomer = () => {
    setDest("customers"); setTweak("destination", "customers");
    const sarah = window.WP_DATA.customers.find(c => c.id === "CST-217");
    setSelected(sarah);
    setInspectorOpen(true);
    goToScenario("drill");
  };
  const onClose = () => setInspectorOpen(false);

  const crumbs = useMemo(() => {
    if (scenario === "firstrun") return [{ label: "First run" }];
    if (scenario === "reply") return [
      { label: "Today" }, { label: "Agent thread", id: "RPL-088" }
    ];
    const dl = dest === "today" ? "Today"
             : dest === "pipeline" ? "Pipeline"
             : dest === "customers" ? "Customers"
             : dest === "atlas" ? "Atlas" : "Today";
    if (dest === "atlas") return [{ label: "Atlas", id: "ATL-01" }];
    if (dest === "today" && todayTab === "reports") return [{ label: "Today" }, { label: "Reports" }];
    if (selected && selected.id && inspectorOpen) return [
      { label: dl }, { label: selected.name || selected.who.split(" · ")[0], id: selected.id }
    ];
    return [{ label: dl }];
  }, [scenario, dest, selected, inspectorOpen, todayTab]);

  const contextLabel = {
    firstrun: "first-run",
    active: dest === "today" && todayTab === "reports" ? "today · reports"
          : dest === "today" ? "today"
          : dest === "pipeline" ? "pipeline"
          : dest === "customers" ? "customers"
          : dest === "atlas" ? "atlas · ATL-01" : "today",
    drill: "customer · CST-217",
    reply: "agent thread"
  }[scenario];

  const showInspector = inspectorOpen && selected && dest !== "atlas" && !(dest === "today" && todayTab === "reports") && (scenario === "active" || scenario === "drill");

  return (
    <div className={`app${showInspector ? " with-inspector" : ""}`}>
      <div className="atmos-glow" />
      <Topbar crumbs={crumbs} />
      <Rail
        dest={dest}
        scenario={scenario}
        setDest={(d) => { setDest(d); setTweak("destination", d); goToScenario("active"); if (d === "atlas") setInspectorOpen(false); }}
        onDemo={() => goToScenario("firstrun")}
      />

      <main className={`main scenario-${scenario}`}>
        <AtmosField />
        {scenario === "reply" ? <div className="thread-ascii-bg"><ThreadBg /></div> : null}
        {scenario === "firstrun" ? <div className="firstrun-ascii-bg"><ThreadBg /></div> : null}
        {scenario === "firstrun" ? (
          <>
            <div style={{ height: 0 }} />
            <FirstRunView onSuggest={handleSuggest} />
          </>
        ) : scenario === "reply" ? (
          <>
            <div style={{ height: 0 }} />
            <ThreadView onOpenCustomer={onOpenCustomer} onBack={() => goToScenario("active")} onFire={onFire} />
          </>
        ) : dest === "atlas" ? (
          <window.AtlasView />
        ) : dest === "today" && todayTab === "reports" ? (
          <>
            <Subhead dest={dest} view={view} setView={setView} count={42} todayTab={todayTab} setTodayTab={setTodayTab} />
            <Ticker />
            <ReportsView onSelect={(r) => {/* future: open report inspector */}} />
          </>
        ) : (
          <>
            <Subhead dest={dest} view={view} setView={setView} count={42} todayTab={todayTab} setTodayTab={setTodayTab} />
            <Ticker />
            <ListPane dest={dest} view={view} selected={selected} setSelected={handleSelect} />
          </>
        )}
      </main>

      {showInspector ? (
        <aside className="inspector">
          <Inspector
            scenario={scenario}
            selected={scenario === "drill" ? window.WP_DATA.customers.find(c => c.id === "CST-217") : selected}
            onFire={onFire}
            onOpenCustomer={onOpenCustomer}
            onClose={onClose}
          />
        </aside>
      ) : null}

      <Composer
        suggestions={suggestions}
        onSend={handleSend}
        onSuggest={handleSuggest}
        contextLabel={contextLabel}
      />

      <TweaksPanel>
        <TweakSection label="Scenario" />
        <TweakSelect
          label="State"
          value={t.scenario}
          options={[
            { value: "firstrun", label: "1 · First-run (demo)" },
            { value: "active",   label: "2 · Active operator" },
            { value: "drill",    label: "3 · Drill — Sarah Chen" },
            { value: "reply",    label: "4 · Agent reply" }
          ]}
          onChange={(v) => setTweak("scenario", v)}
        />
        <TweakSection label="Navigation" />
        <TweakSelect
          label="Destination"
          value={t.destination}
          options={[
            { value: "today",     label: "Today" },
            { value: "pipeline",  label: "Pipeline" },
            { value: "customers", label: "Customers" },
            { value: "atlas",     label: "Atlas · correlation" }
          ]}
          onChange={(v) => { setTweak("destination", v); setTweak("scenario", "active"); }}
        />
        <TweakToggle
          label="Inspector"
          value={inspectorOpen}
          onChange={(v) => setInspectorOpen(v)}
        />
        <TweakSection label="Theme" />
        <TweakColor
          label="Accent"
          value={t.accent}
          options={["#ff5a1f", "#e8522b", "#f0a020", "#5ad1ff", "#9d6dff", "#6fc18f"]}
          onChange={(v) => setTweak("accent", v)}
        />
      </TweaksPanel>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);