import { PieChart, Pie, Cell } from "recharts";

interface Ring {
  color: string;
  value: number;
}

interface Card {
  percent: number;
  rings: Ring[];
}

interface MultiRingCircularProgressProps {
  card: Card;
  hoveredIndex: number | null;
  onHover: (index: number | null) => void;
}

export default function MultiRingCircularProgress({ card, hoveredIndex, onHover }: MultiRingCircularProgressProps) {
  const { percent, rings } = card;

  // Create ring data with proper outer and inner radius calculations
  const ringData = rings.map((ring, index) => ({
    ...ring,
    outerRadius: 110 - (index * 18), // Decrease by 18px for each ring
    innerRadius: 95 - (index * 18), // Decrease by 18px for each ring
  }));

  // When a ring is hovered, other rings become gray
  const getHoverColor = (ring: Ring, index: number) => {
    if (hoveredIndex === null) return ring.color;
    if (hoveredIndex === index) return ring.color;
    return "#d3d3d3"; // gray for non-hovered rings
  };

  return (
    <div
      className="flex items-center justify-center hover:scale-115 transition-all duration-300 cursor-pointer outline-none focus:outline-none focus:ring-0 focus:border-none"
      onMouseLeave={() => onHover(null)}
      onClick={() => {
        console.log("hoveredIndex ");
      }}
      style={{ outline: "none", border: "none" }}
      tabIndex={-1}
    >
      <PieChart width={300} height={300} className="focus-visible:outline-none focus-visible:ring-0 focus-visible:border-none" >
        {ringData.map((ring, index) => (
          <Pie
            key={index}
            data={[{ value: ring.value }, { value: 100 - ring.value }]}
            dataKey="value"
            startAngle={90}
            endAngle={-270}
            cornerRadius={50}
            cx="50%"
            cy="50%"
            innerRadius={ring.innerRadius}
            outerRadius={ring.outerRadius}
            paddingAngle={0}
            isAnimationActive={true}
            scale={1.5}
            onMouseEnter={() => onHover(index)}
            onMouseLeave={() => onHover(null)}
            fill={getHoverColor(ring, index)}
            className="focus:outline-none focus:ring-0 focus:border-none"
            // pointerEvents={'none'}
          >
            <Cell
              fill={getHoverColor(ring, index)}
            />
            <Cell fill="#f2f3f5" />
          </Pie>
        ))}
        <text
          x={150}
          y={154}
          textAnchor="middle"
          dominantBaseline="middle"
          style={{ fontSize: "1.3rem", fontWeight: "bold" }}
        >
          {percent}%
        </text>
      </PieChart>
    </div>
  );
}