import { ComparisonCategory } from '@/lib/db/comparision';
import { getPartySymbol } from '@/lib/utils';
import { CandidateComparison } from '@/type/candidate.type';
import Image from 'next/image';
import Link from 'next/link';
import React from 'react';

interface ComparisonTableProps {
  selectedData: CandidateComparison[];
  selectedCandidates: number[];
  comparisonSchema: ComparisonCategory[];
  collapsedGroups: Set<string>;
  toggleGroup: (groupId: string) => void;
}

export const ComparisonTable = ({
  selectedData,
  selectedCandidates,
  comparisonSchema,
  collapsedGroups,
  toggleGroup,
}: ComparisonTableProps) => {
  return (
    <div className="mb-4">
      <div id="comparison-table-container" className="overflow-x-auto">
        <table className="comparison-table bg-white rounded-xl overflow-hidden shadow-2xl border-2 border-blue-300 w-full">
          <thead>
            <tr>
              <th className="w-14 bg-slate-100 sticky left-0 z-10 text-blue-900 border-r-2 border-blue-300 shadow-[4px_0_8px_-2px_rgba(0,0,0,0.15)] text-[13px] md:text-sm p-0.5 md:p-4 font-bold">
                বৈশিষ্ট্য
              </th>
              {selectedData.map((c) => {
                const isSelectedForHighlight = selectedCandidates.includes(c?.id);
                return (
                  <th
                    key={c?.id}
                    className={`text-center align-bottom p-0.5 md:p-4 min-w-[85px] md:min-w-[150px] ${isSelectedForHighlight ? 'highlight-col' : ''}`}
                  >
                    <Link
                      href={`/candidate/${c?.id}`}
                      className="flex flex-col items-center gap-0 cursor-pointer hover:underline"
                    >
                      <div className="relative mb-1">
                        <Image
                          src={c?.photo_file || ''}
                          className="w-7 h-7 md:w-12 md:h-12 rounded-full object-cover border border-blue-100"
                          alt={c?.name_bn || ''}
                          width={28}
                          height={28}
                        />
                        <div className="absolute -bottom-0.5 -right-0.5 bg-white rounded-full p-0.5 shadow-sm border border-gray-100">
                          <Image
                            src={getPartySymbol(c?.party_name, c?.party_symbol)}
                            className="w-3 h-3 md:w-4 md:h-4 object-contain"
                            alt="Symbol"
                            width={12}
                            height={12}
                          />
                        </div>
                      </div>
                      <span className="text-[13px] md:text-sm font-bold text-blue-950 leading-tight">
                        {c?.name_bn || ''}
                      </span>
                    </Link>
                  </th>
                );
              })}
            </tr>
          </thead>
          <tbody>
            {comparisonSchema.map((group) => (
              <React.Fragment key={group.id}>
                <tr onClick={() => toggleGroup(group.id)} className="group-header cursor-pointer">
                  <td
                    colSpan={selectedData?.length + 1}
                    className="bg-blue-900 border-b border-blue-800/20 sticky left-0 z-10 p-0"
                  >
                    <div className="font-bold text-white py-0 px-2 md:py-0 md:px-3 text-[14px] md:text-sm flex items-center justify-between w-full">
                      <div className="flex items-center gap-2">
                        <span className="material-symbols-outlined text-blue-200 text-2xl md:text-3xl">
                          {group.icon}
                        </span>
                        <span>{group.title}</span>
                      </div>
                      <span
                        className={`material-symbols-outlined text-blue-200 transition-transform text-base md:text-2xl ${collapsedGroups.has(group.id) ? 'rotate-180' : ''}`}
                      >
                        expand_more
                      </span>
                    </div>
                  </td>
                </tr>
                {group.fields.map((field) => (
                  <tr
                    key={field.key}
                    className={`group-content transition-all ${collapsedGroups.has(group.id) ? 'hidden' : ''}`}
                  >
                    <td className="font-bold text-blue-950 text-[13px] md:text-sm border-r-2 border-blue-200 p-0.5 md:p-3 bg-slate-100 sticky left-0 z-10 shadow-[4px_0_8px_-2px_rgba(0,0,0,0.1)]">
                      {field.label}
                    </td>
                    {selectedData?.map((c) => {
                      const val = (c as any)[field.key];
                      const displayVal = field.format ? field.format(val) : val;
                      const isSelectedForHighlight = selectedCandidates.includes(c.id);
                      return (
                        <td
                          key={c?.id}
                          className={`text-center text-[13px] md:text-sm text-gray-800 p-0.25 md:p-3 whitespace-nowrap md:whitespace-normal ${isSelectedForHighlight ? 'highlight-col' : ''}`}
                          dangerouslySetInnerHTML={{ __html: displayVal }}
                        />
                      );
                    })}
                  </tr>
                ))}
              </React.Fragment>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};