"use client";

import { useEffect, useState, useRef } from "react";
import { useRouter } from "next/navigation";
import { Sidebar } from "@/components/layout/sidebar";
import { Header } from "@/components/layout/header";
import { ServiceDownBanner } from "@/components/ui/service-down-banner";
import { getAuthToken } from "@/lib/utils";
import { useUserStore } from "@/store";
import { getMe } from "@/lib/api";

export function UserLayoutWrapper({ children }: { children: React.ReactNode }) {
  const router = useRouter();
  const { email, role, setMe } = useUserStore();
  const [authorized, setAuthorized] = useState(false);
  const [isHydrated, setIsHydrated] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const isFetchingRef = useRef(false);

  // Monitor Zustand store hydration
  useEffect(() => {
    const unsub = useUserStore.persist.onFinishHydration(() => {
      setIsHydrated(true);
    });
    if (useUserStore.persist.hasHydrated()) {
      setIsHydrated(true);
    }
    return () => unsub();
  }, []);

  useEffect(() => {
    if (!isHydrated) return;

    if (role === "user") {
      setAuthorized(true);
      return;
    }
    if (role === "admin") {
      router.replace("/admin");
      return;
    }

    const token = getAuthToken();
    if (!token) {
      router.replace("/login");
      return;
    }

    if (!isFetchingRef.current) {
      isFetchingRef.current = true;
      setIsLoading(true);
      getMe()
        .then((res) => {
          setIsLoading(false);
          if (res?.success && res?.data) {
            const { email: userEmail, name, role: userRole, approval_status, id } = res.data;
            setMe({
              email: userEmail || email,
              name,
              role: userRole,
              approval_status,
              userId: id,
            });
          } else {
            router.replace("/login");
          }
        })
        .catch(() => {
          setIsLoading(false);
          router.replace("/login");
        });
    }
  }, [isHydrated, role, router, email, setMe]);

  if (!isHydrated || !authorized) {
    return (
      <div className="flex h-screen items-center justify-center bg-gray-50 dark:bg-gray-950">
        <div className="flex items-center gap-3">
          <div className="h-5 w-5 rounded-full border-2 border-gray-300 border-t-blue-600 animate-spin" />
          <p className="text-sm text-gray-500 dark:text-gray-400">Loading...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="flex h-screen bg-gray-50 dark:bg-gray-950">
      <Sidebar />
      <div className="flex flex-1 flex-col min-w-0 min-h-0">
        <Header />
        <ServiceDownBanner />
        <main className="flex-1 overflow-y-auto p-4 md:p-6">{children}</main>
      </div>
    </div>
  );
}