"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";
import { RefreshIndicator } from "@/components/refresh-indicator";

const tabs = [
  { href: "/", label: "Dashboard", key: "1" },
  { href: "/infrastructure", label: "Infrastructure", key: "2" },
  { href: "/media", label: "Media", key: "3" },
  { href: "/automations", label: "Automations", key: "4" },
  { href: "/expenses", label: "Expenses", key: "5" },
  { href: "/network", label: "Network", key: "6" },
  { href: "/logs", label: "Logs", key: "7" },
];

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-white/[0.05] bg-white/[0.02] backdrop-blur-xl">
      <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-[10px] bg-gradient-to-br from-blue-500 via-violet-500 to-pink-500 flex items-center justify-center text-white font-bold text-sm animate-logo-float transition-shadow" style={{ boxShadow: "0 0 20px rgba(139, 92, 246, 0.3)" }}>
              H
            </div>
            <span className="font-semibold text-foreground hidden sm:inline">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-xs lg:text-sm rounded-lg transition-all duration-200 relative whitespace-nowrap",
                    isActive
                      ? "text-foreground bg-white/[0.06] backdrop-blur-sm"
                      : "text-muted-foreground hover:text-foreground hover:bg-white/[0.04]"
                  )}
                >
                  {tab.label}
                  <span className="ml-0.5 text-[8px] text-muted-foreground/40 hidden lg:inline">{tab.key}</span>
                </Link>
              );
            })}
          </div>
        </div>
        <div className="flex items-center gap-2">
          <span className="text-xs text-muted-foreground/70 hidden md:inline">{today}</span>
          <RefreshIndicator />
        </div>
      </div>
    </nav>
  );
}
