import { LogOut } from "lucide-react";
import { utilisateurCourant } from "@/lib/auth";
import { seDeconnecter } from "@/lib/actions/session";
import { ROLES } from "@/lib/libelles";
import { BarreMobile, MenuLateral } from "@/components/navigation";

export default async function LayoutApplication({ children }: { children: React.ReactNode }) {
  const moi = await utilisateurCourant();
  return (
    <div className="lg:flex">
      <aside className="sticky top-0 hidden h-dvh w-60 shrink-0 flex-col bg-[#26262a] p-4 lg:flex">
        <div className="mb-6 flex items-center gap-2 px-1">
          <img src="/icone.svg" alt="" className="h-8 w-8" />
          <span className="text-sm font-semibold text-white">ERP Événementiel</span>
        </div>
        <MenuLateral />
        <div className="mt-auto border-t border-white/10 pt-4">
          <p className="text-sm font-medium text-white">{moi.nom}</p>
          <p className="mb-3 text-xs text-stone-400">{ROLES[moi.role]}</p>
          <form action={seDeconnecter}>
            <button className="flex items-center gap-2 text-xs text-stone-300 hover:text-white">
              <LogOut className="h-3.5 w-3.5" aria-hidden /> Se déconnecter
            </button>
          </form>
        </div>
      </aside>

      <header className="sticky top-0 z-20 flex items-center justify-between border-b border-bord bg-surface px-4 py-3 lg:hidden">
        <div className="flex items-center gap-2">
          <img src="/icone.svg" alt="" className="h-7 w-7" />
          <span className="text-sm font-semibold">ERP Événementiel</span>
        </div>
        <form action={seDeconnecter}>
          <button className="flex items-center gap-1.5 text-xs text-encre-2" aria-label="Se déconnecter">
            {moi.nom} <LogOut className="h-4 w-4" aria-hidden />
          </button>
        </form>
      </header>

      <main className="min-w-0 flex-1 px-4 pb-24 pt-6 lg:px-8 lg:pb-10">{children}</main>
      <BarreMobile />
    </div>
  );
}