AccountCard

"use client";

import * as React from "react";
import { cn } from "@/lib/ledger/cn";
import { formatTimestamp } from "@/lib/ledger/fiscal-period";
import type { MoneyValue } from "@/lib/ledger/money.types";
import { AsOf } from "@/components/ledger/as-of";
import { Button } from "@/components/ledger/button";
import { Card } from "@/components/ledger/card";
import { EntityMark } from "@/components/ledger/entity-mark";
import { ChevronRightIcon, ExclamationTriangleIcon } from "@/components/ledger/icons";
import { InfoTip } from "@/components/ledger/info-tip";
import { Money } from "@/components/ledger/money";
import { MaskedAccount } from "@/components/ledger/reference";

export interface AccountCardProps extends React.ComponentPropsWithoutRef<"div"> {
  accountType: string;
  available: MoneyValue | null;
  connection?: "connected" | "disconnected" | "reauth-required";
  current: MoneyValue | null;
  institution: string;
  institutionSrc?: string;
  last4: string;
  lastSynced: Date;
  onOpen?: () => void;
  onReconnect?: () => void;
}

/**
 * A stale bank connection silently showing an old balance is a real
 * financial hazard, so disconnected and reauth-required are prominent
 * states, not a subtle badge.
 */
export const AccountCard = React.forwardRef<HTMLDivElement, AccountCardProps>(
  (
    {
      className,
      institution,
      institutionSrc,
      accountType,
      last4,
      available,
      current,
      lastSynced,
      connection = "connected",
      onOpen,
      onReconnect,
      ...props
    },
    ref,
  ) => {
    const broken = connection !== "connected";
    const syncedAt = formatTimestamp(lastSynced);
    return (
      <Card className={cn("flex flex-col gap-4", className)} ref={ref} stale={broken} {...props}>
        <div className="flex items-start gap-3">
          <EntityMark category="bank" name={institution} size={40} src={institutionSrc} />
          <div className="min-w-0 flex-1">
            <p className="truncate text-body font-medium">{institution}</p>
            <p className="flex items-center gap-2 text-caption text-text-secondary">
              {accountType}
              <span aria-hidden="true">·</span>
              <MaskedAccount last4={last4} />
            </p>
          </div>
          {onOpen ? (
            <Button
              aria-label={`Open ${institution} transactions`}
              onClick={onOpen}
              size="icon"
              variant="ghost"
            >
              <ChevronRightIcon aria-hidden="true" className="size-4" />
            </Button>
          ) : null}
        </div>

        <div className="grid grid-cols-2 gap-4">
          <div>
            <span className="block text-caption text-text-secondary">Available</span>
            <Money className="mt-0.5" size="md" value={available} />
          </div>
          <div>
            <span className="block text-caption text-text-secondary">Current</span>
            <Money className="mt-0.5" size="md" tone="secondary" value={current} />
          </div>
        </div>

        {broken ? (
          <div className="flex items-center gap-2 rounded-sm bg-negative-subtle px-3 py-2">
            <ExclamationTriangleIcon aria-hidden="true" className="size-3.5 shrink-0 text-negative" />
            <span className="flex min-w-0 flex-1 items-center gap-1.5">
              <span className="truncate text-caption font-medium text-negative">
                {connection === "reauth-required" ? "Reauthorization required" : "Disconnected"}
              </span>
              <InfoTip
                about={`Why ${institution} needs reconnecting`}
                align="start"
                label="This balance may be out of date"
                side="top"
                triggerClassName="text-negative"
              >
                {connection === "reauth-required"
                  ? `${institution} revoked this connection's authorization — usually a password change or an expired consent.`
                  : `The connection to ${institution} is down.`}{" "}
                Last synced {syncedAt}.
              </InfoTip>
            </span>
            <Button onClick={onReconnect} size="sm" variant="secondary">
              Reconnect
            </Button>
          </div>
        ) : (
          <AsOf date={lastSynced} prefix="Synced" />
        )}
      </Card>
    );
  },
);
AccountCard.displayName = "AccountCard";