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

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

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

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

  const tabs = [
    { href: "/jefe/dashboard", label: "Turnos" },
    { href: "/jefe/servicios", label: "Trabajos" },
  ];

  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 py-6 gap-4">
        <div className="flex items-center justify-between gap-2">
          <h1 className="text-lg font-semibold text-white">🔧 Mi agenda</h1>
          <button
            onClick={cerrarSesion}
            className="text-sm text-gray-300 hover:text-red-300 transition px-3 py-1.5 rounded-lg hover:bg-white/10"
          >
            Cerrar sesión
          </button>
        </div>
        <nav className="flex gap-1">
          {tabs.map((t) => {
            const activo = pathname === t.href;
            return (
              <button
                key={t.href}
                onClick={() => router.push(t.href)}
                className={`text-sm px-4 py-2 rounded-lg transition ${
                  activo
                    ? "bg-white/15 text-white font-medium"
                    : "text-gray-300 hover:text-white hover:bg-white/10"
                }`}
              >
                {t.label}
              </button>
            );
          })}
        </nav>
        <main className="flex-1">{children}</main>
      </div>
    </div>
  );
}