import { Bookmark, BookmarkPlus } from 'lucide-react';

import type { KeyboardEvent } from 'react';

import { Button } from '@/components/ui/button';
import {
  CLASSROOM_SUPPORT_CATEGORY_COLOR_CLASSES,
  CLASSROOM_SUPPORT_ZONE_COLOR_CLASSES,
} from '@/shared/constants/classroomSupport';
import type { Strategy } from '@/shared/types/app';

interface ClassroomStrategyCardProps {
  readonly strategy: Strategy;
  readonly isFavorite: boolean;
  readonly onSelect: (strategy: Strategy) => void;
  readonly onToggleFavorite: (id: string) => void;
}

export function ClassroomStrategyCard({
  strategy,
  isFavorite,
  onSelect,
  onToggleFavorite,
}: ClassroomStrategyCardProps) {
  function openStrategy() {
    onSelect(strategy);
  }

  function handleKeyDown(event: KeyboardEvent<HTMLButtonElement>) {
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault();
      openStrategy();
    }
  }

  return (
    <div className="relative bg-slate-800/40 backdrop-blur-sm rounded-2xl border border-slate-700/40 overflow-hidden hover:border-slate-600/50 hover:shadow-xl hover:shadow-black/20 transition-all duration-300 hover:-translate-y-1 group">
      <button
        type="button"
        onClick={openStrategy}
        onKeyDown={handleKeyDown}
        aria-label={`View strategy: ${strategy.title}`}
        className="absolute inset-0 z-0 w-full h-full cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/50 focus-visible:ring-inset rounded-2xl"
      />
      <div className="h-40 overflow-hidden relative">
        <img src={strategy.image} alt={strategy.title} className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" />
        <div className="absolute inset-0 bg-gradient-to-t from-slate-900/80 via-transparent to-transparent" />
        <Button
          type="button"
          onClick={(event) => {
            event.stopPropagation();
            onToggleFavorite(strategy.id);
          }}
          aria-label={isFavorite ? 'Remove strategy from favorites' : 'Save strategy to favorites'}
          className="absolute top-2 right-2 z-10 w-8 h-8 bg-slate-900/60 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-slate-900/80 transition-colors p-0"
        >
          {isFavorite ? (
            <Bookmark size={16} className="text-amber-400 fill-amber-400" />
          ) : (
            <BookmarkPlus size={16} className="text-slate-300" />
          )}
        </Button>
        <div className="absolute bottom-2 left-2 flex gap-1.5">
          <span className={`px-2 py-0.5 rounded-lg text-[10px] font-semibold border ${CLASSROOM_SUPPORT_CATEGORY_COLOR_CLASSES[strategy.category]}`}>
            {strategy.category.replace('-', ' ')}
          </span>
          <span className={`px-2 py-0.5 rounded-lg text-[10px] font-semibold border ${CLASSROOM_SUPPORT_ZONE_COLOR_CLASSES[strategy.zone]}`}>
            {strategy.zone} zone
          </span>
        </div>
      </div>
      <div className="p-4">
        <h4 className="font-semibold text-white text-sm">{strategy.title}</h4>
        <p className="text-xs text-slate-400 mt-1 line-clamp-2">{strategy.description}</p>
        <div className="flex items-center justify-between mt-3">
          <span className="text-[10px] font-medium text-slate-500 bg-slate-700/50 px-2 py-1 rounded-lg border border-slate-600/30">{strategy.ageGroup}</span>
        </div>
      </div>
    </div>
  );
}
