// Social listening — track keywords/hashtags/handles, see mentions + sentiment.

function SentimentBar({ sentiment }) {
  const total = (sentiment.positive || 0) + (sentiment.neutral || 0) + (sentiment.negative || 0) || 1;
  const seg = (n, color) => <span style={{ width: `${(n / total) * 100}%`, background: color, display: "block", height: "100%" }} />;
  return (
    <div style={{ display: "flex", height: 8, borderRadius: 999, overflow: "hidden", background: "var(--border)", width: 140 }}>
      {seg(sentiment.positive || 0, "var(--accent)")}
      {seg(sentiment.neutral || 0, "var(--text-3)")}
      {seg(sentiment.negative || 0, "var(--danger)")}
    </div>
  );
}

function ListeningPage() {
  const hub = window.useClearCast();
  const data = hub.data || {};
  const streams = data.listening || [];
  const [keyword, setKeyword] = React.useState("");
  const [busy, setBusy] = React.useState(false);

  const add = async () => {
    if (!keyword.trim()) { hub.toast("Enter a keyword to track"); return; }
    setBusy(true);
    try { await hub.actions.addListening({ keyword: keyword.trim() }); setKeyword(""); }
    finally { setBusy(false); }
  };
  const dot = (s) => s === "positive" ? "var(--accent)" : s === "negative" ? "var(--danger)" : "var(--text-3)";

  return (
    <div className="page listening-page">
      <div className="card" style={{ padding: 20, marginBottom: 16 }}>
        <h3 style={{ margin: "0 0 4px", fontSize: 15 }}>Track a keyword, hashtag, or @handle</h3>
        <div className="muted" style={{ fontSize: 12.5, marginBottom: 14 }}>Monitor what people say about your brand and competitors across networks, with sentiment.</div>
        <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
          <input className="input" placeholder="e.g. Beam & Bloom, #engravedgifts, @competitor" value={keyword} onChange={(e) => setKeyword(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") add(); }} style={{ flex: 1, minWidth: 240 }} />
          <button className="btn btn-primary" disabled={busy} onClick={add}><Icon.Search width="14" height="14" /> {busy ? "Adding…" : "Track"}</button>
        </div>
      </div>

      <div style={{ display: "grid", gap: 12 }}>
        {streams.map((stream) => (
          <div key={stream.id} className="card" style={{ padding: 16 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }}>
              <b style={{ fontSize: 14 }}>{stream.keyword}</b>
              <SentimentBar sentiment={stream.sentiment} />
              <span className="muted" style={{ fontSize: 11.5 }}>{(stream.mentions || []).length} mentions</span>
              <div style={{ marginLeft: "auto", display: "flex", gap: 8 }}>
                <button className="btn btn-sm" onClick={() => hub.actions.refreshListening(stream.id)}><Icon.Refresh width="13" height="13" /> Refresh</button>
                <button className="btn btn-sm" onClick={() => hub.actions.deleteListening(stream.id)} style={{ color: "var(--danger)" }}>Stop</button>
              </div>
            </div>
            <div style={{ display: "grid", gap: 8 }}>
              {(stream.mentions || []).map((m) => (
                <div key={m.id} style={{ display: "flex", gap: 10, alignItems: "flex-start", padding: 10, borderRadius: 10, background: "var(--bg-2)", border: "1px solid var(--border)" }}>
                  <span className="ai-mode-dot" style={{ background: dot(m.sentiment), marginTop: 5 }} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 13 }}>{m.text}</div>
                    <div className="faint" style={{ fontSize: 11, marginTop: 2 }}>{m.author} · {m.platform} · {new Date(m.at).toLocaleString()}</div>
                  </div>
                  <button className="btn btn-sm" onClick={() => { hub.setPage && hub.setPage("inbox"); }}>Reply</button>
                </div>
              ))}
            </div>
          </div>
        ))}
        {!streams.length && <div className="card" style={{ padding: 28, textAlign: "center" }}><div className="muted" style={{ fontSize: 13 }}>No streams yet — track a keyword above to start monitoring mentions.</div></div>}
      </div>
      <div className="muted" style={{ fontSize: 11.5, marginTop: 14, textAlign: "center" }}>Mentions are sample data until social listening APIs are connected via OAuth.</div>
    </div>
  );
}

window.ListeningPage = ListeningPage;