"use client"

import { Sidebar } from "@/components/layout-dash/Sidebar";
import { Header } from "@/components/layout-dash/Header";
import { useRouter } from "next/navigation";
import { useEffect } from "react";
import { useAuth } from "@/context/AuthContext";

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

  useEffect(() => {
    if (!loading) {
      if (!user) {
        router.replace("/login");
      } else {
        const complianceEmail = process.env.NEXT_PUBLIC_COMPLIANCE_EMAIL || "hr@colourclubprinters.com";
        const superAdminEmail = process.env.NEXT_PUBLIC_SUPER_ADMIN_EMAIL || "admin@colourclubstudio.com";
        if (user.email !== complianceEmail && user.email !== superAdminEmail) {
          router.replace("/dashboard");
        }
      }
    }
  }, [loading, user, router]);

  if (loading) {
    return (
      <div className="flex h-screen items-center justify-center bg-[#FAFBFF]">
        <div className="h-8 w-8 animate-spin rounded-full border-4 border-brand-600 border-t-transparent" />
      </div>
    );
  }

  if (!user) return null;

  return (
    <div className="flex h-screen overflow-hidden bg-[#F5F5F4]">
      <div className="hidden lg:flex lg:w-60 lg:flex-col lg:fixed lg:inset-y-0 z-50">
        <Sidebar />
      </div>

      <div className="lg:pl-60 flex flex-col flex-1 min-w-0 overflow-y-auto">
        <Header />
        <main className="flex-1 px-6 lg:px-8 py-6 w-full">
          <div className="max-w-7xl mx-auto">
            {children}
          </div>
        </main>
      </div>
    </div>
  );
}