import Link from 'next/link';
import Image from 'next/image';
import { Party } from '@/lib/db/parties';

interface PartyCardProps {
  party: Party;
}

const PartyCard = ({ party }: PartyCardProps) => {
  return (
    <div className="group bg-white rounded-2xl sm:rounded-4xl border border-gray-100 shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden relative flex flex-col">
      {/* Top Decoration */}
      <div
        className={`h-14 sm:h-24 bg-linear-to-r ${party.gradient} relative overflow-hidden shrink-0`}
      >
        <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] opacity-20"></div>
      </div>

      <div className="px-4 sm:px-6 md:px-8 pb-3 sm:pb-6 md:pb-8 flex-1 flex flex-col">
        {/* Symbol */}
        <div className="w-16 h-16 sm:w-24 sm:h-24 bg-white rounded-full border-4 border-white shadow-md -mt-8 sm:-mt-12 mb-3 sm:mb-4 flex items-center justify-center relative z-10 mx-auto group-hover:scale-105 transition-transform duration-300 shrink-0">
          {party.symbolImg ? (
            <Image
              src={party.symbolImg}
              alt={party.symbolAbbr}
              width={56}
              height={56}
              className="w-10 h-10 sm:w-14 sm:h-14 object-contain"
            />
          ) : party.symbolIcon ? (
            <span className={`material-symbols-outlined text-3xl sm:text-4xl ${party.iconColor}`}>
              {party.symbolIcon}
            </span>
          ) : null}
        </div>

        <div className="text-center mb-3 sm:mb-4">
          <h2
            className={`text-lg sm:text-xl md:text-2xl font-bold text-gray-900 group-hover:text-${party.color}-700 transition-colors leading-tight`}
          >
            {party.name}
          </h2>
          <span
            className={`inline-block px-3 py-1 ${party.badgeColor} text-xs font-bold rounded-lg mt-2`}
          >
            {party.symbolAbbr}
          </span>
        </div>

        {/* Details Stats */}
        <div className="grid grid-cols-2 gap-2 sm:gap-3 mb-3 sm:mb-4">
          <div
            className={`bg-gray-50 p-2 sm:p-3 rounded-xl text-center hover:bg-${party.color}-50 transition-colors`}
          >
            <p className="text-xs text-gray-500 mb-1">প্রতিষ্ঠিত</p>
            <p className="font-bold text-gray-900 text-sm sm:text-base">{party.established}</p>
          </div>
          <div
            className={`bg-gray-50 p-2 sm:p-3 rounded-xl text-center hover:bg-${party.color}-50 transition-colors`}
          >
            <p className="text-xs text-gray-500 mb-1">{party.leaderTitle}</p>
            <p className="font-bold text-gray-900 text-sm">{party.leader}</p>
          </div>
        </div>

        {/* Info List */}
        <ul className="space-y-2 sm:space-y-2.5 mb-4 sm:mb-6 flex-1">
          <li className="flex items-center gap-2 sm:gap-2.5 text-sm text-gray-600">
            <span
              className={`material-symbols-outlined ${party.iconColor} text-lg sm:text-xl shrink-0`}
            >
              verified
            </span>
            <span className="leading-snug">আদর্শ: {party.ideology}</span>
          </li>
          <li className="flex items-center gap-2 sm:gap-2.5 text-sm text-gray-600">
            <span
              className={`material-symbols-outlined ${party.iconColor} text-lg sm:text-xl shrink-0`}
            >
              history_edu
            </span>
            <span className="leading-snug">
              {party.founder.includes(':') ? party.founder : `প্রতিষ্ঠাতা: ${party.founder}`}
            </span>
          </li>
          {party.office && (
            <li className="flex items-center gap-2 sm:gap-2.5 text-sm text-gray-600">
              <span
                className={`material-symbols-outlined ${party.iconColor} text-lg sm:text-xl shrink-0`}
              >
                {party.office.includes('প্রতীক') ? 'how_to_vote' : 'home_work'}
              </span>
              <span className="leading-snug">{party.office}</span>
            </li>
          )}
        </ul>

        <Link
          href={`/parties/${party.id}`}
          className={`w-full py-2.5 sm:py-3 rounded-xl bg-gray-900 text-white font-bold ${party.hoverColor} transition-colors flex items-center justify-center gap-2 mt-auto`}
        >
          বিস্তারিত তথ্য
          <span className="material-symbols-outlined text-lg">arrow_forward</span>
        </Link>
      </div>
    </div>
  );
};

export default PartyCard;