"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";

// The sidebar shows only on these exact routes — each role's dashboard root,
// plus Profile & Security and Site Settings (matching the redesign
// mockups). Every other /dashboard/* route relies on the global floating
// help button instead of sidebar nav, same as before this redesign.
const SIDEBAR_ROUTES = [
  "/dashboard/admin",
  "/dashboard/supervisor",
  "/dashboard/staff",
  "/dashboard/user",
  "/dashboard/user/profile",
  "/dashboard/admin/settings",
];

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>
    );
  }

  const showSidebar = !!pathname && SIDEBAR_ROUTES.includes(pathname);

  if (showSidebar) {
    // App-shell layout: the whole viewport is claimed (h-screen, no body
    // scroll) so the sidebar can be a plain sibling column that never
    // scrolls — only the content column (main + footer) scrolls internally.
    return (
      <div className="h-screen flex flex-col overflow-hidden">
        <Navbar />
        <MobileSidebar />
        <div className="flex-1 flex min-h-0">
          <Sidebar />
          <div className="flex-1 min-w-0 flex flex-col overflow-y-auto">
            <main className="flex-1 p-6 bg-gray-50">{children}</main>
            <Footer />
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen flex flex-col">
      <Navbar />
      <main className="flex-1 p-6 bg-gray-50">{children}</main>
      <Footer />
    </div>
  );
}