"use client";

import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { useAuth } from "@/lib/auth";
import { Button } from "@/components/ui/Button";

const navLinks = [
  { href: "/dashboard", label: "Dashboard" },
  { href: "/plans", label: "Plans" },
  { href: "/rules", label: "Rules" },
  { href: "/history", label: "History" },
];

export function Navbar() {
  const pathname = usePathname();
  const router = useRouter();
  const { user, logout } = useAuth();

  const handleLogout = () => {
    logout();
    router.push("/login");
  };

  return (
    <nav className="fixed top-0 left-0 right-0 z-50 h-16 bg-zinc-900/80 backdrop-blur border-b border-zinc-800 px-6 flex items-center justify-between">
      <Link href="/dashboard" className="text-[#39FF14] font-bold text-xl tracking-tight">
        WERKOUT
      </Link>

      <div className="hidden md:flex items-center gap-6">
        {navLinks.map((link) => {
          const isActive =
            pathname === link.href || pathname.startsWith(link.href + "/");
          return (
            <Link
              key={link.href}
              href={link.href}
              className={`text-sm font-medium transition-colors duration-150 ${
                isActive
                  ? "text-[#39FF14]"
                  : "text-zinc-400 hover:text-zinc-100"
              }`}
            >
              {link.label}
            </Link>
          );
        })}
      </div>

      <div className="flex items-center gap-3">
        {user && (
          <span className="text-sm text-zinc-300 hidden sm:inline">
            {user.first_name}
          </span>
        )}
        <Link
          href="/preferences"
          className={`text-sm font-medium transition-colors duration-150 ${
            pathname === "/preferences"
              ? "text-[#39FF14]"
              : "text-zinc-400 hover:text-zinc-100"
          }`}
        >
          Preferences
        </Link>
        <Button variant="ghost" size="sm" onClick={handleLogout}>
          Logout
        </Button>
      </div>
    </nav>
  );
}