'use client';

import React from 'react';
import { ArrowUpRight } from 'lucide-react';
import { StateItem } from '@/types';

interface TurnoutItem {
  id: string;
  name: string;
  turnout: number; // percentage e.g. 78.4
  votesCount: number;
  totalVoters: number;
}

interface TurnoutLeaderboardProps {
  levelLabel?: string; // 'States', 'LGAs', 'Wards'
  items?: TurnoutItem[];
  onSelectItem?: (id: string) => void;
}

export function TurnoutLeaderboard({
  levelLabel = 'States',
  items,
  onSelectItem,
}: TurnoutLeaderboardProps) {
  // Only display items that actually have positive turnout recorded
  const displayList = items && items.length > 0 ? items.filter((i) => i.turnout > 0).slice(0, 5) : [];

  return (
    <div className="bg-white rounded-xl border border-slate-200/90 p-4 shadow-xs">
      <div className="flex items-center justify-between pb-3 border-b border-slate-100">
        <div>
          <h3 className="text-sm font-black text-slate-900 tracking-tight">
            Top {levelLabel} by Turnout
          </h3>
          <p className="text-[11px] text-slate-500 font-medium">
            Ranked by voter participation percentage
          </p>
        </div>
        <span className="text-[10px] font-bold px-2 py-0.5 rounded-full bg-emerald-50 text-emerald-700 font-mono">
          Live Sync
        </span>
      </div>

      {displayList.length === 0 ? (
        <div className="py-7 px-4 text-center rounded-xl bg-slate-50 border border-dashed border-slate-200 mt-3.5">
          <p className="text-xs font-bold text-slate-800">Awaiting Turnout Transmissions</p>
          <p className="text-[11px] text-slate-500 mt-0.5">
            Turnout rankings will populate in real-time as polling unit accreditation is certified.
          </p>
        </div>
      ) : (
        <div className="mt-3.5 space-y-3">
        {displayList.map((item, index) => {
          const rankColors = [
            'bg-emerald-600 text-white',
            'bg-emerald-500 text-white',
            'bg-emerald-400 text-slate-900',
            'bg-slate-200 text-slate-700',
            'bg-slate-100 text-slate-600',
          ];

          return (
            <div
              key={item.id}
              onClick={() => onSelectItem && onSelectItem(item.id)}
              className={`group flex flex-col space-y-1.5 p-1 rounded-lg transition-colors ${
                onSelectItem ? 'cursor-pointer hover:bg-slate-50' : ''
              }`}
            >
              <div className="flex items-center justify-between text-xs">
                <div className="flex items-center space-x-2">
                  <span
                    className={`w-5 h-5 rounded-full text-[10px] font-black flex items-center justify-center shrink-0 font-mono ${
                      rankColors[index] || 'bg-slate-100 text-slate-600'
                    }`}
                  >
                    {index + 1}
                  </span>
                  <span className="font-bold text-slate-800 group-hover:text-emerald-700 transition-colors">
                    {item.name}
                  </span>
                </div>
                <div className="flex items-center space-x-1.5 font-mono">
                  <span className="font-black text-slate-900">{item.turnout}%</span>
                  {onSelectItem && (
                    <ArrowUpRight className="w-3.5 h-3.5 text-slate-400 group-hover:text-emerald-600 transition-colors" />
                  )}
                </div>
              </div>

              {/* Progress Bar matching mockup green tint */}
              <div className="w-full bg-slate-100 h-2 rounded-full overflow-hidden">
                <div
                  className="bg-emerald-500 h-full rounded-full transition-all duration-700"
                  style={{ width: `${Math.min(100, Math.max(0, item.turnout))}%` }}
                />
              </div>
            </div>
          );
        })}
        </div>
      )}
    </div>
  );
}