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

import React, { useCallback } from "react";
import {
  BuildingOffice2Icon,
  ArchiveBoxIcon,
  CheckCircleIcon,
  XCircleIcon,
} from "@heroicons/react/24/outline";
import { useOrganizationManager } from "../../../../../../services/Services";
import { EntityActionConfirmationPage } from "../../../../../../components/business/views";
import {
  Badge,
  ContactLink,
  AddressDisplay,
  useUIXTheme,
  UIXThemeProvider,
} from "../../../../../../components/UIX";
import { formatDateForDisplay } from "../../../../../../services/Helpers/DateFormatter";
import {
  ORGANIZATION_STATUS_ACTIVE,
  ORGANIZATION_STATUS_ARCHIVED,
  ORGANIZATION_TYPE_MAP,
} from "../../../../../../constants/Organization";

function AdminOrganizationDetailMoreArchivePageContent() {
  const organizationManager = useOrganizationManager();
  const { getThemeClasses } = useUIXTheme();

  // Get organization detail function
  const getOrganizationDetail = async (organizationId, onUnauthorized) => {
    return new Promise((resolve, reject) => {
      organizationManager.getOrganizationDetailWithCallbacks(
        organizationId,
        (organizationData) => {
          // Check if organization is already archived
          if (organizationData.status === ORGANIZATION_STATUS_ARCHIVED) {
            reject(new Error("This organization is already archived."));
            return;
          }
          resolve(organizationData);
        },
        (error) => reject(error),
        () => {},
        onUnauthorized,
      );
    });
  };

  // Execute archive action
  const onArchiveExecute = async (organizationId, onUnauthorized) => {
    return new Promise((resolve, reject) => {
      organizationManager.archiveOrganizationWithCallbacks(
        organizationId,
        (response) => resolve(response),
        (error) => reject(error),
        () => {},
        onUnauthorized,
      );
    });
  };

  // Helper to get primary contact
  const getPrimaryContact = useCallback((organization) => {
    if (!organization?.contacts || organization.contacts.length === 0)
      return null;
    return (
      organization.contacts.find((c) => c.isPrimary) || organization.contacts[0]
    );
  }, []);

  // Build field sections for organization summary card (same as More page)
  const buildFieldSections = useCallback(
    (organization) => {
      if (!organization) return [];

      const primaryContact = getPrimaryContact(organization);

      return [
        // Primary column sections
        {
          column: "primary",
          className: "mb-3 sm:mb-4 lg:mb-5",
          component: (
            <div>
              <h2
                className={`text-lg sm:text-xl md:text-2xl lg:text-3xl font-bold ${getThemeClasses("text-primary")} flex items-center justify-center xl:justify-start mb-2`}
              >
                <BuildingOffice2Icon className="w-6 h-6 mr-2 flex-shrink-0" />
                <span className="break-words">
                  {organization?.organizationName ||
                    organization?.name ||
                    "Unnamed Organization"}
                </span>
              </h2>
              {organization?.organizationShortName && (
                <p
                  className={`text-sm sm:text-base ${getThemeClasses("text-secondary")} text-center xl:text-left`}
                >
                  ({organization.organizationShortName})
                </p>
              )}
              <div
                className={`mt-2 text-sm lg:text-base ${getThemeClasses("text-secondary")} text-center xl:text-left`}
              >
                <Badge variant="primary" size="md">
                  {ORGANIZATION_TYPE_MAP[organization?.organizationType] ||
                    "Unknown"}
                </Badge>
              </div>
              <div
                className={`mt-2 text-sm lg:text-base ${getThemeClasses("text-secondary")} text-center xl:text-left`}
              >
                {organization.isBanned ? (
                  <Badge variant="error" size="sm">
                    <XCircleIcon className="w-3 sm:w-4 h-3 sm:h-4 mr-1" />
                    Banned
                  </Badge>
                ) : organization.status === ORGANIZATION_STATUS_ACTIVE ? (
                  <Badge variant="primary" size="sm">
                    <CheckCircleIcon className="w-3 sm:w-4 h-3 sm:h-4 mr-1" />
                    Active
                  </Badge>
                ) : (
                  <Badge variant="secondary" size="sm">
                    <ArchiveBoxIcon className="w-3 sm:w-4 h-3 sm:h-4 mr-1" />
                    Archived
                  </Badge>
                )}
              </div>
            </div>
          ),
        },
        {
          column: "primary",
          className: "mb-3 sm:mb-4 lg:mb-5",
          component: (
            <div>
              {primaryContact && (
                <div className="mb-3 text-center xl:text-left">
                  <h3
                    className={`text-base sm:text-lg font-semibold ${getThemeClasses("text-primary")} mb-2`}
                  >
                    Primary Contact
                  </h3>
                  <p
                    className={`text-sm sm:text-base ${getThemeClasses("text-secondary")}`}
                  >
                    {primaryContact.firstName} {primaryContact.lastName}
                    {primaryContact.title && (
                      <span className={getThemeClasses("text-muted")}>
                        {" "}
                        - {primaryContact.title}
                      </span>
                    )}
                  </p>
                </div>
              )}
              <AddressDisplay
                addressData={organization}
                size="md"
                showIcon={true}
                showMapsLink={true}
              />
            </div>
          ),
        },
        {
          column: "primary",
          className: "space-y-2 sm:space-y-3",
          component: (
            <div className="space-y-2 sm:space-y-3">
              <ContactLink
                type="email"
                value={primaryContact?.email || organization?.contactEmail}
                size="md"
                fallbackText="No email"
              />
              <ContactLink
                type="phone"
                value={primaryContact?.phone || organization?.contactPhone}
                size="md"
                fallbackText="No phone"
              />
              {organization?.website && (
                <ContactLink
                  type="website"
                  value={organization.website}
                  size="md"
                  fallbackText="No website"
                />
              )}
            </div>
          ),
        },
        // Secondary column sections
        {
          column: "secondary",
          component: (
            <div
              className={`space-y-2 text-xs sm:text-sm lg:text-base ${getThemeClasses("text-secondary")}`}
            >
              {organization?.createdAt && (
                <div className="flex items-center justify-center xl:justify-start">
                  <CheckCircleIcon
                    className={`w-3 sm:w-4 h-3 sm:h-4 lg:w-5 lg:h-5 mr-2 ${getThemeClasses("text-muted")}`}
                  />
                  <span className="font-medium">Created:</span>
                  <span className="ml-2">
                    {formatDateForDisplay(organization.createdAt)}
                  </span>
                </div>
              )}
              {organization?.modifiedAt && (
                <div className="flex items-center justify-center xl:justify-start">
                  <CheckCircleIcon
                    className={`w-3 sm:w-4 h-3 sm:h-4 lg:w-5 lg:h-5 mr-2 ${getThemeClasses("text-muted")}`}
                  />
                  <span className="font-medium">Last Modified:</span>
                  <span className="ml-2">
                    {formatDateForDisplay(organization.modifiedAt)}
                  </span>
                </div>
              )}
            </div>
          ),
        },
      ].filter((section) => section.component);
    },
    [getPrimaryContact],
  ); // eslint-disable-line react-hooks/exhaustive-deps -- getThemeClasses intentionally excluded to prevent infinite loop

  return (
    <EntityActionConfirmationPage
      entityIcon={BuildingOffice2Icon}
      entityType="Organization"
      entityTypePlural="Organizations"
      basePath="/admin/organization"
      entityParamName="id"
      entityManager={organizationManager}
      getEntityDetail={getOrganizationDetail}
      actionIcon={ArchiveBoxIcon}
      actionName="Archive"
      actionDescription="Archive this organization and remove it from active lists."
      actionWarningPoints={[
        "The organization will no longer appear in the active organizations list",
        "Organization members will not be able to access organization features",
        "All current data and history will remain but the organization cannot perform new operations",
        "This action can be undone by contacting a system administrator",
      ]}
      actionButtonText="Archive Organization"
      actionButtonVariant="warning"
      onActionExecute={onArchiveExecute}
      successMessage="Organization has been successfully archived!"
      redirectPath="/admin/organizations"
      buildFieldSections={buildFieldSections}
    />
  );
}

function AdminOrganizationDetailMoreArchivePage() {
  return (
    <UIXThemeProvider>
      <AdminOrganizationDetailMoreArchivePageContent />
    </UIXThemeProvider>
  );
}

export default AdminOrganizationDetailMoreArchivePage;
