// NetWorthTile — Dashboard KPI-row tile showing the Bilan's latest net worth.
//
// Issue #279. Deliberately NOT `HubNetBalanceTile` (that one is the reports
// hub's transaction-P&L net balance — a different metric). This tile mirrors
// `BalanceOverviewCard`'s "latest total" figure and reuses its exact i18n
// copy (`balance.overview.latestTotal` / `asOf`) so the label is unambiguous
// next to the transactional KPI cards and the "import sources" account
// filter — same words as the Bilan page itself, never "balance"/"solde".
//
// Renders nothing when `data.visible` is false (no balance account yet, or
// accounts but no snapshot yet) — never a misleading "$0" tile.

import { Link } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { Wallet } from "lucide-react";
import type { NetWorthTileData } from "../../services/dashboardService";

export interface NetWorthTileProps {
  data: NetWorthTileData;
}

function formatCurrency(amount: number, language: string): string {
  return new Intl.NumberFormat(language === "fr" ? "fr-CA" : "en-CA", {
    style: "currency",
    currency: "CAD",
    maximumFractionDigits: 0,
  }).format(amount);
}

export default function NetWorthTile({ data }: NetWorthTileProps) {
  const { t, i18n } = useTranslation();

  if (!data.visible || data.total === null || data.asOfDate === null) {
    return null;
  }

  const dateLocale = i18n.language === "fr" ? "fr-CA" : "en-CA";
  const formattedDate = new Date(data.asOfDate).toLocaleDateString(dateLocale, {
    year: "numeric",
    month: "long",
    day: "numeric",
  });

  return (
    <Link
      to="/balance"
      data-kpi="net-worth"
      className="flex-1 min-w-[180px] bg-[var(--card)] border border-[var(--border)] rounded-xl p-4 flex flex-col gap-3 hover:border-[var(--primary)] transition-colors"
    >
      <div className="text-sm text-[var(--muted-foreground)] flex items-center gap-1.5">
        <Wallet size={14} aria-hidden="true" />
        <span>{t("balance.overview.latestTotal")}</span>
      </div>
      <div className="text-2xl font-bold tabular-nums text-[var(--foreground)]">
        {formatCurrency(data.total, i18n.language)}
      </div>
      <div className="text-xs text-[var(--muted-foreground)] pt-1 border-t border-[var(--border)]">
        {t("balance.overview.asOf", { date: formattedDate })}
      </div>
    </Link>
  );
}