/* global React, window */
// Sales Memory board + strategist dock (manager view).
// Board = deterministic insight cards from window.SalesMemory.buildSalesMemory().
// Dock = ask-anything strategist: POSTs to /api/strategist-agent (real Claude,
// grounded in buildStrategyContext()), with an ANNOUNCED offline fallback to
// window.SalesMemory.answerStrategy when no backend is running.
//
// NOTE: @babel/standalone runs every <script type="text/babel"> in ONE shared
// global scope, so component names must be unique across all files. Everything
// here is prefixed `SM…` to avoid colliding with other screens (e.g. demo-wow's
// own InsightCard/EvidenceRows).

const { useState, useMemo, useRef, useEffect } = React;

const smEscapeRe = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");

// ---------- evidence rows ----------
function SMEvidenceRows({ evidence = [] }) {
  if (!evidence.length) return null;
  return (
    <dl className="sm-evidence">
      {evidence.map((e, i) => (
        <div className="sm-evidence-row" key={i}>
          <dt>{e.label}</dt>
          <dd>{e.value}</dd>
        </div>
      ))}
    </dl>
  );
}

// ---------- collapsible "why" drawer ----------
function SMWhyDrawer({ why = [], evidence = [] }) {
  const [open, setOpen] = useState(false);
  if (!why.length && !evidence.length) return null;
  return (
    <div className={`sm-why ${open ? "is-open" : ""}`}>
      <button type="button" className="sm-why-toggle" aria-expanded={open} onClick={() => setOpen((v) => !v)}>
        {open ? "Hide the evidence" : "Why"}
        <span className="sm-why-caret" aria-hidden="true">{open ? "▾" : "▸"}</span>
      </button>
      {open && (
        <div className="sm-why-body">
          {why.map((w, i) => <p key={i} className="sm-why-line">{w}</p>)}
          <SMEvidenceRows evidence={evidence} />
        </div>
      )}
    </div>
  );
}

// ---------- one CTA (live: do-it-myself / let-AI-do-it) ----------
function SMCardCTA({ cta, openDeal }) {
  if (!cta) return null;
  const onClick = () => {
    if (cta.mode === "self") {
      const id = cta.dealId || (cta.dealIds && cta.dealIds[0]);
      if (id && openDeal) openDeal(id);
      return;
    }
    if (typeof window.previewAction === "function") {
      window.previewAction({
        ...cta.preview,
        onConfirm: () => { if (typeof window.fireToast === "function") window.fireToast(cta.toast); },
      });
    } else if (typeof window.fireToast === "function") {
      window.fireToast(cta.toast);
    }
  };
  return (
    <button type="button" className={`sm-cta ${cta.mode === "self" ? "is-self" : "is-ai"}`} onClick={onClick}>
      {cta.label}
    </button>
  );
}

// ---------- one insight card ----------
function SMInsightCard({ card, openDeal }) {
  const tone = card.tone || "neutral";
  return (
    <article className={`sm-card tone-${tone}`}>
      <header className="sm-card-head">
        <span className={`sm-dot tone-${tone}`} aria-hidden="true" />
        <span className="sm-card-kicker">{card.kicker}</span>
      </header>
      <div className="sm-card-focal">
        <span className="sm-focal-value">{card.focalValue}</span>
        {card.focalUnit ? <span className="sm-focal-unit">{card.focalUnit}</span> : null}
      </div>
      <p className="sm-card-headline">{card.headline}</p>
      <SMWhyDrawer why={card.why} evidence={card.evidence} />
      <footer className="sm-card-foot">
        <SMCardCTA cta={card.cta} openDeal={openDeal} />
      </footer>
    </article>
  );
}

// ---------- one theme section ----------
function SMThemeSection({ theme }) {
  return (
    <section className={`sm-section theme-${theme.theme}`}>
      <h3 className="sm-section-title">{theme.title}</h3>
      <div className="sm-section-cards">
        {theme.cards.length
          ? theme.cards.map((c, i) => <SMInsightCard card={c} key={i} openDeal={theme.openDeal} />)
          : <p className="sm-empty">Not enough history yet to read this.</p>}
      </div>
    </section>
  );
}

