"use client";

import { useEffect } from "react";
import { useRouter } from "next/navigation";
import { useAuth } from "@/hooks/useAuth";
import { Navbar } from "@/components/public/Navbar";
import { Footer } from "@/components/public/Footer";

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

  useEffect(() => {
    if (loading) return;
    if (!user) {
      router.push("/login");
      return;
    }
    if (user.role === "ADMIN" || user.role === "MODERATOR") {
      router.push("/admin/overview");
    }
  }, [user, loading, router]);

  if (loading) {
    return (
      <>
        <Navbar />
        <div className="flex items-center justify-center min-h-[60vh]">
          <div className="text-on-surface/50">Loading...</div>
        </div>
        <Footer />
      </>
    );
  }

  if (!user || user.role === "ADMIN" || user.role === "MODERATOR") {
    return null;
  }

  return (
    <>
      <Navbar />
      <main className="min-h-screen max-w-5xl mx-auto px-8 py-12">{children}</main>
      <Footer />
    </>
  );
}