// File Path: monorepo/web/frontend/src/pages/Admin/Staff/Detail/More/ChangePassword/Page.jsx

import React, { useMemo, useCallback, memo } from "react";
import { useParams } from "react-router";
import {
  useStaffManager,
  useAuthManager,
} from "../../../../../../services/Services";
import { ChangePasswordPage, Badge } from "../../../../../../components/UIX";
import { STAFF_STATUS_ARCHIVED } from "../../../../../../constants/Staff";

const AdminStaffDetailMoreChangePasswordPageContent = memo(
  function AdminStaffDetailMoreChangePasswordPageContent() {
    const { aid } = useParams();
    const staffManager = useStaffManager();
    const authManager = useAuthManager();

    // Breadcrumb items
    const breadcrumbItems = useMemo(
      () => [
        { label: "Dashboard", to: "/admin/dashboard" },
        { label: "Staff", to: "/admin/staff" },
        { label: "Detail (More)", to: `/admin/staff/${aid}/more` },
        { label: "Change Password" },
      ],
      [aid],
    );

    // Fetch staff function
    const fetchStaff = useCallback(
      async (staffId, onUnauthorized, forceRefresh) => {
        return new Promise((resolve, reject) => {
          staffManager.getStaffDetailWithCallbacks(
            staffId,
            (staffData) => resolve(staffData),
            (error) => reject(error),
            () => {},
            onUnauthorized,
          );
        });
      },
      [staffManager],
    );

    // Change password function
    const changePassword = useCallback(
      async (passwordData, onUnauthorized) => {
        const data = {
          staff_id: aid,
          ...passwordData,
        };

        // SECURITY: Use proper StaffManager method with built-in authentication
        // This ensures consistent token handling and API endpoint management
        await staffManager.changeStaffPassword(data, onUnauthorized);
      },
      [aid, staffManager],
    );

  // Get entity name
  const getEntityName = useCallback((staff) => {
    return `${staff.firstName} ${staff.lastName}`;
  }, []);

  // Get badges
  const getBadges = useCallback((staff) => {
    return (
      <>
        {staff.status === STAFF_STATUS_ARCHIVED && (
          <Badge variant="secondary">Archived</Badge>
        )}
      </>
    );
  }, []);

  return (
    <ChangePasswordPage
      entityId={aid}
      onFetchEntity={fetchStaff}
      onChangePassword={changePassword}
      onUnauthorized={() => (window.location.href = "/login?unauthorized=true")}
      isAuthenticated={() => authManager.isAuthenticated()}
      breadcrumbItems={breadcrumbItems}
      backUrl={`/admin/staff/${aid}/more`}
      successRedirectUrl={`/admin/staff/${aid}/more`}
      pageTitle="Change Password"
      getEntityName={getEntityName}
      getBadges={getBadges}
      minPasswordLength={8}
    />
  );
},
);

function AdminStaffDetailMoreChangePasswordPage() {
  return <AdminStaffDetailMoreChangePasswordPageContent />;
}

export default AdminStaffDetailMoreChangePasswordPage;