// ---------- the ask-anything strategist ----------
function SMStrategistDock({ deals = [], openDeal }) {
  const [q, setQ] = useState("");
  const [messages, setMessages] = useState([]);
  const [thinking, setThinking] = useState(false);
  const threadRef = useRef(null);
  const inputRef = useRef(null);

  const dealIndex = useMemo(() => {
    const seen = new Set();
    return (deals || [])
      .filter((d) => d && d.company && !/closed/i.test(`${d.stage || ""} ${d.statusLabel || ""}`) && !seen.has(d.company) && seen.add(d.company))
      .map((d) => ({ id: d.id, company: d.company }))
      .sort((a, b) => b.company.length - a.company.length);
  }, [deals]);

  const linkify = (text) => {
    if (!dealIndex.length || !text) return text;
    const re = new RegExp("(" + dealIndex.map((d) => smEscapeRe(d.company)).join("|") + ")", "g");
    const out = [];
    let last = 0, m;
    while ((m = re.exec(text)) !== null) {
      if (m.index > last) out.push(text.slice(last, m.index));
      const d = dealIndex.find((x) => x.company === m[0]);
      out.push(
        <button key={out.length} type="button" className="addy-ask-deal-link" onClick={() => openDeal && d && openDeal(d.id)}>{m[0]}</button>
      );
      last = m.index + m[0].length;
    }
    if (last < text.length) out.push(text.slice(last));
    return out;
  };

  useEffect(() => {
    const el = threadRef.current;
    if (el) el.scrollTop = el.scrollHeight;
  }, [messages.length, thinking]);

  const starters = useMemo(() => (window.SalesMemory ? window.SalesMemory.strategistStarters() : []), []);

  const ask = (text) => {
    const query = (text ?? q).trim();
    if (!query || thinking) return;
    setMessages((m) => [...m, { role: "user", text: query }]);
    setQ("");
    setThinking(true);

    const history = messages.slice(-16).map((mm) => ({ role: mm.role === "user" ? "user" : "assistant", content: mm.text }));
    const context = window.SalesMemory ? window.SalesMemory.buildStrategyContext() : {};

    const offline = () => {
      const r = window.SalesMemory ? window.SalesMemory.answerStrategy(query) : { answer: "Strategist unavailable.", evidence: [], deals: [] };
      setThinking(false);
      setMessages((m) => [...m, { role: "advisor", text: r.answer, evidence: r.evidence, offline: true }]);
    };

    let ctrl = null;
    try { ctrl = "AbortController" in window ? new AbortController() : null; } catch (_) {}
    if (ctrl) setTimeout(() => ctrl.abort(), 25000);

    fetch("/api/strategist-agent", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({ question: query, history, context }),
      signal: ctrl ? ctrl.signal : undefined,
    })
      .then((r) => { if (!r.ok) throw new Error("status " + r.status); return r.json(); })
      .then((data) => {
        if (!data.ok || !data.answer) throw new Error("empty");
        setThinking(false);
        setMessages((m) => [...m, { role: "advisor", text: data.answer }]);
      })
      .catch(offline);
  };

  return (
    <section className="sm-dock" aria-label="Ask the strategist">
      <header className="sm-dock-head">
        <span className="sm-dock-mark" aria-hidden="true"><i /><i /></span>
        <div>
          <p className="sm-dock-title">Ask the strategist</p>
          <p className="sm-dock-sub">Anything about the book — strengths, spend, hiring, leaks, a rep, a segment.</p>
        </div>
      </header>

      {messages.length > 0 && (
        <div className="sm-dock-thread" ref={threadRef}>
          {messages.map((m, i) => (
            <div className={`addy-ask-msg is-${m.role === "user" ? "user" : "addy"}`} key={i}>
              <div className="addy-ask-msg-col">
                <div className="addy-ask-bubble sm-bubble">
                  {m.role === "advisor" ? linkify(m.text) : m.text}
                </div>
                {m.evidence && m.evidence.length ? <SMEvidenceRows evidence={m.evidence} /> : null}
                {m.offline ? (
                  <p className="sm-offline-note">Offline answer — run <code>vercel dev</code> with <code>ANTHROPIC_API_KEY</code> for the full strategist.</p>
                ) : null}
              </div>
            </div>
          ))}
          {thinking && (
            <div className="addy-ask-msg is-addy">
              <div className="addy-ask-msg-col">
                <div className="addy-ask-bubble sm-bubble sm-thinking">Reading the book…</div>
              </div>
            </div>
          )}
        </div>
      )}

      {messages.length === 0 && (
        <div className="sm-dock-starters">
          {starters.map((s, i) => (
            <button type="button" className="sm-starter" key={i} onClick={() => ask(s.text)}>{s.label}</button>
          ))}
        </div>
      )}

      <div className="sm-dock-input">
        <input
          ref={inputRef}
          type="text"
          value={q}
          placeholder="Ask anything strategic…"
          onChange={(e) => setQ(e.target.value)}
          onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); ask(); } }}
        />
        <button type="button" className="sm-send" disabled={!q.trim() || thinking} onClick={() => ask()}>Ask</button>
      </div>
    </section>
  );
}

// ---------- the board ----------
function SalesMemoryBoard({ deals = [], openDeal }) {
  const memory = useMemo(() => {
    if (!window.SalesMemory || window.SalesMemory.unavailable) return null;
    try { return window.SalesMemory.buildSalesMemory(); } catch (e) { return null; }
  }, [deals]);

  if (!memory) {
    return <div className="sm-board"><p className="sm-empty">Sales Memory engine unavailable — check that sales-memory.jsx loaded.</p></div>;
  }

  return (
    <div className="sm-board">
      <p className="sm-board-lede">
        The whole book, read as strategy — computed live from every deal, closed-won/lost, and outbound signal.
      </p>
      <div className="sm-grid">
        {memory.themes.map((t) => (
          <SMThemeSection theme={{ ...t, openDeal }} key={t.theme} />
        ))}
      </div>
      <SMStrategistDock deals={deals} openDeal={openDeal} />
    </div>
  );
}

window.SalesMemoryBoard = SalesMemoryBoard;