'use client';

import React, { useState } from 'react';
import { STATE_VOTERS_REGISTRY, StateVoterData } from '@/lib/votersRegistryData';
import { Search, ChevronRight } from 'lucide-react';

interface StateResultsSummaryTableProps {
  onSelectState?: (state: StateVoterData) => void;
  selectedStateName?: string | null;
}

export const StateResultsSummaryTable: React.FC<StateResultsSummaryTableProps> = ({
  onSelectState,
  selectedStateName
}) => {
  const [searchTerm, setSearchTerm] = useState('');
  const [showAll, setShowAll] = useState(false);

  const filteredStates = STATE_VOTERS_REGISTRY.filter(s =>
    s.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
    s.code.toLowerCase().includes(searchTerm.toLowerCase())
  );

  const displayStates = showAll ? filteredStates : filteredStates.slice(0, 5);

  const getPartyDotColor = (party: string) => {
    switch (party) {
      case 'ADC':
      case 'APC':
        return 'bg-emerald-600';
      case 'PDP':
        return 'bg-blue-600';
      case 'LP':
        return 'bg-rose-600';
      default:
        return 'bg-slate-400';
    }
  };

  return (
    <div className="bg-white rounded-2xl border border-slate-200/90 shadow-sm p-5 space-y-3.5">
      <div className="flex items-center justify-between border-b border-slate-100 pb-3">
        <div className="flex items-center space-x-2">
          <div className="w-2.5 h-2.5 rounded-sm bg-emerald-600" />
          <h3 className="text-base font-black text-slate-900 tracking-tight">
            State Results Summary
          </h3>
        </div>
        <button
          type="button"
          onClick={() => setShowAll(!showAll)}
          className="text-xs font-bold text-blue-600 hover:text-blue-800 transition-colors"
        >
          {showAll ? 'Show Top 5' : 'View All'}
        </button>
      </div>

      {/* Quick Search Filter */}
      <div className="relative">
        <Search className="w-3.5 h-3.5 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2" />
        <input
          type="text"
          placeholder="Filter state (e.g. Kano, Rivers, Kebbi)..."
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          className="w-full pl-8 pr-3 py-1.5 text-xs rounded-xl bg-slate-50 border border-slate-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 text-slate-800 placeholder-slate-400"
        />
      </div>

      {/* Table */}
      <div className="overflow-x-auto">
        <table className="w-full text-left text-xs">
          <thead>
            <tr className="border-b border-slate-200/80 text-slate-500 font-bold">
              <th className="py-2.5 px-3">State</th>
              <th className="py-2.5 px-3">Registered Voters</th>
              <th className="py-2.5 px-3">Votes Cast</th>
              <th className="py-2.5 px-3">Turnout %</th>
              <th className="py-2.5 px-3 text-right">Leading Party</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-slate-100 font-medium text-slate-700">
            {displayStates.map((state) => {
              const isSelected = selectedStateName?.toLowerCase() === state.name.toLowerCase();
              return (
                <tr
                  key={state.code}
                  onClick={() => onSelectState && onSelectState(state)}
                  className={`hover:bg-slate-50/80 cursor-pointer transition-colors ${
                    isSelected ? 'bg-amber-50/80 font-bold text-slate-900' : ''
                  }`}
                >
                  <td className="py-2.5 px-3 font-semibold text-slate-900 flex items-center space-x-1.5">
                    <span>{state.name}</span>
                    <span className="text-[10px] text-slate-400 font-mono">({state.code})</span>
                  </td>
                  <td className="py-2.5 px-3 font-mono">
                    {state.registeredVoters.toLocaleString()}
                  </td>
                  <td className="py-2.5 px-3 font-mono">
                    {state.votesCast.toLocaleString()}
                  </td>
                  <td className="py-2.5 px-3 font-mono font-semibold text-emerald-700">
                    {state.turnoutPercentage}%
                  </td>
                  <td className="py-2.5 px-3 text-right">
                    <span className="inline-flex items-center space-x-1.5">
                      <span className={`w-2 h-2 rounded-full ${getPartyDotColor(state.leadingParty)}`} />
                      <span className="font-bold text-slate-900">{state.leadingParty}</span>
                    </span>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
};