/* Chart primitives — area/line chart + sparkline + SVG helpers. */

// Compute path strings for an area + line chart
function buildPath(values, width, height, padX = 32, padY = 16) {
  if (!values || values.length === 0) return { line: '', area: '' };
  const max = Math.max(...values) * 1.12;
  const min = Math.min(0, Math.min(...values) * 0.95);
  const span = max - min || 1;
  const n = values.length;
  const xStep = (width - padX * 2) / (n - 1);
  const toY = v => height - padY - ((v - min) / span) * (height - padY * 2);
  const pts = values.map((v, i) => [padX + i * xStep, toY(v)]);
  const line = pts.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p[0].toFixed(1)} ${p[1].toFixed(1)}`).join(' ');
  const area = line + ` L ${pts[n - 1][0].toFixed(1)} ${height - padY} L ${pts[0][0].toFixed(1)} ${height - padY} Z`;
  return { line, area, pts, toY };
}

const AreaChart = ({ values, priorValues, height = 180, color = 'var(--rc-chart-1)', showForecast = false, compact = false, showAxis = true }) => {
  const width = 720;
  const padX = showAxis ? 36 : 12;
  const padY = compact ? 8 : 14;
  const main = buildPath(values, width, height, padX, padY);
  const prior = priorValues ? buildPath(priorValues, width, height, padX, padY) : null;

  const max = Math.max(...values);
  const yTicks = showAxis ? 4 : 0;

  return (
    <svg viewBox={`0 0 ${width} ${height}`} preserveAspectRatio="none" style={{ width: '100%', height: 'auto', display: 'block' }}>
      <defs>
        <linearGradient id={`fill-${color.replace(/[^a-z0-9]/gi, '')}`} x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor={color} stopOpacity="0.22" />
          <stop offset="100%" stopColor={color} stopOpacity="0" />
        </linearGradient>
      </defs>
      {/* Gridlines */}
      {Array.from({ length: yTicks + 1 }).map((_, i) => {
        const y = padY + (i / yTicks) * (height - padY * 2);
        return <line key={i} x1={padX} x2={width - padX} y1={y} y2={y}
          stroke="var(--rc-chart-grid)" strokeWidth="1" strokeDasharray={i === yTicks ? '0' : '2 3'} />;
      })}
      {/* Forecast zone on rightmost 12% */}
      {showForecast && (
        <rect x={width - padX - (width - padX * 2) * 0.12} y={padY}
          width={(width - padX * 2) * 0.12} height={height - padY * 2}
          fill="color-mix(in srgb, var(--rc-chart-1) 8%, transparent)"
          stroke="color-mix(in srgb, var(--rc-chart-1) 25%, transparent)"
          strokeWidth="1" strokeDasharray="3 3" />
      )}
      {/* Prior period (dashed) — RC-PAGE-013 comparison overlay */}
      {prior && (
        <path d={prior.line} fill="none"
          stroke="color-mix(in srgb, var(--rc-text-mute) 70%, var(--rc-chart-1))"
          strokeWidth="1.5" strokeDasharray="5 3" opacity="0.85" />
      )}
      {/* Main fill */}
      <path d={main.area} fill={`url(#fill-${color.replace(/[^a-z0-9]/gi, '')})`} />
      {/* Main line */}
      <path d={main.line} fill="none" stroke={color} strokeWidth="2" strokeLinejoin="round" strokeLinecap="round" />
    </svg>
  );
};

const Sparkline = ({ values, color = 'var(--rc-chart-1)', height = 32, width = 110, direction = 'good' }) => {
  const main = buildPath(values, width, height, 2, 2);
  const stroke = direction === 'bad' ? 'var(--rc-negative-soft)' : direction === 'flat' ? 'var(--rc-text-sub)' : color;
  return (
    <svg viewBox={`0 0 ${width} ${height}`} style={{ width, height, display: 'block' }}>
      <path d={main.line} fill="none" stroke={stroke} strokeWidth="1.6" strokeLinejoin="round" />
    </svg>
  );
};

// Multi-line chart (for RC-SEC-030 compare chart, 3-max)
const MultiLineChart = ({ seriesList, height = 280, colors, showAxis = true }) => {
  const width = 960;
  const padX = 44, padY = 20;
  if (!seriesList || !seriesList.length) return null;

  // Each series may have wildly different ranges — normalize per-series 0..1.
  const n = seriesList[0].values.length;
  const xStep = (width - padX * 2) / (n - 1);

  const paths = seriesList.map(s => {
    const max = Math.max(...s.values) * 1.1;
    const min = Math.min(0, Math.min(...s.values) * 0.9);
    const span = max - min || 1;
    return s.values.map((v, i) => [padX + i * xStep, height - padY - ((v - min) / span) * (height - padY * 2)]);
  });

  return (
    <svg viewBox={`0 0 ${width} ${height}`} preserveAspectRatio="none" style={{ width: '100%', height: 'auto', display: 'block' }}>
      {/* Grid */}
      {Array.from({ length: 5 }).map((_, i) => {
        const y = padY + (i / 4) * (height - padY * 2);
        return <line key={i} x1={padX} x2={width - padX} y1={y} y2={y}
          stroke="var(--rc-chart-grid)" strokeWidth="1" strokeDasharray={i === 4 ? '0' : '2 3'} />;
      })}
      {/* Forecast zone on right */}
      <rect x={width - padX - (width - padX * 2) * 0.1} y={padY}
        width={(width - padX * 2) * 0.1} height={height - padY * 2}
        fill="color-mix(in srgb, var(--rc-chart-1) 8%, transparent)"
        stroke="color-mix(in srgb, var(--rc-chart-1) 22%, transparent)"
        strokeDasharray="3 3" />
      {paths.map((pts, i) => (
        <path key={i} d={pts.map((p, j) => `${j === 0 ? 'M' : 'L'} ${p[0].toFixed(1)} ${p[1].toFixed(1)}`).join(' ')}
          fill="none" stroke={colors[i]} strokeWidth="2" strokeLinejoin="round" />
      ))}
    </svg>
  );
};

