euchre_camp/src/components/Navigation.tsx

"use client"

import Link from "next/link"
import { useSession } from "./SessionProvider"
import { authClient } from "@/lib/auth-client"
import { useEffect, useState } from "react"

export default function Navigation() {
  const { session, loading } = useSession()
  const [userRole, setUserRole] = useState<string | null>(null)

  // Fetch user role whenever session changes
  useEffect(() => {
    const fetchUserRole = async () => {
      const userId = (session?.user as { id?: string })?.id
      if (userId) {
        try {
          const response = await fetch(`/api/users/${userId}/role`)
          if (response.ok) {
            const data = await response.json()
            setUserRole(data.role)
          } else {
            setUserRole(null)
          }
        } catch {
          setUserRole(null)
        }
      } else {
        setUserRole(null)
      }
    }

    fetchUserRole()
  }, [session])

  const handleLogout = async () => {
    await authClient.signOut()
    window.location.href = '/auth/login'
  }

  // Determine wordmark href based on session and role
  // If session exists but role is not yet loaded, use /rankings as default for players
  const wordmarkHref = session 
    ? (userRole === "club_admin" || userRole === "site_admin") 
      ? "/admin" 
      : "/rankings"
    : "/";

  return (
    <nav className="bg-white shadow-sm">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between h-16">
          <div className="flex items-center min-w-0 overflow-hidden">
            <Link 
              href="/wordmark-redirect" 
              className="text-xl font-bold text-gray-900 no-underline flex-shrink-0"
            >
              EuchreCamp
            </Link>
            <div className="hidden md:ml-6 md:flex md:space-x-8 min-w-0 overflow-hidden">
              <Link
                href="/rankings"
                className="border-transparent text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
              >
                Rankings
              </Link>
              {session && (
                <>
                  <Link
                    href="/admin/tournaments"
                    className="border-transparent text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
                  >
                    Tournaments
                  </Link>
                  {(userRole === "club_admin" || userRole === "site_admin") && (
                    <>
                      <Link
                        href="/admin"
                        className="border-transparent text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
                      >
                        Admin
                      </Link>
                      <Link
                        href="/admin/matches"
                        className="border-transparent text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
                      >
                        Matches
                      </Link>
                      <Link
                        href="/admin/players"
                        className="border-transparent text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
                      >
                        Players
                      </Link>
                      <Link
                        href="/admin/users"
                        className="border-transparent text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
                      >
                        Users
                      </Link>
                      <Link
                        href="/admin/matches/upload"
                        className="border-transparent text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
                      >
                        Upload Matches
                      </Link>
                    </>
                  )}
                </>
              )}
            </div>
          </div>
          <div className="flex items-center min-w-0 overflow-hidden">
            {loading ? (
              <div className="text-gray-500">Loading...</div>
            ) : session ? (
              <div className="flex items-center space-x-4">
                <span className="text-gray-700 text-sm font-medium">
                  {(session.user as { name?: string; email?: string })?.name || 
                   (session.user as { name?: string; email?: string })?.email}
                </span>
                <button
                  onClick={handleLogout}
                  className="text-gray-500 hover:text-gray-700 text-sm font-medium"
                >
                  Sign out
                </button>
              </div>
            ) : (
              <div className="flex items-center space-x-4">
                <Link
                  href="/auth/login"
                  className="text-gray-500 hover:text-gray-700 text-sm font-medium"
                >
                  Sign in
                </Link>
                <Link
                  href="/auth/register"
                  className="bg-green-600 text-white px-3 py-1 rounded-md text-sm font-medium hover:bg-green-700"
                >
                  Sign up
                </Link>
              </div>
            )}
          </div>
        </div>
      </div>
    </nav>
  )
}