// File Path: monorepo/web/frontend/src/pages/Admin/Event/Conference/Add/Step4Page.jsx

import React, { useMemo } from "react";
import { useEventWizardStorage } from "../../../../../services/Services";
import { EventStep5Component } from "../../../../../components/business/events";
import { BriefcaseIcon } from "@heroicons/react/24/outline";
import { EVENT_TYPE_CONFERENCE } from "../../../../../constants/Event";
import { FormSection, InfoField } from "../../../../../components/UIX";

// Conference event type configuration
const conferenceConfig = {
  eventType: EVENT_TYPE_CONFERENCE,
  labels: {
    wizardTitle: "Add New Conference",
    eventTypeName: "Conference",
    backToList: "Back to Conferences",
  },
  icons: {
    wizard: BriefcaseIcon,
  },
  routes: {
    list: "/admin/events/conferences",
    step1: "/admin/events/conferences/add/step-1",
    step2: "/admin/events/conferences/add/step-2",
    step3: "/admin/events/conferences/add/step-3",
    step4: "/admin/events/conferences/add/step-4",
  },
};

// Conference-specific review sections
const conferenceCustomReviewSections = (wizardData, onUnauthorized) => {
  // Guard against null wizardData (can happen after successful submission during navigation delay)
  if (!wizardData) return null;

  return (
    <>
      {/* Conference Location Section */}
      <FormSection
        title="Conference Location"
        description="Where the conference will take place"
        className="mb-6"
      >
        <div className="grid grid-cols-1 gap-4 sm:gap-6">
          {wizardData.location && (
            <InfoField label="Location" value={wizardData.location} />
          )}
        </div>
      </FormSection>

      {/* Conference Details Section */}
      {(wizardData.eventType ||
        wizardData.partners ||
        wizardData.listingUrl) && (
        <FormSection
          title="Conference Details"
          description="Additional conference information"
          className="mb-6"
        >
          <div className="grid grid-cols-1 gap-4 sm:gap-6">
            {wizardData.eventType && (
              <InfoField label="Event Type" value={wizardData.eventType} />
            )}
            {wizardData.partners && (
              <InfoField label="Partners" value={wizardData.partners} />
            )}
            {wizardData.listingUrl && (
              <InfoField label="Listing URL" value={wizardData.listingUrl} />
            )}
          </div>
        </FormSection>
      )}

      {/* SHSM and Facilitator Requirements */}
      <FormSection
        title="Requirements"
        description="SHSM status and facilitator needs"
        className="mb-6"
      >
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6">
          <InfoField
            label="SHSM Related"
            value={
              wizardData.isSHSM === true || wizardData.isSHSM === 1
                ? "Yes"
                : wizardData.isSHSM === false || wizardData.isSHSM === 2
                  ? "No"
                  : "Not specified"
            }
          />
          {wizardData.attendeeCapacity && (
            <InfoField
              label="Attendee Capacity"
              value={wizardData.attendeeCapacity}
            />
          )}
          <InfoField
            label="Morning Facilitator"
            value={wizardData.facilitatorAM ? "Required" : "Not required"}
          />
          <InfoField
            label="Afternoon Facilitator"
            value={wizardData.facilitatorPM ? "Required" : "Not required"}
          />
        </div>
      </FormSection>
    </>
  );
};

// Conference-specific payload processing
const conferenceCustomPayloadProcessing = (payload, wizardData) => ({
  ...payload,
  // Conference-specific fields
  partners: wizardData.partners || "",
  listing_url: wizardData.listingUrl || "",
  dayOfWeek: wizardData.dayOfWeek || "Monday",
  // isSHSM is now a boolean - convert legacy int values if needed
  isSHSM: wizardData.isSHSM === true || wizardData.isSHSM === 1 ? true :
          wizardData.isSHSM === false || wizardData.isSHSM === 2 ? false :
          null,
  facilitatorAM: wizardData.facilitatorAM || false,
  facilitatorPM: wizardData.facilitatorPM || false,
  eventType: EVENT_TYPE_CONFERENCE, // Always set to Conference type
  attendeeCapacity: parseInt(wizardData.attendeeCapacity) || 0,
});

function AdminEventConferenceAddStep4Page() {
  const eventWizardStorage = useEventWizardStorage();

  // Wrapper for Conference storage to match the generic interface - memoized to prevent re-renders
  const wrappedStorage = useMemo(() => ({
    getWizardData: () => eventWizardStorage.getEventWizard(),
    saveWizardData: (data) => eventWizardStorage.saveEventWizard(data),
    clearWizardData: () => eventWizardStorage.clearEventWizard(),
  }), []);

  return (
    <EventStep5Component
      wizardStorage={wrappedStorage}
      eventTypeConfig={conferenceConfig}
      customReviewSections={conferenceCustomReviewSections}
      customPayloadProcessing={conferenceCustomPayloadProcessing}
    />
  );
}

export default AdminEventConferenceAddStep4Page;
