SerpentRace/SerpentRace_Frontend/src/components/Landingpage/PlayMenu.jsx

import React, { useState } from "react"
import { useNavigate } from "react-router-dom"
import LogoCard from "../../assets/pictures/LogoCard.jsx"
import logoImg from "../../assets/pictures/Logo.png" // <-- EZT ADD HOZZÁ
import ButtonDark from "../Buttons/ButtonDark.jsx"
import InputBoxDark from "../Inputs/InputBoxDark.jsx"

const PlayMenu = ({ onJoinGame, onCreateGame, user, setUser }) => {
  const [joinCode, setJoinCode] = useState("")
  const [error, setError] = useState("")
  const [guestName, setGuestName] = useState("")
  const [guestError, setGuestError] = useState("")

  // gyors username kiolvasás (ha a parent objektum user={ { name: ... } } küldi)
  const username = user?.name ?? null
  const navigate = useNavigate()

  const handleJoin = () => {
    if (!joinCode.trim()) {
      setError("Add meg a játék kódját!")
      return
    }
    setError("")
    onJoinGame(joinCode)
  }

  const handleCreate = () => {
    // determine the name we will pass: logged in username or guestName
    const nameToSend = username ?? guestName?.trim()

    if (!nameToSend) {
      setGuestError("Adj meg egy nevet, vagy jelentkezz be!")
      return
    }

    // if parent provided a setter, set guest as current user (optional)
    if (!username && setUser) {
      setUser({ name: nameToSend })
    }

    // Do NOT call onCreateGame here to avoid any alert side-effects from parent.
    // Just navigate to choose deck and pass username via location.state
    navigate("/choosedeck", { state: { username: nameToSend } })
  }

  // egyszerű segéd a kezdobetűk kinyerésére
  const initials = username
    ? username
        .split(" ")
        .map((s) => s[0])
        .join("")
        .slice(0, 2)
        .toUpperCase()
    : ""

  return (
    <section
      className="w-[95%] max-w-6xl mx-auto my-16 flex flex-col md:flex-row items-center justify-center rounded-3xl shadow-2xl overflow-hidden"
      style={{
        background: "linear-gradient(90deg, var(--color-surface) 30%, var(--color-mint) 100%)",
      }}
    >
      {/* Bal oldali animáció/kép */}
      <div className="flex-1 flex items-center justify-center w-full h-full py-10 md:py-0 md:pl-10">
        <LogoCard
          imageSrc={logoImg}
          containerHeight="420px"
          containerWidth="420px"
          imageHeight="420px"
          imageWidth="420px"
          rotateAmplitude={7}
          scaleOnHover={1.03}
          showMobileWarning={false}
          showTooltip={false}
          displayOverlayContent={false}
        />
      </div>

      {/* Jobb oldali panel */}
      <div className="flex-1 w-full flex items-center justify-center px-6 md:px-12 py-8">
        <div
          className="w-full max-w-md rounded-2xl p-6 md:p-8 flex flex-col gap-6"
          style={{ background: "rgba(0,0,0,0.15)", backdropFilter: "blur(6px)" }}
        >
          <div className="flex items-center justify-between">
            {username ? (
              <div className="flex items-center gap-3">
                <div
                  className="w-10 h-10 rounded-full flex items-center justify-center text-sm font-semibold"
                  style={{ background: "rgba(34,197,94,0.12)", color: "var(--color-mint)" }}
                >
                  {initials}
                </div>
                <div className="text-[32px]" style={{ color: "var(--color-muted, #cbd5e1)" }}>
                  <span className="font-medium" style={{ color: "var(--color-text, #fff)" }}>
                    {username}
                  </span>
                </div>
              </div>
            ) : (
              <div className="w-full">
                <div className="font-semibold mb-3 text-text">Nincs bejelentkezve — játssz vendégként:</div>
                <InputBoxDark
                  type="text"
                  placeholder="Nickname..."
                  value={guestName}
                  onChange={(e) => {
                    setGuestName(e.target.value)
                    setGuestError("")
                  }}
                  width="w-full"
                />
                {guestError && <div className="text-xs mt-2 text-error">{guestError}</div>}
              </div>
            )}
          </div>

          <div>
            <h2 className="font-semibold mb-3 text-text">Csatlakozás játékhoz</h2>
            <div className={`${error ? "border border-error rounded-lg p-2" : ""}`}>
              <InputBoxDark
                type="text"
                placeholder="Játék kódja"
                value={joinCode}
                onChange={(e) => setJoinCode(e.target.value)}
                width="w-full"
              />
            </div>
            {error && <div className="text-xs mt-2 text-error">{error}</div>}
            <div className="mt-4">
              <ButtonDark text="Csatlakozás" type="button" onClick={handleJoin} width="w-full" />
            </div>
          </div>
          {username ? (
            <div className="border-t border-white/10 pt-4">
              {username && (
                <div>
                  <h3 className="font-semibold mb-3 text-text">Új játék létrehozása</h3>
                  <ButtonDark text="Játék létrehozása" type="button" onClick={handleCreate} width="w-full" />
                </div>
              )}
            </div>
          ) : null}
        </div>
      </div>
    </section>
  )
}

export default PlayMenu