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

import React, { useMemo } from "react";
import { useParams } from "react-router";
import {
  useCustomerManager,
  useAuthManager,
} from "../../../../../../services/Services";
import { ChangePasswordPage, Badge } from "../../../../../../components/UIX";
import { CUSTOMER_STATUS } from "../../../../../../constants/Customer";

function AdminCustomerDetailMoreChangePasswordPage() {
  const { cid } = useParams();
  const customerManager = useCustomerManager();
  const authManager = useAuthManager();

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

  // Fetch customer function
  const fetchCustomer = async (customerId, onUnauthorized, forceRefresh) => {
    return await customerManager.getCustomerDetail(
      customerId,
      onUnauthorized,
      forceRefresh
    );
  };

  // Change password function
  const changePassword = async (passwordData, onUnauthorized) => {
    const data = {
      customer_id: cid,
      ...passwordData,
    };
    return await customerManager.changeCustomerPassword(data, onUnauthorized);
  };

  // Get entity name
  const getEntityName = (customer) => {
    return `${customer.firstName} ${customer.lastName}`;
  };

  // Get badges
  const getBadges = (customer) => {
    return (
      <>
        {customer.status === CUSTOMER_STATUS.ARCHIVED && (
          <Badge variant="secondary">Archived</Badge>
        )}
        {customer.isBanned && (
          <Badge variant="error">Banned</Badge>
        )}
      </>
    );
  };

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

export default AdminCustomerDetailMoreChangePasswordPage;
