import { District } from '@/lib/db/division';
import { toBn } from '@/lib/utils';

interface DistrictSelectorProps {
  districts: District[];
  onSelectDistrict: (district: District) => void;
}

export const DistrictSelector = ({ districts, onSelectDistrict }: DistrictSelectorProps) => {
  return (
    <div className="bg-white rounded-xl sm:rounded-2xl shadow-sm border border-gray-200 overflow-hidden mb-6 sm:mb-8">
      <div className="bg-linear-to-r from-purple-600 to-purple-800 text-white px-3 sm:px-4 md:px-6 py-2.5 sm:py-3 md:py-4">
        <h3 className="text-base sm:text-lg font-bold flex items-center gap-2">
          <span className="material-symbols-outlined">map</span>
          জেলা নির্বাচন করুন
        </h3>
      </div>
      <div className="p-4 sm:p-6">
        <p className="text-gray-500 mb-4 text-sm sm:text-base">
          বিস্তারিত তথ্য দেখতে নিচে থেকে একটি জেলা নির্বাচন করুন:
        </p>
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 md:gap-4">
          {districts.map((district, index) => {
            const winningParty =
              district.al > district.jp && district.al > district.ind
                ? 'AL'
                : district.jp > district.ind
                  ? 'JP'
                  : 'IND';
            const winningColor =
              winningParty === 'AL'
                ? 'bg-green-500'
                : winningParty === 'JP'
                  ? 'bg-red-500'
                  : 'bg-gray-500';

            return (
              <div
                key={index}
                onClick={() => onSelectDistrict(district)}
                className="bg-white border hover:shadow-md cursor-pointer rounded-xl p-3 sm:p-4 transition-all hover:-translate-y-1 relative overflow-hidden group"
              >
                <div className="flex justify-between items-start mb-2">
                  <h4 className="font-bold text-gray-800 text-lg group-hover:text-purple-700 transition-colors">
                    {district.name}
                  </h4>
                  <span className="text-xs font-bold px-2 py-1 rounded bg-white border shadow-sm">
                    {toBn(district.al + district.jp + district.ind)} আসন
                  </span>
                </div>
                <div className="space-y-1 text-xs text-gray-600">
                  <div className="flex justify-between">
                    <span>আওয়ামী লীগ:</span>
                    <span className="font-bold">{toBn(district.al)}</span>
                  </div>
                  <div className="flex justify-between">
                    <span>জাতীয় পার্টি:</span>
                    <span className="font-bold">{toBn(district.jp)}</span>
                  </div>
                  <div className="flex justify-between">
                    <span>স্বতন্ত্র:</span>
                    <span className="font-bold">{toBn(district.ind)}</span>
                  </div>
                </div>
                <div className={`absolute bottom-0 left-0 h-1 w-full ${winningColor}`}></div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};