"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { Sidebar } from "./Sidebar";
import { UserProvider, CurrentUser } from "./user-context";

export default function AppLayout({ children }: { children: React.ReactNode }) {
  const router = useRouter();
  const [user, setUser] = useState<CurrentUser | null>(null);
  const [loading, setLoading] = useState(true);
  const [sidebarOpen, setSidebarOpen] = useState(false);

  useEffect(() => {
    fetch("/backend/auth/me", { credentials: "include" })
      .then((res) => {
        if (!res.ok) throw new Error("unauthenticated");
        return res.json();
      })
      .then((data) => setUser({ ...data.user, impersonating: data.impersonating }))
      .catch(() => router.replace("/"))
      .finally(() => setLoading(false));
  }, [router]);

  async function stopImpersonation() {
    await fetch("/backend/auth/stop-impersonation", { method: "POST", credentials: "include" });
    // Rechargement complet pour réinitialiser l'identité dans tout le layout.
    window.location.href = "/admin/users";
  }

  if (loading) {
    return (
      <div className="flex min-h-screen items-center justify-center text-zinc-500">Chargement…</div>
    );
  }
  if (!user) return null;

  return (
    <UserProvider value={user}>
      <div className="flex min-h-screen bg-zinc-50 dark:bg-black">
        <Sidebar user={user} open={sidebarOpen} onClose={() => setSidebarOpen(false)} />

        <div className="flex min-w-0 flex-1 flex-col">
          {/* Bandeau d'impersonation */}
          {user.impersonating && (
            <div className="flex flex-wrap items-center justify-between gap-2 bg-amber-500 px-4 py-2 text-sm text-black">
              <span>
                👁️ Vous voyez le site <strong>en tant que {user.displayName || user.username}</strong> ({user.role}).
              </span>
              <button
                onClick={stopImpersonation}
                className="rounded-md bg-black px-3 py-1 text-xs font-medium text-white hover:bg-zinc-800"
              >
                Revenir à mon compte
              </button>
            </div>
          )}

          {/* Barre supérieure mobile avec bouton menu (masquée sur desktop) */}
          <header className="flex h-16 items-center gap-3 border-b border-zinc-200 bg-white px-4 md:hidden dark:border-zinc-800 dark:bg-zinc-950">
            <button
              onClick={() => setSidebarOpen(true)}
              className="rounded-md p-2 text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-900"
              aria-label="Ouvrir le menu"
            >
              ☰
            </button>
          </header>

          <main className="flex-1 p-4 sm:p-6">{children}</main>
        </div>
      </div>
    </UserProvider>
  );
}