WaterfallChart

"use client";

import * as React from "react";
import { axisLabel, domainFor, niceTicks } from "@/lib/ledger/chart-utils";
import { DataTableToggle, HatchDefs } from "@/components/ledger/chart-primitives";
import { Money } from "@/components/ledger/money";

export type WaterfallStep = {
  label: string;
  /** Minor units. A `subtotal` step is an absolute position, not a delta. */
  value: number;
  kind: "start" | "increase" | "decrease" | "subtotal" | "end";
};

export interface WaterfallChartProps {
  className?: string;
  currency: string;
  height?: number;
  steps: WaterfallStep[];
  title?: string;
}

const PAD = { bottom: 48, left: 72, right: 16, top: 24 };

/**
 * The P&L bridge — how you answer "why did net income change?" in one image.
 *
 * Increases, decreases and subtotals are distinguished by position and
 * connector as well as colour, so the chart survives greyscale.
 */
export function WaterfallChart({ steps, currency, height = 300, className, title }: WaterfallChartProps) {
  const uid = React.useId().replace(/:/g, "");
  const width = 720;

  // Running positions, computed here for layout only — the caller owns the numbers.
  let running = 0;
  const bars = steps.map((s) => {
    if (s.kind === "start" || s.kind === "subtotal" || s.kind === "end") {
      const bar = { from: 0, to: s.value, ...s };
      running = s.value;
      return bar;
    }
    const from = running;
    running += s.value;
    return { from, to: running, ...s };
  });

  const allValues = bars.flatMap((b) => [b.from, b.to]);
  const { min, max } = domainFor(allValues);
  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 slot = plotW / bars.length;
  const barW = slot * 0.6;

  return (
    <DataTableToggle
      className={className}
      table={
        <table className="w-full text-body">
          <caption className="sr-only">{title ?? "Waterfall data"}</caption>
          <thead>
            <tr className="border-b border-border-subtle">
              <th className="py-2 text-left text-label text-text-secondary" scope="col">
                Step
              </th>
              <th className="py-2 text-right text-label text-text-secondary" scope="col">
                Amount
              </th>
              <th className="py-2 text-right text-label text-text-secondary" scope="col">
                Running
              </th>
            </tr>
          </thead>
          <tbody>
            {bars.map((b) => (
              <tr className="border-b border-border-subtle" key={b.label}>
                <th className="py-2 text-left font-normal" scope="row">
                  {b.label}
                </th>
                <td className="py-2 text-right">
                  <Money accounting value={{ amount: b.value, currency }} />
                </td>
                <td className="py-2 text-right">
                  <Money accounting value={{ amount: b.to, currency }} />
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      }
    >
      <svg
        aria-label={title ?? "Waterfall chart"}
        className="w-full"
        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={y(0)} y2={y(0)} />

        {bars.map((b, i) => {
          const x = PAD.left + i * slot + (slot - barW) / 2;
          const top = y(Math.max(b.from, b.to));
          const h = Math.max(2, Math.abs(y(b.from) - y(b.to)));
          const neutral = b.kind === "start" || b.kind === "subtotal" || b.kind === "end";
          const fill = neutral
            ? "var(--text-secondary)"
            : b.kind === "increase"
              ? "var(--positive)"
              : `url(#hatch-${uid})`;

          return (
            <g key={b.label}>
              {/* The connector is a non-chromatic cue for direction. */}
              {i > 0 ? (
                <line
                  stroke="var(--border-strong)"
                  strokeDasharray="3 3"
                  x1={PAD.left + (i - 1) * slot + (slot + barW) / 2}
                  x2={x}
                  y1={y(bars[i - 1].to)}
                  y2={y(bars[i - 1].to)}
                />
              ) : null}
              <rect
                fill={fill}
                height={h}
                rx={barW < 12 ? 0 : 4}
                stroke={b.kind === "decrease" ? "var(--negative)" : "none"}
                width={barW}
                x={x}
                y={top}
              />
              <text
                className="numeric"
                fill="var(--text-secondary)"
                fontSize="11"
                textAnchor="middle"
                x={x + barW / 2}
                y={top - 6}
              >
                {b.kind === "increase" ? "+" : b.kind === "decrease" ? "−" : ""}
                {axisLabel(Math.abs(b.value), currency)}
              </text>
              <text
                fill="var(--text-secondary)"
                fontSize="11"
                textAnchor="middle"
                x={x + barW / 2}
                y={height - 28}
              >
                {b.label.length > 14 ? `${b.label.slice(0, 13)}…` : b.label}
              </text>
            </g>
          );
        })}
      </svg>
    </DataTableToggle>
  );
}