"use client";

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

const adminLinks = [
  { href: "/admin", label: "Accueil", icon: "🏠" },
  { href: "/admin/users", label: "Membres", icon: "👥" },
  { href: "/admin/messages", label: "Messages", icon: "💬" },
  { href: "/admin/media", label: "Médias", icon: "🎬" },
  { href: "/admin/classes", label: "Cours", icon: "📅" },
  { href: "/admin/homework", label: "Exercices", icon: "🏋️" },
  { href: "/admin/certificates", label: "Certificats", icon: "📄" },
  { href: "/admin/yoga", label: "Yoga", icon: "🧘" },
];

export default function AdminLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const pathname = usePathname();

  return (
    <main className="min-h-screen pb-20">
      <Header />
      <div className="mx-auto max-w-3xl px-4 py-6">
        <h1 className="mb-1 text-2xl font-extrabold">
          ⚙️ Tableau de bord Juanito
        </h1>
        <p className="mb-5 text-sm text-white/60">
          Gère ton club JuanitoSport
        </p>

        <nav className="mb-6 grid grid-cols-4 gap-1.5 sm:gap-2">
          {adminLinks.map((link) => {
            const active =
              pathname === link.href ||
              (link.href !== "/admin" && pathname.startsWith(link.href));
            return (
              <Link
                key={link.href}
                href={link.href}
                className={`flex flex-col items-center justify-center gap-0.5 rounded-xl px-1 py-2.5 text-center text-[11px] font-semibold transition-colors sm:flex-row sm:gap-1.5 sm:px-3 sm:py-2 sm:text-xs ${
                  active
                    ? "bg-primary-600 text-white"
                    : "bg-white/5 text-white/70 hover:bg-white/10"
                }`}
              >
                <span className="text-base leading-none sm:text-lg">{link.icon}</span>
                <span className="leading-tight">{link.label}</span>
              </Link>
            );
          })}
        </nav>

        {children}
      </div>
    </main>
  );
}