Simpl-Resultat/src/components/reports/cards/SeasonalityCard.tsx

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

export interface SeasonalityCardProps {
  seasonality: CartesSeasonality;
  referenceYear: number;
  referenceMonth: number;
}

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, language: string, signed = true): string {
  return new Intl.NumberFormat(language === "fr" ? "fr-CA" : "en-CA", {
    style: "percent",
    maximumFractionDigits: 1,
    signDisplay: signed ? "always" : "auto",
  }).format(pct / 100);
}

function formatMonthYear(year: number, month: number, language: string): string {
  return new Intl.DateTimeFormat(language === "fr" ? "fr-CA" : "en-CA", {
    month: "long",
    year: "numeric",
  }).format(new Date(year, month - 1, 1));
}

export default function SeasonalityCard({
  seasonality,
  referenceYear,
  referenceMonth,
}: SeasonalityCardProps) {
  const { t, i18n } = useTranslation();
  const language = i18n.language;
  const { referenceAmount, historicalYears, historicalAverage, deviationPct } = seasonality;

  const refLabel = formatMonthYear(referenceYear, referenceMonth, language);

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

      {historicalYears.length === 0 ? (
        <div className="text-xs italic text-[var(--muted-foreground)] py-2">
          {t("reports.cartes.seasonalityEmpty")}
        </div>
      ) : (
        <div className="flex flex-col gap-3">
          <div className="flex items-baseline justify-between gap-3">
            <span className="text-xs text-[var(--muted-foreground)]">{refLabel}</span>
            <span className="text-lg font-bold tabular-nums text-[var(--foreground)]">
              {formatCurrency(referenceAmount, language)}
            </span>
          </div>

          <div className="flex flex-col gap-1 text-xs">
            {historicalYears.map((y) => (
              <div
                key={y.year}
                className="flex items-center justify-between text-[var(--muted-foreground)]"
              >
                <span>{y.year}</span>
                <span className="tabular-nums">{formatCurrency(y.amount, language)}</span>
              </div>
            ))}
            {historicalAverage !== null && (
              <div className="flex items-center justify-between border-t border-[var(--border)] pt-1 mt-1 text-[var(--foreground)]">
                <span>{t("reports.cartes.seasonalityAverage")}</span>
                <span className="tabular-nums font-medium">
                  {formatCurrency(historicalAverage, language)}
                </span>
              </div>
            )}
          </div>

          {deviationPct !== null && (
            <div
              className={`text-xs font-medium ${
                deviationPct > 5
                  ? "text-[var(--negative)]"
                  : deviationPct < -5
                    ? "text-[var(--positive)]"
                    : "text-[var(--muted-foreground)]"
              }`}
            >
              {t("reports.cartes.seasonalityDeviation", {
                pct: formatPct(deviationPct, language),
              })}
            </div>
          )}
        </div>
      )}
    </div>
  );
}