// Speed gauge: 270° arc from 0 to MAX km/h
const { useMemo: useMemoG } = React;

window.SpeedGauge = function SpeedGauge({ value = 0, max = 120 }) {
  const size = 240;
  const cx = size / 2;
  const cy = size / 2;
  const r = 96;
  const stroke = 14;

  // sweep from -225° to 45° (clockwise), 270° total
  const startAngle = -225;
  const endAngle = 45;

  const polar = (deg) => {
    const rad = (deg * Math.PI) / 180;
    return [cx + r * Math.cos(rad), cy + r * Math.sin(rad)];
  };

  const arcPath = (from, to) => {
    const [x1, y1] = polar(from);
    const [x2, y2] = polar(to);
    const large = Math.abs(to - from) > 180 ? 1 : 0;
    const sweep = to > from ? 1 : 0;
    return `M ${x1} ${y1} A ${r} ${r} 0 ${large} ${sweep} ${x2} ${y2}`;
  };

  const v = Math.max(0, Math.min(max, value));
  const valueAngle = startAngle + (v / max) * (endAngle - startAngle);

  // Ticks every 20 km/h
  const ticks = [];
  for (let s = 0; s <= max; s += 20) {
    const angle = startAngle + (s / max) * (endAngle - startAngle);
    const [tx1, ty1] = polar(angle);
    const inner = r - 14;
    const [tx2, ty2] = [
      cx + inner * Math.cos((angle * Math.PI) / 180),
      cy + inner * Math.sin((angle * Math.PI) / 180),
    ];
    const labelR = r - 28;
    const [lx, ly] = [
      cx + labelR * Math.cos((angle * Math.PI) / 180),
      cy + labelR * Math.sin((angle * Math.PI) / 180),
    ];
    ticks.push({ s, tx1, ty1, tx2, ty2, lx, ly });
  }

  // Color depending on speed
  const color = v >= 90 ? "#ff2d37" : v >= 60 ? "#ffa500" : "#2db928";

  return (
    <svg className="gauge-svg" width={size} height={size * 0.78} viewBox={`0 0 ${size} ${size * 0.85}`}>
      {/* Track */}
      <path
        d={arcPath(startAngle, endAngle)}
        fill="none"
        stroke="#232323"
        strokeWidth={stroke}
        strokeLinecap="round"
      />
      {/* Value arc */}
      <path
        d={arcPath(startAngle, valueAngle)}
        fill="none"
        stroke={color}
        strokeWidth={stroke}
        strokeLinecap="round"
        style={{ transition: "stroke 0.4s, d 0.2s" }}
      />
      {/* Ticks */}
      {ticks.map(({ s, tx1, ty1, tx2, ty2, lx, ly }) => (
        <g key={s}>
          <line x1={tx1} y1={ty1} x2={tx2} y2={ty2} stroke="#5a5a5a" strokeWidth="1.5"/>
          <text x={lx} y={ly} fill="#8a8a8a" fontSize="11"
                fontFamily="Inter, sans-serif"
                textAnchor="middle" dominantBaseline="middle">
            {s}
          </text>
        </g>
      ))}
      {/* Needle hub dot */}
      <circle cx={cx} cy={cy} r="4" fill={color}/>
    </svg>
  );
};

// Mini sparkline for consumption history
window.Sparkline = function Sparkline({ data = [], min = 18, max = 36 }) {
  if (!data.length) return null;
  const W = 360;
  const H = 60;
  const stepX = W / Math.max(1, data.length - 1);
  const scaleY = (v) => H - ((v - min) / (max - min)) * H;

  const points = data.map((v, i) => [i * stepX, scaleY(v)]);
  const path = points.map(([x, y], i) => (i === 0 ? `M ${x} ${y}` : `L ${x} ${y}`)).join(" ");
  const area = path + ` L ${W} ${H} L 0 ${H} Z`;

  return (
    <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none">
      <defs>
        <linearGradient id="sparkFill" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#ffa500" stopOpacity="0.45"/>
          <stop offset="1" stopColor="#ffa500" stopOpacity="0"/>
        </linearGradient>
      </defs>
      {/* gridlines */}
      {[0.25, 0.5, 0.75].map((p) => (
        <line key={p} x1="0" y1={H * p} x2={W} y2={H * p} stroke="#222" strokeWidth="0.5" strokeDasharray="2 4"/>
      ))}
      <path d={area} fill="url(#sparkFill)"/>
      <path d={path} fill="none" stroke="#ffa500" strokeWidth="2" strokeLinejoin="round" strokeLinecap="round"/>
      {/* dot at end */}
      {points.length > 0 && (
        <circle cx={points[points.length - 1][0]} cy={points[points.length - 1][1]} r="3" fill="#ffa500"/>
      )}
    </svg>
  );
};