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

import React, { useCallback, memo } from "react";
import {
  BriefcaseIcon,
  DevicePhoneMobileIcon,
  LockClosedIcon,
  LockOpenIcon,
} from "@heroicons/react/24/outline";
import { useStaffManager } from "../../../../../../services/Services";
import { UIXThemeProvider } from "../../../../../../components/UIX";
import { EntityActionTogglePage } from "../../../../../../components/business/views";

const AdminStaffDetailMore2FAPageContent = memo(
  function AdminStaffDetailMore2FAPageContent() {
    const staffManager = useStaffManager();

    // Get staff detail function that uses the hook - wrapped with useCallback to prevent infinite loops
    const getStaffDetailWithManager = useCallback(
      async (staffId, onUnauthorized) => {
        return new Promise((resolve, reject) => {
          staffManager.getStaffDetailWithCallbacks(
            staffId,
            (staffData) => resolve(staffData), // onSuccess
            (error) => reject(error), // onError
            () => {}, // onDone
            onUnauthorized, // onUnauthorized
          );
        });
      },
      [staffManager],
    );

    // Handle 2FA toggle action
    const handle2FAToggle = async (staffId, newState, onUnauthorized) => {
      const twoFactorData = {
        staff_id: staffId,
        otp_enabled: newState,
      };
      await staffManager.changeStaffTwoFactorAuth(
        twoFactorData,
        onUnauthorized,
      );
    };

    return (
      <EntityActionTogglePage
        entityIcon={BriefcaseIcon}
        entityType="Staff Member"
        entityTypePlural="Staff"
        basePath="/admin/staff"
        entityParamName="sid"
        entityManager={staffManager}
        getEntityDetail={getStaffDetailWithManager}
        actionIcon={DevicePhoneMobileIcon}
        actionName="Two-Factor Authentication"
        toggleProperty="otpEnabled"
        enabledText="Enabled"
        disabledText="Disabled"
        enableDescription="You are about to enable 2FA for this staff member. This operation will force the staff member on their next successful login to be taken through a 3-step wizard to setup 2FA. Afterwards, every time the staff member logs in, they will be asked to carry out a 2FA process."
        disableDescription="You are about to remove 2FA for this staff member. This operation will remove previous 2FA setup codes and disable 2FA on login for this staff. This is recommended if the user lost their 2FA codes from their device."
        enableIcon={LockClosedIcon}
        disableIcon={LockOpenIcon}
        onToggleAction={handle2FAToggle}
        enableSuccessMessage="2FA has been enabled for this staff member"
        disableSuccessMessage="2FA has been disabled for this staff member"
      />
    );
  },
);

function AdminStaffDetailMore2FAPage() {
  return (
    <UIXThemeProvider>
      <AdminStaffDetailMore2FAPageContent />
    </UIXThemeProvider>
  );
}

export default AdminStaffDetailMore2FAPage;
