"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { useAppSelector, useAppDispatch } from "@/store/hooks";
import { setCredentials } from "@/store/slices/authSlice";
import { getStoredUser } from "@/lib/api/client";
import { Sidebar } from "@/components/dashboard/sidebar";
import { Header } from "@/components/dashboard/header";
import { Spinner } from "@/components/ui/spinner";
import { ROUTES } from "@/lib/constants";
import type { User } from "@/types/api";

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const router = useRouter();
  const dispatch = useAppDispatch();
  const { user, isAuthenticated } = useAppSelector((s) => s.auth);
  const [loading, setLoading] = useState(true);
  const [sidebarOpen, setSidebarOpen] = useState(false);

  useEffect(() => {
    if (isAuthenticated && user) {
      setLoading(false);
      return;
    }

    const storedUser = getStoredUser() as User | null;
    const storedToken =
      typeof window !== "undefined" ? localStorage.getItem("token") : null;

    if (storedUser && storedToken) {
      dispatch(setCredentials({ user: storedUser, token: storedToken }));
      setLoading(false);
    } else {
      router.replace(ROUTES.LOGIN);
    }
  }, [isAuthenticated, user, dispatch, router]);

  if (loading || !user) {
    return (
      <div className="min-h-screen bg-black flex items-center justify-center">
        <Spinner className="size-8 text-blue-500" />
      </div>
    );
  }

  return (
    <div className="flex h-screen bg-black overflow-hidden">
      <Sidebar
        role={user.role}
        open={sidebarOpen}
        onClose={() => setSidebarOpen(false)}
      />
      <div className="flex-1 flex flex-col min-w-0">
        <Header user={user} onMenuToggle={() => setSidebarOpen(true)} />
        <main className="flex-1 overflow-auto p-4 sm:p-6">{children}</main>
      </div>
    </div>
  );
}