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

import React, { useCallback } from "react";
import {
  BuildingOffice2Icon,
  NoSymbolIcon,
  CheckCircleIcon,
  ArchiveBoxIcon,
  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 AdminOrganizationDetailMoreBanPageContent() {
  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 banned
          if (organizationData.isBanned) {
            reject(new Error("This organization is already banned. Use the unban page to remove the ban."));
            return;
          }
          resolve(organizationData);
        },
        (error) => reject(error),
        () => {},
        onUnauthorized
      );
    });
  };

  // Execute ban action
  const onBanExecute = async (organizationId, onUnauthorized) => {
    return new Promise((resolve, reject) => {
      const banData = {
        organization_id: organizationId,
      };

      organizationManager.banOrganizationWithCallbacks(
        banData,
        (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={NoSymbolIcon}
      actionName="Ban"
      actionDescription="Ban this organization and revoke all system access."
      actionWarningPoints={[
        "All organization members will be immediately logged out",
        "They will not be able to log in again",
        "All access to the system will be revoked",
        "The organization will not be able to place or manage any work orders",
        "The organization will still appear in search results with a banned banner displayed",
        "This action should only be taken for serious violations or security concerns"
      ]}
      actionButtonText="Ban Organization"
      actionButtonVariant="danger"
      onActionExecute={onBanExecute}
      successMessage="Organization has been banned successfully!"
      redirectPath={null} // Stay on more page to see updated status
      buildFieldSections={buildFieldSections}
    />
  );
}

function AdminOrganizationDetailMoreBanPage() {
  return (
    <UIXThemeProvider>
      <AdminOrganizationDetailMoreBanPageContent />
    </UIXThemeProvider>
  );
}

export default AdminOrganizationDetailMoreBanPage;
