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


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

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

const SucessoModal = ({
  isOpen,
  onClose,
  onNextPhase,
  generatedCode,
  canGoNext,
}) => {
  const handleNextPhase = () => {
    onClose();
    if (onNextPhase) {
      onNextPhase();
    }
  };

  return (
    <ModalBase isOpen={isOpen} onClose={onClose}>
      <ModalHeader
        title="Parabéns!"
        subTitle="Veja o código que foi gerado"
        variant="success"
        onClose={onClose}
      />

      <div className="flex-1 overflow-hidden flex flex-col">
        <div className="p-6 flex-1 overflow-auto">
          <CodeArea
            code={typeof generatedCode === "string" ? generatedCode : generatedCode?.codigo}
            variant="success"
          />

          <FeedbackBox title="O que aconteceu?" variant="success">
            <p>
              Os blocos que você conectou foram convertidos em código JavaScript
              real. Este é o mesmo tipo de código que os programadores usam para
              criar aplicações!
            </p>
          </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-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-full font-medium transition-colors"
        >
          Fechar
        </button>

        {canGoNext && (
          <button
            onClick={handleNextPhase}
            className="flex items-center space-x-2 px-6 py-3 rounded-full font-medium transition-all duration-200 shadow-md bg-green-100 hover:bg-green-200 text-black"
          >
            <span>Próxima Fase</span>
            <ChevronRight className="w-4 h-4" />
          </button>
        )}
      </div>
    </ModalBase>
  );
};

SucessoModal.propTypes = {
  isOpen: PropTypes.bool.isRequired,
  onClose: PropTypes.func.isRequired,
  onNextPhase: PropTypes.func,
  generatedCode: PropTypes.any,
  canGoNext: PropTypes.bool.isRequired,
};

export default SucessoModal;
