"use client";

import { ChevronDown, Coins } from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { cn } from "@/lib/utils";

import type { CashflowAssetClassTotal } from "../../_lib/map-cashflow-totals";

type CashflowCurrenciesDropdownProps = {
  totals: CashflowAssetClassTotal[];
};

const TOTALS_PASTEL_BG: Array<{ match: RegExp; className: string }> = [
  { match: /structure/i, className: "bg-amber-100/70" },
  { match: /bond/i, className: "bg-blue-100/70" },
  { match: /stock/i, className: "bg-green-100/70" },
  { match: /\bfx\b|currency|accumulator/i, className: "bg-cyan-100/70" },
  { match: /mixed fund|option/i, className: "bg-pink-100/70" },
  { match: /commodity/i, className: "bg-orange-100/70" },
  { match: /cash|deposit/i, className: "bg-slate-100/90" },
];

function pastelClassForAsset(assetClass: string) {
  return TOTALS_PASTEL_BG.find((entry) => entry.match.test(assetClass))?.className ?? "bg-card";
}

export function CashflowCurrenciesDropdown({ totals }: CashflowCurrenciesDropdownProps) {
  if (totals.length === 0) return null;

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          type="button"
          variant="outline"
          size="sm"
          className="h-7 gap-1 border-border/50 bg-muted/20 px-2 text-[11px] font-medium shadow-none ring-0 hover:bg-muted/40 data-[state=open]:bg-muted/40 focus-visible:border-border/50 focus-visible:ring-0"
        >
          <Coins className="size-3 opacity-70" />
          Totals
          <ChevronDown className="size-3 opacity-50" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent
        align="start"
        className="scrollbar-slim w-[min(88vw,15.5rem)] max-h-[min(70vh,24rem)] overflow-y-auto p-1.5"
      >
        <div className="space-y-1.5">
          {totals.map((section) => (
            <div
              key={section.assetClass}
              className={cn(
                "overflow-hidden rounded-md border border-border/50",
                pastelClassForAsset(section.assetClass),
              )}
            >
              <div className="flex items-center gap-1.5 border-b border-border/35 bg-white/40 px-2 py-1.5">
                <span
                  className="size-1.5 shrink-0 rounded-full"
                  style={{ backgroundColor: section.color ?? "currentColor" }}
                />
                <p className="min-w-0 truncate text-xs font-semibold text-foreground">
                  {section.assetClass}
                </p>
              </div>
              <ul className="space-y-0.5 px-2 py-1.5">
                {section.currencies.map((row, index) => (
                  <li
                    key={`${section.assetClass}-${row.currency || "amount"}-${index}`}
                    className="flex items-baseline justify-between gap-2 text-xs tabular-nums"
                  >
                    {row.currency ? (
                      <span className="shrink-0 font-medium text-muted-foreground">{row.currency}</span>
                    ) : (
                      <span className="shrink-0" />
                    )}
                    <span className="min-w-0 text-right font-medium text-foreground">{row.display}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}