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

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

interface ClassroomStrategyDetailModalProps {
  readonly strategy: Strategy | null;
  readonly isFavorite: boolean;
  readonly onToggleFavorite: (id: string) => void;
  readonly onClose: () => void;
}

export function ClassroomStrategyDetailModal({
  strategy,
  isFavorite,
  onToggleFavorite,
  onClose,
}: ClassroomStrategyDetailModalProps) {
  if (!strategy) {
    return null;
  }

  return (
    <div
      className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4"
      role="presentation"
      onClick={onClose}
    >
      <div
        className="bg-slate-800 rounded-2xl max-w-lg w-full max-h-[80vh] overflow-y-auto shadow-2xl shadow-black/40 border border-slate-700/50"
        role="dialog"
        aria-modal="true"
        aria-labelledby={`strategy-detail-${strategy.id}`}
        onClick={(event) => event.stopPropagation()}
      >
        <div className="h-52 overflow-hidden relative rounded-t-2xl">
          <img src={strategy.image} alt={strategy.title} className="w-full h-full object-cover" />
          <div className="absolute inset-0 bg-gradient-to-t from-slate-800/90 via-transparent to-transparent" />
          <Button
            type="button"
            onClick={onClose}
            aria-label="Close strategy details"
            className="absolute top-3 right-3 w-8 h-8 bg-slate-900/60 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-slate-900/80 text-white p-0"
          >
            <X size={16} />
          </Button>
        </div>
        <div className="p-6 space-y-4">
          <div className="flex gap-2">
            <span className={`px-2.5 py-1 rounded-lg text-xs font-semibold border ${CLASSROOM_SUPPORT_CATEGORY_COLOR_CLASSES[strategy.category]}`}>
              {strategy.category.replace('-', ' ')}
            </span>
            <span className="px-2.5 py-1 rounded-lg text-xs font-semibold bg-slate-700/50 text-slate-300 border border-slate-600/30">{strategy.ageGroup}</span>
          </div>
          <h3 id={`strategy-detail-${strategy.id}`} className="text-xl font-bold text-white">{strategy.title}</h3>
          <p className="text-sm text-slate-300 leading-relaxed">{strategy.description}</p>
          {strategy.implementationTip && (
            <div className="bg-emerald-500/10 rounded-xl p-4 border border-emerald-500/20">
              <h4 className="font-semibold text-emerald-400 text-sm mb-1">Implementation Tip</h4>
              <p className="text-sm text-slate-300">{strategy.implementationTip}</p>
            </div>
          )}
          <div className="flex gap-3">
            <Button
              type="button"
              onClick={() => {
                onToggleFavorite(strategy.id);
                onClose();
              }}
              leadingIcon={<Bookmark size={16} />}
              className="flex-1 flex items-center justify-center gap-2 px-4 py-2.5 bg-amber-500/15 text-amber-400 rounded-xl font-medium text-sm hover:bg-amber-500/25 transition-colors border border-amber-500/20"
            >
              {isFavorite ? 'Remove from Favorites' : 'Save to Favorites'}
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}
