DepreciationSchedule

import * as React from "react";
import { useScrollEdges } from "@/hooks/ledger/use-scroll-edges";
import { cn } from "@/lib/ledger/cn";
import { formatDate } from "@/lib/ledger/fiscal-period";
import { FROZEN_LABEL } from "@/lib/ledger/frozen-label";
import type { MoneyValue } from "@/lib/ledger/money.types";
import { ExclamationTriangleIcon } from "@/components/ledger/icons";
import { Money } from "@/components/ledger/money";
import { Rule } from "@/components/ledger/rule";

export type Asset = {
  id: string;
  description: string;
  cost: MoneyValue;
  /** In-service date, NOT purchase date. Labeled explicitly. */
  inServiceDate: Date;
  lifeMonths: number;
  method: "straight-line" | "double-declining" | "MACRS";
  convention: "half-year" | "mid-month" | "mid-quarter" | "full-month";
  salvage: MoneyValue;
  book: { accumulated: MoneyValue; nbv: MoneyValue };
  tax: { accumulated: MoneyValue; nbv: MoneyValue };
  disposal?: { proceeds: MoneyValue; nbvAtDisposal: MoneyValue; gainLoss: MoneyValue };
};

export interface DepreciationScheduleProps extends React.ComponentPropsWithoutRef<"div"> {
  assets: Asset[];
  /**
   * Caps the scroller so the header and the asset column can freeze. Without a
   * height the page scrolls instead and there is nothing for the frozen
   * header to stick to.
   */
  maxHeight?: number;
  periodLabel: string;
  totals: { cost: MoneyValue; bookNbv: MoneyValue; taxNbv: MoneyValue };
}

/**
 * Book and tax books in parallel, with the difference shown. NBV can never
 * breach salvage — asserted. Disposal shows the working:
 * Proceeds − NBV = Gain/(Loss).
 */
