import type { KeyboardEvent } from 'react';
import { Play, Star } from 'lucide-react';

import { getSignLanguageVideoDurationSeconds } from '@/business/sign-language/selectors';
import { SIGN_LANGUAGE_CATEGORY_BADGE_CLASSES } from '@/shared/constants/signLanguage';
import type { SignItem } from '@/shared/types/app';
import { cn } from '@/lib/utils';

interface SignLanguageCardProps {
  readonly sign: SignItem;
  readonly isLearned: boolean;
  readonly onSelect: (id: string) => void;
}

export function SignLanguageCard({
  sign,
  isLearned,
  onSelect,
}: SignLanguageCardProps) {
  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault();
      onSelect(sign.id);
    }
  }

  return (
    <div
      role="button"
      tabIndex={0}
      onClick={() => onSelect(sign.id)}
      onKeyDown={handleKeyDown}
      className={cn(
        'group bg-white rounded-2xl border shadow-sm overflow-hidden cursor-pointer hover:shadow-lg transition-all duration-300 hover:-translate-y-1 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400',
        isLearned ? 'border-emerald-200 ring-1 ring-emerald-100' : 'border-violet-100',
      )}
      aria-label={`Watch sign language demonstration for ${sign.word}`}
    >
      <div className="aspect-[4/5] overflow-hidden relative bg-gradient-to-br from-slate-100 to-slate-50">
        <img
          src={sign.image}
          alt={`Sign language for "${sign.word}"`}
          className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
        />

        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-all duration-300 flex items-center justify-center">
          <div className="w-12 h-12 rounded-full bg-white/0 group-hover:bg-white/90 flex items-center justify-center transition-all duration-300 scale-50 group-hover:scale-100 opacity-0 group-hover:opacity-100 shadow-lg">
            <Play size={20} className="text-indigo-600 ml-0.5" fill="currentColor" />
          </div>
        </div>

        {isLearned && (
          <div className="absolute top-2 right-2 w-7 h-7 bg-emerald-500 rounded-full flex items-center justify-center shadow-sm">
            <Star size={13} className="text-white fill-white" />
          </div>
        )}

        <span className={cn(
          'absolute bottom-2 left-2 px-2 py-0.5 rounded-lg text-[10px] font-semibold',
          SIGN_LANGUAGE_CATEGORY_BADGE_CLASSES[sign.category],
        )}
        >
          {sign.category.replace('-', ' ')}
        </span>

        <div className="absolute bottom-2 right-2 flex items-center gap-1 px-2 py-0.5 bg-black/50 backdrop-blur-sm rounded-lg">
          <Play size={8} className="text-white" fill="white" />
          <span className="text-[9px] text-white font-medium">
            {getSignLanguageVideoDurationSeconds(sign)}s
          </span>
        </div>
      </div>

      <div className="p-3 text-center">
        <h4 className="font-bold text-gray-800 text-lg">{sign.word}</h4>
        <p className="text-[10px] text-gray-400 mt-0.5 line-clamp-1">{sign.description}</p>
        <p className="text-[10px] text-indigo-500 font-medium mt-1 opacity-0 group-hover:opacity-100 transition-opacity">
          Watch demonstration
        </p>
      </div>
    </div>
  );
}
