"use client";

import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { JWTPayload } from "@/lib/auth";

export default function NavBar({ user }: { user: JWTPayload }) {
  const pathname = usePathname();
  const router = useRouter();

  const isManagerOrAdmin = user.role === "admin" || user.role === "manager";

  const handleLogout = async () => {
    await fetch("/api/auth/logout", { method: "POST" });
    router.push("/login");
    router.refresh();
  };

  const navItemClass = (path: string) => `
    px-3 py-2 rounded-md text-sm font-medium
    ${pathname.startsWith(path) 
      ? "bg-blue-800 text-white" 
      : "text-blue-100 hover:bg-blue-600 hover:text-white"}
  `;

  return (
    <nav className="bg-blue-700 dark:bg-blue-900 shadow-md">
      <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="flex-shrink-0 flex items-center text-gray-300 hover:text-gray-100 font-bold text-xl">
              Marjinvest
            </Link>
            <div className="hidden md:ml-10 md:flex md:space-x-4">
              {isManagerOrAdmin && (
                <Link href="/dashboard" className={navItemClass("/dashboard")}>
                  Dashboard
                </Link>
              )}
              <Link href="/leads" className={navItemClass("/leads")}>
                Leadler
              </Link>
              {isManagerOrAdmin && (
                <>
                  <Link href="/reports" className={navItemClass("/reports")}>
                    Raporlar
                  </Link>
                  <Link href="/users" className={navItemClass("/users")}>
                    Kullanıcılar
                  </Link>
                </>
              )}
            </div>
          </div>
          <div className="flex items-center">
            <div className="text-sm text-blue-100 mr-4">
              {user.fullName} ({user.role})
            </div>
            <button
              onClick={handleLogout}
              className="bg-blue-800 hover:bg-blue-600 text-white px-3 py-2 rounded-md text-sm font-medium transition-colors"
            >
              Çıkış
            </button>
          </div>
        </div>
      </div>
      
      {/* Mobile nav could go here */}
    </nav>
  );
}