"use client";

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

interface IncomeExpenseTrendDataPoint {
  month: string;
  revenus: number;
  depenses: number;
}

interface IncomeExpenseTrendChartProps {
  data: IncomeExpenseTrendDataPoint[];
  formatCurrency: (amount: number) => string;
}

export function IncomeExpenseTrendChart({
  data,
  formatCurrency,
}: IncomeExpenseTrendChartProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Tendances revenus et dépenses</CardTitle>
      </CardHeader>
      <CardContent>
        {data.length > 0 ? (
          <div className="h-[300px]">
            <ResponsiveContainer width="100%" height="100%">
              <LineChart data={data}>
                <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
                <XAxis
                  dataKey="month"
                  className="text-xs"
                  interval="preserveStartEnd"
                />
                <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 />
                <Line
                  type="monotone"
                  dataKey="revenus"
                  name="Revenus"
                  stroke="#22c55e"
                  strokeWidth={2}
                  dot={false}
                />
                <Line
                  type="monotone"
                  dataKey="depenses"
                  name="Dépenses"
                  stroke="#ef4444"
                  strokeWidth={2}
                  dot={false}
                />
              </LineChart>
            </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>
  );
}