import { ChartFrame, SvgA11y } from "./frame.tsx";
import { chartId, finiteDomain, formatValue, truncateLabel } from "./format.ts";
import type { MatrixCell, RetentionMatrixProps } from "./types.ts";

export function RetentionMatrix({
  meta,
  rows,
  cols,
  cells,
  domain,
  format = "percent",
  digits = 1,
  width = 720,
  height = 360,
}: RetentionMatrixProps) {
  const uniqueRows = [...new Set(rows.filter(Boolean))];
  const uniqueCols = [...new Set(cols.filter(Boolean))];
  if (uniqueRows.length === 0 || uniqueCols.length === 0) {
    return <ChartFrame meta={meta} empty="No matrix rows or columns." />;
  }
  const validKeys = new Set(uniqueRows.flatMap((row) => uniqueCols.map((col) => `${row}\u0000${col}`)));
  const cellMap = new Map<string, MatrixCell>();
  let invalid = 0;
  let outside = 0;
  for (const cell of cells) {
    const key = `${cell.row}\u0000${cell.col}`;
    if (!validKeys.has(key)) {
      outside += 1;
      continue;
    }
    if (cell.value !== null && !Number.isFinite(cell.value)) {
      invalid += 1;
      continue;
    }
    cellMap.set(key, cell);
  }
  const numeric = [...cellMap.values()].flatMap((cell) => cell.value === null ? [] : [cell.value]);
  const fallback: [number, number] = numeric.length > 0
    ? [Math.min(...numeric), Math.max(...numeric)]
    : [0, 1];
  const [min, max] = finiteDomain(domain, fallback);
  const normalize = (value: number) => Math.max(0, Math.min(1, (value - min) / (max - min)));
  const left = 126;
  const top = 70;
  const cellWidth = 82;
  const cellHeight = 48;
  const viewWidth = Math.max(width, left + uniqueCols.length * cellWidth + 18);
  const viewHeight = Math.max(height, top + uniqueRows.length * cellHeight + 46);
  const titleId = chartId(meta, "title");
  const descriptionId = chartId(meta, "description");
  const warnings = [
    invalid > 0 ? `${invalid} non-finite cell${invalid === 1 ? " was" : "s were"} treated as missing.` : "",
    outside > 0 ? `${outside} cell${outside === 1 ? " was" : "s were"} omitted because its row or column was undeclared.` : "",
  ].filter(Boolean).join(" ") || undefined;

  const graphic = (
    <svg
      class="site-chart-svg site-chart-matrix"
      style={`min-width:${Math.min(viewWidth, 1200)}px`}
      viewBox={`0 0 ${viewWidth} ${viewHeight}`}
      role="img"
      aria-labelledby={`${titleId} ${descriptionId}`}
      preserveAspectRatio="xMidYMid meet"
    >
      <SvgA11y titleId={titleId} descriptionId={descriptionId} title={meta.title} description={meta.description} />
      {uniqueCols.map((col, index) => (
        <text class="site-chart-matrix-col" x={left + index * cellWidth + cellWidth / 2} y={top - 18} text-anchor="middle">
          {truncateLabel(col, 12)}
        </text>
      ))}
      {uniqueRows.map((row, rowIndex) => (
        <g>
          <text class="site-chart-matrix-row" x={left - 10} y={top + rowIndex * cellHeight + cellHeight / 2 + 4} text-anchor="end">
            {truncateLabel(row, 18)}
          </text>
          {uniqueCols.map((col, colIndex) => {
            const value = cellMap.get(`${row}\u0000${col}`)?.value ?? null;
            const opacity = value === null ? 0 : 0.18 + normalize(value) * 0.82;
            return (
              <g>
                <rect
                  class={value === null ? "site-chart-matrix-cell site-chart-matrix-missing" : "site-chart-matrix-cell"}
                  x={left + colIndex * cellWidth + 2}
                  y={top + rowIndex * cellHeight + 2}
                  width={cellWidth - 4}
                  height={cellHeight - 4}
                  rx="3"
                  style={value === null ? undefined : `fill-opacity:${opacity.toFixed(3)}`}
                >
                  <title>{`${row}, ${col}: ${value === null ? "No data" : formatValue(value, format, digits)}`}</title>
                </rect>
                <text
                  class={`site-chart-matrix-value${value !== null && normalize(value) > 0.58 ? " site-chart-matrix-value-strong" : ""}`}
                  x={left + colIndex * cellWidth + cellWidth / 2}
                  y={top + rowIndex * cellHeight + cellHeight / 2 + 4}
                  text-anchor="middle"
                >
                  {value === null ? "—" : formatValue(value, format, digits)}
                </text>
              </g>
            );
          })}
        </g>
      ))}
      {meta.xLabel && <text class="site-chart-axis-label" x={left + uniqueCols.length * cellWidth / 2} y={viewHeight - 10} text-anchor="middle">{meta.xLabel}</text>}
      {meta.yLabel && <text class="site-chart-axis-label" transform={`translate(14 ${top + uniqueRows.length * cellHeight / 2}) rotate(-90)`} text-anchor="middle">{meta.yLabel}</text>}
    </svg>
  );

  const table = (
    <table>
      <caption>{meta.title}</caption>
      <thead><tr><th scope="col">Task</th>{uniqueCols.map((col) => <th scope="col">{col}</th>)}</tr></thead>
      <tbody>
        {uniqueRows.map((row) => (
          <tr><th scope="row">{row}</th>{uniqueCols.map((col) => {
            const value = cellMap.get(`${row}\u0000${col}`)?.value ?? null;
            return <td>{value === null ? "No data" : formatValue(value, format, digits)}</td>;
          })}</tr>
        ))}
      </tbody>
    </table>
  );

  return <ChartFrame meta={meta} graphic={graphic} table={table} warning={warnings} />;
}