"use client";

import { useState } from "react";
import { logout } from "@/lib/cookies";
import AdminHeaderWrapper from "@/components/admin/AdminHeaderWrapper";
import EditProfileModal from "@/components/admin/modals/EditProfileModal";
import ChangePasswordModal from "@/components/admin/modals/ChangePasswordModal";
import { useLoginControllerLogoutV1 } from "@/api/admin/user-authentication/user-authentication";

export default function AdminLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const [editProfileOpen, setEditProfileOpen] = useState(false);
  const [changePasswordOpen, setChangePasswordOpen] = useState(false);

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

  const handleLogout = () => {
    logoutMutation.mutate();
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-[#E8F4F8] via-[#EEF6F9] to-[#E5EEF2]">
      <AdminHeaderWrapper
        onEditProfile={() => setEditProfileOpen(true)}
        onChangePassword={() => setChangePasswordOpen(true)}
        onLogout={handleLogout}
      />
      {children}
      <EditProfileModal
        isOpen={editProfileOpen}
        onClose={() => setEditProfileOpen(false)}
      />
      <ChangePasswordModal
        isOpen={changePasswordOpen}
        onClose={() => setChangePasswordOpen(false)}
      />
    </div>
  );
}