import { ResponsiveContainer, PieChart, Pie, Cell, Tooltip } from "recharts";
import { formatMetricValue } from "./platformMetrics";

export interface DonutSegment {
  label: string;
  value: number;
  color: string;
}

interface Props {
  data: DonutSegment[];
  title?: string;
  centerLabel?: string;
  centerValue?: string;
  size?: number;
}

function CustomTooltipContent({ active, payload }: any) {
  if (!active || !payload?.length) return null;
  const d = payload[0];
  return (
    <div className="vr-bg-white vr-border vr-border-gray-200 vr-rounded-lg vr-shadow-lg vr-p-2.5 vr-text-xs">
      <div className="vr-flex vr-items-center vr-gap-2">
        <span className="vr-w-2.5 vr-h-2.5 vr-rounded-full" style={{ backgroundColor: d.payload.color }} />
        <span className="vr-text-gray-700 vr-font-medium">{d.name}</span>
      </div>
      <p className="vr-text-gray-900 vr-font-bold vr-mt-1">
        {formatMetricValue(d.value)} ({((d.value / d.payload.total) * 100).toFixed(1)}%)
      </p>
    </div>
  );
}

export default function DonutChart({ data, title, centerLabel, centerValue, size = 180 }: Props) {
  if (!data || data.length === 0) return null;

  const total = data.reduce((s, d) => s + d.value, 0);
  const enriched = data.map((d) => ({ ...d, total }));

  return (
    <div>
      {title && <h5 className="vr-text-xs vr-font-semibold vr-text-gray-600 vr-mb-2">{title}</h5>}
      <div className="vr-flex vr-flex-col vr-items-center">
        <div style={{ width: size, height: size }} className="vr-relative">
          <ResponsiveContainer width="100%" height="100%">
            <PieChart>
              <Pie
                data={enriched}
                innerRadius="60%"
                outerRadius="85%"
                dataKey="value"
                nameKey="label"
                paddingAngle={2}
                startAngle={90}
                endAngle={-270}
              >
                {enriched.map((entry, i) => (
                  <Cell key={i} fill={entry.color} stroke="none" />
                ))}
              </Pie>
              <Tooltip content={<CustomTooltipContent />} />
            </PieChart>
          </ResponsiveContainer>
          {/* Center text */}
          {(centerLabel || centerValue) && (
            <div className="vr-absolute vr-inset-0 vr-flex vr-flex-col vr-items-center vr-justify-center vr-pointer-events-none">
              {centerValue && <span className="vr-text-lg vr-font-bold vr-text-gray-900">{centerValue}</span>}
              {centerLabel && <span className="vr-text-xs vr-text-gray-400">{centerLabel}</span>}
            </div>
          )}
        </div>

        {/* Legend */}
        <div className="vr-flex vr-flex-wrap vr-justify-center vr-gap-x-4 vr-gap-y-1 vr-mt-3">
          {data.map((d, i) => (
            <div key={i} className="vr-flex vr-items-center vr-gap-1.5 vr-text-xs">
              <span className="vr-w-2 vr-h-2 vr-rounded-full vr-flex-shrink-0" style={{ backgroundColor: d.color }} />
              <span className="vr-text-gray-600">{d.label}</span>
              <span className="vr-text-gray-400">({total > 0 ? ((d.value / total) * 100).toFixed(0) : 0}%)</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}