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, 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 handleJoin = () => {
    if (!joinCode.trim()) {
      setError("Add meg a játék kódját!")
      return
    }
    setError("")
    onJoinGame(joinCode)
  }

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

  // 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-8 md:my-16 flex flex-col md:flex-row items-center justify-center rounded-2xl md: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-6 md:py-10 md:pl-10">
        <div className="w-[200px] h-[200px] sm:w-[300px] sm:h-[300px] md:w-[420px] md:h-[420px]">
          <LogoCard
            imageSrc={logoImg}
            containerHeight="100%"
            containerWidth="100%"
            imageHeight="100%"
            imageWidth="100%"
            rotateAmplitude={7}
            scaleOnHover={1.03}
            showMobileWarning={false}
            showTooltip={false}
            displayOverlayContent={false}
          />
        </div>
      </div>

      {/* Jobb oldali panel */}
      <div className="flex-1 w-full flex items-center justify-center px-4 sm:px-6 md:px-12 py-6 md:py-8">
        <div
          className="w-full max-w-md rounded-xl md:rounded-2xl p-4 sm:p-6 md:p-8 flex flex-col gap-4 md: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-2 md:gap-3">
                <div
                  className="w-8 h-8 md:w-10 md:h-10 rounded-full flex items-center justify-center text-xs md:text-sm font-semibold"
                  style={{ background: "rgba(34,197,94,0.12)", color: "var(--color-mint)" }}
                >
                  {initials}
                </div>
                <div className="text-xl sm:text-2xl md: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-2 md:mb-3 text-sm md:text-base 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-2 md:mb-3 text-sm md:text-base 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-3 md:mt-4">
              <ButtonDark text="Csatlakozás" type="button" onClick={handleJoin} width="w-full" />
            </div>
          </div>
          {username ? (
            <div className="border-t border-white/10 pt-3 md:pt-4">
              {username && (
                <div>
                  <h3 className="font-semibold mb-2 md:mb-3 text-sm md:text-base 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