// File Path: monorepo/web/frontend/src/pages/Admin/Facilitator/Detail/More/Delete/Page.jsx

import React, { useCallback } from "react";
import { useParams } from "react-router";
import {
  ChartBarIcon,
  UserGroupIcon,
  InformationCircleIcon,
  TrashIcon,
  EllipsisHorizontalIcon,
  UserIcon,
  EnvelopeIcon,
  PhoneIcon,
  ExclamationTriangleIcon,
} from "@heroicons/react/24/outline";
import { useFacilitatorManager } from "../../../../../../services/Services";
import { EntityActionConfirmationPage, useUIXTheme } from "../../../../../../components/UIX";
import { FACILITATOR_STATUS_ACTIVE, FACILITATOR_STATUS_ARCHIVED } from "../../../../../../constants/Facilitator";

function AdminFacilitatorDetailMoreDeletePage() {
  const { aid } = useParams();
  const facilitatorManager = useFacilitatorManager();
  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 === FACILITATOR_STATUS_ACTIVE) {
        return <span className="text-green-600 font-medium">Active</span>;
      } else if (status === FACILITATOR_STATUS_ARCHIVED) {
        return <span className="text-amber-600 font-medium">Archived</span>;
      }
      return <span className={getThemeClasses("text-muted")}>Unknown</span>;
    },
    [getThemeClasses],
  );

  // Render facilitator information
  const renderEntityInfo = useCallback(
    (facilitator) => (
      <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")}`} />
          Facilitator 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")}>
              {facilitator.firstName} {facilitator.lastName}
            </span>
          </div>
          <div className="flex items-center">
            <span className={`font-medium ${getThemeClasses("text-secondary")} mr-2`}>
              Status:
            </span>
            {getStatusDisplay(facilitator.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")}>{facilitator.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(facilitator.phone)}</span>
          </div>
        </div>
      </div>
    ),
    [formatPhone, getStatusDisplay],
    // eslint-disable-next-line react-hooks/exhaustive-deps -- getThemeClasses is stable and captured in closure
  );

  return (
    <EntityActionConfirmationPage
      entityType="Facilitator"
      entityId={aid}
      actionType="delete"
      fetchEntity={facilitatorManager.getFacilitatorDetailWithCallbacks}
      executeAction={facilitatorManager.deleteFacilitatorWithCallbacks}
      breadcrumbItems={[
        {
          label: "Dashboard",
          to: "/admin/dashboard",
          icon: ChartBarIcon,
        },
        {
          label: "Facilitators",
          to: "/admin/facilitators",
          icon: UserGroupIcon,
        },
        {
          label: "Detail",
          to: `/admin/facilitator/${aid}`,
          icon: InformationCircleIcon,
        },
        {
          label: "More",
          to: `/admin/facilitator/${aid}/more`,
          icon: EllipsisHorizontalIcon,
        },
        {
          label: "Delete",
          icon: TrashIcon,
          isActive: true,
        },
      ]}
      pageConfig={{
        title: "Facilitator",
        subtitle: "Delete Facilitator",
        icon: UserGroupIcon,
        actionIcon: TrashIcon,
        loadingText: "Loading facilitator details...",
      }}
      renderEntityInfo={renderEntityInfo}
      warningConfig={{
        title: "Delete Facilitator - Are you sure?",
        description:
          "You are about to permanently delete this facilitator. This means:",
        consequences: [
          "All facilitator data will be permanently removed from the database",
          "All related records, assignments, and history will be affected",
          "The facilitator's account will be completely erased",
          "This action CANNOT be undone without database restoration",
          "Recovery will require system administrator intervention and may not be possible",
        ],
        confirmationText: "Are you sure you would like to continue?",
        warningType: "red",
      }}
      statusAlerts={[
        {
          condition: (entity) => entity?.isBanned,
          type: "warning",
          message: "Facilitator is banned",
          icon: ExclamationTriangleIcon,
        },
      ]}
      isActionDisabled={() => false}
      returnPath={`/admin/facilitator/${aid}/more`}
      successRedirectPath="/admin/facilitators"
      successRedirectDelay={2000}
    />
  );
}

export default AdminFacilitatorDetailMoreDeletePage;
