import { useTranslation } from "react-i18next";
import { BarChart, Bar, XAxis, YAxis, Cell, ReferenceLine, Tooltip, ResponsiveContainer } from "recharts";
import type { HighlightMover } from "../../shared/types";
import { ChartPatternDefs, getPatternFill } from "../../utils/chartPatterns";

export interface HighlightsTopMoversChartProps {
  movers: HighlightMover[];
}

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);
}

export default function HighlightsTopMoversChart({ movers }: HighlightsTopMoversChartProps) {
  const { t, i18n } = useTranslation();

  if (movers.length === 0) {
    return (
      <div className="bg-[var(--card)] border border-[var(--border)] rounded-xl p-6 text-center text-[var(--muted-foreground)] italic">
        {t("reports.empty.noData")}
      </div>
    );
  }

  const chartData = movers
    .map((m, i) => ({
      name: m.categoryName,
      color: m.categoryColor,
      delta: m.deltaAbs,
      index: i,
    }))
    .sort((a, b) => a.delta - b.delta);

  return (
    <div className="bg-[var(--card)] border border-[var(--border)] rounded-xl p-4">
      <ResponsiveContainer width="100%" height={Math.max(200, chartData.length * 36 + 40)}>
        <BarChart data={chartData} layout="vertical" margin={{ top: 10, right: 20, bottom: 10, left: 10 }}>
          <ChartPatternDefs
            prefix="highlights-movers"
            categories={chartData.map((d) => ({ color: d.color, index: d.index }))}
          />
          <XAxis
            type="number"
            tickFormatter={(v) => formatCurrency(v, i18n.language)}
            stroke="var(--muted-foreground)"
            fontSize={11}
          />
          <YAxis type="category" dataKey="name" width={120} stroke="var(--muted-foreground)" fontSize={11} />
          <ReferenceLine x={0} stroke="var(--border)" />
          <Tooltip
            formatter={(value) =>
              typeof value === "number" ? formatCurrency(value, i18n.language) : String(value)
            }
            contentStyle={{
              backgroundColor: "var(--card)",
              border: "1px solid var(--border)",
              borderRadius: "0.5rem",
            }}
          />
          <Bar dataKey="delta">
            {chartData.map((entry) => (
              <Cell
                key={entry.name}
                fill={getPatternFill("highlights-movers", entry.index, entry.color)}
              />
            ))}
          </Bar>
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}