/**
 * app/dashboard/layout.tsx
 * Dashboard layout — wraps all /dashboard/* pages with the sidebar.
 */

"use client";

import { useEffect } from "react";
import { useRouter } from "next/navigation";
import { Sidebar } from "@/components/layout/Sidebar";
import { MobileNavbar } from "@/components/layout/MobileNavbar";
import { MobileHeader } from "@/components/layout/MobileHeader";
import { useAuth } from "@/hooks/useAuth";
import { Loader2 } from "lucide-react";
import toast from "react-hot-toast";

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

  useEffect(() => {
    if (!loading && !user) {
      router.push("/login");
    }
    if (!loading && user && !user.isActive) {
      toast.error("Your account has been deactivated");
      logout();
      router.push("/login");
    }
  }, [user, loading, router, logout]);

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-white">
        <div className="flex flex-col items-center gap-6">
          <div className="relative">
            <div className="h-16 w-16 rounded-full border-4 border-slate-100 border-t-indigo-600 animate-spin" />
            <div className="absolute inset-0 flex items-center justify-center">
              <div className="h-2 w-2 rounded-full bg-indigo-600 animate-pulse" />
            </div>
          </div>
          <p className="text-slate-900 font-black text-[10px] uppercase tracking-[0.3em] animate-pulse">Initializing Dashboard...</p>
        </div>
      </div>
    );
  }

  if (!user) return null;

  const handleLogout = async () => {
    await logout();
    toast.success("Signed out successfully");
    router.push("/");
  };

  return (
    <div className="flex h-screen bg-slate-50 overflow-hidden font-jakarta">
      {/* Desktop Sidebar */}
      <div className="hidden md:flex h-full">
        <Sidebar
          userName={user.name}
          userEmail={user.email}
          walletBalance={user.wallet}
          role={user.role}
          onLogout={handleLogout}
        />
      </div>

      {/* Mobile UI Elements */}
      <MobileHeader userName={user.name} onLogout={handleLogout} />
      <MobileNavbar />

      {/* Main Content Area */}
      <main className="flex-1 overflow-y-auto pt-14 pb-16 md:pt-0 md:pb-0">
        <div className="p-4 md:p-8 max-w-7xl mx-auto">{children}</div>
      </main>
    </div>
  );
}