import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { TrendingUp, TrendingDown } from "lucide-react";
import type { CartesTopMover } from "../../../shared/types";

export interface TopMoversListProps {
  movers: CartesTopMover[];
  direction: "up" | "down";
}

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

function formatPct(pct: number | null, language: string): string {
  if (pct === null) return "—";
  return new Intl.NumberFormat(language === "fr" ? "fr-CA" : "en-CA", {
    style: "percent",
    maximumFractionDigits: 1,
    signDisplay: "always",
  }).format(pct / 100);
}

function categoryHref(categoryId: number | null): string {
  if (categoryId === null) return "/transactions";
  const params = new URLSearchParams(window.location.search);
  params.set("cat", String(categoryId));
  return `/reports/category?${params.toString()}`;
}

export default function TopMoversList({ movers, direction }: TopMoversListProps) {
  const { t, i18n } = useTranslation();

  const title =
    direction === "up"
      ? t("reports.cartes.topMoversUp")
      : t("reports.cartes.topMoversDown");
  const Icon = direction === "up" ? TrendingUp : TrendingDown;
  const accentClass = direction === "up" ? "text-[var(--negative)]" : "text-[var(--positive)]";

  return (
    <div className="bg-[var(--card)] border border-[var(--border)] rounded-xl p-4 flex flex-col gap-3">
      <div className="flex items-center gap-2">
        <Icon size={16} className={accentClass} />
        <h3 className="text-sm font-medium text-[var(--foreground)]">{title}</h3>
      </div>
      {movers.length === 0 ? (
        <div className="text-xs italic text-[var(--muted-foreground)] py-2">
          {t("reports.empty.noData")}
        </div>
      ) : (
        <ul className="flex flex-col gap-1">
          {movers.map((m) => (
            <li key={`${m.categoryId ?? "uncat"}-${m.categoryName}`}>
              <Link
                to={categoryHref(m.categoryId)}
                className="flex items-center justify-between gap-3 px-2 py-1.5 rounded-md hover:bg-[var(--muted)] transition-colors"
              >
                <span className="flex items-center gap-2 min-w-0">
                  <span
                    className="w-2 h-2 rounded-full flex-shrink-0"
                    style={{ backgroundColor: m.categoryColor }}
                  />
                  <span className="truncate text-sm text-[var(--foreground)]">
                    {m.categoryName}
                  </span>
                </span>
                <span className={`text-xs font-medium tabular-nums ${accentClass}`}>
                  {formatSignedCurrency(m.deltaAbs, i18n.language)}
                  <span className="text-[var(--muted-foreground)] ml-1">
                    {formatPct(m.deltaPct, i18n.language)}
                  </span>
                </span>
              </Link>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}