"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  Legend,
} from "recharts";

interface YearOverYearDataPoint {
  month: string;
  current: number;
  previous: number;
  label: string;
}

interface YearOverYearChartProps {
  data: YearOverYearDataPoint[];
  formatCurrency: (amount: number) => string;
  currentYearLabel?: string;
  previousYearLabel?: string;
}

export function YearOverYearChart({
  data,
  formatCurrency,
  currentYearLabel = "Cette année",
  previousYearLabel = "Année précédente",
}: YearOverYearChartProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Comparaison année sur année</CardTitle>
      </CardHeader>
      <CardContent>
        {data.length > 0 ? (
          <div className="h-[300px]">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart data={data}>
                <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
                <XAxis dataKey="month" className="text-xs" />
                <YAxis
                  className="text-xs"
                  width={80}
                  tickFormatter={(v) => {
                    if (Math.abs(v) >= 1000) {
                      return `${(v / 1000).toFixed(1)}k€`;
                    }
                    return `${Math.round(v)}€`;
                  }}
                  tick={{ fill: "var(--muted-foreground)" }}
                />
                <Tooltip
                  formatter={(value: number) => formatCurrency(value)}
                  contentStyle={{
                    backgroundColor: "var(--card)",
                    border: "1px solid var(--border)",
                    borderRadius: "8px",
                  }}
                />
                <Legend />
                <Bar
                  dataKey="current"
                  name={currentYearLabel}
                  fill="#6366f1"
                  radius={[4, 4, 0, 0]}
                />
                <Bar
                  dataKey="previous"
                  name={previousYearLabel}
                  fill="#94a3b8"
                  radius={[4, 4, 0, 0]}
                />
              </BarChart>
            </ResponsiveContainer>
          </div>
        ) : (
          <div className="h-[300px] flex items-center justify-center text-muted-foreground">
            Pas de données pour cette période
          </div>
        )}
      </CardContent>
    </Card>
  );
}