// Calibration chart — inline SVG. Square aspect.
// Plots user dots vs. perfect-calibration diagonal.

const CalibrationChart = ({ buckets, strings }) => {
  // SVG coordinate system: 0–500 with margins.
  const W = 500, H = 500;
  const M = { top: 28, right: 28, bottom: 56, left: 56 };
  const plotW = W - M.left - M.right;
  const plotH = H - M.top - M.bottom;

  // X domain 50–100, Y domain 0–100. Match scout mindset chart conventions.
  const xMin = 50, xMax = 100;
  const yMin = 0, yMax = 100;
  const x = (v) => M.left + ((v - xMin) / (xMax - xMin)) * plotW;
  const y = (v) => M.top + plotH - ((v - yMin) / (yMax - yMin)) * plotH;

  const xTicks = [50, 55, 65, 75, 85, 95, 100];
  const yTicks = [0, 25, 50, 75, 100];
  const conf = [55, 65, 75, 85, 95];

  // Scale dot radius by sample count: minimum 6, +1.4 px per extra answer, cap 16.
  const dotR = (n) => Math.min(16, Math.max(6, 6 + (n - 1) * 1.4));

  const points = conf
    .map((c) => {
      const b = buckets[c];
      if (!b || b.total === 0) return null;
      const acc = (b.correct / b.total) * 100;
      return { c, acc, n: b.total, correct: b.correct };
    })
    .filter(Boolean);

  return (
    <div className="cal-chart">
      <svg
        viewBox={`0 0 ${W} ${H}`}
        preserveAspectRatio="xMidYMid meet"
        role="img"
        aria-label={strings.results.chartTitle}
      >
        {/* plot bg */}
        <rect
          x={M.left} y={M.top} width={plotW} height={plotH}
          fill="rgba(14,135,156,0.03)"
          stroke="rgba(14,135,156,0.18)"
        />

        {/* y gridlines */}
        {yTicks.map((t) => (
          <line key={`yg-${t}`}
            x1={M.left} x2={M.left + plotW}
            y1={y(t)} y2={y(t)}
            stroke="rgba(14,135,156,0.10)" strokeWidth="1"
          />
        ))}

        {/* perfect-calibration diagonal */}
        <line
          x1={x(50)} y1={y(50)}
          x2={x(100)} y2={y(100)}
          stroke="rgba(27,82,102,0.55)"
          strokeWidth="1.5"
          strokeDasharray="6 5"
        />

        {/* x ticks */}
        {xTicks.map((t) => (
          <g key={`xt-${t}`}>
            <line
              x1={x(t)} x2={x(t)}
              y1={M.top + plotH} y2={M.top + plotH + 6}
              stroke="rgba(27,82,102,0.5)"
            />
            <text
              x={x(t)} y={M.top + plotH + 22}
              textAnchor="middle"
              fontSize="13"
              fill="var(--ea-graphite)"
              fontFamily="var(--font-sans)"
            >{t}%</text>
          </g>
        ))}

        {/* y ticks */}
        {yTicks.map((t) => (
          <g key={`yl-${t}`}>
            <line
              x1={M.left - 6} x2={M.left}
              y1={y(t)} y2={y(t)}
              stroke="rgba(27,82,102,0.5)"
            />
            <text
              x={M.left - 10} y={y(t) + 4}
              textAnchor="end"
              fontSize="13"
              fill="var(--ea-graphite)"
              fontFamily="var(--font-sans)"
            >{t}%</text>
          </g>
        ))}

        {/* axis labels */}
        <text
          x={M.left + plotW / 2}
          y={H - 10}
          textAnchor="middle"
          fontSize="12"
          fill="var(--ea-graphite)"
          fontFamily="var(--font-sans)"
          letterSpacing="0.05em"
          style={{ textTransform: 'uppercase' }}
        >{strings.results.chartXLabel}</text>

        <text
          transform={`rotate(-90, 14, ${M.top + plotH / 2})`}
          x={14}
          y={M.top + plotH / 2}
          textAnchor="middle"
          fontSize="12"
          fill="var(--ea-graphite)"
          fontFamily="var(--font-sans)"
          letterSpacing="0.05em"
          style={{ textTransform: 'uppercase' }}
        >{strings.results.chartYLabel}</text>

        {/* connector lines from each user dot to its diagonal target — shows lean */}
        {points.map((p) => (
          <line
            key={`con-${p.c}`}
            x1={x(p.c)} y1={y(p.c)}
            x2={x(p.c)} y2={y(p.acc)}
            stroke="var(--ea-teal)"
            strokeOpacity="0.35"
            strokeWidth="1.5"
            strokeDasharray="2 3"
          />
        ))}

        {/* user dots */}
        {points.map((p) => (
          <g key={`dot-${p.c}`}>
            <circle
              cx={x(p.c)} cy={y(p.acc)}
              r={dotR(p.n) + 3}
              fill="var(--ea-teal)"
              fillOpacity="0.15"
            />
            <circle
              cx={x(p.c)} cy={y(p.acc)}
              r={dotR(p.n)}
              fill="var(--ea-teal)"
              stroke="#fff"
              strokeWidth="2"
            />
            <text
              x={x(p.c)} y={y(p.acc) - dotR(p.n) - 8}
              textAnchor="middle"
              fontSize="12"
              fontWeight="600"
              fill="var(--ea-teal-deep)"
              fontFamily="var(--font-sans)"
            >{p.correct}/{p.n}</text>
          </g>
        ))}

        {/* perfect-calibration label, anchored at top-right of diagonal */}
        <g transform={`translate(${x(96)}, ${y(96) - 10})`}>
          <text
            fontSize="11"
            fill="rgba(27,82,102,0.75)"
            fontFamily="var(--font-sans)"
            textAnchor="end"
            style={{ fontStyle: 'italic' }}
          >{strings.results.perfectLine}</text>
        </g>
      </svg>
    </div>
  );
};

window.CalibrationChart = CalibrationChart;