import { makeAmountShortar } from '@/helper/candidate.helper';
import { getPartySymbol, toBn } from '@/lib/utils';
import type { Candidate } from '@/type/candidate.type';
import Image from 'next/image';

export function HeadToHeadComparison({ candidates }: { candidates: Candidate[] }) {
  const top2 = candidates.slice(0, 2);

  return (
    <div className="bg-white rounded-2xl shadow-sm border border-slate-200 p-6">
      <h3 className="text-lg font-bold text-slate-800 mb-6 flex items-center gap-2">
        <span className="material-symbols-outlined text-blue-600">compare_arrows</span>
        শীর্ষ দুই প্রার্থীর তুলনা
      </h3>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 relative">
        <div className="hidden md:block absolute left-1/2 top-0 bottom-0 w-px bg-slate-100 -translate-x-1/2"></div>
        {top2.map((c, i) => {
          const isLeft = i === 0;
          return (
            <div
              key={i}
              className={`flex flex-col ${
                isLeft
                  ? 'items-center md:items-end text-center md:text-right'
                  : 'items-center md:items-start text-center md:text-left'
              }`}
            >
              <div className="relative mb-3">
                <Image
                  src={c.photo_file || ''}
                  width={80}
                  height={80}
                  className={`w-20 h-20 rounded-full border-4 ${
                    isLeft ? 'border-emerald-100' : 'border-blue-100'
                  } object-cover`}
                  alt={c.name_bn}
                />
                <Image
                  src={c.party.symbol || getPartySymbol(c.party.name_bn, c.party.name_en)}
                  width={32}
                  height={32}
                  className={`absolute -bottom-1 ${
                    isLeft ? '-right-1' : '-left-1'
                  } w-8 h-8 bg-white rounded-full p-1 shadow-sm border border-slate-100`}
                  alt="Symbol"
                />
              </div>
              <h4 className="font-bold text-slate-800 text-lg leading-tight mb-1">{c.name_bn}</h4>
              <p className="text-sm text-slate-500 mb-4 font-medium">{c.party.name_bn}</p>

              <div className="space-y-2 w-full max-w-[200px]">
                <div className="flex justify-between items-center text-xs border-b border-slate-50 pb-1">
                  <span className="text-slate-400">শিক্ষাগত যোগ্যতা</span>
                  <span className="font-bold text-slate-700">{c.educational_qualification}</span>
                </div>
                <div className="flex justify-between items-center text-xs border-b border-slate-50 pb-1">
                  <span className="text-slate-400">সম্পদ</span>
                  <span className="font-bold text-slate-700">
                    {toBn(makeAmountShortar(+(c.tax_return_info?.total_visible_income || 0)).value)}
                    {makeAmountShortar(+(c.tax_return_info?.total_visible_income || 0)).type}
                  </span>
                </div>
                <div className="flex justify-between items-center text-xs pb-1">
                  <span className="text-slate-400">মামলা</span>
                  <span className="font-bold text-slate-700">
                    {toBn(c.criminal_cases.length || 0)} টি
                  </span>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}