export const DepreciationSchedule = React.forwardRef<HTMLDivElement, DepreciationScheduleProps>(
  ({ className, assets, periodLabel, totals, maxHeight = 520, ...props }, ref) => {
    const scroller = useScrollEdges<HTMLDivElement>();
    const breaches = assets.filter((a) => Number(a.book.nbv.amount) < Number(a.salvage.amount));

    return (
      <div className={cn("space-y-3", className)} ref={ref} {...props}>
        {breaches.length > 0 ? (
          <p
            className="flex items-center gap-2 rounded-sm bg-negative-subtle px-3 py-2 text-body text-negative"
            role="alert"
          >
            <ExclamationTriangleIcon aria-hidden="true" className="size-4 shrink-0" />
            {breaches.length} asset{breaches.length === 1 ? " has" : "s have"} depreciated below salvage
            value. That cannot happen and indicates a schedule error.
          </p>
        ) : null}

        <div className="rounded-xl border border-border bg-surface">
          <div className="px-6 pb-4 pt-6">
            <p className="text-title-sm font-medium">Depreciation schedule</p>
            <p className="text-caption text-text-secondary">{periodLabel} · book and tax in parallel</p>
          </div>
          <div className="ledger-frozen scrollbar-thin" ref={scroller} style={{ maxHeight }}>
            <table className="w-full min-w-[1000px]">
              <caption className="sr-only">
                Depreciation schedule. {periodLabel}, book and tax in parallel.
              </caption>
              <thead>
                <tr className="border-b border-border-subtle">
                  <th
                    className={cn(
                      FROZEN_LABEL,
                      "py-3 pl-6 pr-3 text-left text-label font-medium text-text-secondary",
                    )}
                    rowSpan={2}
                    scope="col"
                  >
                    Asset
                  </th>
                  <th
                    className="px-3 py-3 text-right text-label font-medium text-text-secondary"
                    rowSpan={2}
                    scope="col"
                  >
                    Cost
                  </th>
                  <th
                    className="px-3 py-3 text-left text-label font-medium text-text-secondary"
                    rowSpan={2}
                    scope="col"
                  >
                    In service
                    <span className="block text-caption font-normal text-text-tertiary">
                      not purchase date
                    </span>
                  </th>
                  <th
                    className="px-3 py-3 text-left text-label font-medium text-text-secondary"
                    rowSpan={2}
                    scope="col"
                  >
                    Life / method
                  </th>
                  <th
                    className="border-l border-border-subtle px-3 py-2 text-center text-label font-medium text-text-secondary"
                    colSpan={2}
                    scope="col"
                  >
                    Book
                  </th>
                  <th
                    className="border-l border-border-subtle px-3 py-2 text-center text-label font-medium text-text-secondary"
                    colSpan={2}
                    scope="col"
                  >
                    Tax
                  </th>
                  <th
                    className="border-l border-border-subtle py-3 pl-3 pr-6 text-right text-label font-medium text-text-secondary"
                    rowSpan={2}
                    scope="col"
                  >
                    Book/tax diff
                  </th>
                </tr>
                <tr className="border-b border-border-subtle">
                  <th
                    className="border-l border-border-subtle px-3 py-2 text-right text-caption text-text-secondary"
                    scope="col"
                  >
                    Accumulated
                  </th>
                  <th className="px-3 py-2 text-right text-caption text-text-secondary" scope="col">
                    NBV
                  </th>
                  <th
                    className="border-l border-border-subtle px-3 py-2 text-right text-caption text-text-secondary"
                    scope="col"
                  >
                    Accumulated
                  </th>
                  <th className="px-3 py-2 text-right text-caption text-text-secondary" scope="col">
                    NBV
                  </th>
                </tr>
              </thead>
              <tbody>
                {assets.map((a) => {
                  const diff = Number(a.book.nbv.amount) - Number(a.tax.nbv.amount);
                  return (
                    <React.Fragment key={a.id}>
                      <tr className="border-b border-border-subtle">
                        <th
                          className={cn(FROZEN_LABEL, "py-3 pl-6 pr-3 text-left text-body font-normal")}
                          scope="row"
                        >
                          {a.description}
                        </th>
                        <td className="px-3 py-3 text-right">
                          <Money accounting value={a.cost} />
                        </td>
                        <td className="numeric px-3 py-3 text-caption text-text-secondary">
                          {formatDate(a.inServiceDate)}
                        </td>
                        <td className="px-3 py-3 text-caption text-text-secondary">
                          <span className="numeric">{a.lifeMonths}mo</span> · {a.method}
                          <span className="block text-text-tertiary">{a.convention}</span>
                        </td>
                        <td className="border-l border-border-subtle px-3 py-3 text-right">
                          <Money accounting value={a.book.accumulated} />
                        </td>
                        <td className="px-3 py-3 text-right">
                          <Money accounting value={a.book.nbv} />
                        </td>
                        <td className="border-l border-border-subtle px-3 py-3 text-right">
                          <Money accounting value={a.tax.accumulated} />
                        </td>
                        <td className="px-3 py-3 text-right">
                          <Money accounting value={a.tax.nbv} />
                        </td>
                        <td className="border-l border-border-subtle py-3 pl-3 pr-6 text-right">
                          <Money
                            accounting
                            tone="secondary"
                            value={{ amount: diff, currency: a.cost.currency }}
                          />
                        </td>
                      </tr>
                      {a.disposal ? (
                        <tr className="border-b border-border-subtle bg-surface-sunken">
                          <td className="py-2 pl-12 pr-6 text-caption text-text-secondary" colSpan={9}>
                            Disposed · Proceeds{" "}
                            <Money accounting size="xs" tone="inherit" value={a.disposal.proceeds} /> − NBV{" "}
                            <Money accounting size="xs" tone="inherit" value={a.disposal.nbvAtDisposal} /> ={" "}
                            <Money accounting size="xs" tone="inherit" value={a.disposal.gainLoss} />{" "}
                            {Number(a.disposal.gainLoss.amount) >= 0 ? "gain" : "loss"}
                          </td>
                        </tr>
                      ) : null}
                    </React.Fragment>
                  );
                })}
              </tbody>
              <tfoot>
                <tr>
                  <td colSpan={4} />
                  <td className="px-3" colSpan={2}>
                    <Rule variant="subtotal" />
                  </td>
                  <td className="px-3" colSpan={2}>
                    <Rule variant="subtotal" />
                  </td>
                  <td className="pr-6" />
                </tr>
                <tr>
                  <th
                    className={cn(FROZEN_LABEL, "py-3 pl-6 pr-3 text-left text-label font-medium")}
                    scope="row"
                  >
                    Total
                  </th>
                  <td className="px-3 py-3 text-right">
                    <Money accounting size="md" value={totals.cost} />
                  </td>
                  <td colSpan={2} />
                  <td className="border-l border-border-subtle px-3" />
                  <td className="px-3 py-3 text-right">
                    <Money accounting size="md" value={totals.bookNbv} />
                  </td>
                  <td className="border-l border-border-subtle px-3" />
                  <td className="px-3 py-3 text-right">
                    <Money accounting size="md" value={totals.taxNbv} />
                  </td>
                  <td className="border-l border-border-subtle pr-6" />
                </tr>
              </tfoot>
            </table>
          </div>
        </div>
      </div>
    );
  },
);
DepreciationSchedule.displayName = "DepreciationSchedule";