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

import React from "react";
import { useOnsiteEventWizardStorage } from "../../../../../services/Services";
import { EventStep5Component } from "../../../../../components/business/events";
import {
  HomeIcon,
  CalendarIcon,
  UserGroupIcon,
} from "@heroicons/react/24/outline";
import { EVENT_TYPE_ONSITE } from "../../../../../constants/Event";
import { FormSection, InfoField } from "../../../../../components/UIX";
import { formatDateForDisplay } from "../../../../../services/Helpers/DateFormatter";

// Onsite event type configuration
const onsiteConfig = {
  eventType: EVENT_TYPE_ONSITE,
  labels: {
    wizardTitle: "Add New Onsite Event",
    eventTypeName: "Onsite Event",
    backToList: "Back to Onsite Events",
  },
  icons: {
    wizard: HomeIcon,
  },
  routes: {
    list: "/admin/events/in-schools",
    step1: "/admin/events/in-schools/add/step-1",
    step2: "/admin/events/in-schools/add/step-2",
    step3: "/admin/events/in-schools/add/step-3",
    step4: "/admin/events/in-schools/add/step-4",
  },
};

// Wrapper for Onsite storage to match the generic interface
const createOnsiteStorageWrapper = (onsiteEventWizardStorage) => ({
  getWizardData: () => onsiteEventWizardStorage.getOnsiteEventWizard(),
  saveWizardData: (data) =>
    onsiteEventWizardStorage.saveOnsiteEventWizard(data),
  clearWizardData: () => onsiteEventWizardStorage.clearOnsiteEventWizard(),
});

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

  return (
    <>
      {/* Location Information Section */}
      <FormSection
        title="Location Information"
        description="Physical address where the onsite event will take place"
        className="mb-6"
      >
        <div className="grid grid-cols-1 gap-4 sm:gap-6">
          {wizardData.address && (
            <InfoField
              label="Event Address"
              value={`${wizardData.address}, ${wizardData.city}, ${wizardData.province} ${wizardData.postalCode}, ${wizardData.country}`}
            />
          )}
        </div>
      </FormSection>

      {/* Schedule Details */}
      <FormSection className="mb-6">
        <InfoField
          label="Event Schedule"
          value={
            wizardData.startDate && wizardData.endDate
              ? `${formatDateForDisplay(wizardData.startDate)} - ${formatDateForDisplay(wizardData.endDate)}`
              : wizardData.date && wizardData.startTime && wizardData.endTime
                ? `${wizardData.date} from ${wizardData.startTime} to ${wizardData.endTime}`
                : "Not specified"
          }
          icon={CalendarIcon}
        />
        {wizardData.attendeeCapacity && (
          <InfoField
            label="Expected Attendees"
            value={`${wizardData.attendeeCapacity} people`}
            icon={UserGroupIcon}
          />
        )}
      </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"
            }
          />
          <InfoField
            label="Morning Facilitator"
            value={wizardData.facilitatorAM ? "Required" : "Not required"}
          />
          <InfoField
            label="Afternoon Facilitator"
            value={wizardData.facilitatorPM ? "Required" : "Not required"}
          />
        </div>
      </FormSection>
    </>
  );
};

// Onsite-specific payload processing
const onsiteCustomPayloadProcessing = (payload, wizardData) => ({
  ...payload,
  // Onsite-specific fields
  location: `${wizardData.address}, ${wizardData.city}, ${wizardData.province} ${wizardData.postalCode}`,
  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_ONSITE, // Always set to Onsite type
  attendeeCapacity: parseInt(wizardData.attendeeCapacity) || 0,
  // Onsite-specific location fields
  address: wizardData.address,
  city: wizardData.city,
  province: wizardData.province,
  postalCode: wizardData.postalCode,
  country: wizardData.country,
});

function AdminEventInSchoolAddStep5Page() {
  const onsiteEventWizardStorage = useOnsiteEventWizardStorage();
  const wrappedStorage = createOnsiteStorageWrapper(onsiteEventWizardStorage);

  return (
    <EventStep5Component
      wizardStorage={wrappedStorage}
      eventTypeConfig={onsiteConfig}
      customReviewSections={onsiteCustomReviewSections}
      customPayloadProcessing={onsiteCustomPayloadProcessing}
    />
  );
}

export default AdminEventInSchoolAddStep5Page;
