import { useEffect } from 'react';
import { CheckCircle, XCircle, RotateCcw, ArrowRight } from 'lucide-react';
import PropTypes from 'prop-types';
import { ATIVIDADE_STATES } from '../../contexts/LetramentoStateContext';

export default function AtividadeStatusModal({ status, isOpen, onTryAgain, onDismiss, nextAtividadeId, onNextAtividade }) {
  const isSuccess = status === ATIVIDADE_STATES.SUCCESS || status === ATIVIDADE_STATES.COMPLETED;
  const isFailure = status === ATIVIDADE_STATES.FAILURE;

  useEffect(() => {
    if (!isOpen || (!isSuccess && !isFailure)) return undefined;

    const handleKeyDown = (event) => {
      if (event.key === 'Escape') {
        event.preventDefault();
        onDismiss();
        return;
      }

      if (event.key === 'Enter' && isSuccess && nextAtividadeId && onNextAtividade) {
        event.preventDefault();
        onNextAtividade();
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [isFailure, isOpen, isSuccess, nextAtividadeId, onDismiss, onNextAtividade]);

  if (!isOpen || (!isSuccess && !isFailure)) return null;

  return (
    <div className="fixed inset-0 z-[70] bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
      <div
        className="bg-white/95 backdrop-blur-sm border border-white/30 rounded-xl shadow-xl w-full max-w-md flex flex-col"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Header — identical to SeletorDeFases */}
        <div className="flex items-center justify-between p-6 border-b border-white/20">
          <div className="flex items-center space-x-3">
            <div className={`w-8 h-8 rounded-full flex items-center justify-center ${isSuccess ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-500'}`}>
              {isSuccess ? <CheckCircle className="w-5 h-5" /> : <XCircle className="w-5 h-5" />}
            </div>
            <h3 className="text-xl font-title font-bold text-gray-800">
              {isSuccess ? 'Atividade concluída' : 'Tente novamente'}
            </h3>
          </div>
        </div>

        {/* Body */}
        <div className="p-6 flex flex-col items-center gap-3 text-center">
          <p className="text-gray-700 text-base">
            {isSuccess
              ? 'Você concluiu esta atividade com sucesso.'
              : 'Não desanime. Você consegue tentar outra vez.'}
          </p>
        </div>

        {/* Footer — identical to SeletorDeFases */}
        <div className="p-4 border-t border-white/20 flex justify-center gap-3 flex-wrap">
          {isFailure && (
            <button
              onClick={onTryAgain}
              className="flex items-center gap-2 bg-brand-100 text-black px-6 py-2 rounded-full font-semibold shadow transition-all duration-200 hover:bg-brand-200"
            >
              <RotateCcw className="w-4 h-4" />
              Tentar Novamente
            </button>
          )}
          {isSuccess && nextAtividadeId && onNextAtividade && (
            <button
              onClick={onNextAtividade}
              className="flex items-center gap-2 bg-green-100 text-black px-6 py-2 rounded-full font-semibold shadow transition-all duration-200 hover:bg-green-200"
            >
              Próxima Atividade
              <ArrowRight className="w-4 h-4" />
            </button>
          )}
          <button
            onClick={onDismiss}
            className="bg-gray-100 text-black px-6 py-2 rounded-full font-semibold shadow transition-all duration-200 hover:bg-gray-200"
          >
            Voltar à Lista
          </button>
        </div>
      </div>
    </div>
  );
}

AtividadeStatusModal.propTypes = {
  status:          PropTypes.string.isRequired,
  isOpen:          PropTypes.bool.isRequired,
  onTryAgain:      PropTypes.func.isRequired,
  onDismiss:       PropTypes.func.isRequired,
  nextAtividadeId: PropTypes.string,
  onNextAtividade: PropTypes.func,
};
