/* signals-grid.jsx — Container pane holding the rich signal cards */
function SignalsGrid({ layout = "rail" }) {
  const [tick, setTick] = React.useState(0);
  const [sortBy, setSortBy] = React.useState("strength");
  const [filter, setFilter] = React.useState("ALL");
  React.useEffect(() => {
    return window.NTData.subscribe((evt) => {
      if (evt.type === "price" || evt.type === "whale") setTick(t => t + 1);
    });
  }, []);

  const signals = window.NTData.getSignals();
  const whales = window.NTData.getWhales();

  // sort
  const sorted = [...signals].sort((a, b) => {
    if (sortBy === "strength") {
      const sa = Math.abs(a.change_pct) * a.confidence;
      const sb = Math.abs(b.change_pct) * b.confidence;
      return sb - sa;
    }
    if (sortBy === "change") return Math.abs(b.change_pct) - Math.abs(a.change_pct);
    if (sortBy === "conf") return b.confidence - a.confidence;
    return a.coin.localeCompare(b.coin);
  });

  const filtered = filter === "ALL"
    ? sorted
    : filter === "BUY" ? sorted.filter(s => s.signal.includes("BUY"))
    : filter === "SELL" ? sorted.filter(s => s.signal.includes("SELL"))
    : sorted.filter(s => s.signal === "HOLD");

  return (
    <div className="panel">
      <style>{`
        .sg-head-filter {
          display: flex; gap: 0;
          background: var(--bg-subtle);
          border: 1px solid var(--border);
          border-radius: 3px;
          padding: 2px;
        }
        .sg-head-filter button {
          appearance: none; background: transparent; border: 0;
          color: var(--fg-muted);
          font-family: var(--font-mono); font-size: 9px;
          letter-spacing: 0.08em; text-transform: uppercase;
          padding: 2px 7px; border-radius: 2px;
          cursor: pointer;
          font-weight: 600;
        }
        .sg-head-filter button[data-active="true"] {
          background: var(--bg-elev); color: var(--accent);
        }
        .sg-sort {
          font-family: var(--font-mono); font-size: 9px;
          color: var(--fg-dim); letter-spacing: 0.06em;
          background: transparent; border: 1px solid var(--border);
          color: var(--fg-muted);
          padding: 2px 6px; border-radius: 3px;
          appearance: none;
        }
        .sg-grid {
          padding: var(--gutter);
          display: grid;
          grid-template-columns: 1fr;
          gap: var(--gutter);
        }
        .sg-grid--two {
          grid-template-columns: 1fr 1fr;
        }
        .sg-summary {
          display: flex; align-items: center; gap: 6px;
          padding: 5px 10px;
          border-bottom: 1px solid var(--border);
          background: var(--bg-panel-2);
          font-family: var(--font-mono); font-size: 9.5px;
          color: var(--fg-muted); letter-spacing: 0.06em;
        }
        .sg-summary__pill {
          display: inline-flex; align-items: center; gap: 4px;
          padding: 1px 6px; border-radius: 2px;
          font-weight: 700; font-size: 9px;
        }
      `}</style>

      <div className="panel__head">
        <span className="panel__title panel__title-accent">Signals · Active</span>
        <div className="sg-head-filter">
          {["ALL", "BUY", "HOLD", "SELL"].map(f => (
            <button key={f} data-active={filter === f} onClick={() => setFilter(f)}>{f}</button>
          ))}
        </div>
        <div className="panel__meta">
          <select className="sg-sort" value={sortBy} onChange={e => setSortBy(e.target.value)}>
            <option value="strength">sort: strength</option>
            <option value="change">sort: change%</option>
            <option value="conf">sort: confidence</option>
            <option value="coin">sort: coin</option>
          </select>
          <span className="live-dot"></span>
          <span>30s</span>
        </div>
      </div>

      <div className="sg-summary">
        <span className="sg-summary__pill" style={{ background: "var(--gain-soft)", color: "var(--gain)" }}>
          ● {signals.filter(s => s.signal.includes("BUY")).length} BUY
        </span>
        <span className="sg-summary__pill" style={{ background: "var(--warn-soft)", color: "var(--warn)" }}>
          ● {signals.filter(s => s.signal === "HOLD").length} HOLD
        </span>
        <span className="sg-summary__pill" style={{ background: "var(--loss-soft)", color: "var(--loss)" }}>
          ● {signals.filter(s => s.signal.includes("SELL")).length} SELL
        </span>
        <span style={{ marginLeft: "auto" }}>
          Avg conf {(signals.reduce((s, x) => s + x.confidence, 0) / signals.length * 100).toFixed(0)}% · {filtered.length} shown
        </span>
      </div>

      <div className="panel__body">
        <div className={`sg-grid ${layout === "two" ? "sg-grid--two" : ""}`}>
          {filtered.map(s => (
            <SignalCardRich key={s.coin} signal={s} whales={whales} />
          ))}
        </div>
      </div>
    </div>
  );
}

window.SignalsGrid = SignalsGrid;