hope-events/frontend/src/app/dashboard/layout.tsx

"use client";

import React, { useEffect } from "react";
import { useAuth } from "@/hooks/useAuth";
import { usePathname, useRouter } from "next/navigation";
import { Navbar } from "@/components/layout/Navbar";
import { Footer } from "@/components/layout/Footer";
import { Sidebar, MobileSidebar } from "@/components/layout/Sidebar";

export default function DashboardLayout({ children }: { children: React.ReactNode }) {
  const { user, loading } = useAuth();
  const router = useRouter();
  const pathname = usePathname();

  // Redirect unauthenticated users to login
  useEffect(() => {
    if (loading) return;
    if (!user) {
      router.replace("/login");
    }
  }, [user, loading, router]);

  // Role-based route guard within /dashboard
  useEffect(() => {
    if (loading) return;
    if (!user) return; // handled above
    if (!pathname || !pathname.startsWith("/dashboard")) return;

    const role = user.role || "user";

    // Determine allowed prefixes and default destination per role
    let allowed: string[] = ["/dashboard/user"]; // everyone can access user dashboard
    let dest = "/dashboard/user";

    if (role === "admin") {
      allowed = ["/dashboard/admin", "/dashboard/user"];
      dest = "/dashboard/admin";
    } else if (role === "supervisor") {
      allowed = ["/dashboard/supervisor", "/dashboard/user"];
      dest = "/dashboard/supervisor";
    } else if (role === "staff") {
      allowed = ["/dashboard/staff", "/dashboard/user"];
      dest = "/dashboard/staff";
    }

    // Allow admin to access supervisor and staff subpages (but not their root dashboards)
    const isAllowed =
      allowed.some(prefix => pathname === prefix || pathname.startsWith(prefix + "/")) ||
      (role === "admin" && (pathname.startsWith("/dashboard/supervisor/") || pathname.startsWith("/dashboard/staff/"))) ||
      (role === "supervisor" && pathname.startsWith("/dashboard/staff/"));

    if (!isAllowed && pathname !== dest) {
      router.replace(dest);
    }
  }, [pathname, user, loading, router]);

  // Don't render protected content until auth state is known
  if (loading || !user) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50">
        <div className="text-sm text-gray-400">Loading…</div>
      </div>
    );
  }

  // Sub-pages within staff/supervisor/admin (e.g. /dashboard/supervisor/reports,
  // /dashboard/admin/cashup/[id]) are full-width workspaces with their own internal navigation
  // and header — the dashboard sidebar's section links (My Events, Profile, Admin, etc.) would
  // just crowd them. The sidebar stays visible only on each role's root landing page; every
  // deeper sub-page hides it. Navigating back is never a dead end: Navbar's "Dashboard" link is
  // always present and /dashboard auto-redirects to the role root.
  const SIDEBAR_ROOTS = ["/dashboard/staff", "/dashboard/supervisor", "/dashboard/admin"];
  const hideSidebar = !!pathname && SIDEBAR_ROOTS.some(root => pathname !== root && pathname.startsWith(root + "/"));

  return (
    <div className="min-h-screen flex flex-col">
      <Navbar />
      <div className="flex-1 flex flex-col md:flex-row">
        {!hideSidebar && (
          <>
            {/* Mobile dropdown navigation */}
            <MobileSidebar />
            {/* Desktop sidebar */}
            <div className="hidden md:block">
              <Sidebar />
            </div>
          </>
        )}
        <main className="flex-1 p-6 bg-gray-50">{children}</main>
      </div>
      <Footer />
    </div>
  );
}