"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import type { BankingData } from "@/lib/types";
import {
  PieChart,
  Pie,
  Cell,
  ResponsiveContainer,
  Legend,
  Tooltip,
} from "recharts";

interface CategoryBreakdownProps {
  data: BankingData;
}

export function CategoryBreakdown({ data }: CategoryBreakdownProps) {
  // Get current month expenses by category
  const thisMonth = new Date();
  thisMonth.setDate(1);
  const thisMonthStr = thisMonth.toISOString().slice(0, 7);

  const monthExpenses = data.transactions.filter(
    (t) => t.date.startsWith(thisMonthStr) && t.amount < 0,
  );

  const categoryTotals = new Map<string, number>();

  monthExpenses.forEach((t) => {
    const catId = t.categoryId || "uncategorized";
    const current = categoryTotals.get(catId) || 0;
    categoryTotals.set(catId, current + Math.abs(t.amount));
  });

  const chartData = Array.from(categoryTotals.entries())
    .map(([categoryId, total]) => {
      const category = data.categories.find((c) => c.id === categoryId);
      return {
        name: category?.name || "Non catégorisé",
        value: total,
        color: category?.color || "#94a3b8",
      };
    })
    .sort((a, b) => b.value - a.value)
    .slice(0, 6);

  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("fr-FR", {
      style: "currency",
      currency: "EUR",
    }).format(value);
  };

  if (chartData.length === 0) {
    return (
      <Card>
        <CardHeader>
          <CardTitle>Dépenses par catégorie</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex flex-col items-center justify-center py-8 text-center">
            <p className="text-muted-foreground">Pas de données ce mois-ci</p>
          </div>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>Dépenses par catégorie</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="h-[250px]">
          <ResponsiveContainer width="100%" height="100%">
            <PieChart>
              <Pie
                data={chartData}
                cx="50%"
                cy="50%"
                innerRadius={50}
                outerRadius={80}
                paddingAngle={2}
                dataKey="value"
              >
                {chartData.map((entry, index) => (
                  <Cell key={`cell-${index}`} fill={entry.color} />
                ))}
              </Pie>
              <Tooltip
                formatter={(value: number) => formatCurrency(value)}
                contentStyle={{
                  backgroundColor: "hsl(var(--card))",
                  border: "1px solid hsl(var(--border))",
                  borderRadius: "8px",
                }}
              />
              <Legend
                formatter={(value) => (
                  <span className="text-sm text-foreground">{value}</span>
                )}
              />
            </PieChart>
          </ResponsiveContainer>
        </div>
      </CardContent>
    </Card>
  );
}