"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-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 hidden sm:inline">Homelab</span>
          </Link>
          <div className="flex items-center gap-1 overflow-x-auto">
            {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 whitespace-nowrap",
                    isActive
                      ? "text-foreground"
                      : "text-muted-foreground hover:text-foreground hover:bg-white/[0.03]"
                  )}
                >
                  {tab.label}
                  <span className="ml-1 text-[9px] text-muted-foreground/50">{tab.key}</span>
                  {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>
        <div className="flex items-center gap-2">
          <span className="text-xs text-muted-foreground hidden md:inline">{today}</span>
          <RefreshIndicator />
        </div>
      </div>
    </nav>
  );
}
