import { Candidate } from '@/lib/db/candidate';
import { toBn } from '@/lib/utils';

interface CandidateSummaryTabProps {
  candidate: Candidate;
}

export function CandidateSummaryTab({ candidate }: CandidateSummaryTabProps) {
  return (
    <div className="animate-fade-in">
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-3 sm:gap-4 md:gap-6">
        <div className="lg:col-span-2 flex flex-col gap-3 sm:gap-4 md:gap-6">
          {/* Summary Card */}
          <div className="bg-white rounded-2xl sm:rounded-3xl border border-blue-100 shadow-sm p-3 sm:p-4 md:p-5 lg:p-6 text-gray-700">
            <p className="text-base sm:text-lg md:text-xl font-bold text-gray-900 mb-2 sm:mb-3">
              {candidate.name} - {candidate.constituency} আসনের প্রার্থী
            </p>
            <p className="text-sm sm:text-base leading-relaxed">
              {candidate.name} {candidate.party} দলের প্রার্থী হিসেবে {candidate.constituency} আসন
              থেকে প্রতিদ্বন্দ্বিতা করছেন। তিনি একজন {candidate.profession} এবং{' '}
              {candidate.education} ডিগ্রিধারী।
              {candidate.public_service_years > 0 &&
                ` জনসেবায় তার ${toBn(candidate.public_service_years)} বছরের অভিজ্ঞতা রয়েছে।`}
            </p>
          </div>

          {/* Stats Grid */}
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-2 sm:gap-3 md:gap-4">
            <div className="bg-white p-3 sm:p-4 rounded-2xl sm:rounded-3xl border border-blue-100 shadow-sm flex flex-col">
              <span className="text-gray-500 text-xs sm:text-xs font-bold uppercase tracking-wider mb-1.5 sm:mb-2">
                শিক্ষা
              </span>
              <div className="flex items-end gap-1.5 sm:gap-2 mt-auto">
                <span className="text-sm sm:text-base font-bold text-gray-900">
                  {candidate.education}
                </span>
              </div>
            </div>
            <div className="bg-white p-3 sm:p-4 rounded-2xl sm:rounded-3xl border border-blue-100 shadow-sm flex flex-col">
              <span className="text-gray-500 text-xs sm:text-xs font-bold uppercase tracking-wider mb-1.5 sm:mb-2">
                পেশা
              </span>
              <div className="flex items-end gap-1.5 sm:gap-2 mt-auto">
                <span className="text-sm sm:text-base font-bold text-gray-900">
                  {candidate.profession}
                </span>
              </div>
            </div>
            <div className="bg-white p-3 sm:p-4 rounded-2xl sm:rounded-3xl border border-blue-100 shadow-sm flex flex-col">
              <span className="text-gray-500 text-xs sm:text-xs font-bold uppercase tracking-wider mb-1.5 sm:mb-2">
                জনপ্রিয়তা
              </span>
              <div className="flex items-end gap-1.5 sm:gap-2 mt-auto">
                <span className="text-2xl sm:text-3xl font-bold text-gray-900">
                  {toBn(candidate.popularity)}%
                </span>
              </div>
            </div>
          </div>

          {/* Detailed Bio */}
          <div className="bg-white rounded-2xl sm:rounded-3xl border border-blue-100 shadow-sm p-4 sm:p-5 md:p-6">
            <h3 className="text-base sm:text-lg font-bold text-gray-900 mb-3 sm:mb-4">
              {candidate.name} সম্পর্কে
            </h3>
            <div className="prose prose-sm text-gray-600">
              <p className="mb-3 text-sm sm:text-base">
                {candidate.name} একজন {candidate.profession} এবং {candidate.party} দলের সক্রিয়
                সদস্য।
                {candidate.public_service_years > 0 &&
                  ` তিনি ${toBn(candidate.public_service_years)} বছর ধরে জনসেবায় নিয়োজিত রয়েছেন।`}
              </p>
              <p className="mb-3 sm:mb-4 text-sm sm:text-base">
                তিনি {candidate.education} ডিগ্রিধারী এবং {candidate.district} জেলার একজন পরিচিত
                ব্যক্তিত্ব।
                {candidate.projects_completed > 0 &&
                  ` তার নেতৃত্বে ${toBn(candidate.projects_completed)}টি প্রকল্প সফলভাবে বাস্তবায়িত হয়েছে।`}
              </p>
            </div>
          </div>
        </div>

        {/* Right Sidebar */}
        <div className="flex flex-col gap-3 sm:gap-4 md:gap-6">
          {/* Financial Summary */}
          <div className="bg-white rounded-2xl sm:rounded-3xl border border-blue-100 shadow-sm p-4 sm:p-5 md:p-6">
            <div className="flex items-center gap-2 mb-4 sm:mb-6">
              <span className="material-symbols-outlined text-green-600 font-bold text-xl sm:text-2xl">
                account_balance_wallet
              </span>
              <h3 className="text-base sm:text-lg font-bold text-gray-900">আর্থিক তথ্য</h3>
            </div>
            <div className="space-y-4 sm:space-y-6">
              <div className="space-y-1.5 sm:space-y-2">
                <div className="flex justify-between items-center text-xs sm:text-sm">
                  <span className="font-bold text-gray-700">মোট সম্পদ</span>
                  <span className="text-sm sm:text-base font-black text-gray-900 leading-none">
                    {toBn(candidate.wealth_cr)} কোটি
                  </span>
                </div>
                <div className="w-full h-2 sm:h-3 bg-gray-50 rounded-full overflow-hidden">
                  <div
                    className="h-full bg-green-600 rounded-full"
                    style={{ width: `${Math.min(candidate.wealth_cr * 2, 100)}%` }}
                  ></div>
                </div>
              </div>
              <div className="space-y-1.5 sm:space-y-2">
                <div className="flex justify-between items-center text-xs sm:text-sm">
                  <span className="font-bold text-gray-700">বার্ষিক কর</span>
                  <span className="text-sm sm:text-base font-black text-gray-900 leading-none">
                    {toBn(candidate.tax_paid_lacs)} লক্ষ
                  </span>
                </div>
                <div className="w-full h-2 sm:h-3 bg-gray-50 rounded-full overflow-hidden">
                  <div
                    className="h-full bg-orange-500 rounded-full"
                    style={{ width: `${Math.min(candidate.tax_paid_lacs * 2, 100)}%` }}
                  ></div>
                </div>
              </div>
            </div>
          </div>

          {/* Legal Info */}
          {candidate.criminal_cases > 0 && (
            <div className="bg-red-50 rounded-2xl sm:rounded-3xl border border-red-100 shadow-sm p-4 sm:p-5 md:p-6">
              <div className="flex items-center gap-2 mb-2">
                <span className="material-symbols-outlined text-red-600 text-xl">gavel</span>
                <h3 className="text-base font-bold text-red-900">আইনি মামলা</h3>
              </div>
              <p className="text-sm text-red-700">
                {toBn(candidate.criminal_cases)} টি ফৌজদারি মামলা রয়েছে
              </p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}