"use client";

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

const groups: {
  label: string;
  items: { href: string; label: string; exact?: boolean }[];
}[] = [
  {
    label: "Overview",
    items: [{ href: "/admin", label: "Dashboard", exact: true }],
  },
  {
    label: "Website content",
    items: [
      { href: "/admin/pages", label: "Page content & menu" },
      { href: "/admin/services", label: "Services" },
      { href: "/admin/projects", label: "Portfolio" },
      { href: "/admin/blocks", label: "Shared blocks" },
      { href: "/admin/testimonials", label: "Testimonials" },
    ],
  },
  {
    label: "Design",
    items: [{ href: "/admin/theme", label: "Theme customizer" }],
  },
  {
    label: "Publishing",
    items: [
      { href: "/admin/posts", label: "Journal posts" },
      { href: "/admin/settings", label: "Site settings" },
    ],
  },
];

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

  return (
    <nav
      className="flex gap-2 overflow-x-auto lg:flex-col lg:gap-5"
      aria-label="Admin"
    >
      {groups.map((group) => (
        <div key={group.label} className="shrink-0 lg:shrink">
          <p className="hidden px-4 pb-1 text-[0.62rem] font-bold uppercase tracking-[0.18em] text-white/40 lg:block">
            {group.label}
          </p>
          <div className="flex gap-2 lg:flex-col">
            {group.items.map((item) => {
              const active = item.exact
                ? pathname === item.href
                : pathname.startsWith(item.href);
              return (
                <Link
                  key={item.href}
                  href={item.href}
                  aria-current={active ? "page" : undefined}
                  className={`shrink-0 rounded-xl px-4 py-2.5 text-sm font-medium transition-colors ${
                    active
                      ? "bg-amber text-teal-ink"
                      : "text-white/75 hover:bg-white/10 hover:text-white"
                  }`}
                >
                  {item.label}
                </Link>
              );
            })}
          </div>
        </div>
      ))}
    </nav>
  );
}