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

import React, { useCallback } from "react";
import { useParams } from "react-router";
import {
  ChartBarIcon,
  UserGroupIcon,
  InformationCircleIcon,
  ArchiveBoxIcon,
  ExclamationTriangleIcon,
  EllipsisHorizontalIcon,
  EnvelopeIcon,
  PhoneIcon,
  UserIcon,
  BuildingOfficeIcon,
  HomeIcon,
} from "@heroicons/react/24/outline";
import { useCustomerManager } from "../../../../../../services/Services";
import { EntityActionConfirmationPage, useUIXTheme } from "../../../../../../components/UIX";
import { CUSTOMER_STATUS } from "../../../../../../constants/Customer";

// Constants
const COMMERCIAL_CUSTOMER_TYPE_OF_ID = 3;
const RESIDENTIAL_CUSTOMER_TYPE_OF_ID = 2;

function AdminCustomerDetailMoreArchivePage() {
  const { cid } = useParams();
  const customerManager = useCustomerManager();
  const { getThemeClasses } = useUIXTheme();

  // Helper functions
  const formatPhone = useCallback((phone) => {
    if (!phone) return "N/A";
    return phone.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3");
  }, []);

  const getStatusDisplay = useCallback(
    (status) => {
      if (status === CUSTOMER_STATUS.ACTIVE) {
        return <span className="text-green-600 font-medium">Active</span>;
      } else if (status === CUSTOMER_STATUS.ARCHIVED) {
        return <span className="text-amber-600 font-medium">Archived</span>;
      }
      return <span className={getThemeClasses("text-muted")}>Unknown</span>;
    },
    [getThemeClasses],
  );

  const getTypeDisplay = useCallback((typeOf) => {
    switch (typeOf) {
      case 1:
        return "Unassigned";
      case 2:
        return "Residential";
      case 3:
        return "Commercial";
      default:
        return "Unknown";
    }
  }, []);

  // Render customer information
  const renderEntityInfo = useCallback(
    (customer) => (
      <div className={`${getThemeClasses("bg-muted")} rounded-lg p-6 mb-6`}>
        <h4 className={`text-lg font-semibold ${getThemeClasses("text-primary")} mb-4 flex items-center`}>
          <UserIcon className={`w-5 h-5 mr-2 ${getThemeClasses("text-secondary")}`} />
          Customer Information
        </h4>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="flex items-center">
            <span className={`font-medium ${getThemeClasses("text-secondary")} mr-2`}>Name:</span>
            <span className={getThemeClasses("text-primary")}>
              {customer.firstName} {customer.lastName}
            </span>
          </div>
          <div className="flex items-center">
            <span className={`font-medium ${getThemeClasses("text-secondary")} mr-2`}>
              Status:
            </span>
            {getStatusDisplay(customer.status)}
          </div>
          <div className="flex items-center">
            <EnvelopeIcon className={`w-4 h-4 mr-2 ${getThemeClasses("text-muted")}`} />
            <span className={`font-medium ${getThemeClasses("text-secondary")} mr-2`}>Email:</span>
            <span className={getThemeClasses("text-primary")}>{customer.email}</span>
          </div>
          <div className="flex items-center">
            <PhoneIcon className={`w-4 h-4 mr-2 ${getThemeClasses("text-muted")}`} />
            <span className={`font-medium ${getThemeClasses("text-secondary")} mr-2`}>Phone:</span>
            <span className={getThemeClasses("text-primary")}>{formatPhone(customer.phone)}</span>
          </div>
          {customer.typeOf && (
            <div className="flex items-center">
              {customer.typeOf === COMMERCIAL_CUSTOMER_TYPE_OF_ID ? (
                <BuildingOfficeIcon className={`w-4 h-4 mr-2 ${getThemeClasses("text-muted")}`} />
              ) : customer.typeOf === RESIDENTIAL_CUSTOMER_TYPE_OF_ID ? (
                <HomeIcon className={`w-4 h-4 mr-2 ${getThemeClasses("text-muted")}`} />
              ) : (
                <UserIcon className={`w-4 h-4 mr-2 ${getThemeClasses("text-muted")}`} />
              )}
              <span className={`font-medium ${getThemeClasses("text-secondary")} mr-2`}>Type:</span>
              <span className={getThemeClasses("text-primary")}>{getTypeDisplay(customer.typeOf)}</span>
            </div>
          )}
        </div>
      </div>
    ),
    [formatPhone, getStatusDisplay, getTypeDisplay],
    // eslint-disable-next-line react-hooks/exhaustive-deps -- getThemeClasses is stable and captured in closure
  );

  return (
    <EntityActionConfirmationPage
      entityType="Customer"
      entityId={cid}
      actionType="archive"
      fetchEntity={customerManager.getCustomerDetailWithCallbacks}
      executeAction={customerManager.archiveCustomerWithCallbacks}
      breadcrumbItems={[
        {
          label: "Dashboard",
          to: "/admin/dashboard",
          icon: ChartBarIcon,
        },
        {
          label: "Customers",
          to: "/admin/customers",
          icon: UserGroupIcon,
        },
        {
          label: "Detail",
          to: `/admin/customer/${cid}`,
          icon: InformationCircleIcon,
        },
        {
          label: "More",
          to: `/admin/customer/${cid}/more`,
          icon: EllipsisHorizontalIcon,
        },
        {
          label: "Archive",
          icon: ArchiveBoxIcon,
          isActive: true,
        },
      ]}
      pageConfig={{
        title: "Customer",
        subtitle: "Archive Customer",
        icon: UserGroupIcon,
        actionIcon: ArchiveBoxIcon,
        loadingText: "Loading customer details...",
      }}
      renderEntityInfo={renderEntityInfo}
      warningConfig={{
        title: "Archive Customer - Are you sure?",
        description:
          "You are about to archive this customer. This means:",
        consequences: [
          "The customer will no longer appear in the active customers list",
          "The customer will not be able to log in to their account",
          "All current orders and history will remain but the customer cannot place new orders",
          "This action can be undone by contacting a system administrator",
        ],
        confirmationText: "Are you sure you would like to continue?",
        warningType: "amber",
      }}
      statusAlerts={[
        {
          condition: (entity) => entity?.status === CUSTOMER_STATUS.ARCHIVED,
          type: "info",
          message: "Customer is already archived",
          icon: InformationCircleIcon,
        },
        {
          condition: (entity) => entity?.isBanned,
          type: "error",
          message: "Customer is banned",
          icon: ExclamationTriangleIcon,
        },
      ]}
      isActionDisabled={(entity) =>
        entity?.status === CUSTOMER_STATUS.ARCHIVED
      }
      returnPath={`/admin/customer/${cid}/more`}
      successRedirectPath="/admin/customers"
      successRedirectDelay={2000}
    />
  );
}

export default AdminCustomerDetailMoreArchivePage;
