// src/pages/Home/Home.jsx
// Régi PlayMenu-s oldal, "Home" néven

import { useEffect, useState } from "react"
import useRequireAuth from "../../hooks/useRequireAuth"
import HandleNavigate from "../../utils/HandleNavigate/HandleNavigate"
import Navbar from "../../components/Navbar/Navbar"
import Footer from "../../components/Footer/Footer.jsx"
import Background from "../../assets/backgrounds/Background.jsx"
import PlayMenu from "../../components/Landingpage/PlayMenu.jsx"
import { joinGame } from "../../api/gameApi.js"

export default function Home() {
  const { goLogin, goLobby, goChooseDeck } = HandleNavigate()
  // a hook inicializálja a user-t a localStorage-ból és visszaadja a state-et + settert
  const [user, setUser] = useRequireAuth({ redirect: false }) // no redirect on unauthenticated visitors
  const [isJoining, setIsJoining] = useState(false)

  // Join game handler - csatlakozás játékhoz kóddal
  const handleJoinGame = async (code, playerName) => {
    // playerName is now passed from PlayMenu (either logged in user or guest name)
    if (!playerName) {
      alert('Név megadása kötelező a játékhoz való csatlakozáshoz!');
      return;
    }

    setIsJoining(true)
    try {
      const joinData = {
        gameCode: code.toUpperCase(),
        playerName: playerName,
      }

      const response = await joinGame(joinData)
      
      // Backend returns game object directly
      if (response.gameToken) {
        localStorage.setItem('gameToken', response.gameToken)
      }
      
      goLobby({ gameCode: code.toUpperCase() })
    } catch (err) {
      const errorMsg = err.response?.data?.error || err.response?.data?.message || 'Nem sikerült csatlakozni a játékhoz'
      alert(errorMsg)
    } finally {
      setIsJoining(false)
    }
  }

  // Create game handler - új játék létrehozása
  const handleCreateGame = () => {
    if (!user) {
      alert('Kérlek először jelentkezz be!')
      goLogin()
      return
    }
    
    // Navigate to choose deck page to start game creation flow
    goChooseDeck()
  }

  const userObj = { name: user }

  // ha szükséges a user módosítása máshol: setUser("újnév") automatikusan menti localStorage-be

  return (
    <div className="w-full min-h-screen flex flex-col relative overflow-x-hidden">
      <div className="fixed inset-0 -z-10 pointer-events-none">
        <Background />
      </div>
      <div className="fixed top-0 left-0 right-0 z-30">
        <Navbar />
      </div>
      <main className="flex-1 min-h-[calc(100vh-64px)] flex mt-[64px] flex-col items-center justify-center px-2 sm:px-4">
        <PlayMenu
          onJoinGame={handleJoinGame}
          onCreateGame={handleCreateGame}
          user={userObj}
          setUser={setUser}
        />
        {/* Ide jöhetnek további szekciók, ha szeretnél még tartalmat */}
      </main>
      <Footer />
    </div>
  )
}