"use client";

import { useState } from "react";
import { useAuth } from "@/app/components/providers/auth-provider";
import { shouldUseOwnerShell } from "@/lib/auth/permissions";
import { Header } from "./header";
import { OwnerShell } from "./owner-shell";
import { Sidebar } from "./sidebar";

export function AppShell({ children }: { children: React.ReactNode }) {
  const { role, isReady } = useAuth();
  const [sidebarOpen, setSidebarOpen] = useState(false);

  if (!isReady) {
    return (
      <div className="flex h-dvh items-center justify-center bg-neutral-20">
        <p className="text-m-regular text-neutral-80">Memuat...</p>
      </div>
    );
  }

  if (shouldUseOwnerShell(role)) {
    return <OwnerShell>{children}</OwnerShell>;
  }

  return (
    <div className="flex h-dvh overflow-hidden bg-neutral-20">
      <Sidebar
        className={`fixed inset-y-0 left-0 z-40 transition-transform lg:static lg:translate-x-0 ${
          sidebarOpen ? "translate-x-0" : "-translate-x-full"
        }`}
      />

      {sidebarOpen && (
        <button
          type="button"
          className="fixed inset-0 z-30 bg-black/30 lg:hidden"
          onClick={() => setSidebarOpen(false)}
          aria-label="Tutup menu"
        />
      )}

      <div className="flex min-h-0 min-w-0 flex-1 flex-col gap-5 overflow-hidden px-5 pb-5">
        <Header onMenuClick={() => setSidebarOpen(true)} />
        <main className="flex min-h-0 flex-1 flex-col overflow-x-hidden overflow-y-auto">
          {children}
        </main>
      </div>
    </div>
  );
}