"use client";

import Link from "next/link";
import { useSession, signOut } from "next-auth/react";
import PlayerStats from "./PlayerStats";

interface UserData {
  username: string;
  avatar: string | null;
  hp: number;
  maxHp: number;
  xp: number;
  maxXp: number;
  level: number;
}

interface NavigationProps {
  initialUserData?: UserData | null;
  initialIsAdmin?: boolean;
}

export default function Navigation({
  initialUserData,
  initialIsAdmin,
}: NavigationProps) {
  const { data: session } = useSession();

  // Utiliser initialUserData pour déterminer l'état de connexion pendant l'hydratation
  // Cela évite le clignottement au reload
  const isAuthenticated = initialUserData !== null || session !== null;
  const isAdmin = initialIsAdmin ?? session?.user?.role === "ADMIN";

  return (
    <nav className="w-full fixed top-0 left-0 z-50 px-8 py-3 bg-black/80 backdrop-blur-sm border-b border-gray-800/30">
      <div className="max-w-7xl mx-auto flex items-center justify-between">
        {/* Logo - Left */}
        <div className="flex flex-col">
          <div className="text-white text-xl font-gaming font-bold tracking-tight">
            GAME.OF.TECH
          </div>
          <div className="text-pixel-gold text-xs font-gaming-subtitle font-semibold flex items-center gap-1 tracking-wide">
            <span>✦</span>
            <span>Peaksys</span>
            <span>✦</span>
          </div>
        </div>

        {/* Navigation Links - Center */}
        <div className="flex items-center gap-6">
          <Link
            href="/"
            className="text-white hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest"
          >
            HOME
          </Link>
          <Link
            href="/events"
            className="text-white hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest"
          >
            EVENTS
          </Link>
          <Link
            href="/leaderboard"
            className="text-white hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest"
          >
            LEADERBOARD
          </Link>
          {isAdmin && (
            <Link
              href="/admin"
              className="text-pixel-gold hover:text-orange-400 transition text-xs font-normal uppercase tracking-widest"
            >
              ADMIN
            </Link>
          )}
        </div>

        {/* Right Side */}
        <div className="flex items-center gap-4">
          {isAuthenticated ? (
            <>
              <PlayerStats initialUserData={initialUserData} />
              <Link
                href="/profile"
                className="text-white hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest"
              >
                PROFIL
              </Link>
              <button
                onClick={() => signOut()}
                className="text-gray-400 hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest"
              >
                Déconnexion
              </button>
            </>
          ) : (
            <>
              <Link
                href="/login"
                className="text-white hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest"
              >
                Connexion
              </Link>
              <Link
                href="/register"
                className="px-4 py-2 border border-pixel-gold/50 bg-black/60 text-white uppercase text-xs tracking-widest rounded hover:bg-pixel-gold/10 hover:border-pixel-gold transition"
              >
                Inscription
              </Link>
            </>
          )}
        </div>
      </div>
    </nav>
  );
}
