import { toBn } from '@/lib/utils';
import Link from 'next/link';
import { Seat } from '../../seat.type';
import { CandidateListItem } from './CandidateListItem';

export function SeatCard({ seat }: { seat: Seat }) {
  return (
    <article
      className="seat-card bg-white rounded-2xl p-5 border border-gray-100 shadow-sm hover:shadow-lg transition-all duration-300 group flex flex-col h-full cursor-pointer relative overflow-hidden"
      style={{ transform: 'translateY(0)' }}
      onMouseEnter={(e) => {
        e.currentTarget.style.transform = 'translateY(-5px)';
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.transform = 'translateY(0)';
      }}
    >
      {/* Background Decoration */}
      <div className="absolute top-0 right-0 w-24 h-24 bg-emerald-50 rounded-full blur-2xl -mr-12 -mt-12 pointer-events-none opacity-60"></div>

      <div className="flex justify-between items-start mb-4 pb-4 border-b border-gray-50 relative z-10">
        <div>
          <span className="inline-flex items-center gap-1 text-[10px] sm:text-xs font-bold text-emerald-700 bg-emerald-50 px-2.5 py-1 rounded-md mb-2">
            <span className="material-symbols-outlined text-[14px]">location_on</span>
            {seat.district}
          </span>
          <h3 className="text-xl font-bold text-gray-900 group-hover:text-emerald-700 transition">
            {seat.name}
          </h3>
        </div>
        <div className="text-right">
          <div className="flex items-center gap-1 text-gray-400 mb-1 justify-end">
            <span className="material-symbols-outlined text-[16px]">groups</span>
            <span className="text-[10px] font-semibold uppercase tracking-wide">মোট ভোটার</span>
          </div>
          <span className="text-lg font-bold text-gray-900 font-mono">{toBn(seat.voters)}</span>
        </div>
      </div>

      {/* Main Stats Grid */}
      <div className="grid grid-cols-2 gap-4 mb-4 relative z-10">
        <div className="flex flex-col justify-center gap-2 text-sm col-span-2 bg-slate-50 rounded-lg p-3 border border-slate-100">
          <div className="flex justify-between items-center border-b border-slate-100 pb-1">
            <span className="text-slate-500 text-xs">পুরুষ</span>
            <span className="font-bold text-slate-700 font-mono">
              {toBn(Math.round(parseInt(seat.maleVoters) / 1000))}k
            </span>
          </div>
          <div className="flex justify-between items-center border-b border-slate-100 pb-1">
            <span className="text-slate-500 text-xs">নারী</span>
            <span className="font-bold text-slate-700 font-mono">
              {toBn(Math.round(parseInt(seat.femaleVoters) / 1000))}k
            </span>
          </div>
          <div className="flex justify-between items-center">
            <span className="text-slate-500 text-xs">হিজড়া</span>
            <span className="font-bold text-slate-700 font-mono">{toBn(seat.thirdGender)}</span>
          </div>
        </div>
      </div>

      {/* Area Info Row */}
      <div className="flex items-center justify-between text-xs bg-white border border-slate-100 rounded-lg p-2.5 mb-3 relative z-10">
        <div className="flex items-center gap-2">
          <span className="material-symbols-outlined text-base text-emerald-500">aspect_ratio</span>
          <div className="flex flex-col leading-none">
            <span className="text-[10px] text-slate-400 mb-0.5">আয়তন</span>
            <span className="font-bold text-slate-700">{toBn(seat.area)}</span>
          </div>
        </div>
        <div className="w-px h-8 bg-slate-100"></div>
        <div className="flex items-center gap-2">
          <span className="material-symbols-outlined text-base text-emerald-500">
            holiday_village
          </span>
          <div className="flex flex-col leading-none">
            <span className="text-[10px] text-slate-400 mb-0.5">ইউনিয়ন</span>
            <span className="font-bold text-slate-700">{toBn(seat.unions)}</span>
          </div>
        </div>
        <div className="w-px h-8 bg-slate-100"></div>
        <div className="flex items-center gap-2">
          <span className="material-symbols-outlined text-base text-emerald-500">
            location_city
          </span>
          <div className="flex flex-col leading-none">
            <span className="text-[10px] text-slate-400 mb-0.5">পৌরসভা</span>
            <span className="font-bold text-slate-700">{toBn(seat.municipality)}</span>
          </div>
        </div>
      </div>

      <div className="flex-1">
        <div className="flex items-center justify-between mb-3">
          <span className="text-xs font-bold text-gray-400 uppercase tracking-wider">
            প্রার্থী তালিকা
          </span>
          <span className="text-xs font-bold text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-full">
            {toBn(seat.candidates.length)} জন
          </span>
        </div>
        <div className="space-y-1">
          {seat.candidates.map((candidate) => (
            <CandidateListItem key={candidate.id} candidate={candidate} />
          ))}
        </div>
      </div>

      <div className="mt-5 pt-3 border-t border-gray-100 flex justify-center relative z-10">
        <Link
          href={`/seats/${encodeURIComponent(seat.name)}`}
          className="text-sm font-bold text-emerald-600 hover:text-emerald-700 hover:underline flex items-center gap-1"
        >
          বিস্তারিত ফলাফল
          <span className="material-symbols-outlined text-base">arrow_forward</span>
        </Link>
      </div>
    </article>
  );
}