"use client";

import Navbar from "@/components/Home/Navbar";
import { useDispatch, useSelector } from "react-redux";
import ABLoginNavbar from "../ab/Dashboard/ABLoginNavbar";
import CBLoginNavbar from "../cb/Dashboard/ABLoginNavbar";
import CBLoginNavbar2 from "../pcb/Dashboard/ABLoginNavbar";
import CBLoginNavbar23 from "../personal/Dashboard/ABLoginNavbar";

import ASSOLoginNavbar from "../AssociationMember/Dashboard/ASSOLoginNavbar";
import ProLoginNavbar from "../ProfessionalMember/Dashboard/ProLoginNavbar";
import OrgLoginNavbar from "../OrganisationMember/Dashboard/OrgLoginNavbar";

import Footer from "../Home/Footer";
import { useEffect, useState } from "react";
import { setUser } from "@/store/slices/userSlice";

export default function ClientWrapper({
  data,
  children,
}: {
  data: any;
  children: React.ReactNode;
}) {
  const { token } = useSelector((state: any) => state.user);
  const dispatch = useDispatch();
  const [logType, setLogType] = useState("");
  const [innerType, setInnerType] = useState("");
  const [userType, setUserType] = useState("");
  const [loading, setLoading] = useState(true);

  // ✅ Restore user from sessionStorage
  useEffect(() => {
    if (!token) {
      const storedToken = sessionStorage.getItem("token");
      const storedUser = sessionStorage.getItem("user");

      console.log("🔑 Session token:", storedToken);
      console.log("👤 Session user:", storedUser);

      if (storedToken && storedUser) {
        dispatch(setUser({ token: storedToken, user: storedUser }));
      }
    }
    setLoading(false);
  }, [dispatch, token]);

  // ✅ Get loginType and build userType
  useEffect(() => {
    if (typeof window !== "undefined") {
      const loginType = localStorage.getItem("loginType") || "";
      const innermemberlogin = localStorage.getItem("innermemberlogin") || "";

      console.log("📦 loginType from localStorage:", loginType);
      console.log("📦 innermemberlogin from localStorage:", innermemberlogin);

      setLogType(loginType);
      setInnerType(innermemberlogin);

      if (loginType === "member") {
        // 👇 association + member → association-member
        setUserType(innermemberlogin + "-" + loginType);
      } else if (
        loginType === "ab" ||
        loginType === "cb" ||
        loginType === "pcb" ||
        loginType === "personal" ||
        loginType === "association-member" ||
        loginType === "professional-member" ||
        loginType === "organisation-member"
      ) {
        setUserType(loginType);
      }
    }
  }, [token]);

  if (loading) return null;

  console.log("✅ Final logType:", logType);
  console.log("✅ Final userType:", userType);
  console.log("✅ Token available:", !!token);

  return (
    <div className="bg-hero bg-cover">
      <div className="px-10">
        {token ? (
          userType === "ab" ? (
            <ABLoginNavbar data={data} />
          ) : userType === "cb" ? (
            <CBLoginNavbar data={data} />
          ) : userType === "pcb" ? (
            <CBLoginNavbar2 data={data} />
          ) : userType === "personal" ? (
            <CBLoginNavbar23 data={data} />
          ) : userType === "professional-member" ? (
            <ProLoginNavbar data={data} />
          ) : userType === "organisation-member" ? (
            <OrgLoginNavbar data={data} />
          ) : userType === "association-member" ? (
            <ASSOLoginNavbar data={data} />
          ) : (
            <Navbar data={data} />
          )
        ) : (
          <Navbar data={data} />
        )}
      </div>

      <div className="py-1">{children}</div>

      {!token && <Footer data={data} />}
    </div>
  );
}