/* ============================================================
   ScoutResults — the "Results" panel for a sourcing pipeline:
   Claude's targeting read + the prospects it surfaced, to approve.
   (Lives inside the unified Scouting surface in Sourcing.jsx.)
   ============================================================ */
function ScoutResults({ lane }) {
  const live = !!(window.claude && window.claude.complete);
  const [items, setItems] = React.useState(() => window.WTC.scouting);
  const [toast, setToast] = React.useState(null);
  const flash = (m) => { setToast(m); setTimeout(() => setToast(null), 1800); };
  const rows = items.filter((s) => lane === "all" || !lane ? true : s.lane === lane);
  const add = (s) => { setItems((x) => x.filter((i) => i.id !== s.id)); flash(s.brand + " added to pipeline · New target"); };
  const dismiss = (s) => { setItems((x) => x.filter((i) => i.id !== s.id)); flash("Dismissed " + s.brand + " — Claude will learn from this"); };

  const [coach, setCoach] = React.useState(null);
  const [coaching, setCoaching] = React.useState(true);
  const runCoach = React.useCallback(() => {
    setCoaching(true);
    const fallback = "Based on your last 100 touchpoints, your strongest pattern is culture-forward DTC brands activating at culture moments — every marquee win (Poppi, Vita Coco, Red Bull, Rocket) fits that shape, and they reply ~2× more than cold agencies. I'd weight this pipeline toward brands with a live festival or sports activation and a recent experiential hire.";
    const prompt = "You are Claude coaching Preston (We The Creators) on who to prospect. Wins: Poppi, Vita Coco, Rocket & Invisalign Super Bowls, Red Bull. In 2-3 sentences, name the target pattern his history points to and what to weight scouting toward. No markdown.";
    const done = (t) => { setCoach(t); setCoaching(false); };
    if (live) window.claude.complete(prompt).then((o) => done(o && o.trim() ? o.trim() : fallback)).catch(() => done(fallback));
    else setTimeout(() => done(fallback), 600);
  }, [live]);
  React.useEffect(() => { runCoach(); }, [runCoach]);

  return (
    <div className="surface-scroll" style={{ padding: "20px 24px 36px" }}>
      <div className="scout-coach">
        <div className="claude-orb"><Icon name="sparkles" size={15} /></div>
        <div style={{ minWidth: 0, flex: 1 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 5 }}>
            <span style={{ fontSize: 12.5, fontWeight: 650 }}>Targeting coach</span>
            <span className="live-tag" style={{ padding: "2px 8px", fontSize: 10.5 }}><span className="stagedot" style={{ background: live ? "var(--green)" : "var(--text-3)" }}></span>{live ? "live" : "from history"}</span>
            <span style={{ flex: 1 }}></span>
            <button className="btn btn--sm btn--ghost" onClick={runCoach} disabled={coaching}><Icon name="refresh" size={13} /> Re-analyze</button>
          </div>
          {coaching
            ? <div style={{ display: "flex", gap: 5, alignItems: "center", height: 20 }}><span className="think-dot"></span><span className="think-dot"></span><span className="think-dot"></span></div>
            : <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.6, color: "var(--text)" }}>{coach}</p>}
        </div>
      </div>

      <div className="results-head">
        <span style={{ fontSize: 13, fontWeight: 650 }}>Sourced prospects</span>
        <span style={{ fontSize: 12, color: "var(--text-3)" }}>{rows.length} ready to review · ranked by fit</span>
      </div>
      <div className="scout-results">
        {rows.length === 0
          ? <EmptyState icon="radar" title="No prospects yet" sub="Run the flow and Claude will source matches against it." />
          : rows.map((s) => (
            <div key={s.id} className="scout-card lift">
              <div style={{ display: "flex", alignItems: "center", gap: 11 }}>
                <Avatar mono={s.mono} size={38} square />
                <div style={{ minWidth: 0, flex: 1 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                    <span style={{ fontSize: 14.5, fontWeight: 670, whiteSpace: "nowrap" }}>{s.brand}</span>
                    <LaneChip lane={s.lane} small />
                  </div>
                  <div style={{ fontSize: 11.5, color: "var(--accent)", marginTop: 3, display: "flex", alignItems: "center", gap: 5 }}><Icon name="radar" size={12} /> {s.source}</div>
                </div>
                <div className="scout-fit"><span className="num">{s.fit}</span><span className="scout-fit-lbl">fit</span></div>
              </div>
              <div className="scout-why">{s.why}</div>
              <div className="scout-signal"><Icon name="flame" size={12} style={{ color: "var(--amber)" }} /> {s.signal}</div>
              <div className="scout-actions">
                <button className="btn btn--ghost btn--sm" onClick={() => dismiss(s)}>Dismiss</button>
                <button className="btn btn--sm" onClick={() => flash("Claude is researching " + s.brand + "…")}><Icon name="sparkles" size={13} /> Research</button>
                <button className="btn btn--primary btn--sm" onClick={() => add(s)}><Icon name="plus" size={13} /> Add to pipeline</button>
              </div>
            </div>
          ))}
      </div>
      {toast && <div className="toast">{toast}</div>}
    </div>
  );
}
Object.assign(window, { ScoutResults });