/* sources.jsx — Sources tab.
   Analyst directory with toggle / mute / priority.
   Ticker breakdown (events × sources) on the right.
*/

function Sources({ analysts, events, enabled, onToggle, onSolo }) {
  const [search, setSearch] = useState("");

  const analystStats = useMemo(() => {
    const stats = new Map();
    for (const a of analysts) stats.set(a.handle, { ...a, eventCount: 0, tickerSet: new Set(), lastTs: 0 });
    for (const e of events) {
      const s = stats.get(e.analyst);
      if (!s) continue;
      s.eventCount++;
      s.tickerSet.add(e.ticker);
      if (e.ts > s.lastTs) s.lastTs = e.ts;
    }
    return [...stats.values()].sort((a,b) => b.eventCount - a.eventCount);
  }, [analysts, events]);

  const tickerStats = useMemo(() => {
    const t = new Map();
    for (const e of events) {
      if (!enabled.has(e.analyst)) continue;
      let s = t.get(e.ticker);
      if (!s) { s = { ticker: e.ticker, events: 0, sources: new Set() }; t.set(e.ticker, s); }
      s.events++;
      s.sources.add(e.analyst);
    }
    return [...t.values()].sort((a,b) => b.events - a.events);
  }, [events, enabled]);

  const filtered = analystStats.filter(a => !search || a.handle.toLowerCase().includes(search.toLowerCase()));
  const filteredTickers = tickerStats.filter(t => !search || t.ticker.toLowerCase().includes(search.toLowerCase()));

  return (
    <div className="split cols">
      <div className="panel">
        <div className="panel-hdr">
          <div className="panel-title">Sources <span className="panel-meta" style={{ marginLeft: 10 }}>{enabled.size} active</span></div>
          <div style={{ display: "flex", gap: 8 }}>
            <button className="btn" style={{ padding: "6px 12px", fontSize: 12 }} onClick={() => analysts.forEach(a => onToggle(a.handle, true))}>All on</button>
            <button className="btn" style={{ padding: "6px 12px", fontSize: 12 }} onClick={() => analysts.forEach(a => onToggle(a.handle, false))}>All off</button>
          </div>
        </div>
        <div style={{ padding: 14, borderBottom: "1px solid var(--border-1)" }}>
          <input className="input search" placeholder="Search analysts…" value={search} onChange={e => setSearch(e.target.value)} style={{ width: "100%" }} />
        </div>
        <div className="scroll-y" style={{ maxHeight: "calc(100vh - 320px)", minHeight: 360 }}>
          {filtered.map(a => {
            const on = enabled.has(a.handle);
            return (
              <div key={a.handle} className="source-card" onClick={() => onToggle(a.handle, !on)}>
                <div className={cx("check", on && "on")} />
                <div>
                  <div className="analyst" style={{ marginBottom: 2 }}>
                    <span className="swatch" style={{ "--col": a.color }} />
                    <span>{a.handle}</span>
                  </div>
                  <div style={{ display: "flex", gap: 8, marginTop: 4, fontFamily: "var(--f-mono)", fontSize: 10, color: "var(--fg-2)", textTransform: "uppercase", letterSpacing: ".10em" }}>
                    <span>{a.eventCount} events</span>
                    <span>·</span>
                    <span>{a.tickerSet.size} tickers</span>
                    <span>·</span>
                    <span>{a.priority}</span>
                  </div>
                </div>
                <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
                  <span className="count">{a.eventCount}</span>
                  <button
                    onClick={(e) => { e.stopPropagation(); onToggle(a.handle, !on); }}
                    title={on ? "Hide this source" : "Show this source"}
                  >
                    {I(on ? "eye" : "eyeOff", { size: 16, className: "eye" })}
                  </button>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <div className="panel">
        <div className="panel-hdr">
          <div className="panel-title">Tickers</div>
          <div className="panel-meta">{filteredTickers.length} found</div>
        </div>
        <div className="scroll-y" style={{ maxHeight: "calc(100vh - 280px)", minHeight: 320 }}>
          {filteredTickers.map(t => (
            <div key={t.ticker} className="ticker-row">
              <div>
                <div className="name">${t.ticker}</div>
              </div>
              <div className="meta">
                {t.events} events <span style={{ margin: "0 6px", color: "var(--fg-3)" }}>·</span> {t.sources.size} source{t.sources.size===1?"":"s"}
              </div>
            </div>
          ))}
          {filteredTickers.length === 0 && <Empty msg="No tickers in view. Enable a source." />}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Sources });