"use client";

import Link from "next/link";
import { useSession, signOut } from "next-auth/react";
import { useState } from "react";
import { usePathname } from "next/navigation";
import PlayerStats from "@/components/profile/PlayerStats";
import { Button, ThemeToggle } from "@/components/ui";

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();
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const pathname = usePathname();

  // Ne pas afficher le profil sur les pages login/register
  const isAuthPage = pathname === "/login" || pathname === "/register";

  // Utiliser initialUserData pour déterminer l'état de connexion pendant l'hydratation
  // Cela évite le clignottement au reload
  // Vérifier explicitement que initialUserData n'est pas undefined
  const isAuthenticated =
    (initialUserData !== undefined && initialUserData !== null) ||
    session !== null;
  const isAdmin = initialIsAdmin ?? session?.user?.role === "ADMIN";

  return (
    <nav
      className="w-full fixed top-0 left-0 z-50 px-4 sm:px-8 py-3 backdrop-blur-sm border-b"
      style={{
        backgroundColor:
          "color-mix(in srgb, var(--background) 80%, transparent)",
        borderColor: "color-mix(in srgb, var(--gray-800) 30%, transparent)",
      }}
    >
      <div className="max-w-7xl mx-auto flex items-center justify-between">
        {/* Logo - Left */}
        <Link
          href="/"
          className="flex flex-col hover:opacity-80 transition-opacity"
        >
          <div
            className="text-lg sm:text-xl font-gaming font-bold tracking-tight"
            style={{ color: "var(--foreground)" }}
          >
            GAME.OF.TECH
          </div>
          <div
            className="text-[10px] sm:text-xs font-gaming-subtitle font-semibold flex items-center gap-1 tracking-wide"
            style={{ color: "var(--accent-color)" }}
          >
            <span>✦</span>
            <span>Peaksys</span>
            <span>✦</span>
          </div>
        </Link>

        {/* Navigation Links - Center (Desktop) */}
        <div className="hidden md:flex items-center gap-6">
          <Link
            href="/"
            className="transition text-xs font-normal uppercase tracking-widest"
            style={{ color: "var(--foreground)" }}
            onMouseEnter={(e) =>
              (e.currentTarget.style.color = "var(--accent-color)")
            }
            onMouseLeave={(e) =>
              (e.currentTarget.style.color = "var(--foreground)")
            }
          >
            HOME
          </Link>
          <Link
            href="/events"
            className="transition text-xs font-normal uppercase tracking-widest"
            style={{ color: "var(--foreground)" }}
            onMouseEnter={(e) =>
              (e.currentTarget.style.color = "var(--accent-color)")
            }
            onMouseLeave={(e) =>
              (e.currentTarget.style.color = "var(--foreground)")
            }
          >
            EVENTS
          </Link>
          <Link
            href="/leaderboard"
            className="transition text-xs font-normal uppercase tracking-widest"
            style={{ color: "var(--foreground)" }}
            onMouseEnter={(e) =>
              (e.currentTarget.style.color = "var(--accent-color)")
            }
            onMouseLeave={(e) =>
              (e.currentTarget.style.color = "var(--foreground)")
            }
          >
            LEADERBOARD
          </Link>
          {isAdmin && (
            <Link
              href="/admin"
              className="transition text-xs font-normal uppercase tracking-widest"
              style={{ color: "var(--accent-color)" }}
              onMouseEnter={(e) =>
                (e.currentTarget.style.color = "var(--accent)")
              }
              onMouseLeave={(e) =>
                (e.currentTarget.style.color = "var(--accent-color)")
              }
            >
              ADMIN
            </Link>
          )}
        </div>

        {/* Right Side */}
        <div className="flex items-center gap-2 sm:gap-4">
          {/* Theme Toggle */}
          <div className="hidden md:block">
            <ThemeToggle />
          </div>

          {/* PlayerStats - Hidden on mobile */}
          {isAuthenticated && !isAuthPage && (
            <div className="hidden lg:block">
              <PlayerStats initialUserData={initialUserData} />
            </div>
          )}

          {/* Desktop Auth Buttons */}
          <div className="hidden md:flex items-center gap-4">
            {isAuthenticated ? (
              <Button
                onClick={() => signOut()}
                variant="ghost"
                size="sm"
                className="text-xs font-normal"
              >
                Déconnexion
              </Button>
            ) : (
              <>
                <Link
                  href="/login"
                  className="transition text-xs font-normal uppercase tracking-widest"
                  style={{ color: "var(--foreground)" }}
                  onMouseEnter={(e) =>
                    (e.currentTarget.style.color = "var(--accent-color)")
                  }
                  onMouseLeave={(e) =>
                    (e.currentTarget.style.color = "var(--foreground)")
                  }
                >
                  Connexion
                </Link>
                <Link href="/register">
                  <Button variant="primary" size="sm" className="text-xs">
                    Inscription
                  </Button>
                </Link>
              </>
            )}
          </div>

          {/* Mobile Menu Button */}
          <button
            onClick={() => setIsMenuOpen(!isMenuOpen)}
            className="md:hidden transition p-2"
            style={{ color: "var(--foreground)" }}
            onMouseEnter={(e) =>
              (e.currentTarget.style.color = "var(--accent-color)")
            }
            onMouseLeave={(e) =>
              (e.currentTarget.style.color = "var(--foreground)")
            }
            aria-label="Toggle menu"
          >
            <svg
              className="w-6 h-6"
              fill="none"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              {isMenuOpen ? (
                <path d="M6 18L18 6M6 6l12 12" />
              ) : (
                <path d="M4 6h16M4 12h16M4 18h16" />
              )}
            </svg>
          </button>
        </div>
      </div>

      {/* Mobile Menu */}
      {isMenuOpen && (
        <div
          className="md:hidden absolute top-full left-0 w-full backdrop-blur-sm border-b"
          style={{
            backgroundColor:
              "color-mix(in srgb, var(--background) 95%, transparent)",
            borderColor: "color-mix(in srgb, var(--gray-800) 30%, transparent)",
          }}
        >
          <div className="px-4 py-4 flex flex-col gap-4">
            {/* Theme Toggle Mobile */}
            <div className="md:hidden">
              <ThemeToggle />
            </div>

            {/* Mobile Navigation Links */}
            <div className="flex flex-col gap-3">
              <Link
                href="/"
                onClick={() => setIsMenuOpen(false)}
                className="transition text-xs font-normal uppercase tracking-widest py-2"
                style={{ color: "var(--foreground)" }}
                onMouseEnter={(e) =>
                  (e.currentTarget.style.color = "var(--accent-color)")
                }
                onMouseLeave={(e) =>
                  (e.currentTarget.style.color = "var(--foreground)")
                }
              >
                HOME
              </Link>
              <Link
                href="/events"
                onClick={() => setIsMenuOpen(false)}
                className="transition text-xs font-normal uppercase tracking-widest py-2"
                style={{ color: "var(--foreground)" }}
                onMouseEnter={(e) =>
                  (e.currentTarget.style.color = "var(--accent-color)")
                }
                onMouseLeave={(e) =>
                  (e.currentTarget.style.color = "var(--foreground)")
                }
              >
                EVENTS
              </Link>
              <Link
                href="/leaderboard"
                onClick={() => setIsMenuOpen(false)}
                className="transition text-xs font-normal uppercase tracking-widest py-2"
                style={{ color: "var(--foreground)" }}
                onMouseEnter={(e) =>
                  (e.currentTarget.style.color = "var(--accent-color)")
                }
                onMouseLeave={(e) =>
                  (e.currentTarget.style.color = "var(--foreground)")
                }
              >
                LEADERBOARD
              </Link>
              {isAdmin && (
                <Link
                  href="/admin"
                  onClick={() => setIsMenuOpen(false)}
                  className="transition text-xs font-normal uppercase tracking-widest py-2"
                  style={{ color: "var(--accent-color)" }}
                  onMouseEnter={(e) =>
                    (e.currentTarget.style.color = "var(--accent)")
                  }
                  onMouseLeave={(e) =>
                    (e.currentTarget.style.color = "var(--accent-color)")
                  }
                >
                  ADMIN
                </Link>
              )}
            </div>

            {/* Mobile PlayerStats */}
            {isAuthenticated && !isAuthPage && (
              <div
                className="lg:hidden pt-2 border-t"
                style={{
                  borderColor:
                    "color-mix(in srgb, var(--gray-800) 30%, transparent)",
                }}
              >
                <PlayerStats initialUserData={initialUserData} />
              </div>
            )}

            {/* Mobile Auth Buttons */}
            <div
              className="flex flex-col gap-3 pt-2 border-t"
              style={{
                borderColor:
                  "color-mix(in srgb, var(--gray-800) 30%, transparent)",
              }}
            >
              {isAuthenticated ? (
                <Button
                  onClick={() => {
                    signOut();
                    setIsMenuOpen(false);
                  }}
                  variant="ghost"
                  size="sm"
                  className="text-xs font-normal text-left py-2"
                >
                  Déconnexion
                </Button>
              ) : (
                <>
                  <Link
                    href="/login"
                    onClick={() => setIsMenuOpen(false)}
                    className="transition text-xs font-normal uppercase tracking-widest py-2"
                    style={{ color: "var(--foreground)" }}
                    onMouseEnter={(e) =>
                      (e.currentTarget.style.color = "var(--accent-color)")
                    }
                    onMouseLeave={(e) =>
                      (e.currentTarget.style.color = "var(--foreground)")
                    }
                  >
                    Connexion
                  </Link>
                  <Link href="/register" onClick={() => setIsMenuOpen(false)}>
                    <Button
                      variant="primary"
                      size="sm"
                      className="text-xs w-full text-center"
                    >
                      Inscription
                    </Button>
                  </Link>
                </>
              )}
            </div>
          </div>
        </div>
      )}
    </nav>
  );
}
