import { toBn } from '@/lib/utils';
import Image from 'next/image';
import type { LiveResultsCardProps } from '../../seat.type';

export function LiveResultsCard({ results, totalCenters }: LiveResultsCardProps) {
  const leader = results[0];

  return (
    <div className="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
      <div className="bg-white px-6 py-4 border-b border-slate-100 flex justify-between items-center">
        <div className="flex items-center gap-3">
          <span className="relative flex h-3 w-3">
            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
            <span className="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
          </span>
          <div>
            <h2 className="text-lg font-bold text-slate-800 leading-none">লাইভ ফলাফল</h2>
            <p className="text-xs text-slate-500 mt-1">প্রতিটি কেন্দ্রের রিয়েল-টাইম আপডেট</p>
          </div>
        </div>
        <div className="text-right">
          <div className="text-xs font-bold text-slate-500 uppercase tracking-wider">
            গণনা সম্পন্ন
          </div>
          <div className="text-lg font-bold text-slate-800">
            {toBn(Math.floor(totalCenters * 0.98))} / {toBn(totalCenters)}
          </div>
        </div>
      </div>

      <div className="px-6 pt-6 pb-2">
        <div className="flex justify-between text-sm mb-2">
          <span className="font-bold text-slate-700">{leader?.name_bn}</span>
          <span className="font-bold text-emerald-600">{toBn(leader?.percent)}%</span>
        </div>
        <div className="w-full bg-slate-100 rounded-full h-2.5 overflow-hidden">
          <div
            className="bg-emerald-500 h-2.5 rounded-full transition-all duration-1000"
            style={{ width: `${leader?.percent}%` }}
          ></div>
        </div>
        <p className="text-xs text-slate-400 mt-2 text-right">জয়ের জন্য প্রয়োজন ৫০% + ১ ভোট</p>
      </div>

      <div className="overflow-x-auto">
        <table className="w-full text-left">
          <thead className="bg-slate-50 text-slate-500 text-xs uppercase font-bold border-y border-slate-100">
            <tr>
              <th className="px-6 py-3">প্রার্থী</th>
              <th className="px-6 py-3">ভোটের অগ্রগতি</th>
              <th className="px-6 py-3 text-right">মোট ভোট</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-slate-50 text-sm">
            {results.map((c, index) => {
              const isWinner = index === 0;
              let barColorClass = 'bg-gray-500';
              if (c.party.name_bn.includes('আওয়ামী')) barColorClass = 'bg-green-500';
              else if (
                c.party.name_bn.includes('বিএনপি') ||
                c.party.name_bn.includes('জাতীয়তাবাদী')
              )
                barColorClass = 'bg-blue-500';
              else if (c.party.name_bn.includes('জাতীয়')) barColorClass = 'bg-yellow-500';

              return (
                <tr key={index} className={isWinner ? 'bg-emerald-50/50' : 'hover:bg-slate-50'}>
                  <td className="px-6 py-4">
                    <div className="flex items-center gap-3">
                      <Image
                        width={40}
                        height={40}
                        src={c.photo_file || ''}
                        className="w-10 h-10 rounded-full border border-slate-200 object-cover"
                        alt={c.name_bn}
                      />
                      <div>
                        <p className="font-bold text-slate-800 text-sm">{c.name_bn}</p>
                        <p className="text-[10px] text-slate-500 font-medium">
                          {c.party.name_bn.split('(')[0]}
                        </p>
                      </div>
                    </div>
                  </td>
                  <td className="px-6 py-4">
                    <div className="flex items-center gap-3">
                      <div className="flex-1 bg-slate-100 rounded-full h-2.5 overflow-hidden min-w-[120px]">
                        <div
                          className={`${barColorClass} h-2.5 rounded-full transition-all duration-1000`}
                          style={{ width: `${c.percent}%` }}
                        ></div>
                      </div>
                      <span className="text-xs font-bold text-slate-700 w-12 text-right">
                        {toBn(c.percent)}%
                      </span>
                    </div>
                  </td>
                  <td className="px-6 py-4 text-right">
                    <p className="font-bold text-slate-800">
                      {toBn(c.votes?.toLocaleString() || '0')}
                    </p>
                    {isWinner && (
                      <span className="text-[10px] font-bold text-emerald-600 bg-emerald-100 px-1.5 py-0.5 rounded">
                        এগিয়ে
                      </span>
                    )}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}