/* signal-card.jsx — Rich signal card with sparkline, confidence gauge, whale micro-feed, countdown */

const SIGNAL_CFG = {
  "STRONG_BUY":  { label: "STRONG BUY",  short: "S.BUY",  color: "var(--gain)", soft: "var(--gain-soft)", pip: 5 },
  "BUY":         { label: "BUY",         short: "BUY",    color: "var(--gain)", soft: "var(--gain-soft)", pip: 4 },
  "HOLD":        { label: "HOLD",        short: "HOLD",   color: "var(--warn)", soft: "var(--warn-soft)", pip: 3 },
  "SELL":        { label: "SELL",        short: "SELL",   color: "var(--loss)", soft: "var(--loss-soft)", pip: 2 },
  "STRONG_SELL": { label: "STRONG SELL", short: "S.SELL", color: "var(--loss)", soft: "var(--loss-soft)", pip: 1 },
};

function fmtPrice(n) {
  if (n == null) return "—";
  if (n >= 1000) return n.toLocaleString(undefined, { maximumFractionDigits: 2 });
  if (n >= 1) return n.toFixed(2);
  return n.toFixed(6);
}

function Countdown({ iso }) {
  const [now, setNow] = React.useState(Date.now());
  React.useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);
  const target = new Date(iso).getTime();
  const delta = target - now;
  if (delta <= 0) return <span className="fg-dim">due</span>;
  const days = Math.floor(delta / (24 * 3600_000));
  const hrs = Math.floor((delta % (24 * 3600_000)) / 3600_000);
  const mins = Math.floor((delta % 3600_000) / 60_000);
  const secs = Math.floor((delta % 60_000) / 1000);
  if (days > 0) return <span>{days}d {String(hrs).padStart(2, "0")}h</span>;
  return <span>{String(hrs).padStart(2, "0")}:{String(mins).padStart(2, "0")}:{String(secs).padStart(2, "0")}</span>;
}

function ConfidenceGauge({ value, color = "var(--accent)", size = 44 }) {
  const r = size / 2 - 4;
  const cx = size / 2, cy = size / 2;
  const circ = 2 * Math.PI * r;
  // arc covers 270deg (from 135° to 405°/45°)
  const sweep = 0.78;
  const offset = circ * (1 - value * sweep);
  const dashLen = circ * sweep;
  const dashGap = circ - dashLen;
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ display: "block" }}>
      <circle
        cx={cx} cy={cy} r={r}
        fill="none"
        stroke="var(--bg-subtle)"
        strokeWidth="3"
        strokeDasharray={`${dashLen} ${dashGap}`}
        strokeLinecap="round"
        transform={`rotate(135 ${cx} ${cy})`}
      />
      <circle
        cx={cx} cy={cy} r={r}
        fill="none"
        stroke={color}
        strokeWidth="3"
        strokeDasharray={`${dashLen * value} ${circ}`}
        strokeLinecap="round"
        transform={`rotate(135 ${cx} ${cy})`}
      />
      <text x={cx} y={cy + 1} textAnchor="middle" dominantBaseline="middle"
            style={{ font: "600 11px var(--font-mono)", fill: "var(--fg)" }}>
        {(value * 100).toFixed(0)}
      </text>
      <text x={cx} y={cy + 11} textAnchor="middle" dominantBaseline="middle"
            style={{ font: "600 6px var(--font-mono)", fill: "var(--fg-dim)", letterSpacing: "0.12em" }}>
        CONF
      </text>
    </svg>
  );
}

function StrengthPips({ pip, color }) {
  return (
    <div className="sc-pips">
      {[1, 2, 3, 4, 5].map(i => {
        const lit = (pip <= 2 && i <= pip) || (pip >= 4 && i >= pip) || (pip === 3 && i === 3);
        return (
          <span key={i} className={`sc-pip ${lit ? "lit" : ""} ${i === pip ? "active" : ""}`}
                style={{ background: lit ? color : "var(--bg-subtle)" }} />
        );
      })}
    </div>
  );
}

