FxExposure

import * as React from "react";
import { useScrollEdges } from "@/hooks/ledger/use-scroll-edges";
import { cn } from "@/lib/ledger/cn";
import type { MoneyValue } from "@/lib/ledger/money.types";
import { AsOf } from "@/components/ledger/as-of";
import { CurrencyBadge } from "@/components/ledger/currency-badge";
import { Delta } from "@/components/ledger/delta";
import { Money } from "@/components/ledger/money";
import { Rule } from "@/components/ledger/rule";

export type Position = {
  currency: string;
  position: MoneyValue;
  /** In the presentation currency, at the stated rate. */
  presentationValue: MoneyValue;
  rate: number;
  /** Realized and unrealized are different facts. Never combined. */
  unrealized: MoneyValue;
  realized: MoneyValue;
};

export interface FxExposureProps extends React.ComponentPropsWithoutRef<"div"> {
  asOf: Date;
  /** Caps the scroller so the header and the currency column can freeze. */
  maxHeight?: number;
  positions: Position[];
  presentationCurrency: string;
  totalRealized: MoneyValue;
  totalUnrealized: MoneyValue;
}

export const FxExposure = React.forwardRef<HTMLDivElement, FxExposureProps>(
  (
    {
      className,
      positions,
      presentationCurrency,
      totalUnrealized,
      totalRealized,
      asOf,
      maxHeight = 520,
      ...props
    },
    ref,
  ) => {
    const scroller = useScrollEdges<HTMLDivElement>();
    return (
      <div className={cn("rounded-xl border border-border bg-surface", className)} ref={ref} {...props}>
        <div className="px-6 pb-4 pt-6">
          <p className="text-title-sm font-medium">FX exposure</p>
          <p className="text-caption text-text-secondary">
            Presented in {presentationCurrency} · <AsOf date={asOf} />
          </p>
        </div>
        <div className="ledger-frozen scrollbar-thin" ref={scroller} style={{ maxHeight }}>
          <table className="w-full min-w-[640px]">
            <caption className="sr-only">FX exposure, presented in {presentationCurrency}</caption>
            <thead>
              <tr className="border-b border-border-subtle">
                <th className="px-6 py-3 text-left text-label text-text-secondary" scope="col">
                  Currency
                </th>
                <th className="px-3 py-3 text-right text-label text-text-secondary" scope="col">
                  Position
                </th>
                <th className="px-3 py-3 text-right text-label text-text-secondary" scope="col">
                  Rate
                </th>
                <th className="px-3 py-3 text-right text-label text-text-secondary" scope="col">
                  Value ({presentationCurrency})
                </th>
                <th className="px-3 py-3 text-right text-label text-text-secondary" scope="col">
                  Unrealized
                </th>
                <th className="px-6 py-3 text-right text-label text-text-secondary" scope="col">
                  Realized
                </th>
              </tr>
            </thead>
            <tbody>
              {positions.map((p) => (
                <tr className="border-b border-border-subtle" key={p.currency}>
                  <th className="px-6 py-3 text-left" scope="row">
                    <CurrencyBadge currency={p.currency} />
                  </th>
                  <td className="px-3 py-3 text-right">
                    <Money accounting showCode value={p.position} />
                  </td>
                  <td className="numeric px-3 py-3 text-right text-figure-sm text-text-secondary">
                    {p.rate.toFixed(5)}
                  </td>
                  <td className="px-3 py-3 text-right">
                    <Money accounting value={p.presentationValue} />
                  </td>
                  <td className="px-3 py-3 text-right">
                    <Delta polarity="standard" showArrow={false} value={p.unrealized} />
                  </td>
                  <td className="px-6 py-3 text-right">
                    <Delta polarity="standard" showArrow={false} value={p.realized} />
                  </td>
                </tr>
              ))}
            </tbody>
            <tfoot>
              <tr>
                <td colSpan={4} />
                <td className="px-3">
                  <Rule variant="subtotal" />
                </td>
                <td className="px-6">
                  <Rule variant="subtotal" />
                </td>
              </tr>
              <tr>
                <th className="px-6 py-3 text-left text-label font-medium" scope="row">
                  Total
                </th>
                <td colSpan={3} />
                <td className="px-3 py-3 text-right">
                  <Money accounting size="md" value={totalUnrealized} />
                </td>
                <td className="px-6 py-3 text-right">
                  <Money accounting size="md" value={totalRealized} />
                </td>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>
    );
  },
);
FxExposure.displayName = "FxExposure";