const { useState, useEffect, useRef } = React;
/* ---------- Charts ---------- */
function Sparkline({ data, w = 96, h = 30, color = "var(--accent)" }) {
  const min = Math.min(...data), max = Math.max(...data), span = max - min || 1;
  const pts = data.map((v, i) => [(i / (data.length - 1)) * (w - 2) + 1, h - 3 - ((v - min) / span) * (h - 7)]);
  const line = pts.map((p) => p[0].toFixed(1) + "," + p[1].toFixed(1)).join(" ");
  const area = "M1," + (h - 1) + " L" + line.replace(/ /g, " L") + " L" + (w - 1) + "," + (h - 1) + " Z";
  return (
    <svg width={w} height={h} viewBox={"0 0 " + w + " " + h}>
      <path d={area} fill={color} opacity="0.12"></path>
      <polyline points={line} fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"></polyline>
      <circle cx={pts[pts.length - 1][0]} cy={pts[pts.length - 1][1]} r="2.4" fill={color}></circle>
    </svg>
  );
}

function Bars({ a, b, labels, aLabel, bLabel }) {
  const W = 720, H = 230, pad = 6, base = H - 26;
  const max = Math.max(...a, ...b) * 1.12;
  const slot = (W - pad * 2) / labels.length;
  const bw = Math.min(13, slot / 3.4);
  return (
    <svg viewBox={"0 0 " + W + " " + H} style={{ width: "100%", height: "auto", display: "block" }}>
      {[0.25, 0.5, 0.75, 1].map((g) => (
        <line key={g} x1={pad} x2={W - pad} y1={base - (base - 14) * g} y2={base - (base - 14) * g}
          stroke="var(--line-soft)" strokeWidth="1" strokeDasharray="2 4"></line>
      ))}
      {labels.map((m, i) => {
        const cx = pad + slot * i + slot / 2;
        const ha = ((a[i] / max) * (base - 14));
        const hb = ((b[i] / max) * (base - 14));
        return (
          <g key={m}>
            <rect x={cx - bw - 1.5} y={base - ha} width={bw} height={ha} rx={bw / 2.6} fill="var(--accent)">
              <title>{m + " · " + aLabel + " $" + fmt(a[i] * 1000)}</title>
            </rect>
            <rect x={cx + 1.5} y={base - hb} width={bw} height={hb} rx={bw / 2.6} fill="var(--ink)" opacity="0.18">
              <title>{m + " · " + bLabel + " $" + fmt(b[i] * 1000)}</title>
            </rect>
            <text x={cx} y={H - 8} textAnchor="middle" fontSize="10.5" fill="var(--ink3)" fontFamily="Spline Sans Mono">{m}</text>
          </g>
        );
      })}
    </svg>
  );
}

function Donut({ segs, size = 148, thick = 17, centerLabel, centerValue }) {
  const r = (size - thick) / 2, C = 2 * Math.PI * r;
  const total = segs.reduce((s, x) => s + x.value, 0) || 1;
  let off = 0;
  return (
    <svg width={size} height={size} viewBox={"0 0 " + size + " " + size}>
      <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="var(--line-soft)" strokeWidth={thick}></circle>
      {segs.map((s, i) => {
        const frac = s.value / total;
        const el = (
          <circle key={i} cx={size / 2} cy={size / 2} r={r} fill="none" stroke={s.color}
            strokeWidth={thick} strokeLinecap="butt"
            strokeDasharray={(frac * C - 1.5) + " " + (C - frac * C + 1.5)}
            strokeDashoffset={-off * C + C / 4}>
            <title>{s.label + " · " + money(s.value)}</title>
          </circle>
        );
        off += frac;
        return el;
      })}
      <text x="50%" y="46%" textAnchor="middle" fontSize="20" fontWeight="700" fill="var(--ink)"
        fontFamily="'Bricolage Grotesque'">{centerValue}</text>
      <text x="50%" y="60%" textAnchor="middle" fontSize="10.5" fill="var(--ink3)">{centerLabel}</text>
    </svg>
  );
}

function Progress({ value, color = "var(--accent)" }) {
  return (
    <div className="prog"><i style={{ width: Math.max(2, Math.min(100, value)) + "%", background: color }}></i></div>
  );
}


Object.assign(window, { Sparkline, Bars, Donut, Progress });