'use client';

import {
  PieChart,
  Pie,
  Cell,
  ResponsiveContainer,
  Tooltip,
  Legend,
  PieLabelRenderProps,
} from 'recharts';
import { Card } from '@/components/ui/Card';
import { getPriorityChartColor } from '@/lib/status-config';

interface PriorityData {
  priority: string;
  count: number;
  percentage: number;
  [key: string]: string | number; // Index signature pour Recharts
}

interface PriorityDistributionChartProps {
  data: PriorityData[];
  title?: string;
}

// Couleurs importées depuis la configuration centralisée

export function PriorityDistributionChart({
  data,
  title = 'Distribution des Priorités',
}: PriorityDistributionChartProps) {
  // Tooltip personnalisé
  const CustomTooltip = ({
    active,
    payload,
  }: {
    active?: boolean;
    payload?: Array<{ payload: PriorityData }>;
  }) => {
    if (active && payload && payload.length) {
      const data = payload[0].payload;
      return (
        <div className="bg-[var(--card)] border border-[var(--border)] rounded-lg p-3 shadow-lg">
          <p className="text-sm font-medium mb-1">{data.priority}</p>
          <p className="text-sm text-[var(--muted-foreground)]">
            {data.count} tâches ({data.percentage}%)
          </p>
        </div>
      );
    }
    return null;
  };

  // Légende personnalisée
  const CustomLegend = ({
    payload,
  }: {
    payload?: Array<{ value: string; color: string }>;
  }) => {
    return (
      <div className="flex flex-wrap justify-center gap-4 mt-4">
        {payload?.map((entry, index: number) => (
          <div key={index} className="flex items-center gap-2">
            <div
              className="w-3 h-3 rounded-full"
              style={{ backgroundColor: entry.color }}
            ></div>
            <span className="text-sm text-[var(--muted-foreground)]">
              {entry.value}
            </span>
          </div>
        ))}
      </div>
    );
  };

  // Label personnalisé pour afficher les pourcentages
  const renderLabel = (props: PieLabelRenderProps) => {
    const percentage =
      typeof props.percent === 'number' ? props.percent * 100 : 0;
    return percentage > 5 ? `${Math.round(percentage)}%` : '';
  };

  return (
    <Card variant="glass" className="p-6">
      <h3 className="text-lg font-semibold mb-4">{title}</h3>
      <div className="h-70">
        <ResponsiveContainer width="100%" height="100%">
          <PieChart>
            <Pie
              data={data}
              cx="50%"
              cy="50%"
              labelLine={false}
              label={renderLabel}
              outerRadius={80}
              fill="#8884d8"
              dataKey="count"
              nameKey="priority"
            >
              {data.map((entry, index) => (
                <Cell
                  key={`cell-${index}`}
                  fill={getPriorityChartColor(entry.priority)}
                />
              ))}
            </Pie>
            <Tooltip content={<CustomTooltip />} />
            <Legend content={<CustomLegend />} />
          </PieChart>
        </ResponsiveContainer>
      </div>
    </Card>
  );
}
