/**
 * @fileoverview React component for FalhaModal.jsx
 * 
 * @module components.game.FalhaModal
 */


import React from "react";
import PropTypes from "prop-types";
import { RefreshCw } from "lucide-react";

import { ModalBase } from "./modal/ModalBase";
import { ModalHeader } from "./modal/ModalHeader";
import { CodeArea } from "./modal/CodeArea";
import { FeedbackBox } from "./modal/FeedbackBox";

const FalhaModal = ({
  isOpen,
  onClose,
  onRetry,
  customMessage,
  currentPhase,
  generatedCode,
}) => {
  const handleRetry = () => {
    onClose();
    if (onRetry) {
      onRetry();
    }
  };

  const mensagemExibida =
    customMessage ??
    "Ops! Parece que algo não funcionou como esperado. Tente novamente!";

  return (
    <ModalBase isOpen={isOpen} onClose={onClose}>
      <ModalHeader
        title="Quase lá! Tente novamente"
        subTitle={`Fase ${currentPhase}`}
        variant="failure"
        onClose={onClose}
      />

      <div className="flex-1 overflow-hidden flex flex-col">
        <div className="p-6 flex-1 overflow-auto">
          <div className="mb-6 p-4 bg-red-50 border-l-4 border-red-500 rounded-r-lg">
            <p className="text-red-800 font-medium">{mensagemExibida}</p>
          </div>

          <CodeArea
            title="Seu Código Atual"
            code={generatedCode}
            variant="failure"
          />

          <FeedbackBox title="Dicas para o Desafio" variant="failure">
            <ul className="text-amber-800 text-sm space-y-1 ml-4 list-disc">
              <li>Revise o enunciado.</li>
              <li>Verifique se os blocos estão corretamente conectados.</li>
              <li>
                Certifique-se de que a lógica atende a todos os requisitos da
                fase.
              </li>
            </ul>
          </FeedbackBox>
        </div>
      </div>

      {/* 3. Rodapé (Botões de Ação) */}
      <div className="p-6 border-t border-gray-200 flex justify-between items-center bg-gray-50">
        <button
          onClick={onClose}
          className="px-6 py-2 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-full font-medium transition-colors"
        >
          Fechar
        </button>

        <button
          onClick={handleRetry}
          className="flex items-center space-x-2 px-6 py-3 rounded-full font-medium transition-all duration-200 shadow-md bg-red-500 hover:bg-red-600 text-white"
        >
          <RefreshCw className="w-4 h-4" />
          <span>Tentar Novamente</span>
        </button>
      </div>
    </ModalBase>
  );
};

FalhaModal.propTypes = {
  isOpen: PropTypes.bool.isRequired,
  onClose: PropTypes.func.isRequired,
  onRetry: PropTypes.func,
  customMessage: PropTypes.string,
  currentPhase: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  generatedCode: PropTypes.string,
};

export default FalhaModal;
