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

const navItems = [
  { href: "/admin/dashboard", label: "Turnos del día", icon: "📅" },
  { href: "/admin/historial", label: "Historial", icon: "📋" },
  { href: "/admin/clientes", label: "Clientes", icon: "👥" },
  { href: "/admin/servicios", label: "Servicios", icon: "⚙️" },
];

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

  async function cerrarSesion() {
    await fetch("/api/auth/admin-logout", { method: "POST" });
    router.push("/admin");
  }

  if (pathname === "/admin") return <>{children}</>;

  return (
    <div className="min-h-screen flex flex-col">
      <div className="max-w-5xl mx-auto w-full px-4 flex-1 flex flex-col md:flex-row gap-6 py-6">
        <nav className="md:w-48 shrink-0 bg-black/50 backdrop-blur-sm md:bg-transparent rounded-xl md:rounded-none p-2 md:p-0">
          <ul className="flex md:flex-col gap-2 flex-wrap">
            {navItems.map((item) => (
              <li key={item.href}>
                <Link
                  href={item.href}
                  className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition ${
                    pathname.startsWith(item.href)
                      ? "bg-blue-600 text-white"
                      : "text-gray-100 hover:bg-white/20"
                  }`}
                >
                  <span>{item.icon}</span>
                  {item.label}
                </Link>
              </li>
            ))}
            <li className="md:mt-auto">
              <button
                onClick={cerrarSesion}
                className="flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium text-gray-300 hover:text-red-300 hover:bg-white/10 transition w-full"
              >
                Cerrar sesión
              </button>
            </li>
          </ul>
        </nav>

        <main className="flex-1">{children}</main>
      </div>
    </div>
  );
}