// Atoms + chart components for Statto dash
const { useMemo, useState, useEffect, useRef } = React;

// ---------------- W/R/L chip ----------------
function WrlChip({ outcome }) {
  return <span className={`wrl ${outcome}`}>{outcome}</span>;
}

// ---------------- Pill / line tag ----------------
function LinePill({ type, line }) {
  return <span className="line-pill">{line}+</span>;
}

// ---------------- Flag stub ----------------
function Flag({ code }) {
  return <span className="flag" title={code}>{code}</span>;
}

// ---------------- Alert row (compact) ----------------
function AlertRow({ a, showType = true }) {
  return (
    <div className="alert-row">
      <WrlChip outcome={a.outcome} />
      <div className="match">
        <div className="teams">{a.match}</div>
        <div className="meta">
          {a.dateLabel} · {a.time} · {a.league}
        </div>
      </div>
      <LinePill type={a.type} line={a.line} />
    </div>);

}

// ---------------- Donut chart ----------------
function Donut({ w, r, l, size = 180, stroke = 22 }) {
  const total = Math.max(1, w + r + l);
  const C = 2 * Math.PI * ((size - stroke) / 2);
  const segs = [
  { key: "w", val: w, color: "var(--win)" },
  { key: "r", val: r, color: "var(--refund)" },
  { key: "l", val: l, color: "var(--loss)" }];

  let offset = 0;
  const radius = (size - stroke) / 2;
  const wrPct = total ? Math.round((w + r) / total * 100) : 0;
  return (
    <div className="donut-wrap">
      <svg className="donut" viewBox={`0 0 ${size} ${size}`}>
        <circle cx={size / 2} cy={size / 2} r={radius} stroke="var(--line)" strokeWidth={stroke} fill="none" />
        {segs.map((s) => {
          const len = s.val / total * C;
          const dash = `${len} ${C - len}`;
          const node =
          <circle
            key={s.key}
            cx={size / 2} cy={size / 2} r={radius}
            stroke={s.color} strokeWidth={stroke} fill="none"
            strokeDasharray={dash}
            strokeDashoffset={-offset}
            transform={`rotate(-90 ${size / 2} ${size / 2})`}
            strokeLinecap="butt" />;


          offset += len;
          return node;
        })}
        <text x="50%" y="48%" textAnchor="middle" className="donut-center" style={{ fontSize: 26 }}>
          {wrPct}%
        </text>
        <text x="50%" y="62%" textAnchor="middle" style={{ fill: "var(--ink-3)", fontSize: 9, fontFamily: '"Press Start 2P", monospace', letterSpacing: 1 }}>
          W+R
        </text>
      </svg>
      <div className="donut-stats">
        <div className="donut-stat">
          <span className="swatch" style={{ background: "var(--win)" }} />
          <span className="name">Wins</span>
          <span className="val">{w}</span>
        </div>
        <div className="donut-stat">
          <span className="swatch" style={{ background: "var(--refund)" }} />
          <span className="name">Refunds</span>
          <span className="val">{r}</span>
        </div>
        <div className="donut-stat">
          <span className="swatch" style={{ background: "var(--loss)" }} />
          <span className="name">Losses</span>
          <span className="val">{l}</span>
        </div>
        <div className="divider"></div>
        <div className="donut-stat">
          <span className="swatch" style={{ background: "var(--ink-3)" }} />
          <span className="name">Total</span>
          <span className="val">{total}</span>
        </div>
      </div>
    </div>);

}

// ---------------- Cumulative line chart ----------------
function CumulativeLineChart({ days, target = 0.65, height = 220 }) {
  const W = 640,H = height;
  const padL = 36,padR = 24,padT = 18,padB = 28;
  const innerW = W - padL - padR;
  const innerH = H - padT - padB;

  const xs = (i) => padL + i / 6 * innerW;
  const ys = (v) => padT + (1 - v) * innerH;

  const pts = days.map((d, i) => d.cumStrike == null ? null : { x: xs(i), y: ys(d.cumStrike), v: d.cumStrike, i });
  const valid = pts.filter(Boolean);

  // path & area
  const path = valid.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" ");
  const area = valid.length ?
  `${path} L ${valid[valid.length - 1].x} ${padT + innerH} L ${valid[0].x} ${padT + innerH} Z` :
  "";

  // stacked bars overlay (W/R/L counts) — light, behind line
  const maxBar = Math.max(1, ...days.map((d) => d.total));
  const barH = (count) => count / maxBar * (innerH * 0.5);

  return (
    <svg className="line-chart" viewBox={`0 0 ${W} ${H}`}>
      <defs>
        <linearGradient id="areaGrad" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#2f7a3a" stopOpacity="0.25" />
          <stop offset="100%" stopColor="#2f7a3a" stopOpacity="0" />
        </linearGradient>
      </defs>

      {/* gridlines */}
      <g className="grid">
        {[0, 0.25, 0.5, 0.75, 1].map((t) =>
        <line key={t} x1={padL} x2={W - padR} y1={ys(t)} y2={ys(t)} />
        )}
      </g>
      <g className="axis">
        {[0, 0.5, 1].map((t) =>
        <text key={t} x={padL - 8} y={ys(t) + 4} textAnchor="end">{Math.round(t * 100)}%</text>
        )}
        {days.map((d, i) =>
        <text key={i} x={xs(i)} y={H - 8} textAnchor="middle">{d.short}</text>
        )}
      </g>

      {/* stacked mini-bars at bottom — total daily volume */}
      {days.map((d, i) => {
        const totH = barH(d.total);
        const wH = d.w / Math.max(1, d.total) * totH;
        const rH = d.r / Math.max(1, d.total) * totH;
        const lH = d.l / Math.max(1, d.total) * totH;
        const baseY = padT + innerH;
        const x = xs(i) - 10;
        return d.total ?
        <g key={`bar-${i}`} opacity="0.55">
            <rect x={x} y={baseY - lH} width="20" height={lH} fill="var(--loss)" />
            <rect x={x} y={baseY - lH - rH} width="20" height={rH} fill="var(--refund)" />
            <rect x={x} y={baseY - totH} width="20" height={wH} fill="var(--win)" />
          </g> :
        null;
      })}

      {/* target line */}
      <line className="target" x1={padL} x2={W - padR} y1={ys(target)} y2={ys(target)} />
      <text className="target-label" x={W - padR - 4} y={ys(target) - 6} textAnchor="end">
        TARGET {Math.round(target * 100)}%
      </text>

      {/* area + line */}
      {valid.length > 1 && <path className="area" d={area} />}
      {valid.length > 1 && <path className="line" d={path} />}
      {valid.map((p, i) =>
      <circle key={i} className="point" cx={p.x} cy={p.y} r="4" />
      )}
    </svg>);

}

