import { useTranslation } from "react-i18next";
import type { RecentTransaction } from "../../shared/types";

export interface HighlightsTopTransactionsListProps {
  transactions: RecentTransaction[];
  windowDays: 30 | 60 | 90;
  onWindowChange: (days: 30 | 60 | 90) => void;
  onContextMenuRow?: (event: React.MouseEvent, transaction: RecentTransaction) => void;
}

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

export default function HighlightsTopTransactionsList({
  transactions,
  windowDays,
  onWindowChange,
  onContextMenuRow,
}: HighlightsTopTransactionsListProps) {
  const { t, i18n } = useTranslation();

  return (
    <div className="bg-[var(--card)] border border-[var(--border)] rounded-xl overflow-hidden">
      <div className="flex items-center justify-between px-4 py-3 border-b border-[var(--border)]">
        <h3 className="text-sm font-semibold">{t("reports.highlights.topTransactions")}</h3>
        <div className="flex gap-1">
          {([30, 60, 90] as const).map((days) => (
            <button
              key={days}
              type="button"
              onClick={() => onWindowChange(days)}
              aria-pressed={windowDays === days}
              className={`text-xs px-2 py-1 rounded ${
                windowDays === days
                  ? "bg-[var(--primary)] text-white"
                  : "bg-[var(--muted)] text-[var(--muted-foreground)] hover:bg-[var(--border)]"
              }`}
            >
              {t(`reports.highlights.windowDays${days}`)}
            </button>
          ))}
        </div>
      </div>
      {transactions.length === 0 ? (
        <p className="px-4 py-6 text-center text-sm text-[var(--muted-foreground)] italic">
          {t("reports.empty.noData")}
        </p>
      ) : (
        <ul className="divide-y divide-[var(--border)]">
          {transactions.map((tx) => (
            <li
              key={tx.id}
              onContextMenu={onContextMenuRow ? (e) => onContextMenuRow(e, tx) : undefined}
              className="flex items-center gap-3 px-4 py-2 text-sm"
            >
              <span
                className="w-2 h-2 rounded-full flex-shrink-0"
                style={{ backgroundColor: tx.category_color ?? "#9ca3af" }}
              />
              <span className="text-[var(--muted-foreground)] tabular-nums flex-shrink-0">
                {tx.date}
              </span>
              <span className="flex-1 min-w-0 truncate">{tx.description}</span>
              {tx.category_name && (
                <span className="text-xs text-[var(--muted-foreground)] flex-shrink-0">
                  {tx.category_name}
                </span>
              )}
              <span
                className="tabular-nums font-medium flex-shrink-0"
                style={{ color: tx.amount >= 0 ? "var(--positive, #10b981)" : "var(--foreground)" }}
              >
                {formatAmount(tx.amount, i18n.language)}
              </span>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}
