"use client";
import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { useAuth } from "@/components/AuthProvider";
import DashboardSidebar from "@/components/DashboardSidebar";
import DashboardHeader from "@/components/DashboardHeader";

export default function WorkerLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const { role, loading, signOut } = useAuth();
  const [mobileOpen, setMobileOpen] = useState(false);
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
  const router = useRouter();

  useEffect(() => {
    if (!loading && role !== "worker") {
      router.push("/signin");
    }
  }, [loading, role, router]);

  if (loading) return null;

  return (
    <div className="flex min-h-screen bg-urban-bg font-sans text-slate-900 overflow-hidden relative">
      <DashboardSidebar
        role="worker"
        mobileOpen={mobileOpen}
        setMobileOpen={setMobileOpen}
        desktopOpen={isSidebarOpen}
        onLogout={signOut}
      />

      <div className="absolute top-0 left-0 w-full h-full pointer-events-none z-0 overflow-hidden">
        <div className="absolute top-[-10%] right-[-5%] w-[40%] h-[40%] bg-urban-primary/5 rounded-full blur-[100px]"></div>
        <div className="absolute bottom-[-10%] left-[-5%] w-[30%] h-[30%] bg-amber-500/5 rounded-full blur-[80px]"></div>
      </div>

      <div className="flex-1 flex flex-col min-h-screen transition-all duration-300 relative z-10 h-screen overflow-hidden">
        <DashboardHeader
          setMobileOpen={setMobileOpen}
          toggleSidebar={() => setIsSidebarOpen(!isSidebarOpen)}
          title="Field Worker Portal"
        />
        <main className="flex-1 overflow-x-hidden overflow-y-auto p-4 sm:p-6 lg:p-8">
          {children}
        </main>
      </div>
    </div>
  );
}