CandlestickChart

"use client";
import { niceTicks } from "@/lib/ledger/chart-utils";
import { DataTableToggle } from "@/components/ledger/chart-primitives";

export type Candle = {
  label: string;
  open: number;
  high: number;
  low: number;
  close: number;
};

export interface CandlestickChartProps {
  candles: Candle[];
  className?: string;
  height?: number;
  pair: string;
}

/**
 * Up and down candles differ in **fill** (hollow vs. solid) as well as
 * colour — the traditional convention, which happens to be the correct
 * accessibility answer.
 *
 * A rate axis does not start at zero; forcing it destroys the resolution.
 */
export function CandlestickChart({ candles, pair, height = 280, className }: CandlestickChartProps) {
  const width = 720;
  const PAD = { bottom: 28, left: 72, right: 16, top: 16 };
  const lows = candles.map((c) => c.low);
  const highs = candles.map((c) => c.high);
  const pad = (Math.max(...highs) - Math.min(...lows)) * 0.1 || 0.001;
  const min = Math.min(...lows) - pad;
  const max = Math.max(...highs) + pad;
  const ticks = niceTicks(min, max, 4);

  const plotW = width - PAD.left - PAD.right;
  const plotH = height - PAD.top - PAD.bottom;
  const y = (v: number) => PAD.top + plotH - ((v - min) / (max - min || 1)) * plotH;
  const slot = plotW / candles.length;
  const bodyW = slot * 0.6;

  return (
    <DataTableToggle
      className={className}
      table={
        <table className="w-full text-body">
          <caption className="sr-only">{pair} price data</caption>
          <thead>
            <tr className="border-b border-border-subtle">
              {["Period", "Open", "High", "Low", "Close"].map((h) => (
                <th
                  className="py-2 text-right text-label text-text-secondary first:text-left"
                  key={h}
                  scope="col"
                >
                  {h}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {candles.map((c) => (
              <tr className="border-b border-border-subtle" key={c.label}>
                <th className="py-2 text-left font-normal" scope="row">
                  {c.label}
                </th>
                {[c.open, c.high, c.low, c.close].map((v, i) => (
                  <td className="numeric py-2 text-right" key={i}>
                    {v.toFixed(5)}
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      }
    >
      <svg
        aria-label={`${pair} candlestick chart`}
        className="w-full"
        role="img"
        style={{ height }}
        viewBox={`0 0 ${width} ${height}`}
      >
        {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}
            >
              {t.toFixed(4)}
            </text>
          </g>
        ))}
        {candles.map((c, i) => {
          const cx = PAD.left + i * slot + slot / 2;
          const up = c.close >= c.open;
          const color = up ? "var(--positive)" : "var(--negative)";
          const top = y(Math.max(c.open, c.close));
          const h = Math.max(1, Math.abs(y(c.open) - y(c.close)));
          return (
            <g key={c.label}>
              <line stroke={color} strokeWidth="1" x1={cx} x2={cx} y1={y(c.high)} y2={y(c.low)} />
              <rect
                fill={up ? "var(--surface)" : color}
                height={h}
                stroke={color}
                strokeWidth="1.5"
                width={bodyW}
                x={cx - bodyW / 2}
                y={top}
              />
            </g>
          );
        })}
      </svg>
      <p className="mt-2 text-caption text-text-tertiary">
        Hollow candles closed up, solid closed down. The rate axis does not start at zero.
      </p>
    </DataTableToggle>
  );
}