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