import { useState } from "react";
import { useTranslation } from "react-i18next";
import { ArrowUpRight, ArrowDownRight } from "lucide-react";
import type { HighlightMover } from "../../shared/types";

export interface HubTopMoversTileProps {
  movers: HighlightMover[];
  limit?: number;
}

function formatCurrency(amount: number, language: string): string {
  return new Intl.NumberFormat(language === "fr" ? "fr-CA" : "en-CA", {
    style: "currency",
    currency: "CAD",
    signDisplay: "always",
    maximumFractionDigits: 0,
  }).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: 0,
    signDisplay: "always",
  }).format(pct / 100);
}

export default function HubTopMoversTile({ movers, limit = 3 }: HubTopMoversTileProps) {
  const { t, i18n } = useTranslation();
  const [mode, setMode] = useState<"abs" | "pct">("abs");
  const visible = movers.slice(0, limit);

  return (
    <div className="bg-[var(--card)] border border-[var(--border)] rounded-xl p-4 flex flex-col gap-2">
      <div className="flex items-center justify-between">
        <span className="text-xs font-medium text-[var(--muted-foreground)] uppercase tracking-wide">
          {t("reports.highlights.topMovers")}
        </span>
        <div className="flex gap-1">
          <button
            type="button"
            onClick={() => setMode("abs")}
            aria-pressed={mode === "abs"}
            className={`text-xs px-2 py-0.5 rounded ${
              mode === "abs"
                ? "bg-[var(--primary)] text-white"
                : "bg-[var(--muted)] text-[var(--muted-foreground)] hover:bg-[var(--border)]"
            }`}
          >
            $
          </button>
          <button
            type="button"
            onClick={() => setMode("pct")}
            aria-pressed={mode === "pct"}
            className={`text-xs px-2 py-0.5 rounded ${
              mode === "pct"
                ? "bg-[var(--primary)] text-white"
                : "bg-[var(--muted)] text-[var(--muted-foreground)] hover:bg-[var(--border)]"
            }`}
          >
            %
          </button>
        </div>
      </div>
      {visible.length === 0 ? (
        <p className="text-sm text-[var(--muted-foreground)] italic">{t("reports.empty.noData")}</p>
      ) : (
        <ul className="flex flex-col gap-1">
          {visible.map((mover) => {
            const isUp = mover.deltaAbs >= 0;
            const Icon = isUp ? ArrowUpRight : ArrowDownRight;
            const color = isUp ? "var(--negative, #ef4444)" : "var(--positive, #10b981)";
            return (
              <li
                key={`${mover.categoryId ?? "uncat"}-${mover.categoryName}`}
                className="flex items-center justify-between gap-2 text-sm"
              >
                <span className="flex items-center gap-2 min-w-0">
                  <span
                    className="w-2 h-2 rounded-full flex-shrink-0"
                    style={{ backgroundColor: mover.categoryColor }}
                  />
                  <span className="truncate">{mover.categoryName}</span>
                </span>
                <span className="flex items-center gap-1 flex-shrink-0" style={{ color }}>
                  <Icon size={14} />
                  <span className="tabular-nums font-medium">
                    {mode === "abs"
                      ? formatCurrency(mover.deltaAbs, i18n.language)
                      : formatPct(mover.deltaPct, i18n.language)}
                  </span>
                </span>
              </li>
            );
          })}
        </ul>
      )}
      <p className="text-[10px] text-[var(--muted-foreground)]">
        {t("reports.highlights.vsLastMonth")}
      </p>
    </div>
  );
}
