"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";

const tabs = [
  { label: "Dashboard", href: "/" },
  { label: "Infrastructure", href: "/infrastructure" },
  { label: "Media", href: "/media" },
  { label: "Automations", href: "/automations" },
  { label: "Expenses", href: "/expenses" },
];

export function Nav() {
  const pathname = usePathname();
  const today = new Date().toLocaleDateString("en-US", {
    weekday: "long",
    year: "numeric",
    month: "long",
    day: "numeric",
  });

  return (
    <nav className="sticky top-0 z-50 border-b border-border bg-background/80 backdrop-blur-md">
      <div className="flex items-center justify-between px-6 h-14">
        <div className="flex items-center gap-6">
          <Link href="/" className="flex items-center gap-2 group">
            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 via-violet-500 to-purple-600 flex items-center justify-center text-white font-bold text-sm animate-shimmer shadow-lg shadow-blue-500/20 group-hover:shadow-blue-500/40 transition-shadow">
              H
            </div>
            <span className="font-semibold text-foreground">Homelab</span>
          </Link>
          <div className="flex items-center gap-1">
            {tabs.map((tab) => {
              const isActive =
                tab.href === "/"
                  ? pathname === "/"
                  : pathname.startsWith(tab.href);
              return (
                <Link
                  key={tab.href}
                  href={tab.href}
                  className={cn(
                    "px-3 py-1.5 text-sm rounded-md transition-all duration-200 relative",
                    isActive
                      ? "text-foreground"
                      : "text-muted-foreground hover:text-foreground hover:bg-white/[0.03]"
                  )}
                >
                  {tab.label}
                  {isActive && (
                    <span className="absolute bottom-[-13px] left-0 right-0 h-[2px] bg-gradient-to-r from-blue-500 to-violet-500 nav-active-glow" />
                  )}
                </Link>
              );
            })}
          </div>
        </div>
        <span className="text-xs text-muted-foreground">{today}</span>
      </div>
    </nav>
  );
}