RunwayCard

"use client";

import * as React from "react";
import { cn } from "@/lib/ledger/cn";
import { formatDate } from "@/lib/ledger/fiscal-period";
import type { MoneyValue } from "@/lib/ledger/money.types";
import { Card } from "@/components/ledger/card";
import { Money } from "@/components/ledger/money";
import { StatusPill } from "@/components/ledger/status-pill";

export interface RunwayCardProps extends React.ComponentPropsWithoutRef<"div"> {
  /** Actual burn history, then the projection. */
  actual: number[];
  cash: MoneyValue;
  criticalMonths?: number;
  monthlyBurn: MoneyValue;
  months: number;
  projected: number[];
  /** A business judgment, not a universal truth. */
  warningMonths?: number;
  zeroDate: Date;
}

/**
 * Burn is `polarity="inverted"` — an increase is not good news.
 * The projection segment is dashed, because a projection is not a fact.
 */
export const RunwayCard = React.forwardRef<HTMLDivElement, RunwayCardProps>(
  (
    {
      className,
      months,
      cash,
      monthlyBurn,
      zeroDate,
      actual,
      projected,
      warningMonths = 6,
      criticalMonths = 3,
      ...props
    },
    ref,
  ) => {
    const severity = months < criticalMonths ? "critical" : months < warningMonths ? "warning" : "ok";

    return (
      <Card className={cn("flex flex-col", className)} ref={ref} {...props}>
        <div className="flex items-start justify-between gap-4">
          <span className="text-label font-medium text-text-secondary">Runway</span>
          {severity !== "ok" ? (
            <StatusPill entity="Runway" status={severity === "critical" ? "overdue" : "needs-review"} />
          ) : null}
        </div>

        <p
          className={cn(
            "numeric mt-2 text-figure-hero font-medium leading-none",
            severity === "critical" && "text-negative",
            severity === "warning" && "text-warning",
          )}
        >
          {months.toFixed(1)}
          <span className="ml-2 text-title-md font-normal text-text-secondary">months</span>
        </p>

        <p className="mt-2 text-caption text-text-secondary">
          Cash <Money size="xs" tone="inherit" value={cash} /> · burn{" "}
          <Money size="xs" tone="inherit" value={monthlyBurn} />
          /mo · zero {formatDate(zeroDate)}
        </p>

        <BurnLine actual={actual} className="mt-4" projected={projected} />
      </Card>
    );
  },
);
RunwayCard.displayName = "RunwayCard";

function BurnLine({
  actual,
  projected,
  className,
}: {
  actual: number[];
  projected: number[];
  className?: string;
}) {
  const all = [...actual, ...projected];
  const max = Math.max(...all, 1);
  const width = 240;
  const height = 56;
  const step = width / (all.length - 1);
  const point = (v: number, i: number) =>
    `${(i * step).toFixed(1)},${(height - (v / max) * height).toFixed(1)}`;

  const actualPath = actual.map((v, i) => `${i === 0 ? "M" : "L"}${point(v, i)}`).join(" ");
  const projectedPath = projected
    .map((v, i) => `${i === 0 ? "M" : "L"}${point(v, actual.length - 1 + i)}`)
    .join(" ");
  const bridge = `M${point(actual[actual.length - 1], actual.length - 1)} L${point(projected[0], actual.length - 1)}`;

  return (
    <svg
      aria-label="Cash balance, actual then projected to zero"
      className={cn("h-14 w-full", className)}
      preserveAspectRatio="none"
      role="img"
      viewBox={`0 0 ${width} ${height}`}
    >
      <line
        stroke="var(--border-strong)"
        strokeWidth="1"
        vectorEffect="non-scaling-stroke"
        x1="0"
        x2={width}
        y1={height}
        y2={height}
      />
      <path
        d={actualPath}
        fill="none"
        stroke="var(--viz-1)"
        strokeWidth="1.5"
        vectorEffect="non-scaling-stroke"
      />
      <path
        d={bridge}
        fill="none"
        stroke="var(--viz-1)"
        strokeDasharray="4 3"
        strokeWidth="1.5"
        vectorEffect="non-scaling-stroke"
      />
      <path
        d={projectedPath}
        fill="none"
        opacity="0.8"
        stroke="var(--viz-1)"
        strokeDasharray="4 3"
        strokeWidth="1.5"
        vectorEffect="non-scaling-stroke"
      />
    </svg>
  );
}