import React, { useMemo, memo } from "react";
import { useFacilitatorAwayLogManager } from "../../../../../services/Services";
import { SettingsDeleteView } from "../../../../../components/business/views";
import { UIXThemeProvider } from "../../../../../components/UIX";
import { CalendarDaysIcon, UserIcon, ClockIcon, InformationCircleIcon } from "@heroicons/react/24/outline";
import { formatDateForDisplay } from "../../../../../services/Helpers/DateFormatter";

// Move static configurations outside component to prevent recreation
const IMPACT_WARNINGS = [
  {
    icon: UserIcon,
    text: "The facilitator will no longer be marked as unavailable for this period"
  },
  {
    icon: ClockIcon,
    text: "Historical records referencing this away log will still exist but may show as 'Deleted'"
  },
  {
    icon: InformationCircleIcon,
    text: "You will not be able to recover this away log once deleted"
  }
];

const ALTERNATIVE_TEXT = "Consider editing the away log to update the end date instead of deleting it to preserve historical data.";

function SettingFacilitatorAwayLogDeletePage() {
  return (
    <UIXThemeProvider>
      <SettingFacilitatorAwayLogDeletePageContent />
    </UIXThemeProvider>
  );
}

const SettingFacilitatorAwayLogDeletePageContent = memo(function SettingFacilitatorAwayLogDeletePageContent() {
  const facilitatorAwayLogManager = useFacilitatorAwayLogManager();

  // Memoize helper function to create meaningful name
  const createAwayLogName = useMemo(() => (awayLogData) => {
    if (!awayLogData) return "Unknown";

    const facilitatorName = awayLogData.facilitatorName || `Facilitator #${awayLogData.facilitatorId}` || "Unknown Facilitator";
    const startDate = formatDateForDisplay(awayLogData.startDate) || "Unknown Date";

    // Create a truncated name: "John Smith - 2024-01-15" (max ~40 chars)
    const fullName = `${facilitatorName} - ${startDate}`;
    return fullName.length > 40 ? `${fullName.substring(0, 37)}...` : fullName;
  }, []);

  // Memoize entity transformer
  const transformEntityData = useMemo(() => (entityData) => {
    if (!entityData) return entityData;

    const displayName = createAwayLogName(entityData);

    return {
      ...entityData,
      // Set name to "delete" for confirmation requirement
      name: "delete",
      // Add detailed description to provide meaningful context
      description: `${displayName}\n\nThis away log marks ${entityData.facilitatorName || 'the facilitator'} as unavailable from ${formatDateForDisplay(entityData.startDate) || 'unknown date'}${entityData.untilFurtherNotice === 1 ? ' until further notice' : ` until ${formatDateForDisplay(entityData.untilDate) || 'unknown date'}`}.`
    };
  }, [createAwayLogName]);

  // Memoize manager wrapper
  const facilitatorAwayLogManagerWrapper = useMemo(() => ({
    ...facilitatorAwayLogManager,
    getFacilitatorAwayLogDetail: async (id, onUnauthorized) => {
      const data = await facilitatorAwayLogManager.getFacilitatorAwayLogDetail(id, onUnauthorized);
      return transformEntityData(data);
    },
    deleteFacilitatorAwayLog: async (id, onUnauthorized) => {
      return await facilitatorAwayLogManager.deleteFacilitatorAwayLog(id, onUnauthorized);
    }
  }), [facilitatorAwayLogManager, transformEntityData]);

  return (
    <SettingsDeleteView
      entityType="facilitatorAwayLog"
      entityTypePlural="Facilitator Away Logs"
      entityIcon={CalendarDaysIcon}
      entityManager={facilitatorAwayLogManagerWrapper}
      basePath="/admin/settings/facilitator-away-log"
      listPath="/admin/settings/facilitator-away-logs"
      title="Delete Facilitator Away Log"
      subtitle="Permanent deletion confirmation"
      impactWarnings={IMPACT_WARNINGS}
      alternativeText={ALTERNATIVE_TEXT}
      requiresConfirmation={true}
    />
  );
});

// Set display name for React DevTools
SettingFacilitatorAwayLogDeletePageContent.displayName = 'SettingFacilitatorAwayLogDeletePageContent';

export default SettingFacilitatorAwayLogDeletePage;
