BillTracker/client/components/snowball/PayoffChart.tsx

import { formatUSD, asDollars } from '@/lib/money';

const W = 720;
const H = 300;
const PAD = { left: 68, right: 24, top: 20, bottom: 56 };
const CW = W - PAD.left - PAD.right;
const CH = H - PAD.top - PAD.bottom;

interface TrackPoint {
  month: number;
  balance: number;
}

interface ChartPoint {
  x: number;
  y: number;
  month: number;
  balance: number;
}

function money(v: number | string | null | undefined): string {
  const n = Number(v) || 0;
  if (n >= 1000) return `$${(n / 1000).toFixed(0)}k`;
  return `$${n.toFixed(0)}`;
}

function fullMoney(v: number): string {
  return formatUSD(asDollars(v));
}

function buildPoints(track: TrackPoint[], startBalance: number, maxMonths: number): ChartPoint[] {
  const all = [{ month: 0, balance: startBalance }, ...track];
  return all.map(({ month, balance }) => ({
    x: PAD.left + (month / maxMonths) * CW,
    y: PAD.top + CH - (balance / startBalance) * CH,
    month,
    balance,
  }));
}

function toLine(pts: { x: number; y: number }[]): string {
  return pts.map(p => `${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(' ');
}

interface PayoffChartProps {
  minTrack?: TrackPoint[];
  simTrack?: TrackPoint[];
  startBalance?: number;
}

export default function PayoffChart({ minTrack = [], simTrack = [], startBalance = 1 }: PayoffChartProps) {
  const maxMonths = Math.max(minTrack.length, simTrack.length, 12);
  const bal = Math.max(startBalance, 1);

  const minPts     = buildPoints(minTrack,     bal, maxMonths);
  const simPts     = buildPoints(simTrack,     bal, maxMonths);

  const xStep = maxMonths <= 24 ? 6 : maxMonths <= 60 ? 12 : 24;
  const xLabels: number[] = [];
  for (let m = xStep; m <= maxMonths; m += xStep) {
    xLabels.push(m);
  }

  const yTicks = [0, 0.25, 0.5, 0.75, 1];

  return (
    <div className="w-full overflow-hidden rounded-xl border border-border/60 bg-background/60">
      <svg viewBox={`0 0 ${W} ${H}`} role="img" aria-label="Loan payoff chart" className="h-auto w-full">

        {/* Grid + Y axis */}
        {yTicks.map(tick => {
          const y = PAD.top + CH - tick * CH;
          return (
            <g key={tick}>
              <line x1={PAD.left} x2={PAD.left + CW} y1={y} y2={y}
                stroke="currentColor" opacity="0.08" strokeWidth="1" />
              <text x={PAD.left - 6} y={y + 4} fontSize="11" fill="currentColor"
                opacity="0.5" textAnchor="end">
                {money(bal * tick)}
              </text>
            </g>
          );
        })}

        {/* X axis labels */}
        {xLabels.map(m => {
          const x = PAD.left + (m / maxMonths) * CW;
          return (
            <text key={m} x={x} y={H - 38} fontSize="11" fill="currentColor"
              opacity="0.5" textAnchor="middle">
              {m}mo
            </text>
          );
        })}

        {/* X axis baseline */}
        <line x1={PAD.left} x2={PAD.left + CW} y1={PAD.top + CH} y2={PAD.top + CH}
          stroke="currentColor" opacity="0.12" strokeWidth="1" />

        {/* Min-only track (slate dashed) */}
        {minPts.length > 1 && (
          <polyline points={toLine(minPts)} fill="none"
            stroke="#94a3b8" strokeWidth="1.5"
            strokeDasharray="6,4" strokeLinecap="round" strokeLinejoin="round"
          />
        )}

        {/* Simulation track (amber solid, prominent) */}
        {simPts.length > 1 && (
          <>
            <polyline points={toLine(simPts)} fill="none"
              stroke="#f59e0b" strokeWidth="3"
              strokeLinecap="round" strokeLinejoin="round"
            />
            {/* Endpoint dot */}
            {(() => {
              const last = simPts[simPts.length - 1]!;
              return <circle cx={last.x} cy={last.y} r="4" fill="#f59e0b" />;
            })()}
          </>
        )}

        {/* Tooltips at 6-month intervals on sim track */}
        {simPts.filter(p => p.month > 0 && p.month % 6 === 0).map(p => (
          <circle key={p.month} cx={p.x} cy={p.y} r="3" fill="#f59e0b" opacity="0.7">
            <title>{`Month ${p.month}: ${fullMoney(p.balance)} remaining`}</title>
          </circle>
        ))}

        {/* Legend */}
        <g transform={`translate(${PAD.left}, ${H - 22})`} fontSize="11" fill="currentColor" opacity="0.7">
          {minPts.length > 1 && (
            <>
              <line x1="0" x2="16" y1="0" y2="0" stroke="#94a3b8" strokeWidth="1.5" strokeDasharray="4,3" />
              <text x="20" y="4">Min only</text>
            </>
          )}
          <line x1={minPts.length > 1 ? 80 : 0} x2={minPts.length > 1 ? 96 : 16} y1="0" y2="0"
            stroke="#f59e0b" strokeWidth="2.5" />
          <text x={minPts.length > 1 ? 100 : 20} y="4">Your plan</text>
        </g>

      </svg>
    </div>
  );
}