import { Candidate, getPartySymbol } from '@/lib/db/candidate';
import { toBn } from '@/lib/utils';
import Image from 'next/image';

interface CandidateHeaderProps {
  candidate: Candidate;
}

export function CandidateHeader({ candidate }: CandidateHeaderProps) {
  return (
    <div className="bg-white rounded-2xl sm:rounded-3xl shadow-sm border border-blue-100 p-3 sm:p-4 md:p-6">
      <div className="flex flex-col md:flex-row gap-4 md:gap-6 items-start justify-between">
        <div className="flex flex-col md:flex-row gap-3 sm:gap-4 md:gap-6 w-full">
          {/* Avatar */}
          <div className="relative shrink-0 mx-auto md:mx-0">
            <div
              className="bg-center bg-no-repeat bg-cover rounded-full size-24 sm:size-28 md:size-32 lg:size-36 shadow-lg border-2 sm:border-4 border-white"
              style={{ backgroundImage: `url("${candidate.image}")` }}
            />
            <div className="absolute -bottom-1.5 -right-1.5 bg-white w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 rounded-full shadow-lg border-2 border-blue-50 flex items-center justify-center">
              <Image
                width={32}
                height={32}
                src={getPartySymbol(candidate.party, candidate.symbol_img)}
                className="w-5 h-5 sm:w-6 sm:h-6 md:w-8 md:h-8 object-contain"
                alt="Party Symbol"
              />
            </div>
          </div>

          {/* Candidate Info */}
          <div className="flex flex-col justify-center gap-1.5 flex-1 text-center md:text-left">
            <div className="flex flex-col sm:flex-row items-center justify-center md:justify-start gap-2 sm:gap-3">
              <h1 className="text-gray-900 text-xl sm:text-2xl md:text-3xl font-bold leading-tight">
                {candidate.name}
              </h1>
              <span className="text-blue-600 text-base sm:text-lg font-bold">
                {toBn(candidate.popularity)}%
              </span>
              {candidate.public_service_years > 0 && (
                <span className="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10">
                  অভিজ্ঞ রাজনীতিবিদ
                </span>
              )}
            </div>
            <div className="flex flex-wrap items-center justify-center md:justify-start gap-x-3 sm:gap-x-4 gap-y-1 text-gray-500 text-sm">
              <span className="flex items-center gap-1 font-semibold text-xs sm:text-sm">
                <span className="material-symbols-outlined text-[16px] sm:text-[18px]">
                  account_balance
                </span>
                {candidate.party}
              </span>
              <span className="w-1.5 h-1.5 rounded-sm bg-gray-300"></span>
              <span className="flex items-center gap-1 text-xs sm:text-sm">
                <span className="material-symbols-outlined text-[16px] sm:text-[18px]">
                  location_on
                </span>
                {candidate.constituency}
              </span>
            </div>

            <div className="mt-3 sm:mt-4">
              <button className="flex items-center justify-center gap-2 rounded-lg h-9 sm:h-10 px-4 sm:px-6 bg-blue-600 text-white text-xs sm:text-sm font-bold shadow-md hover:bg-blue-700 transition-all mx-auto md:mx-0">
                <span className="material-symbols-outlined text-[16px] sm:text-[18px]">
                  compare_arrows
                </span>
                <span>তুলনা করুন</span>
              </button>
            </div>
          </div>
        </div>

        {/* Win Probability */}
        <div className="w-full md:w-auto shrink-0 flex justify-center">
          <div className="bg-blue-50 border border-blue-100 p-3 sm:p-4 rounded-2xl sm:rounded-3xl flex flex-col items-center justify-center min-w-[140px] sm:min-w-[160px]">
            <span className="text-gray-500 text-xs sm:text-xs font-bold uppercase tracking-wider mb-2 sm:mb-3 text-center">
              জনপ্রিয়তার হার
            </span>
            <div className="w-full mt-2">
              <div className="flex justify-between items-center mb-2">
                <span className="text-xl sm:text-2xl font-black text-blue-600">
                  {toBn(candidate.popularity)}%
                </span>
              </div>
              <div className="w-full h-2.5 sm:h-3 bg-blue-100 rounded-xl overflow-hidden">
                <div
                  className="h-full bg-blue-600 rounded-xl"
                  style={{ width: `${candidate.popularity}%` }}
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}