"use client";

import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";

const navLinks = [
  { href: "/admin/analytics", label: "Analytics" },
  { href: "/admin/statistik", label: "Statistik" },
  { href: "/admin/audit-logs", label: "Audit-Logs" },
];

export function AdminNav() {
  const pathname = usePathname();
  const router = useRouter();

  async function handleLogout() {
    await fetch("/api/admin/login", { method: "DELETE" });
    router.push("/admin/login");
  }

  return (
    <nav className="bg-[#18212f] border-b border-gray-800 px-4 py-3">
      <div className="max-w-7xl mx-auto flex items-center justify-between gap-4">
        <div className="flex items-center gap-1">
          <span className="text-orange-400 font-bold text-sm mr-4">MBO Tech IT · Admin</span>
          {navLinks.map((link) => (
            <Link
              key={link.href}
              href={link.href}
              className={`px-3 py-1.5 rounded text-sm font-medium transition-colors ${
                pathname.startsWith(link.href)
                  ? "bg-orange-500 text-white"
                  : "text-slate-400 hover:text-white hover:bg-white/10"
              }`}
            >
              {link.label}
            </Link>
          ))}
        </div>
        <button
          onClick={handleLogout}
          className="text-slate-500 hover:text-slate-300 text-sm transition-colors"
        >
          Abmelden
        </button>
      </div>
    </nav>
  );
}