// ====== Inline SVG charts ======

// Area / line sparkline
const Sparkline = ({ data, width = 280, height = 90, fill = "rgba(200,162,92,0.18)", stroke = "#b48a3a", showAxis = false }) => {
  const pad = 4;
  const values = (Array.isArray(data) ? data : [])
    .map(v => Number(v))
    .filter(v => Number.isFinite(v));
  const series = values.length > 1 ? values : [values[0] || 0, values[0] || 0];
  const max = Math.max(...series) * 1.05;
  const min = Math.min(...series) * 0.9;
  const range = max - min || 1;
  const step = (width - pad * 2) / Math.max(1, series.length - 1);
  const pts = series.map((v, i) => [pad + i * step, height - pad - ((v - min) / range) * (height - pad * 2)]);
  const path = pts.map((p, i) => (i === 0 ? `M${p[0]},${p[1]}` : `L${p[0]},${p[1]}`)).join(" ");
  const area = `${path} L${pad + (series.length - 1) * step},${height - pad} L${pad},${height - pad} Z`;
  return (
    <svg width="100%" viewBox={`0 0 ${width} ${height}`} preserveAspectRatio="none" style={{ display: "block" }}>
      {showAxis && (
        <g stroke="rgba(31,58,42,0.08)" strokeDasharray="2 4">
          {[0.25, 0.5, 0.75].map(p => (
            <line key={p} x1={pad} x2={width - pad} y1={pad + (height - pad * 2) * p} y2={pad + (height - pad * 2) * p} />
          ))}
        </g>
      )}
      <path d={area} fill={fill} />
      <path d={path} stroke={stroke} strokeWidth="1.6" fill="none" strokeLinejoin="round" strokeLinecap="round" />
      {showAxis && pts.map((p, i) => (
        <circle key={i} cx={p[0]} cy={p[1]} r="2.5" fill="#fbf7ec" stroke={stroke} strokeWidth="1.2" />
      ))}
    </svg>
  );
};

// Hourly bar chart
const HourlyBars = ({ data, width = 560, height = 220 }) => {
  const pad = { t: 10, r: 12, b: 28, l: 30 };
  const max = Math.max(...data.map(d => d.v));
  const innerW = width - pad.l - pad.r;
  const innerH = height - pad.t - pad.b;
  const bw = innerW / data.length;
  const ticks = [0, 0.25, 0.5, 0.75, 1].map(p => Math.round(max * p / 5) * 5);
  return (
    <svg width="100%" viewBox={`0 0 ${width} ${height}`} style={{ display: "block" }}>
      {/* Grid lines */}
      <g stroke="rgba(31,58,42,0.08)">
        {ticks.map((t, i) => {
          const y = pad.t + innerH - (t / max) * innerH;
          return (
            <g key={i}>
              <line x1={pad.l} x2={width - pad.r} y1={y} y2={y} />
              <text x={pad.l - 6} y={y + 4} fontSize="10" textAnchor="end" fill="#5d6450" fontFamily="JetBrains Mono">{t}</text>
            </g>
          );
        })}
      </g>
      {/* Bars */}
      <g>
        {data.map((d, i) => {
          const x = pad.l + i * bw + 4;
          const w = bw - 8;
          const h = (d.v / max) * innerH;
          const y = pad.t + innerH - h;
          const isPeak = d.v === max;
          return (
            <g key={i}>
              <rect x={x} y={y} width={w} height={h} rx={3} fill={isPeak ? "#b48a3a" : "#356148"} opacity={isPeak ? 1 : 0.78} />
              {isPeak && (
                <text x={x + w / 2} y={y - 5} textAnchor="middle" fontSize="10" fontFamily="JetBrains Mono" fill="#997126">{d.v}</text>
              )}
            </g>
          );
        })}
      </g>
      {/* X labels */}
      <g fill="#5d6450" fontSize="10" fontFamily="JetBrains Mono">
        {data.map((d, i) => (
          <text key={i} x={pad.l + i * bw + bw / 2} y={height - 10} textAnchor="middle">{d.h}</text>
        ))}
      </g>
    </svg>
  );
};

// Donut chart
const Donut = ({ slices, size = 180 }) => {
  const r = size / 2 - 14;
  const cx = size / 2, cy = size / 2;
  const total = slices.reduce((a, s) => a + s.v, 0);
  let acc = -Math.PI / 2;
  const arcs = total > 0 ? slices.map(s => {
    const frac = s.v / total;
    const a0 = acc, a1 = acc + frac * Math.PI * 2;
    acc = a1;
    const large = frac > 0.5 ? 1 : 0;
    const x0 = cx + r * Math.cos(a0), y0 = cy + r * Math.sin(a0);
    const x1 = cx + r * Math.cos(a1), y1 = cy + r * Math.sin(a1);
    return { d: `M${cx},${cy} L${x0},${y0} A${r},${r} 0 ${large} 1 ${x1},${y1} Z`, color: s.color, label: s.label, v: s.v, frac };
  }) : [];
  const totalFont = Math.max(12, size * 0.18);
  const labelFont = Math.max(6, size * 0.06);
  const showLabel = size >= 110;
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
      {arcs.length
        ? arcs.map((a, i) => <path key={i} d={a.d} fill={a.color} />)
        : <circle cx={cx} cy={cy} r={r} fill="rgba(125,132,114,0.16)" />}
      <circle cx={cx} cy={cy} r={r * 0.62} fill="#fbf7ec" />
      <text x={cx} y={showLabel ? cy - 2 : cy + totalFont * 0.35} textAnchor="middle" fontFamily="Cormorant Garamond" fontSize={totalFont} fill="#1a3527" fontWeight="500">{total}</text>
      {showLabel && (
        <text x={cx} y={cy + 14} textAnchor="middle" fontSize={labelFont} fill="#5d6450" letterSpacing="2">ORDERS</text>
      )}
    </svg>
  );
};

window.Sparkline = Sparkline;
window.HourlyBars = HourlyBars;
window.Donut = Donut;