import { ChartFrame, SvgA11y } from "./frame.tsx";
import { chartId, finiteDomain, formatValue, plotArea, truncateLabel } from "./format.ts";
import { linearScale, niceTicks } from "./scale.ts";
import type { ComparisonChartProps } from "./types.ts";

export function ComparisonChart({
  meta,
  data,
  baselineLabel = "Baseline",
  trainedLabel = "Trained",
  domain,
  format = "number",
  digits = 2,
  width = 720,
  height = 340,
}: ComparisonChartProps) {
  const valid = data.filter((datum) => Number.isFinite(datum.baseline) && Number.isFinite(datum.trained));
  const invalid = data.length - valid.length;
  if (valid.length === 0) {
    return <ChartFrame meta={meta} empty={data.length === 0 ? "No comparison data." : "No finite comparison values."} />;
  }

  const values = valid.flatMap((datum) => [datum.baseline, datum.trained]);
  const dataMin = Math.min(0, ...values);
  const dataMax = Math.max(0, ...values);
  const [yMin, yMax] = finiteDomain(domain, [dataMin, dataMax]);
  const area = plotArea(width, height, { marginLeft: 68, marginBottom: 68 });
  const y = linearScale([yMin, yMax], [area.marginTop + area.innerHeight, area.marginTop]);
  const zeroY = y(Math.min(yMax, Math.max(yMin, 0)));
  const ticks = niceTicks(yMin, yMax, 5);
  const step = area.innerWidth / valid.length;
  const groupWidth = Math.min(68, step * 0.7);
  const gap = Math.max(3, groupWidth * 0.08);
  const barWidth = Math.max(2, (groupWidth - gap) / 2);
  const titleId = chartId(meta, "title");
  const descriptionId = chartId(meta, "description");

  const graphic = (
    <svg
      class="site-chart-svg site-chart-comparison"
      style={`min-width:${Math.min(width, 960)}px`}
      viewBox={`0 0 ${width} ${height}`}
      role="img"
      aria-labelledby={`${titleId} ${descriptionId}`}
      preserveAspectRatio="xMidYMid meet"
    >
      <SvgA11y titleId={titleId} descriptionId={descriptionId} title={meta.title} description={meta.description} />
      <g class="site-chart-grid" aria-hidden="true">
        {ticks.map((tick) => (
          <>
            <line x1={area.marginLeft} x2={width - area.marginRight} y1={y(tick)} y2={y(tick)} />
            <text x={area.marginLeft - 10} y={y(tick) + 4} text-anchor="end">
              {formatValue(tick, format, digits)}
            </text>
          </>
        ))}
      </g>
      <line
        class="site-chart-axis"
        x1={area.marginLeft}
        x2={width - area.marginRight}
        y1={zeroY}
        y2={zeroY}
        aria-hidden="true"
      />
      {valid.map((datum, index) => {
        const center = area.marginLeft + step * index + step / 2;
        const baselineY = y(datum.baseline);
        const trainedY = y(datum.trained);
        return (
          <g class="site-chart-bar-group">
            <rect
              class="site-chart-mark site-chart-mark-baseline"
              x={center - groupWidth / 2}
              y={Math.min(zeroY, baselineY)}
              width={barWidth}
              height={Math.max(1, Math.abs(zeroY - baselineY))}
              rx="2"
            >
              <title>{`${datum.label}, ${baselineLabel}: ${formatValue(datum.baseline, format, digits)}`}</title>
            </rect>
            <rect
              class="site-chart-mark site-chart-mark-trained"
              x={center - groupWidth / 2 + barWidth + gap}
              y={Math.min(zeroY, trainedY)}
              width={barWidth}
              height={Math.max(1, Math.abs(zeroY - trainedY))}
              rx="2"
            >
              <title>{`${datum.label}, ${trainedLabel}: ${formatValue(datum.trained, format, digits)}`}</title>
            </rect>
            <text class="site-chart-category" x={center} y={height - 34} text-anchor="middle">
              {truncateLabel(datum.label, 16)}
            </text>
          </g>
        );
      })}
      {meta.yLabel && (
        <text
          class="site-chart-axis-label"
          transform={`translate(16 ${area.marginTop + area.innerHeight / 2}) rotate(-90)`}
          text-anchor="middle"
        >
          {meta.yLabel}
        </text>
      )}
      {meta.xLabel && (
        <text class="site-chart-axis-label" x={area.marginLeft + area.innerWidth / 2} y={height - 8} text-anchor="middle">
          {meta.xLabel}
        </text>
      )}
    </svg>
  );

  const table = (
    <table>
      <caption>{meta.title}</caption>
      <thead><tr><th scope="col">Measure</th><th scope="col">{baselineLabel}</th><th scope="col">{trainedLabel}</th><th scope="col">Change</th></tr></thead>
      <tbody>
        {valid.map((datum) => (
          <tr>
            <th scope="row">{datum.label}</th>
            <td>{formatValue(datum.baseline, format, digits)}</td>
            <td>{formatValue(datum.trained, format, digits)}</td>
            <td>{formatValue(datum.trained - datum.baseline, format, digits)}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );

  return (
    <ChartFrame
      meta={meta}
      graphic={graphic}
      table={table}
      legend={[
        { label: baselineLabel, color: "var(--chart-baseline)" },
        { label: trainedLabel, color: "var(--chart-trained)" },
      ]}
      warning={invalid > 0 ? `${invalid} row${invalid === 1 ? " was" : "s were"} omitted because it contained a non-finite value.` : undefined}
    />
  );
}