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


import { useState } from "react";
import PropTypes from "prop-types";
import { useNavigate } from "react-router-dom";
import logo from "../../assets/logo_decoda.svg";
import { Code, Puzzle } from "lucide-react";
import { ArrowLeft } from "lucide-react";

export default function GameNavBar({ title, label, type = "blocks", thumbnail, icon }) {
  const titleToShow = title ?? label;
  const navigate = useNavigate();
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  const renderIcon = (size = "w-6 h-6 lg:w-8 lg:h-8") => {
    if (type === "code") {
      return <Code className={`text-white ${size}`} />;
    } else {
      return <Puzzle className={`text-white ${size}`} />;
    }
  };



  return (
    <>
      {/* Navbar normal - oculto em telas pequenas */}
      <nav className="bg-white sticky top-0 z-50 border-b border-white/20 shadow-lg hidden sm:block">
        <div className="flex items-center justify-between px-5 py-2 lg:py-3 lg:px-10">
          <div className="flex items-center space-x-4">
            <div
              onClick={() => navigate("/")}
              title="Ir para Home"
              className="header-logo group cursor-pointer flex items-center space-x-2"
            >
              <img
                src={logo}
                alt="Decoda Logo"
                className="h-[30px] transition-transform duration-200 group-hover:scale-110"
              />
            </div>
          </div>
          <div className="flex-1 flex justify-center"></div>
          <div className="flex items-center space-x-2">
            <div className="flex items-center space-x-3">
              {renderIcon("w-8 h-8")}
              <h5 className="text-brand-500 font-title font-semibold text-3xl">{titleToShow}</h5>
              {thumbnail && (
                <img
                  src={thumbnail}
                  alt={titleToShow}
                  className="h-8 w-8 object-cover rounded-lg"
                  onError={(e) => {
                    e.target.style.display = 'none';
                  }}
                />
              )}
            </div>
          </div>
        </div>
      </nav>

      {/* Botão menu flutuante - só aparece em telas pequenas */}
      <button
        className="fixed top-4 right-4 z-50 sm:hidden bg-white/80 rounded-full p-2 shadow-lg"
        aria-label="Abrir menu"
        onClick={() => setIsMenuOpen(true)}
      >
        <svg width="32" height="32" fill="none" viewBox="0 0 24 24">
          <rect x="4" y="7" width="16" height="2" rx="1" fill="#a21caf" />
          <rect x="4" y="11" width="16" height="2" rx="1" fill="#a21caf" />
          <rect x="4" y="15" width="16" height="2" rx="1" fill="#a21caf" />
        </svg>
      </button>

      {/* Overlay do menu mobile */}
      {isMenuOpen && (
        <div className="fixed inset-0 z-50 bg-black bg-opacity-70  flex flex-col items-end ">
          <div className="bg-gray-100 h-full p-5 w-[60%] flex flex-col justify-between">
            <div>
              <div className="w-full flex justify-end">
                <button
                  onClick={() => setIsMenuOpen(false)}
                  className="text-brand-500 text-3xl"
                  aria-label="Fechar menu"
                >
                  &times;
                </button>
              </div>
              <div className="flex items-center space-x-3">
                {type === "code" && <Code className="text-brand-500 size-6" />}
                {type === "blocks" && (
                  <Puzzle className="text-brand-500 size-5" />
                )}
                <h5 className="text-bold font-title font-semibold text-2xl">{titleToShow}</h5>
                {thumbnail && (
                  <img
                    src={thumbnail}
                    alt={titleToShow}
                    className="h-6 w-6 object-cover rounded-lg"
                    onError={(e) => {
                      e.target.style.display = 'none';
                    }}
                  />
                )}
              </div>
              <button
                onClick={() => {
                  setIsMenuOpen(false);
                  navigate("/");
                }}
                className="flex items-center gap-5 mt-10"
              >
                <ArrowLeft className="text-brand-500" />
                <span className="text-black font-bold text-base">Voltar</span>
              </button>
            </div>
            <button
              onClick={() => {
                setIsMenuOpen(false);
                navigate("/");
              }}
            >
              <img
                src={logo}
                alt="Decoda"
                className="h-[83px]"
                onError={(e) => {
                  e.target.style.display = "none";
                  e.target.nextSibling.style.display = "inline";
                }}
              />
            </button>
          </div>
        </div>
      )}
    </>
  );
}

GameNavBar.propTypes = {
  title: PropTypes.string,
  label: PropTypes.string,
  type: PropTypes.string,
  thumbnail: PropTypes.string,
  icon: PropTypes.string,
};
