import { scaleLinear } from 'd3-scale';
import { fmt, fmtSplit, useT } from '@/lib/i18n';
import type { BacktestReport } from '@/lib/types';

const W = 360;
const H = 360;
const M = 34;

/** Calibration plot: predicted probability (x) vs observed frequency (y). Points
 *  on the diagonal = perfectly calibrated. Dot size ∝ sample count. */
export function ReliabilityDiagram({ reliability, ece }: { reliability: BacktestReport['reliability']; ece: number }) {
  const t = useT();
  const sx = scaleLinear().domain([0, 1]).range([M, W - 8]);
  const sy = scaleLinear().domain([0, 1]).range([H - M, 8]);
  const maxCount = Math.max(...reliability.map((b) => b.count), 1);
  const pts = reliability.filter((b) => b.count > 0);

  return (
    <div>
      <svg viewBox={`0 0 ${W} ${H}`} className="w-full max-w-sm">
        {/* axes */}
        <line x1={M} y1={H - M} x2={W - 8} y2={H - M} stroke="var(--app-line-strong)" strokeWidth={0.8} />
        <line x1={M} y1={H - M} x2={M} y2={8} stroke="var(--app-line-strong)" strokeWidth={0.8} />
        {/* perfect-calibration diagonal */}
        <line x1={sx(0)} y1={sy(0)} x2={sx(1)} y2={sy(1)} stroke="var(--app-line)" strokeDasharray="4 4" strokeWidth={1} />
        {[0.25, 0.5, 0.75, 1].map((t) => (
          <g key={t}>
            <text x={sx(t)} y={H - M + 14} textAnchor="middle" fontSize="10" fill="var(--app-faint)">{t}</text>
            <text x={M - 6} y={sy(t) + 3} textAnchor="end" fontSize="10" fill="var(--app-faint)">{t}</text>
          </g>
        ))}
        {/* model points + connecting line */}
        <polyline
          points={pts.map((b) => `${sx(b.predicted)},${sy(b.observed)}`).join(' ')}
          fill="none" stroke="var(--app-accent)" strokeWidth={1.5} opacity={0.5}
        />
        {pts.map((b, i) => (
          <circle key={i} cx={sx(b.predicted)} cy={sy(b.observed)} r={2 + 5 * Math.sqrt(b.count / maxCount)} fill="var(--app-accent)" fillOpacity={0.85}>
            <title>{fmt(t.methodology.calibration.pointTooltip, { predicted: (b.predicted * 100).toFixed(0), observed: (b.observed * 100).toFixed(0), count: b.count })}</title>
          </circle>
        ))}
        <text x={(W + M) / 2} y={H - 4} textAnchor="middle" fontSize="11" fill="var(--app-muted)">{t.methodology.calibration.xAxis}</text>
        <text x={12} y={H / 2} textAnchor="middle" fontSize="11" fill="var(--app-muted)" transform={`rotate(-90 12 ${H / 2})`}>{t.methodology.calibration.yAxis}</text>
      </svg>
      <p className="mt-1 text-sm text-muted">
        {fmtSplit(t.methodology.calibration.caption).map((p, i) =>
          typeof p === 'string'
            ? p
            : p.key === 'ece'
              ? <span key={i} className="font-bold text-accent">{ece.toFixed(2)}</span>
              : null,
        )}
      </p>
    </div>
  );
}
