"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { CategoryIcon } from "@/components/ui/category-icon";
import {
  PieChart,
  Pie,
  Cell,
  Tooltip,
  ResponsiveContainer,
  Legend,
} from "recharts";

export interface CategoryChartData {
  name: string;
  value: number;
  color: string;
  icon: string;
  [key: string]: string | number;
}

interface CategoryPieChartProps {
  data: CategoryChartData[];
  formatCurrency: (amount: number) => string;
  title?: string;
  height?: number;
  innerRadius?: number;
  outerRadius?: number;
  emptyMessage?: string;
}

export function CategoryPieChart({
  data,
  formatCurrency,
  title = "Répartition par catégorie",
  height = 300,
  innerRadius = 60,
  outerRadius = 100,
  emptyMessage = "Pas de données pour cette période",
}: CategoryPieChartProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>{title}</CardTitle>
      </CardHeader>
      <CardContent>
        {data.length > 0 ? (
          <div style={{ height }}>
            <ResponsiveContainer width="100%" height="100%">
              <PieChart>
                <Pie
                  data={data}
                  cx="50%"
                  cy="50%"
                  innerRadius={innerRadius}
                  outerRadius={outerRadius}
                  paddingAngle={2}
                  dataKey="value"
                >
                  {data.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={entry.color} />
                  ))}
                </Pie>
                <Tooltip
                  content={({ active, payload }) => {
                    if (!active || !payload?.length) return null;
                    const item = payload[0].payload as CategoryChartData;
                    return (
                      <div
                        className="px-3 py-2 rounded-lg shadow-lg"
                        style={{
                          backgroundColor: "var(--card)",
                          border: "1px solid var(--border)",
                        }}
                      >
                        <div className="flex items-center gap-2">
                          <CategoryIcon
                            icon={item.icon}
                            color={item.color}
                            size={16}
                          />
                          <span
                            className="font-medium"
                            style={{ color: item.color }}
                          >
                            {item.name}
                          </span>
                        </div>
                        <div className="text-foreground font-semibold mt-1">
                          {formatCurrency(item.value)}
                        </div>
                      </div>
                    );
                  }}
                />
                <Legend
                  content={({ payload }) => (
                    <div className="flex flex-wrap justify-center gap-x-4 gap-y-1 mt-2">
                      {payload?.map((entry, index) => {
                        const item = data.find((d) => d.name === entry.value);
                        return (
                          <div
                            key={`legend-${index}`}
                            className="flex items-center gap-1.5 text-sm"
                          >
                            <CategoryIcon
                              icon={item?.icon || "HelpCircle"}
                              color={item?.color || "#94a3b8"}
                              size={14}
                            />
                            <span className="text-foreground">{entry.value}</span>
                          </div>
                        );
                      })}
                    </div>
                  )}
                />
              </PieChart>
            </ResponsiveContainer>
          </div>
        ) : (
          <div
            style={{ height }}
            className="flex items-center justify-center text-muted-foreground"
          >
            {emptyMessage}
          </div>
        )}
      </CardContent>
    </Card>
  );
}