// Lightweight inline chart components — no libraries, just SVG + a touch of motion.

const LiveLineChart = ({ width = 560, height = 220, accent = '#3a8c5e', seed = 7 }) => {
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setTick(t => t + 1), 1800);
    return () => clearInterval(id);
  }, []);

  const points = React.useMemo(() => {
    const n = 48;
    let v = 60;
    const rng = mulberry32(seed + tick);
    const arr = [];
    for (let i = 0; i < n; i++) {
      v += (rng() - 0.45) * 8;
      v = Math.max(20, Math.min(95, v));
      arr.push(v);
    }
    return arr;
  }, [tick, seed]);

  const path = points.map((p, i) => {
    const x = (i / (points.length - 1)) * width;
    const y = height - (p / 100) * (height - 30) - 10;
    return `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`;
  }).join(' ');

  const areaPath = `${path} L${width},${height} L0,${height} Z`;
  const last = points[points.length - 1];
  const lastY = height - (last / 100) * (height - 30) - 10;

  return (
    <svg width="100%" viewBox={`0 0 ${width} ${height}`} style={{ display: 'block', overflow: 'visible' }}>
      <defs>
        <linearGradient id="liveFill" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={accent} stopOpacity="0.18" />
          <stop offset="100%" stopColor={accent} stopOpacity="0" />
        </linearGradient>
      </defs>
      {/* gridlines */}
      {[0.25, 0.5, 0.75].map((g, i) => (
        <line key={i} x1="0" x2={width} y1={height * g} y2={height * g}
          stroke="currentColor" strokeOpacity="0.08" strokeDasharray="2 4" />
      ))}
      <path d={areaPath} fill="url(#liveFill)" style={{ transition: 'd 1.6s ease' }} />
      <path d={path} fill="none" stroke={accent} strokeWidth="1.5" strokeLinecap="round" style={{ transition: 'd 1.6s ease' }} />
      <circle cx={width} cy={lastY} r="3.5" fill={accent} style={{ transition: 'cy 1.6s ease' }} />
      <circle cx={width} cy={lastY} r="8" fill={accent} fillOpacity="0.25">
        <animate attributeName="r" values="4;14;4" dur="2.4s" repeatCount="indefinite" />
        <animate attributeName="fillOpacity" values="0.4;0;0.4" dur="2.4s" repeatCount="indefinite" />
      </circle>
    </svg>
  );
};

const BarSpark = ({ data = [42, 58, 51, 73, 68, 82, 79, 91], accent = '#3a8c5e' }) => (
  <svg width="100%" viewBox="0 0 200 60" style={{ display: 'block' }}>
    {data.map((v, i) => {
      const w = 200 / data.length;
      const h = (v / 100) * 50;
      return (
        <rect key={i}
          x={i * w + 2} y={60 - h} width={w - 4} height={h}
          fill={i === data.length - 1 ? accent : 'currentColor'}
          fillOpacity={i === data.length - 1 ? 1 : 0.18} />
      );
    })}
  </svg>
);

const RadialGauge = ({ value = 38, label = 'EBITDA Δ', accent = '#3a8c5e', suffix = '%' }) => {
  const r = 42;
  const c = 2 * Math.PI * r;
  const offset = c - (Math.min(value, 100) / 100) * c;
  return (
    <svg width="120" height="120" viewBox="0 0 120 120">
      <circle cx="60" cy="60" r={r} fill="none" stroke="currentColor" strokeOpacity="0.1" strokeWidth="6" />
      <circle cx="60" cy="60" r={r} fill="none" stroke={accent} strokeWidth="6"
        strokeDasharray={c} strokeDashoffset={offset}
        strokeLinecap="round" transform="rotate(-90 60 60)" />
      <text x="60" y="58" textAnchor="middle" fontSize="22" fontWeight="500" fill="currentColor"
        style={{ fontFeatureSettings: '"tnum"' }}>+{value}{suffix}</text>
      <text x="60" y="76" textAnchor="middle" fontSize="9" fill="currentColor" fillOpacity="0.55"
        style={{ fontFamily: 'var(--mono)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>{label}</text>
    </svg>
  );
};

// tiny seedable RNG
function mulberry32(a) {
  return function() {
    a |= 0; a = a + 0x6D2B79F5 | 0;
    let t = a;
    t = Math.imul(t ^ t >>> 15, t | 1);
    t ^= t + Math.imul(t ^ t >>> 7, t | 61);
    return ((t ^ t >>> 14) >>> 0) / 4294967296;
  };
}

Object.assign(window, { LiveLineChart, BarSpark, RadialGauge });