function SignalCardRich({ signal, whales }) {
  const cfg = SIGNAL_CFG[signal.signal] || SIGNAL_CFG.HOLD;
  const pos = signal.change_pct >= 0;
  const coinWhales = (whales || []).filter(w => w.coin === signal.coin).slice(0, 3);
  const { fmtUSD, timeAgo } = window.NTData;

  return (
    <div className="sc-card">
      <style>{`
        .sc-card {
          background: var(--bg-panel);
          border: 1px solid var(--border);
          border-radius: 5px;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          position: relative;
          transition: border-color .15s, transform .15s;
        }
        .sc-card:hover {
          border-color: var(--border-strong);
          transform: translateY(-1px);
        }
        .sc-card__accent {
          position: absolute; left: 0; top: 0; bottom: 0;
          width: 2px;
          opacity: 0.85;
        }
        .sc-card__head {
          display: flex; align-items: center; gap: 8px;
          padding: 8px 10px;
          border-bottom: 1px solid var(--divider);
          background: var(--bg-panel-2);
        }
        .sc-coin {
          display: flex; align-items: center; gap: 6px;
        }
        .sc-coin__dot {
          width: 8px; height: 8px; border-radius: 50%;
          box-shadow: 0 0 6px currentColor;
        }
        .sc-coin__sym {
          font-family: var(--font-mono); font-size: 12px; font-weight: 700;
          color: var(--fg); letter-spacing: 0.04em;
        }
        .sc-coin__name {
          font-family: var(--font-mono); font-size: 9px;
          color: var(--fg-dim); letter-spacing: 0.06em;
          text-transform: uppercase;
          margin-left: 2px;
        }
        .sc-badge {
          margin-left: auto;
          display: inline-flex; align-items: center; gap: 4px;
          font-family: var(--font-mono); font-size: 9.5px;
          font-weight: 700; letter-spacing: 0.1em;
          padding: 2px 7px;
          border-radius: 3px;
          border: 1px solid currentColor;
        }
        .sc-badge::before {
          content: ""; width: 5px; height: 5px; border-radius: 50%;
          background: currentColor;
        }

        .sc-card__body {
          padding: 10px;
          display: grid;
          grid-template-columns: 1fr auto;
          gap: 10px;
          align-items: start;
        }
        .sc-prices {
          display: flex; flex-direction: column; gap: 4px;
          min-width: 0;
        }
        .sc-price-row {
          display: flex; align-items: baseline; gap: 6px;
          justify-content: space-between;
        }
        .sc-price-label {
          font-family: var(--font-mono); font-size: 8.5px;
          color: var(--fg-dim); letter-spacing: 0.1em; text-transform: uppercase;
        }
        .sc-price-cur {
          font-family: var(--font-display); font-size: 17px; font-weight: 600;
          color: var(--fg); letter-spacing: -0.02em;
          font-variant-numeric: tabular-nums;
          line-height: 1;
        }
        .sc-price-tgt {
          font-family: var(--font-mono); font-size: 11px; font-weight: 600;
          font-variant-numeric: tabular-nums;
          line-height: 1;
        }
        .sc-change {
          display: inline-flex; align-items: baseline; gap: 4px;
          font-family: var(--font-mono); font-size: 12px;
          font-weight: 700;
          line-height: 1;
        }
        .sc-change-arrow { font-size: 9px; }

        .sc-pips {
          display: flex; gap: 2px; align-items: center;
        }
        .sc-pip {
          width: 5px; height: 5px; border-radius: 50%;
          flex-shrink: 0;
          transition: all .15s;
          background: var(--bg-subtle);
        }
        .sc-pip.active {
          width: 8px; height: 8px;
          box-shadow: 0 0 5px currentColor;
        }

        .sc-meta-row {
          display: flex; align-items: center; justify-content: space-between;
          gap: 8px;
          padding: 5px 10px;
          border-top: 1px solid var(--divider);
          font-family: var(--font-mono); font-size: 9px;
          color: var(--fg-muted);
          letter-spacing: 0.06em;
        }
        .sc-spark-wrap {
          padding: 4px 10px;
          border-top: 1px solid var(--divider);
          background: var(--bg-inset);
          display: flex; align-items: center; justify-content: space-between;
          gap: 8px;
        }
        .sc-spark-label {
          font-family: var(--font-mono); font-size: 8.5px;
          color: var(--fg-dim); letter-spacing: 0.1em; text-transform: uppercase;
        }
        .sc-whales {
          padding: 6px 10px;
          border-top: 1px solid var(--divider);
          background: var(--bg-inset);
        }
        .sc-whales__title {
          font-family: var(--font-mono); font-size: 8.5px;
          color: var(--fg-dim); letter-spacing: 0.1em; text-transform: uppercase;
          margin-bottom: 4px;
          display: flex; justify-content: space-between;
        }
        .sc-whale-row {
          display: grid;
          grid-template-columns: 30px 1fr auto auto;
          gap: 6px;
          align-items: center;
          font-family: var(--font-mono); font-size: 9.5px;
          padding: 2px 0;
        }
        .sc-whale-dir {
          font-weight: 700;
          letter-spacing: 0.08em;
        }
        .sc-whale-label {
          color: var(--fg-2);
          white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
          min-width: 0;
        }
        .sc-whale-time {
          color: var(--fg-dim);
          font-size: 8.5px;
        }
        .sc-whale-amt {
          font-weight: 700;
        }
        .sc-no-whales {
          font-family: var(--font-mono); font-size: 9px;
          color: var(--fg-dim); letter-spacing: 0.04em;
          padding: 2px 0;
        }

        .sc-anomaly {
          display: flex; align-items: center; justify-content: space-between;
          padding: 4px 10px;
          border-top: 1px solid var(--divider);
          font-family: var(--font-mono); font-size: 9px;
          letter-spacing: 0.06em;
        }
      `}</style>

      <div className="sc-card__accent" style={{ background: cfg.color }}></div>

      {/* head */}
      <div className="sc-card__head">
        <div className="sc-coin" style={{ color: signal.chainColor }}>
          <span className="sc-coin__dot" style={{ background: "currentColor" }} />
          <span className="sc-coin__sym">{signal.coin}</span>
        </div>
        <span className="sc-coin__name">{signal.coinName}</span>
        <span className="sc-badge" style={{ color: cfg.color, background: cfg.soft }}>
          {cfg.short}
        </span>
      </div>

      {/* prices + confidence gauge */}
      <div className="sc-card__body">
        <div className="sc-prices">
          <div className="sc-price-row">
            <span className="sc-price-label">Spot</span>
            <span className="sc-price-cur">${fmtPrice(signal.current)}</span>
          </div>
          <div className="sc-price-row">
            <span className="sc-price-label">Target</span>
            <span className="sc-price-tgt" style={{ color: pos ? "var(--gain)" : "var(--loss)" }}>
              ${fmtPrice(signal.predicted)}
            </span>
          </div>
          <div className="sc-price-row" style={{ marginTop: 2 }}>
            <StrengthPips pip={cfg.pip} color={cfg.color} />
            <span className="sc-change" style={{ color: pos ? "var(--gain)" : "var(--loss)" }}>
              <span className="sc-change-arrow">{pos ? "▲" : "▼"}</span>
              {pos ? "+" : ""}{signal.change_pct.toFixed(2)}%
            </span>
          </div>
        </div>
        <ConfidenceGauge value={signal.confidence} color={cfg.color} />
      </div>

      {/* sparkline */}
      <div className="sc-spark-wrap">
        <span className="sc-spark-label">24h</span>
        <Sparkline data={signal.history} color={cfg.color} width={140} height={22} fill strokeWidth={1.2} />
      </div>

      {/* whale micro-feed */}
      <div className="sc-whales">
        <div className="sc-whales__title">
          <span>Whale flow · {signal.coin}</span>
          <span className="fg-faint">{coinWhales.length}/3</span>
        </div>
        {coinWhales.length === 0 ? (
          <div className="sc-no-whales">— no whale events 24h</div>
        ) : (
          coinWhales.map(w => {
            const isIn = w.direction === "EXCHANGE_INFLOW";
            const isOut = w.direction === "EXCHANGE_OUTFLOW";
            const c = isIn ? "var(--loss)" : isOut ? "var(--gain)" : "var(--warn)";
            const dir = isIn ? "▼IN" : isOut ? "▲OUT" : "◇TX";
            return (
              <div className="sc-whale-row" key={w.id}>
                <span className="sc-whale-dir" style={{ color: c }}>{dir}</span>
                <span className="sc-whale-label">{w.label}</span>
                <span className="sc-whale-amt" style={{ color: c }}>{fmtUSD(w.amount_usd)}</span>
                <span className="sc-whale-time">{timeAgo(w.timestamp)}</span>
              </div>
            );
          })
        )}
      </div>

      {/* anomaly + countdown */}
      <div className="sc-anomaly">
        {signal.onchain_anomaly && signal.onchain_anomaly.direction !== "NORMAL" ? (
          <span style={{ color: signal.onchain_anomaly.direction === "SPIKE" ? "var(--warn)" : "var(--info)" }}>
            {signal.onchain_anomaly.direction === "SPIKE" ? "VOL↑" : "VOL↓"} z={signal.onchain_anomaly.z_score >= 0 ? "+" : ""}{signal.onchain_anomaly.z_score.toFixed(1)}σ
          </span>
        ) : (
          <span className="fg-dim">vol nominal</span>
        )}
        <span className="fg-muted">
          ETA <Countdown iso={signal.predicted_by} />
        </span>
      </div>
    </div>
  );
}

window.SignalCardRich = SignalCardRich;
window.SIGNAL_CFG = SIGNAL_CFG;