"use client";

import { useState, useEffect } from "react";
import { logout, getUserDataCookie, setUserDataCookie, isAuthenticated } from "@/lib/cookies";
import IndividualHeaderWrapper from "@/components/individual/IndividualHeaderWrapper";
import HeaderWrapper from "@/components/landing/HeaderWrapper";
import EditProfileModal from "@/components/individual/modals/EditProfileModal";
import ChangePasswordModal from "@/components/individual/modals/ChangePasswordModal";
import SupportModal from "@/components/individual/modals/SupportModal";
import { useLoginControllerLogoutV1 } from "@/api/user/user-authentication/user-authentication";
import { useProfile } from "@/api/user/user-profile/user-profile";

export default function BibliographyLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const [editProfileOpen, setEditProfileOpen] = useState(false);
  const [changePasswordOpen, setChangePasswordOpen] = useState(false);
  const [supportOpen, setSupportOpen] = useState(false);
  const [isForceChange, setIsForceChange] = useState(false);
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const [cookieUserData, setCookieUserData] = useState<ReturnType<typeof getUserDataCookie>>(null);
  useEffect(() => {
    const loggedIn = isAuthenticated();
    setIsLoggedIn(loggedIn);
    if (loggedIn) {
      const data = getUserDataCookie();
      setCookieUserData(data);
      if (data?.force_password_change) {
        setChangePasswordOpen(true);
        setIsForceChange(true);
      }
    }
  }, []);

  const { data: profileData, refetch: refetchProfile } = useProfile({
    query: {
      retry: false,
      refetchOnWindowFocus: false,
      enabled: isLoggedIn,
    },
  });

  const apiUser = profileData?.data?.user;
  const user = apiUser || (cookieUserData ? {
    uuid: cookieUserData.id,
    name: cookieUserData.name,
    email: cookieUserData.email,
    profile_photo: null,
    role: cookieUserData.role ? { uuid: null, name: cookieUserData.role } : null,
  } : undefined);

  const logoutMutation = useLoginControllerLogoutV1({
    mutation: {
      onSuccess: () => { logout(); },
      onError: () => { logout(); },
    },
  });

  const handlePasswordChanged = () => {
    setChangePasswordOpen(false);
    setIsForceChange(false);
    const data = getUserDataCookie();
    if (data) {
      setUserDataCookie({ ...data, force_password_change: false });
    }
  };

  // Show landing page header for non-logged-in users
  if (!isLoggedIn) {
    return (
      <div className="min-h-screen bg-[#F8FAFC]">
        <HeaderWrapper />
        <div className="pt-20">
          {children}
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-[#F8FAFC]">
      <IndividualHeaderWrapper
        user={user}
        onEditProfile={() => setEditProfileOpen(true)}
        onChangePassword={() => setChangePasswordOpen(true)}
        onSupport={() => setSupportOpen(true)}
        onLogout={() => logoutMutation.mutate()}
      />
      {children}
      <EditProfileModal
        isOpen={editProfileOpen}
        onClose={() => setEditProfileOpen(false)}
        user={user}
        onSuccess={() => refetchProfile()}
      />
      <ChangePasswordModal
        isOpen={changePasswordOpen}
        onClose={() => { if (!isForceChange) setChangePasswordOpen(false); }}
        forceChange={isForceChange}
        onPasswordChanged={handlePasswordChanged}
      />
      <SupportModal
        isOpen={supportOpen}
        onClose={() => setSupportOpen(false)}
      />
    </div>
  );
}