MoneyBarChart

"use client";

import * as React from "react";
import { useInViewOnce } from "@/hooks/ledger/use-in-view";
import { useReducedMotion } from "@/hooks/ledger/use-media-query";
import { axisLabel, domainFor, niceTicks, vizColorFor } from "@/lib/ledger/chart-utils";
import { ChartLegend, DataTableToggle, HatchDefs } from "@/components/ledger/chart-primitives";
import { Money } from "@/components/ledger/money";

export type BarSeries = { key: string; label: string; values: number[] };

export interface MoneyBarChartProps {
  className?: string;
  currency: string;
  height?: number;
  labels: string[];
  mode?: "grouped" | "stacked";
  series: BarSeries[];
  title?: string;
}

const PAD = { bottom: 28, left: 64, right: 16, top: 16 };

/**
 * `transform-origin` sits at the zero baseline, not at the bottom — otherwise
 * a negative bar grows upward from the floor and briefly displays the wrong
 * sign, which is a correctness issue inside an animation.
 *
 * Bar radius 4 on the outer corners only, square below 12px width.
 */
export function MoneyBarChart({
  labels,
  series,
  currency,
  mode = "grouped",
  height = 260,
  className,
  title,
}: MoneyBarChartProps) {
  const [isolated, setIsolated] = React.useState<string | null>(null);
  const reduced = useReducedMotion();
  /* The bars grow when the chart is scrolled to, not when it mounts. A chart
     below the fold used to play its whole 400ms while nobody was looking and
     was fully grown by the time the reader got there — the animation existed
     and was never once seen. Once, and never again on the way back up. */
  const [viewRef, inView] = useInViewOnce<SVGSVGElement>();
  const uid = React.useId().replace(/:/g, "");
  const width = 720;

  const visible = isolated ? series.filter((s) => s.key === isolated) : series;
  const stackedTotals = labels.map((_, i) => visible.reduce((sum, s) => sum + s.values[i], 0));
  const domainValues = mode === "stacked" ? stackedTotals : visible.flatMap((s) => s.values);
  const { min, max } = domainFor(domainValues.length ? domainValues : [0]);
  const ticks = niceTicks(min, max);
  const domainMin = Math.min(min, ticks[0]);
  const domainMax = Math.max(max, ticks[ticks.length - 1]);

  const plotW = width - PAD.left - PAD.right;
  const plotH = height - PAD.top - PAD.bottom;
  const y = (v: number) => PAD.top + plotH - ((v - domainMin) / (domainMax - domainMin || 1)) * plotH;
  const zeroY = y(0);

  const groupWidth = plotW / labels.length;
  const innerPad = groupWidth * 0.2;
  const barWidth =
    mode === "stacked" ? groupWidth - innerPad : (groupWidth - innerPad) / Math.max(1, visible.length);
  const radius = barWidth < 12 ? 0 : 4;

  return (
    <DataTableToggle
      className={className}
      table={
        <table className="w-full text-body">
          <caption className="sr-only">{title ?? "Chart data"}</caption>
          <thead>
            <tr className="border-b border-border-subtle">
              <th className="py-2 text-left text-label text-text-secondary" scope="col">
                Period
              </th>
              {series.map((s) => (
                <th className="py-2 text-right text-label text-text-secondary" key={s.key} scope="col">
                  {s.label}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {labels.map((label, i) => (
              <tr className="border-b border-border-subtle" key={label}>
                <th className="py-2 text-left font-normal" scope="row">
                  {label}
                </th>
                {series.map((s) => (
                  <td className="py-2 text-right" key={s.key}>
                    <Money accounting value={{ amount: s.values[i], currency }} />
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      }
    >
      <svg
        aria-label={title ?? "Bar chart"}
        className="w-full"
        ref={viewRef}
        role="img"
        style={{ height }}
        viewBox={`0 0 ${width} ${height}`}
      >
        <HatchDefs id={`hatch-${uid}`} />

        {ticks.map((t) => (
          <g key={t}>
            <line stroke="var(--border-subtle)" x1={PAD.left} x2={width - PAD.right} y1={y(t)} y2={y(t)} />
            <text
              className="numeric"
              fill="var(--text-tertiary)"
              fontSize="12"
              textAnchor="end"
              x={PAD.left - 8}
              y={y(t) + 4}
            >
              {axisLabel(t, currency)}
            </text>
          </g>
        ))}

        <line stroke="var(--border-strong)" x1={PAD.left} x2={width - PAD.right} y1={zeroY} y2={zeroY} />

        {labels.map((label, i) => {
          const groupX = PAD.left + i * groupWidth + innerPad / 2;
          let positiveCursor = 0;
          let negativeCursor = 0;

          return (
            <g key={label}>
              {visible.map((s, si) => {
                const v = s.values[i];
                const negative = v < 0;
                let top: number;
                let bottom: number;

                if (mode === "stacked") {
                  const base = negative ? negativeCursor : positiveCursor;
                  const next = base + v;
                  if (negative) negativeCursor = next;
                  else positiveCursor = next;
                  top = y(Math.max(base, next));
                  bottom = y(Math.min(base, next));
                } else {
                  top = y(Math.max(0, v));
                  bottom = y(Math.min(0, v));
                }

                const barX = mode === "stacked" ? groupX : groupX + si * barWidth;
                const h = Math.max(1, bottom - top);

                return (
                  <rect
                    fill={negative ? `url(#hatch-${uid})` : vizColorFor(s.key)}
                    height={h}
                    key={s.key}
                    rx={radius}
                    stroke={negative ? "var(--negative)" : "none"}
                    strokeWidth={negative ? 1 : 0}
                    style={
                      reduced
                        ? undefined
                        : {
                            animation: inView
                              ? `ledger-bar-grow 400ms var(--ease-out) ${Math.min(i * 30, 240)}ms both`
                              : undefined,
                            /* Held flat until the chart is on screen, so the
                               growth is the first thing the reader sees rather
                               than something that finished without them. */
                            transform: inView ? undefined : "scaleY(0)",
                            transformBox: "fill-box",
                            // Grow from the zero baseline, never from the floor.
                            transformOrigin: negative ? "center top" : "center bottom",
                          }
                    }
                    width={Math.max(1, barWidth - 2)}
                    x={barX}
                    y={top}
                  />
                );
              })}
              {mode === "stacked" ? (
                <text
                  className="numeric"
                  fill="var(--text-secondary)"
                  fontSize="11"
                  textAnchor="middle"
                  x={groupX + barWidth / 2}
                  y={y(stackedTotals[i]) - 6}
                >
                  {axisLabel(stackedTotals[i], currency)}
                </text>
              ) : null}
              <text
                className="numeric"
                fill="var(--text-tertiary)"
                fontSize="12"
                textAnchor="middle"
                x={groupX + (mode === "stacked" ? barWidth : barWidth * visible.length) / 2}
                y={height - 8}
              >
                {label}
              </text>
            </g>
          );
        })}
      </svg>

      {series.length > 1 ? (
        <ChartLegend
          className="mt-3"
          isolated={isolated}
          items={series.map((s) => ({ color: vizColorFor(s.key), key: s.key, label: s.label }))}
          onIsolate={setIsolated}
        />
      ) : null}

      <style>
        {"@keyframes ledger-bar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }"}
      </style>
    </DataTableToggle>
  );
}