// Stats.jsx — monthly category share + payer share charts
const { useState, useMemo } = React;

// build a monochromatic palette based on the accent color (lightness ramp)
function ramp(hex, n) {
  const m = hex.replace("#", "");
  const r = parseInt(m.slice(0, 2), 16), g = parseInt(m.slice(2, 4), 16), b = parseInt(m.slice(4, 6), 16);
  const out = [];
  for (let i = 0; i < n; i++) {
    const t = i / Math.max(1, n - 1);
    const mix = 0.0 + t * 0.65;
    const R = Math.round(r + (255 - r) * mix);
    const G = Math.round(g + (255 - g) * mix);
    const B = Math.round(b + (255 - b) * mix);
    out.push(`rgb(${R}, ${G}, ${B})`);
  }
  return out;
}

function StatsScreen({ transactions, names, cats, accent }) {
  const months = useMemo(() => {
    const set = new Set(transactions.filter((t) => t.type !== "settle" && !t.pending).map((t) => ym(t.date)));
    return Array.from(set).sort().reverse();
  }, [transactions]);

  const [month, setMonth] = useState(months[0] || ym(new Date().toISOString()));

  const monthTx = transactions.filter(
    (t) => t.type !== "settle" && !t.pending && ym(t.date) === month
  );
  const total = monthTx.reduce((s, t) => s + t.amount, 0);

  const byCat = cats.map((c) => {
    const sum = monthTx.filter((t) => t.category === c.id).reduce((s, t) => s + t.amount, 0);
    return { id: c.id, name: c.label, value: sum, color: c.color };
  }).filter((c) => c.value > 0).sort((a, b) => b.value - a.value);

  const aSum = monthTx.filter((t) => t.payer === "A").reduce((s, t) => s + t.amount, 0);
  const bSum = monthTx.filter((t) => t.payer === "B").reduce((s, t) => s + t.amount, 0);

  const maxCat = byCat[0]?.value || 1;

  return (
    <div className="screen stats" data-screen-label="04 統計">
      <div className="stats-month-bar">
        <select className="hist-month" value={month} onChange={(e) => setMonth(e.target.value)}>
          {months.map((m) => <option key={m} value={m}>{m.replace("-", " / ")}</option>)}
        </select>
      </div>

      <div className="stats-total">
        <div className="stats-total-l">當月支出</div>
        <div className="stats-total-v num">NT$ {fmtMoney(total)}</div>
      </div>

      <div className="stats-section-title">分類佔比</div>
      {byCat.length === 0 ? (
        <div className="empty-mini">無資料</div>
      ) : (
        <div className="stats-cat-bars">
          {byCat.map((c) => {
            const pct = total > 0 ? c.value / total * 100 : 0;
            const w = c.value / maxCat * 100;
            return (
              <div key={c.id} className="stats-cat-row">
                <div className="stats-cat-head">
                  <span className="stats-cat-chip" style={{ borderColor: c.color, color: c.color }}>{c.name}</span>
                  <span className="num stats-cat-v">{fmtMoney(c.value)}</span>
                  <span className="num stats-cat-pct">{Math.round(pct)}％</span>
                </div>
                <div className="stats-cat-track">
                  <div className="stats-cat-fill" style={{ width: `${w}%`, background: c.color }} />
                </div>
              </div>
            );
          })}
        </div>
      )}

      <div className="stats-section-title">支付比例</div>
      <div className="stats-bar">
        <div className="stats-bar-row">
          <div className="stats-bar-l">{names.A}</div>
          <div className="stats-bar-track">
            <div className="stats-bar-fill"
            style={{ width: total > 0 ? `${aSum / total * 100}%` : 0, background: accent }} />
          </div>
          <div className="stats-bar-r num">{fmtMoney(aSum)}</div>
        </div>
        <div className="stats-bar-row">
          <div className="stats-bar-l">{names.B}</div>
          <div className="stats-bar-track">
            <div className="stats-bar-fill"
            style={{ width: total > 0 ? `${bSum / total * 100}%` : 0, background: "#C8C8C8" }} />
          </div>
          <div className="stats-bar-r num">{fmtMoney(bSum)}</div>
        </div>
      </div>
    </div>);
}

window.StatsScreen = StatsScreen;