// ---------------- League leaderboard ----------------
function LeagueBoard({ alerts, limit = Infinity }) {
  const [filter, setFilter] = useState("Corners"); // Corners | Goals

  const filtered = useMemo(() => {
    return alerts.filter((a) => a.type === filter);
  }, [alerts, filter]);

  const rows = useMemo(() => {
    const board = window.STATTO.leagueBoard(filtered);
    return Number.isFinite(limit) ? board.slice(0, limit) : board;
  }, [filtered, limit]);

  const toggle =
  <div className="lb-toggle">
      <button
      className={`lb-tog corners ${filter === "Corners" ? "active" : ""}`}
      onClick={() => setFilter("Corners")}>CORNERS</button>
      <button
      className={`lb-tog goals ${filter === "Goals" ? "active" : ""}`}
      onClick={() => setFilter("Goals")}>GOALS</button>
    </div>;


  if (!rows.length) {
    return (
      <>
        {toggle}
        <div className="empty-state">No alerts</div>
      </>);

  }

  return (
    <>
      {toggle}
      <table className="league-table">
        <colgroup>
            <col className="c-name" />
            <col className="c-num-sm" />
            <col className="c-num-sm" />
            <col className="c-num-sm" />
            <col className="c-num-sm" />
            <col className="c-split" />
            <col className="c-rate" />
          </colgroup>
          
        <thead>
          <tr>
            <th>League</th>
            <th className="num">A</th>
            <th className="num">W</th>
            <th className="num">R</th>
            <th className="num">L</th>
            <th>Split</th>
            <th className="num">W+R Rate</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((L) => {
            const s = L.summary;
            const wPct = s.total ? s.w / s.total * 100 : 0;
            const rPct = s.total ? s.r / s.total * 100 : 0;
            const lPct = s.total ? s.l / s.total * 100 : 0;
            return (
              <tr key={L.name}>
                <td>
                  <div className="league-name">
                    <Flag code={L.flag} />
                    <span>{L.name}</span>
                  </div>
                </td>
                <td className="num">{s.total}</td>
                <td className="num" style={{ color: "var(--win)" }}>{s.w}</td>
                <td className="num" style={{ color: "var(--refund)" }}>{s.r}</td>
                <td className="num" style={{ color: "var(--loss)" }}>{s.l}</td>
                <td>
                  <span className="mini-bar">
                    <div style={{ width: wPct + "%" }} />
                    <div style={{ width: rPct + "%" }} />
                    <div style={{ width: lPct + "%" }} />
                  </span>
                </td>
                <td className="num">{Math.round(s.strike * 100)}%</td>
              </tr>);

          })}
        </tbody>
      </table>
    </>);

}

// ---------------- Alert column ----------------
function AlertColumn({ title, kind, alerts }) {
  const s = window.STATTO.summarize(alerts);
  const wPct = s.total ? s.w / s.total * 100 : 0;
  const rPct = s.total ? s.r / s.total * 100 : 0;
  const lPct = s.total ? s.l / s.total * 100 : 0;
  return (
    <div className="card">
      <div className="alert-col-head">
        <span className={`col-tag ${kind}`}>{title}</span>
        <div style={{ flex: 1 }}>
          <div className="wrl-bar">
            <div className="w" style={{ flex: wPct }} />
            <div className="r" style={{ flex: rPct }} />
            <div className="l" style={{ flex: lPct }} />
          </div>
        </div>
        <div style={{ fontFamily: '"JetBrains Mono", monospace', fontWeight: 700, fontSize: 14 }}>
          {Math.round(s.strike * 100)}%
        </div>
      </div>
      <div className="alert-list">
        {alerts.length === 0 && <div className="empty-state">No alerts</div>}
        {alerts.map((a, i) => <AlertRow key={`${a.id}-${i}`} a={a} />)}
      </div>
    </div>);

}

// ---------------- Pixel mascot (svg redraw of avatar) ----------------
function MascotPixel({ size = 40 }) {
  return (
    <img
      className="brand-logo"
      src="assets/statto-logo.png"
      alt="Statto"
      style={{ width: size, height: size }} />);


}

Object.assign(window, {
  WrlChip, LinePill, Flag, AlertRow, Donut, CumulativeLineChart,
  LeagueBoard, AlertColumn, MascotPixel
});