"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)

  useEffect(() => {
    // Fetch user role from database if session exists
    if (session?.user?.id) {
      fetch(`/api/users/${session.user.id}/role`)
        .then(res => res.json())
        .then(data => setUserRole(data.role))
        .catch(() => setUserRole(null));
    }
  }, [session]);

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

  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">
            <Link href="/" className="text-xl font-bold text-gray-900">
              EuchreCamp
            </Link>
            <div className="hidden md:ml-6 md:flex md:space-x-8">
              <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" && (
                    <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>
                  )}
                </>
              )}
            </div>
          </div>
          <div className="flex items-center">
            {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?.name || session.user?.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>
  )
}
