"use client";

import Link from "next/link";
import { useRouter, usePathname } from "next/navigation";
import { useState } from "react";
import { api } from "@/lib/api";

export default function Navbar() {
  const router = useRouter();
  const pathname = usePathname();
  const [userName] = useState<string>(() => {
    if (typeof window !== 'undefined') {
      const user = api.getUser();
      if (user && typeof user === 'object' && 'name' in user) {
        return String(user.name);
      }
    }
    return "Developer";
  });

  const handleLogout = async () => {
    try {
      await api.post("/api/v1/auth/logout");
    } catch {
      // Ignore network errors on logout
    } finally {
      api.clearToken();
      router.push("/login");
    }
  };

  const navLinks = [
    { href: "/dashboard", label: "My Credentials" },
    { href: "/dashboard/subscriptions", label: "Subscriptions" },
    { href: "/dashboard/admin", label: "Admin Config" },
  ];

  return (
    <nav className="border-b border-border bg-card/50 backdrop-blur-md sticky top-0 z-40">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between h-16 items-center">
          <div className="flex items-center gap-8">
            <Link href="/" className="text-xl font-extrabold tracking-tight gradient-text">
              NanoBuild
            </Link>
            <div className="hidden sm:flex gap-6">
              {navLinks.map((link) => {
                const isActive = pathname === link.href;
                return (
                  <Link
                    key={link.href}
                    href={link.href}
                    className={`text-sm font-semibold transition-colors ${
                      isActive ? "text-primary" : "text-muted-foreground hover:text-foreground"
                    }`}
                  >
                    {link.label}
                  </Link>
                );
              })}
            </div>
          </div>

          <div className="flex items-center gap-4">
            <span className="text-sm text-muted-foreground hidden md:inline">
              Welcome, <span className="font-semibold text-foreground">{userName}</span>
            </span>
            <button
              onClick={handleLogout}
              className="text-xs bg-secondary hover:bg-secondary/80 border border-border text-foreground font-semibold px-4 py-2 rounded-lg transition-colors"
            >
              Sign Out
            </button>
          </div>
        </div>
        
        {/* Mobile Nav Links */}
        <div className="sm:hidden flex justify-around pb-3 border-t border-border/20 pt-2">
          {navLinks.map((link) => {
            const isActive = pathname === link.href;
            return (
              <Link
                key={link.href}
                href={link.href}
                className={`text-xs font-semibold ${
                  isActive ? "text-primary" : "text-muted-foreground"
                }`}
              >
                {link.label}
              </Link>
            );
          })}
        </div>
      </div>
    </nav>
  );
}