'use client';

import React from 'react';
import { PieChart } from 'lucide-react';

interface PartyVotesDonutChartProps {
  totalVotes?: number;
  parties?: { name: string; votes: number; percentage: number; color: string }[];
}

const DEFAULT_PARTIES = [
  { name: 'ADC / APC', votes: 24892433, percentage: 39.9, color: '#15803D' },
  { name: 'PDP', votes: 20314552, percentage: 32.6, color: '#DC2626' },
  { name: 'LP', votes: 13568441, percentage: 21.8, color: '#2563EB' },
  { name: 'Others', votes: 3570345, percentage: 5.7, color: '#64748B' }
];

export const PartyVotesDonutChart: React.FC<PartyVotesDonutChartProps> = ({
  totalVotes = 62345771,
  parties = DEFAULT_PARTIES
}) => {
  // SVG Donut calculation with stroke-dasharray and stroke-dashoffset
  const radius = 55;
  const circumference = 2 * Math.PI * radius; // ~345.57
  let cumulativeOffset = 0;

  return (
    <div className="bg-white rounded-2xl border border-slate-200/90 shadow-sm p-5 space-y-4">
      <div className="flex items-center justify-between border-b border-slate-100 pb-3">
        <div className="flex items-center space-x-2">
          <PieChart className="w-4 h-4 text-slate-800" />
          <h3 className="text-base font-black text-slate-900 tracking-tight">
            Votes by Party (National)
          </h3>
        </div>
        <span className="text-xs font-bold text-blue-600 hover:text-blue-800 cursor-pointer">
          View Details
        </span>
      </div>

      <div className="flex flex-col sm:flex-row items-center justify-between gap-5">
        {/* SVG Donut */}
        <div className="relative w-36 h-36 flex items-center justify-center flex-shrink-0">
          <svg className="w-full h-full -rotate-90" viewBox="0 0 140 140">
            {/* Background Track */}
            <circle
              cx="70"
              cy="70"
              r={radius}
              fill="transparent"
              stroke="#F1F5F9"
              strokeWidth="16"
            />
            {/* Segment arcs */}
            {parties.map((p) => {
              const strokeLength = (p.percentage / 100) * circumference;
              const currentOffset = cumulativeOffset;
              cumulativeOffset += strokeLength;
              return (
                <circle
                  key={p.name}
                  cx="70"
                  cy="70"
                  r={radius}
                  fill="transparent"
                  stroke={p.color}
                  strokeWidth="16"
                  strokeDasharray={`${strokeLength} ${circumference - strokeLength}`}
                  strokeDashoffset={-currentOffset}
                  strokeLinecap="round"
                  className="transition-all duration-500"
                />
              );
            })}
          </svg>

          {/* Center Text */}
          <div className="absolute inset-0 flex flex-col items-center justify-center text-center p-2">
            <span className="text-xs font-black text-slate-900 leading-none">
              {(totalVotes / 1000000).toFixed(1)}M
            </span>
            <span className="text-[9px] font-bold text-slate-400 uppercase mt-0.5">
              Total Votes
            </span>
          </div>
        </div>

        {/* Legend */}
        <div className="space-y-2 flex-1 w-full text-xs">
          {parties.map((p) => (
            <div key={p.name} className="flex items-center justify-between text-slate-700">
              <div className="flex items-center space-x-2">
                <span className="w-2.5 h-2.5 rounded-full flex-shrink-0" style={{ backgroundColor: p.color }} />
                <span className="font-semibold">{p.name}</span>
              </div>
              <div className="text-right font-mono">
                <span className="font-bold text-slate-900">{p.votes.toLocaleString()}</span>
                <span className="text-slate-400 text-[10px] ml-1">({p.percentage}%)</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};