import { useTranslation } from "react-i18next";
import { Target } from "lucide-react";
import type { CartesBudgetAdherence } from "../../../shared/types";

export interface BudgetAdherenceCardProps {
  adherence: CartesBudgetAdherence;
}

function formatCurrency(amount: number, language: string): string {
  return new Intl.NumberFormat(language === "fr" ? "fr-CA" : "en-CA", {
    style: "currency",
    currency: "CAD",
    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 BudgetAdherenceCard({ adherence }: BudgetAdherenceCardProps) {
  const { t, i18n } = useTranslation();
  const { categoriesInTarget, categoriesTotal, worstOverruns } = adherence;
  const score = categoriesTotal === 0 ? null : (categoriesInTarget / categoriesTotal) * 100;

  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">
        <Target size={16} className="text-[var(--primary)]" />
        <h3 className="text-sm font-medium text-[var(--foreground)]">
          {t("reports.cartes.budgetAdherenceTitle")}
        </h3>
      </div>

      {categoriesTotal === 0 ? (
        <div className="text-xs italic text-[var(--muted-foreground)] py-2">
          {t("reports.cartes.budgetAdherenceEmpty")}
        </div>
      ) : (
        <>
          <div>
            <div className="text-2xl font-bold tabular-nums text-[var(--foreground)]">
              {categoriesInTarget}
              <span className="text-sm text-[var(--muted-foreground)] font-normal">
                {" / "}
                {categoriesTotal}
              </span>
            </div>
            <div className="text-xs text-[var(--muted-foreground)]">
              {t("reports.cartes.budgetAdherenceSubtitle", {
                score:
                  score !== null
                    ? new Intl.NumberFormat(i18n.language === "fr" ? "fr-CA" : "en-CA", {
                        style: "percent",
                        maximumFractionDigits: 0,
                      }).format(score / 100)
                    : "—",
              })}
            </div>
          </div>

          {worstOverruns.length > 0 && (
            <div className="flex flex-col gap-2 pt-2 border-t border-[var(--border)]">
              <div className="text-[10px] uppercase tracking-wide text-[var(--muted-foreground)]">
                {t("reports.cartes.budgetAdherenceWorst")}
              </div>
              {worstOverruns.map((r) => {
                const progressPct = r.budget > 0 ? Math.min((r.actual / r.budget) * 100, 200) : 0;
                return (
                  <div key={r.categoryId} className="flex flex-col gap-1">
                    <div className="flex items-center justify-between gap-2 text-xs">
                      <span className="flex items-center gap-2 min-w-0">
                        <span
                          className="w-2 h-2 rounded-full flex-shrink-0"
                          style={{ backgroundColor: r.categoryColor }}
                        />
                        <span className="truncate text-[var(--foreground)]">{r.categoryName}</span>
                      </span>
                      <span className="tabular-nums text-[var(--muted-foreground)]">
                        {formatCurrency(r.actual, i18n.language)}
                        {" / "}
                        {formatCurrency(r.budget, i18n.language)}
                        <span className="text-[var(--negative)] ml-1 font-medium">
                          {formatPct(r.overrunPct, i18n.language)}
                        </span>
                      </span>
                    </div>
                    <div
                      className="h-1.5 rounded-full bg-[var(--muted)] overflow-hidden"
                      aria-hidden
                    >
                      <div
                        className="h-full bg-[var(--negative)]"
                        style={{ width: `${Math.min(progressPct, 100)}%` }}
                      />
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </>
      )}
    </div>
  );
}