/* Shared-axis multi-line chart for RC-SEC-050.
   All lines share one metric, so they share one y-axis scale. */
const SharedAxisLineChart = ({ seriesList, height = 260, xLabels, hoveredIdx, setHoveredIdx }) => {
  const width = 960;
  const padX = 48, padY = 20;
  if (!seriesList || !seriesList.length) return null;

  const allValues = seriesList.flatMap(s => s.values);
  const max = Math.max(...allValues) * 1.08;
  const min = Math.min(0, Math.min(...allValues) * 0.95);
  const span = max - min || 1;
  const n = seriesList[0].values.length;
  const xStep = (width - padX * 2) / (n - 1);
  const toY = v => height - padY - ((v - min) / span) * (height - padY * 2);

  // y-axis tick labels — 5 ticks
  const ticks = Array.from({ length: 5 }).map((_, i) => min + (span * i / 4));

  return (
    <div style={{ position: 'relative' }}>
      <svg viewBox={`0 0 ${width} ${height}`} preserveAspectRatio="none"
        style={{ width: '100%', height: 'auto', display: 'block' }}
        onMouseLeave={() => setHoveredIdx && setHoveredIdx(null)}>
        {/* Gridlines + y-tick labels */}
        {ticks.map((t, i) => {
          const y = toY(t);
          return (
            <g key={i}>
              <line x1={padX} x2={width - padX} y1={y} y2={y}
                stroke="var(--rc-chart-grid)" strokeWidth="1" strokeDasharray={i === 0 ? '0' : '2 3'} />
              <text x={padX - 6} y={y + 3} textAnchor="end"
                fontSize="10" fill="var(--rc-text-mute)" fontFamily="Inter"
                style={{ fontVariantNumeric: 'tabular-nums' }}>
                {t >= 1000 ? (t / 1000).toFixed(1) + 'k' : t.toFixed(0)}
              </text>
            </g>
          );
        })}

        {/* Lines */}
        {seriesList.filter(s => s.visible !== false).map((s, i) => {
          const pts = s.values.map((v, j) => [padX + j * xStep, toY(v)]);
          const d = pts.map((p, j) => `${j === 0 ? 'M' : 'L'} ${p[0].toFixed(1)} ${p[1].toFixed(1)}`).join(' ');
          return (
            <path key={s.key} d={d} fill="none" stroke={s.color}
              strokeWidth={s.emphasis ? 2.4 : 1.6}
              strokeLinejoin="round" strokeLinecap="round"
              opacity={s.dimmed ? 0.22 : 1} />
          );
        })}

        {/* Hover crosshair + dots */}
        {hoveredIdx !== null && hoveredIdx !== undefined && (
          <g>
            <line x1={padX + hoveredIdx * xStep} x2={padX + hoveredIdx * xStep}
              y1={padY} y2={height - padY}
              stroke="var(--rc-text-mute)" strokeWidth="1" strokeDasharray="3 3" />
            {seriesList.filter(s => s.visible !== false).map(s => (
              <circle key={s.key} cx={padX + hoveredIdx * xStep} cy={toY(s.values[hoveredIdx])}
                r={3} fill={s.color} stroke="var(--rc-card)" strokeWidth={1.5} />
            ))}
          </g>
        )}

        {/* Invisible hover capture strips */}
        {xLabels && xLabels.map((_, i) => (
          <rect key={i} x={padX + (i - 0.5) * xStep} y={padY}
            width={xStep} height={height - padY * 2}
            fill="transparent"
            onMouseEnter={() => setHoveredIdx && setHoveredIdx(i)} />
        ))}

        {/* x-axis labels */}
        {xLabels && xLabels.map((lbl, i) => (
          <text key={i} x={padX + i * xStep} y={height - 4} textAnchor="middle"
            fontSize="9" fill="var(--rc-text-mute)" fontFamily="Inter">
            {lbl}
          </text>
        ))}
      </svg>
    </div>
  );
};

Object.assign(window, { buildPath, AreaChart, Sparkline, MultiLineChart, SharedAxisLineChart });