import React, { useState } from "react"
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 }) => {
  const [joinCode, setJoinCode] = useState("")
  const [error, setError] = useState("")

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

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

  const handleCreate = () => {
    onCreateGame()
  }

  // egyszerű segéd az inicialishez
  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">
            <div>
              {username ? (
                <div className="flex items-center gap-3">
                  {/* opcionális kis info ikon helye, ha később kell */}
                  <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="text-sm text-gray-300">Nincs bejelentkezve</div>
              )}
            </div>
            {/* opcionális kis info ikon helye, ha később kell */}
          </div>

          <div>
            <h2 className="text-xl 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>

          <div className="border-t border-white/10 pt-4">
            {username && (
              <div>
                <h3 className="text-lg 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>
        </div>
      </div>
    </section>
  )
}

export default PlayMenu
