CashCalendar

"use client";

import { cn } from "@/lib/ledger/cn";
import { formatDate } from "@/lib/ledger/fiscal-period";
import { formatMoney } from "@/lib/ledger/format-money";

export type CashDay = { date: Date; inflow: number; outflow: number };

export interface CashCalendarProps {
  className?: string;
  currency: string;
  days: CashDay[];
}

/**
 * Two separate sequential ramps that differ in lightness, not a red/green
 * diverging scale — a diverging scale has no redundant sign cue available.
 */
export function CashCalendar({ days, currency, className }: CashCalendarProps) {
  const maxIn = Math.max(...days.map((d) => d.inflow), 1);
  const maxOut = Math.max(...days.map((d) => d.outflow), 1);

  return (
    <div className={cn("w-full", className)}>
      {/* A list of days, not an ARIA grid: a grid owes its cells rows and
          arrow-key navigation, and a heat strip has neither. The weekday
          initials are visual furniture; every day speaks its own date. */}
      <ul aria-label="Daily cash movement" className="grid grid-cols-7 gap-1">
        {["M", "T", "W", "T", "F", "S", "S"].map((d, i) => (
          <li aria-hidden="true" className="pb-1 text-center text-caption text-text-tertiary" key={i}>
            {d}
          </li>
        ))}
        {days.map((day) => {
          const net = day.inflow - day.outflow;
          const intensity = net >= 0 ? Math.min(1, day.inflow / maxIn) : Math.min(1, day.outflow / maxOut);
          // Sequential lightness within one hue; the two ramps differ in hue
          // *and* in lightness band, so they separate in greyscale too.
          const lightness = net >= 0 ? 0.95 - intensity * 0.4 : 0.97 - intensity * 0.25;
          const hue = net >= 0 ? 258 : 75;
          const chroma = net >= 0 ? 0.02 + intensity * 0.1 : 0.02 + intensity * 0.12;

          return (
            <li
              className="aspect-square rounded-xs border border-border-subtle"
              key={day.date.toISOString()}
              style={{ background: `oklch(${lightness} ${chroma} ${hue})` }}
              title={`${formatDate(day.date)} · in ${formatMoney({ amount: day.inflow, currency })} · out ${formatMoney({ amount: day.outflow, currency })}`}
            >
              <span className="sr-only">
                {`${formatDate(day.date)}, net ${formatMoney({ amount: net, currency }, { accounting: true })}`}
              </span>
            </li>
          );
        })}
      </ul>
      <div className="mt-3 flex items-center gap-4 text-caption text-text-secondary">
        <Legend hue={258} label="Net inflow" />
        <Legend hue={75} label="Net outflow" />
      </div>
    </div>
  );
}

function Legend({ hue, label }: { hue: number; label: string }) {
  return (
    <span className="flex items-center gap-1.5">
      <span aria-hidden="true" className="flex">
        {[0.95, 0.82, 0.68, 0.55].map((l) => (
          <span
            className="size-3 border border-border-subtle"
            key={l}
            style={{ background: `oklch(${l} ${0.02 + (0.95 - l) * 0.25} ${hue})` }}
          />
        ))}
      </span>
      {label}
    </span>
  );
}