// File Path: monorepo/web/frontend/src/pages/Admin/Speaker/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 { useSpeakerManager } from "../../../../../../services/Services";
import { EntityActionConfirmationPage, useUIXTheme } from "../../../../../../components/UIX";
import { SPEAKER_STATUS_ACTIVE, SPEAKER_STATUS_ARCHIVED } from "../../../../../../constants/Speaker";

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

  // Render speaker information
  const renderEntityInfo = useCallback(
    (speaker) => (
      <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")}`} />
          Speaker 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")}>
              {speaker.firstName} {speaker.lastName}
            </span>
          </div>
          <div className="flex items-center">
            <span className={`font-medium ${getThemeClasses("text-secondary")} mr-2`}>
              Status:
            </span>
            {getStatusDisplay(speaker.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")}>{speaker.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(speaker.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="Speaker"
      entityId={aid}
      actionType="delete"
      fetchEntity={speakerManager.getSpeakerDetailWithCallbacks}
      executeAction={speakerManager.deleteSpeakerWithCallbacks}
      breadcrumbItems={[
        {
          label: "Dashboard",
          to: "/admin/dashboard",
          icon: ChartBarIcon,
        },
        {
          label: "Speakers",
          to: "/admin/speakers",
          icon: UserGroupIcon,
        },
        {
          label: "Detail",
          to: `/admin/speaker/${aid}`,
          icon: InformationCircleIcon,
        },
        {
          label: "More",
          to: `/admin/speaker/${aid}/more`,
          icon: EllipsisHorizontalIcon,
        },
        {
          label: "Delete",
          icon: TrashIcon,
          isActive: true,
        },
      ]}
      pageConfig={{
        title: "Speaker",
        subtitle: "Delete Speaker",
        icon: UserGroupIcon,
        actionIcon: TrashIcon,
        loadingText: "Loading speaker details...",
      }}
      renderEntityInfo={renderEntityInfo}
      warningConfig={{
        title: "Delete Speaker - Are you sure?",
        description:
          "You are about to permanently delete this speaker. This means:",
        consequences: [
          "All speaker data will be permanently removed from the database",
          "All related records, sessions, and history will be affected",
          "The speaker'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={[]}
      isActionDisabled={() => false}
      returnPath={`/admin/speaker/${aid}/more`}
      successRedirectPath="/admin/speakers"
      successRedirectDelay={2000}
    />
  );
}

export default AdminSpeakerDetailMoreDeletePage;
