import * as React from "react";

import { Badge } from "@/components/ui/badge";
import { formatAmount } from "@/lib/format/numbers";
import { cn } from "@/lib/utils";

/**
 * Presentation primitives shared by the cash-family report views.
 *
 * These were copy-pasted into four views (cash-balance, cash-details, cash-report,
 * deposit-report) and drifted: deposit-report carried only 8 of the 16 currency
 * accents, so the same currency rendered in different colours depending on which
 * report you opened. This module is the single source of truth.
 */

/** Per-currency accent classes. Keep in sync with nothing — this is the source. */
const CURRENCY_ACCENT: Record<string, string> = {
  USD: "border-emerald-700/15 bg-emerald-700/[0.06] text-emerald-800 dark:border-emerald-300/20 dark:bg-emerald-300/10 dark:text-emerald-300",
  EUR: "border-blue-700/15 bg-blue-700/[0.06] text-blue-800 dark:border-blue-300/20 dark:bg-blue-300/10 dark:text-blue-300",
  GBP: "border-violet-700/15 bg-violet-700/[0.06] text-violet-800 dark:border-violet-300/20 dark:bg-violet-300/10 dark:text-violet-300",
  HKD: "border-amber-700/15 bg-amber-700/[0.06] text-amber-900 dark:border-amber-300/20 dark:bg-amber-300/10 dark:text-amber-300",
  SGD: "border-teal-700/15 bg-teal-700/[0.06] text-teal-800 dark:border-teal-300/20 dark:bg-teal-300/10 dark:text-teal-300",
  CHF: "border-indigo-700/15 bg-indigo-700/[0.06] text-indigo-800 dark:border-indigo-300/20 dark:bg-indigo-300/10 dark:text-indigo-300",
  JPY: "border-rose-700/15 bg-rose-700/[0.06] text-rose-800 dark:border-rose-300/20 dark:bg-rose-300/10 dark:text-rose-300",
  AUD: "border-orange-700/15 bg-orange-700/[0.06] text-orange-800 dark:border-orange-300/20 dark:bg-orange-300/10 dark:text-orange-300",
  AED: "border-lime-700/15 bg-lime-700/[0.06] text-lime-900 dark:border-lime-300/20 dark:bg-lime-300/10 dark:text-lime-300",
  CAD: "border-fuchsia-700/15 bg-fuchsia-700/[0.06] text-fuchsia-800 dark:border-fuchsia-300/20 dark:bg-fuchsia-300/10 dark:text-fuchsia-300",
  CNY: "border-red-700/15 bg-red-700/[0.06] text-red-800 dark:border-red-300/20 dark:bg-red-300/10 dark:text-red-300",
  DKK: "border-cyan-700/15 bg-cyan-700/[0.06] text-cyan-800 dark:border-cyan-300/20 dark:bg-cyan-300/10 dark:text-cyan-300",
  THB: "border-purple-700/15 bg-purple-700/[0.06] text-purple-800 dark:border-purple-300/20 dark:bg-purple-300/10 dark:text-purple-300",
  NZD: "border-green-700/15 bg-green-700/[0.06] text-green-800 dark:border-green-300/20 dark:bg-green-300/10 dark:text-green-300",
  SEK: "border-yellow-700/15 bg-yellow-700/[0.06] text-yellow-900 dark:border-yellow-300/20 dark:bg-yellow-300/10 dark:text-yellow-300",
  NOK: "border-pink-700/15 bg-pink-700/[0.06] text-pink-800 dark:border-pink-300/20 dark:bg-pink-300/10 dark:text-pink-300",
};

export function currencyAccentClass(currency: string): string {
  return CURRENCY_ACCENT[currency] ?? "border-primary/20 bg-primary/10 text-primary";
}

export function CurrencyBadge({
  currency,
  className,
  /** Placeholder when the row carries no currency (deposit report shows a dash). */
  emptyLabel,
}: {
  currency: string;
  className?: string;
  emptyLabel?: string;
}) {
  return (
    <Badge
      variant="outline"
      className={cn("h-6 px-2 font-mono text-[11px]", currencyAccentClass(currency), className)}
    >
      {currency || emptyLabel || currency}
    </Badge>
  );
}

export function StatItem({
  icon,
  label,
  value,
  hint,
  /** Accent for the icon chip. Defaults to the neutral treatment. */
  accentClassName = "bg-muted/50 text-muted-foreground",
}: {
  icon: React.ReactNode;
  label: string;
  value: string | number;
  hint: string;
  accentClassName?: string;
}) {
  return (
    <div className="flex min-w-0 flex-1 items-center gap-3 px-4 py-3.5">
      <div
        className={cn(
          "flex size-8 shrink-0 items-center justify-center rounded-lg border",
          accentClassName,
        )}
      >
        {icon}
      </div>
      <div className="min-w-0">
        <p className="text-muted-foreground text-xs leading-none">{label}</p>
        <p className="mt-1 font-semibold text-2xl tabular-nums leading-none tracking-tight">
          {value}
        </p>
        <p className="mt-1 truncate text-muted-foreground text-xs">{hint}</p>
      </div>
    </div>
  );
}

export function AmountCell({
  value,
  variant = "default",
}: {
  value: number;
  /** `call` is used only by the cash-details breakdown. */
  variant?: "default" | "call" | "fixed" | "leverage" | "net";
}) {
  return (
    <span
      className={cn(
        "tabular-nums",
        variant === "call" && "text-blue-700/80 dark:text-blue-300",
        variant === "fixed" && "text-emerald-700/80 dark:text-emerald-300",
        variant === "leverage" && "text-rose-700/80 dark:text-rose-300",
        variant === "net" && "font-semibold text-violet-800/80 dark:text-violet-300",
      )}
    >
      {formatAmount(value)}
    </span>
  );
}