"use client";

import { type ReactElement } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Home, Users, BarChart3, User, Brain } from "lucide-react";
import { SignedIn, UserButton } from "@clerk/nextjs";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";

interface NavItem {
  href: string;
  label: string;
  icon: React.ElementType;
}

const navItems: NavItem[] = [
  {
    href: "/",
    label: "Dashboard",
    icon: Home,
  },
  {
    href: "/users",
    label: "Clients",
    icon: Users,
  },
  {
    href: "/recommendations",
    label: "AI Recommendations",
    icon: Brain,
  },
  {
    href: "/analytics",
    label: "Analytics",
    icon: BarChart3,
  },
  {
    href: "/profile",
    label: "Profile",
    icon: User,
  },
];

export function Navigation(): ReactElement {
  const pathname = usePathname();

  return (
    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <nav className="container mx-auto px-4 h-16">
        <div className="flex h-full items-center justify-between">
          {/* Logo */}
          <Link
            href="/"
            className="text-xl font-bold text-[#FF0000] hover:text-[#00FF00] transition-colors"
          >
            FitAI
          </Link>

          {/* Navigation Items */}
          <ul
            className="flex-1 flex justify-center items-center"
            style={{ gap: "3rem" }}
          >
            {navItems.map((item) => (
              <li key={item.href}>
                <Link href={item.href} className="flex items-center gap-2">
                  <Button
                    variant={pathname === item.href ? "primary" : "secondary"}
                    className={cn(
                      "h-9 px-4 py-2",
                      pathname === item.href &&
                      "bg-primary text-primary-foreground",
                    )}
                    aria-current={pathname === item.href ? "page" : undefined}
                  >
                    <item.icon className="h-4 w-4" />
                    <span>{item.label}</span>
                  </Button>
                </Link>
              </li>
            ))}
          </ul>

          {/* User Button */}
          <SignedIn>
            <UserButton
              afterSignOutUrl="/"
              appearance={{
                elements: {
                  avatarBox: "h-8 w-8",
                },
              }}
            />
          </SignedIn>
        </div>
      </nav>
    </header>
  );
}