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

const ComparisonListView = ({
  filteredCandidates,
  visibleCount,
  setVisibleCount,
  selectedCandidates,
  toggleCandidateSelection,
}: {
  filteredCandidates: Candidate[];
  visibleCount: number;
  setVisibleCount: React.Dispatch<React.SetStateAction<number>>;
  selectedCandidates: number[];
  toggleCandidateSelection: (id: number) => void;
}) => {
  return (
    <section id="list-view" className="animate-fade-in delay-100">
      <div className="flex items-center justify-between mb-2 sm:mb-3">
        <h3 className="text-base md:text-xl font-bold text-blue-900 border-l-4 border-yellow-500 pl-2">
          প্রার্থী তালিকা
        </h3>
        <div className="text-xs sm:text-xs md:text-sm text-gray-500 px-2 py-1 sm:px-3 sm:py-1.5 md:px-4 md:py-2 bg-white rounded-lg sm:rounded-xl shadow-sm border border-blue-50">
          নির্বাচিত:{' '}
          <span id="compare-count" className="font-bold text-blue-600">
            {toBn(selectedCandidates.length)}
          </span>
          /<span className="max-compare-count text-blue-600 font-bold">৩</span>
        </div>
      </div>

      <div className="hidden md:block bg-white rounded-3xl overflow-hidden shadow-sm border border-blue-100 overflow-x-auto scrollbar-hide">
        <table className="w-full min-w-[800px]">
          <thead className="bg-blue-50/50 text-blue-900 font-bold text-sm uppercase tracking-wider border-b border-blue-100">
            <tr>
              <th className="p-4 w-16 text-center">তুলনা</th>
              <th className="p-4 text-left">প্রার্থী ও দল</th>
              <th className="p-4 text-left hidden md:table-cell">প্রতীক</th>
              <th className="p-4 text-left hidden sm:table-cell">শিক্ষাগত যোগ্যতা</th>
              <th className="p-4 text-left hidden lg:table-cell">পেশা</th>
              <th className="p-4 text-right">স্থাবর সম্পদ</th>
            </tr>
          </thead>
          <tbody id="candidate-table-body" className="divide-y divide-gray-100">
            {filteredCandidates.length === 0 ? (
              <tr>
                <td colSpan={6} className="p-8 text-center">
                  <div className="bg-gray-50 rounded-2xl border border-dashed border-gray-200 p-8">
                    <span className="material-symbols-outlined text-4xl text-gray-400 mb-2">
                      person_search
                    </span>
                    <p className="text-gray-500 font-medium">
                      এই স্থানে কোনো প্রার্থী পাওয়া যায়নি।
                    </p>
                    <p className="text-xs text-gray-400 mt-1">
                      দয়া করে অন্য এলাকা নির্বাচন করে পুনরায় দেখুন।
                    </p>
                  </div>
                </td>
              </tr>
            ) : (
              filteredCandidates.slice(0, visibleCount).map((candidate) => {
                const isSelected = selectedCandidates.includes(candidate.id);
                return (
                  <tr
                    key={candidate.id}
                    onClick={() => toggleCandidateSelection(candidate.id)}
                    className={`hover:bg-blue-50/30 transition-colors cursor-pointer ${isSelected ? 'bg-blue-50/30' : ''}`}
                  >
                    <td className="p-4 text-center">
                      <input
                        type="checkbox"
                        checked={isSelected}
                        onChange={() => {}}
                        className="w-4 h-4 pointer-events-none"
                      />
                    </td>
                    <td className="p-4">
                      <div className="flex items-center gap-4">
                        <div className="relative">
                          <Image
                            src={candidate.photo_file ?? ''}
                            alt={candidate?.name_bn ?? ''}
                            width={48}
                            height={48}
                            className="w-12 h-12 rounded-full object-cover border-2 border-blue-100"
                          />
                          <div className="absolute -bottom-1 -right-1 bg-white rounded-full p-0.5 shadow-sm border border-gray-100">
                            <img
                              src={getPartySymbol(
                                candidate?.party?.name_bn ?? '',
                                candidate?.party?.symbol ?? '',
                              )}
                              className="w-3.5 h-3.5 object-contain"
                              alt="Symbol"
                            />
                          </div>
                        </div>
                        <div>
                          <Link
                            href={`/candidate/${candidate.id}`}
                            onClick={(event) => event.stopPropagation()}
                            className="font-bold text-blue-950 hover:text-blue-700 transition-colors"
                          >
                            {candidate?.name_bn ?? ''}
                          </Link>
                          <p className="text-xs text-gray-500">{candidate?.party?.name_bn ?? ''}</p>
                        </div>
                      </div>
                    </td>
                    <td className="p-4">
                      <div className="flex items-center gap-2">
                        <Image
                          src={getPartySymbol(
                            candidate?.party?.name_bn ?? '',
                            candidate?.party?.symbol ?? '',
                          )}
                          alt={candidate?.party?.name_bn ?? ''}
                          width={24}
                          height={24}
                          className="w-6 h-6 object-contain"
                        />
                        <span className="text-gray-700">{candidate?.party?.name_bn ?? ''}</span>
                      </div>
                    </td>
                    <td className="p-4 text-sm text-gray-600">
                      {candidate?.educational_qualification ?? ''}
                    </td>
                    <td className="p-4 text-sm text-gray-600">{candidate.occupation}</td>
                    <td className="p-4 text-right font-bold text-blue-700">
                      {toBn(
                        makeAmountShortar(+candidate?.tax_return_info?.total_visible_income || 0)
                          .value,
                      )}
                      {''}
                      {
                        makeAmountShortar(+candidate?.tax_return_info?.total_visible_income || 0)
                          .type
                      }
                    </td>
                  </tr>
                );
              })
            )}
            {filteredCandidates.length > visibleCount && (
              <tr>
                <td colSpan={6} className="p-4 text-center">
                  <button
                    onClick={() => setVisibleCount((prev) => prev + 10)}
                    className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-medium transition flex items-center gap-2 mx-auto"
                  >
                    <span className="material-symbols-outlined text-lg">expand_more</span>
                    আরও দেখুন
                  </button>
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>

      <div id="mobile-candidate-list" className="md:hidden space-y-4">
        {filteredCandidates.length === 0 ? (
          <div className="bg-gray-50 rounded-2xl border border-dashed border-gray-200 p-8 text-center">
            <span className="material-symbols-outlined text-4xl text-gray-400 mb-2">
              person_search
            </span>
            <p className="text-gray-500 font-medium">এই স্থানে কোনো প্রার্থী পাওয়া যায়নি।</p>
            <p className="text-xs text-gray-400 mt-1">
              দয়া করে অন্য এলাকা নির্বাচন করে পুনরায় দেখুন।
            </p>
          </div>
        ) : (
          filteredCandidates.slice(0, visibleCount).map((candidate) => {
            const isSelected = selectedCandidates.includes(candidate.id);
            return (
              <div
                key={candidate.id}
                onClick={() => toggleCandidateSelection(candidate.id)}
                className={`bg-white p-1.5 rounded-xl shadow-sm border-2 transition-all cursor-pointer ${
                  isSelected ? 'border-blue-500 bg-blue-50/50' : 'border-blue-50'
                }`}
              >
                <div className="flex items-center justify-between mb-1">
                  <div className="flex items-center gap-1.5">
                    <div className="relative">
                      <Image
                        src={candidate.photo_file ? candidate.photo_file : ''}
                        alt={candidate?.name_bn ?? ''}
                        width={36}
                        height={36}
                        className="w-9 h-9 rounded-full object-cover border border-blue-100"
                      />
                      <div className="absolute -bottom-1 -right-1 bg-white rounded-full p-0.5 shadow-sm border border-gray-100">
                        <Image
                          src={getPartySymbol(
                            candidate?.party?.name_bn ?? '',
                            candidate?.party?.symbol ?? '',
                          )}
                          width={24}
                          height={24}
                          className="w-3 h-3 object-contain"
                          alt="Symbol"
                        />
                      </div>
                    </div>
                    <div>
                      <Link
                        href={`/candidate/${candidate.id}`}
                        onClick={(event) => event.stopPropagation()}
                        className="font-bold text-blue-950 text-[15px] leading-tight hover:text-blue-700 transition-colors"
                      >
                        {candidate?.name_bn ?? ''}
                      </Link>
                      <p className="text-[12px] text-gray-500 leading-none">
                        {candidate?.party?.name_bn ?? ''}
                      </p>
                    </div>
                  </div>
                  <input
                    type="checkbox"
                    checked={isSelected}
                    onChange={() => {}}
                    className="w-4 h-4 pointer-events-none"
                  />
                </div>
                <div className="grid grid-cols-2 gap-0.5 text-[13px] text-gray-600">
                  <div className="flex items-center gap-1 bg-gray-50 p-1 rounded-lg">
                    <span className="material-symbols-outlined text-[14px] text-blue-600">
                      school
                    </span>
                    <span className="leading-tight truncate">
                      {candidate.educational_qualification}
                    </span>
                  </div>
                  <div className="flex items-center gap-1 bg-gray-50 p-1 rounded-lg">
                    <span className="material-symbols-outlined text-[14px] text-blue-600">
                      work
                    </span>
                    <span className="leading-tight truncate">{candidate.occupation}</span>
                  </div>
                  <div className="col-span-2 flex items-center justify-between bg-blue-50/50 p-1 rounded-lg">
                    <span className="font-medium text-[11px]">মোট সম্পদ</span>
                    <span className="font-bold text-blue-700 flex items-center gap-0.5 text-[14px]">
                      {toBn(
                        makeAmountShortar(+candidate?.tax_return_info?.total_visible_income || 0)
                          .value,
                      )}{' '}
                      {
                        makeAmountShortar(+candidate?.tax_return_info?.total_visible_income || 0)
                          .type
                      }
                    </span>
                  </div>
                </div>
              </div>
            );
          })
        )}
        {filteredCandidates.length > visibleCount && (
          <div className="flex justify-center mt-4">
            <button
              onClick={() => setVisibleCount((prev) => prev + 10)}
              className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-medium transition flex items-center gap-2"
            >
              <span className="material-symbols-outlined text-lg">expand_more</span>
              আরও দেখুন
            </button>
          </div>
        )}
      </div>
    </section>
  );
};

export default ComparisonListView;