// File Path: monorepo/web/frontend/src/pages/Admin/Event/FieldTrip/Add/Page.jsx

import React, {
  useState,
  useEffect,
  useCallback,
  memo,
  useReducer,
} from "react";
import { Link, useNavigate } from "react-router";
import {
  useAuthManager,
  useEventManager,
} from "../../../../../services/Services";
import {
  EVENT_TYPE_OFFSITE,
  EVENT_STATUS_ACTIVE,
  EVENT_SHSM_UNSET,
  EVENT_SHSM_OPTIONS,
  EVENT_FIELD_LABELS,
  DAY_OF_WEEK_OPTIONS,
  FACILITATOR_TIME_OPTIONS,
} from "../../../../../constants/Event";
import {
  PlusIcon,
  ArrowRightIcon,
  ChartBarIcon,
  ExclamationCircleIcon,
  TruckIcon,
  CalendarIcon,
  ClockIcon,
  UserGroupIcon,
  TagIcon,
  MapPinIcon,
  CheckIcon,
  XMarkIcon,
  BuildingLibraryIcon,
} from "@heroicons/react/24/outline";
import {
  UIXThemeProvider,
  useUIXTheme,
  Breadcrumb,
  Button,
  Input,
  Textarea,
  Select,
  Alert,
  Modal,
  PageHeader,
  FormCard,
  FormSection,
  Spinner,
} from "../../../../../components/UIX";
import {
  OrganizationSelect,
  DivisionSelect,
  FacilitatorSelect,
  SkillSetsMultiSelect,
  TagsMultiSelect,
} from "../../../../../components/business";

const initialFormState = {
  organizationId: "",
  divisionId: "",
  eventName: "",
  description: "",
  partners: "",
  listingURL: "",
  startDate: "",
  attendeeCapacity: "",
  dayOfWeek: "",
  startTime: "",
  endTime: "",
  isSHSM: EVENT_SHSM_UNSET,
  facilitatorRequirements: "none",
  facilitatorIds: [],
  skillSetIds: [],
  tagIds: [],
  destinationName: "",
  destinationAddress: "",
  destinationCity: "",
  destinationProvince: "ON",
  destinationPostalCode: "",
  destinationCountry: "Canada",
  departureAddress: "",
  departureCity: "",
  departureProvince: "ON",
  departurePostalCode: "",
  transportationRequired: "yes",
  transportationNotes: "",
  estimatedTravelTime: "",
};

const formReducer = (state, action) => {
  switch (action.type) {
    case "SET_FIELD":
      return { ...state, [action.field]: action.value };
    case "SET_MULTIPLE_FIELDS":
      return { ...state, ...action.fields };
    case "RESET_FORM":
      return initialFormState;
    default:
      return state;
  }
};

// Security: Sanitize URL to prevent protocol injection
const sanitizeURL = (url) => {
  if (!url || !url.trim()) return "";
  const trimmed = url.trim();
  // Remove any existing protocol (http://, https://, //, etc.)
  const withoutProtocol = trimmed.replace(/^(https?:\/\/|\/\/)/i, "");
  return `https://${withoutProtocol}`;
};

function AdminEventFieldTripAddPage() {
  const authManager = useAuthManager();
  const eventManager = useEventManager();
  const navigate = useNavigate();

  const [formData, dispatch] = useReducer(formReducer, initialFormState);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState("");
  const [success, setSuccess] = useState("");
  const [showCancelWarning, setShowCancelWarning] = useState(false);
  const [validationErrors, setValidationErrors] = useState({});

  const setField = useCallback(
    (field, value) => {
      dispatch({ type: "SET_FIELD", field, value });
      if (validationErrors[field]) {
        setValidationErrors((prev) => ({ ...prev, [field]: "" }));
      }
      setError("");
    },
    [validationErrors],
  );

  const validateForm = useCallback(() => {
    const errors = {};

    if (!formData.organizationId.trim()) {
      errors.organizationId = "Organization is required";
    }

    if (!formData.eventName.trim()) {
      errors.eventName = "Event name is required";
    }

    if (!formData.description.trim()) {
      errors.description = "Description is required";
    }

    if (!formData.startDate.trim()) {
      errors.startDate = "Start date is required";
    }

    if (!formData.attendeeCapacity.trim()) {
      errors.attendeeCapacity = "Attendee capacity is required";
    } else {
      const capacity = parseInt(formData.attendeeCapacity);
      if (isNaN(capacity) || capacity < 1) {
        errors.attendeeCapacity = "Attendee capacity must be a positive number";
      }
    }

    if (!formData.dayOfWeek.trim()) {
      errors.dayOfWeek = "Day of week is required";
    }

    if (!formData.startTime.trim()) {
      errors.startTime = "Start time is required";
    }

    if (!formData.endTime.trim()) {
      errors.endTime = "End time is required";
    }

    if (!formData.destinationName.trim()) {
      errors.destinationName = "Destination name is required";
    }

    if (!formData.destinationAddress.trim()) {
      errors.destinationAddress = "Destination address is required";
    }

    if (!formData.destinationCity.trim()) {
      errors.destinationCity = "Destination city is required";
    }

    if (!formData.destinationPostalCode.trim()) {
      errors.destinationPostalCode = "Destination postal code is required";
    }

    if (formData.transportationRequired === "yes") {
      if (!formData.departureAddress.trim()) {
        errors.departureAddress =
          "Departure address is required when transportation is provided";
      }

      if (!formData.departureCity.trim()) {
        errors.departureCity =
          "Departure city is required when transportation is provided";
      }

      if (!formData.departurePostalCode.trim()) {
        errors.departurePostalCode =
          "Departure postal code is required when transportation is provided";
      }
    }

    return errors;
  }, [formData]);

  const scrollToFirstError = useCallback(() => {
    const firstErrorField = document.querySelector(".border-red-300");
    if (firstErrorField) {
      firstErrorField.scrollIntoView({ behavior: "smooth", block: "center" });
      firstErrorField.focus();
    }
  }, []);

  const handleSubmit = useCallback(
    async (e) => {
      e.preventDefault();

      const errors = validateForm();
      setValidationErrors(errors);

      if (Object.keys(errors).length > 0) {
        setError("Please correct the errors below");
        setTimeout(scrollToFirstError, 100);
        return;
      }

      setIsLoading(true);
      setError("");
      setSuccess("");

      try {
        const eventData = {
          organizationId: parseInt(formData.organizationId),
          divisionId: formData.divisionId
            ? parseInt(formData.divisionId)
            : null,
          name: formData.eventName.trim(),
          description: formData.description.trim(),
          partners: formData.partners.trim(),
          listingURL: sanitizeURL(formData.listingURL),
          startDate: formData.startDate,
          attendeeCapacity: parseInt(formData.attendeeCapacity),
          dayOfWeek: formData.dayOfWeek,
          startTime: formData.startTime,
          endTime: formData.endTime,
          isSHSM: parseInt(formData.isSHSM),
          type: EVENT_TYPE_OFFSITE,
          status: EVENT_STATUS_ACTIVE,
          facilitatorIds: formData.facilitatorIds.map((id) => parseInt(id)),
          skillSetIds: formData.skillSetIds.map((id) => parseInt(id)),
          tagIds: formData.tagIds.map((id) => parseInt(id)),
          destinationName: formData.destinationName.trim(),
          destinationAddress: formData.destinationAddress.trim(),
          destinationCity: formData.destinationCity.trim(),
          destinationProvince: formData.destinationProvince.trim(),
          destinationPostalCode: formData.destinationPostalCode
            .trim()
            .toUpperCase(),
          destinationCountry: formData.destinationCountry.trim(),
          departureAddress: formData.departureAddress.trim(),
          departureCity: formData.departureCity.trim(),
          departureProvince: formData.departureProvince.trim(),
          departurePostalCode: formData.departurePostalCode
            .trim()
            .toUpperCase(),
          transportationRequired: formData.transportationRequired === "yes",
          transportationNotes: formData.transportationNotes.trim(),
          estimatedTravelTime: formData.estimatedTravelTime
            ? parseInt(formData.estimatedTravelTime)
            : null,
        };

        const result = await eventManager.createEvent(eventData);

        if (result && result.id) {
          setSuccess("Field trip event created successfully!");
          setTimeout(() => {
            navigate(`/admin/events/field-trips/${result.id}`);
          }, 2000);
        } else {
          throw new Error("Failed to create event");
        }
      } catch (err) {
        if (process.env.NODE_ENV === 'development') {
          console.error("Error creating field trip event:", err);
        }
        setError(
          err.message ||
            "An error occurred while creating the event. Please try again.",
        );
        setTimeout(scrollToFirstError, 100);
      } finally {
        setIsLoading(false);
      }
    },
    [formData, validateForm, scrollToFirstError, eventManager, navigate],
  );

  const handleCancel = useCallback(() => {
    setShowCancelWarning(true);
  }, []);

  const handleConfirmCancel = useCallback(() => {
    setShowCancelWarning(false);
    navigate("/admin/events/field-trips");
  }, [navigate]);

  useEffect(() => {
    let mounted = true;

    if (mounted) {
      if (!authManager.isAuthenticated()) {
        navigate("/login?unauthorized=true");
        return;
      }
    }

    return () => {
      mounted = false;
    };
  }, [authManager, navigate]);

  return (
    <UIXThemeProvider>
      <AdminEventFieldTripAddPageContent
        formData={formData}
        setField={setField}
        isLoading={isLoading}
        error={error}
        success={success}
        showCancelWarning={showCancelWarning}
        setShowCancelWarning={setShowCancelWarning}
        setError={setError}
        validationErrors={validationErrors}
        handleSubmit={handleSubmit}
        handleCancel={handleCancel}
        handleConfirmCancel={handleConfirmCancel}
      />
    </UIXThemeProvider>
  );
}

const AdminEventFieldTripAddPageContent = memo(
  function AdminEventFieldTripAddPageContent({
    formData,
    setField,
    isLoading,
    error,
    success,
    showCancelWarning,
    setShowCancelWarning,
    setError,
    validationErrors,
    handleSubmit,
    handleCancel,
    handleConfirmCancel,
  }) {
    const { getThemeClasses } = useUIXTheme();

    const breadcrumbItems = [
      {
        label: "Dashboard",
        to: "/admin/dashboard",
        icon: ChartBarIcon,
      },
      {
        label: "Field Trip Events",
        to: "/admin/events/field-trips",
        icon: TruckIcon,
      },
      {
        label: "Add",
        icon: PlusIcon,
      },
    ];

    if (isLoading) {
      return (
        <div className={`min-h-screen ${getThemeClasses("page-bg")}`}>
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-8">
            <div className="flex flex-col items-center justify-center py-16">
              <Spinner size="lg" />
              <p className={`mt-4 text-center ${getThemeClasses("text-secondary")}`}>
                Creating field trip event...
              </p>
            </div>
          </div>
        </div>
      );
    }

    return (
      <div className={`min-h-screen ${getThemeClasses("page-bg")}`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-8">
          <Breadcrumb items={breadcrumbItems} className="mb-4 sm:mb-6" />

          <PageHeader
            title="Add Field Trip Event"
            subtitle="Create a new off-site educational field trip with transportation details"
            icon={TruckIcon}
            className="mb-4 sm:mb-6"
          />

          {error && (
            <Alert
              type="error"
              message={error}
              onClose={() => setError("")}
              className="mb-4 sm:mb-6"
            />
          )}

          {success && (
            <Alert type="success" message={success} className="mb-4 sm:mb-6" />
          )}

          <form onSubmit={handleSubmit}>
            {/* Organization & Division */}
            <FormCard
              title="Organization Details"
              icon={UserGroupIcon}
              className="mb-6"
            >
              <FormSection title="Select Organization and Division">
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                  <div>
                    <OrganizationSelect
                      value={formData.organizationId}
                      onChange={(value) => {
                        setField("organizationId", value);
                        setField("divisionId", "");
                      }}
                      error={validationErrors.organizationId}
                      required
                    />
                  </div>
                  <div>
                    <DivisionSelect
                      organizationId={formData.organizationId}
                      value={formData.divisionId}
                      onChange={(value) => setField("divisionId", value)}
                      error={validationErrors.divisionId}
                      disabled={!formData.organizationId}
                    />
                  </div>
                </div>
              </FormSection>
            </FormCard>

            {/* Event Information */}
            <FormCard
              title="Event Information"
              icon={CalendarIcon}
              className="mb-6"
            >
              <FormSection title="Basic Event Details">
                <div className="grid grid-cols-1 gap-6">
                  <Input
                    label={EVENT_FIELD_LABELS.eventName}
                    value={formData.eventName}
                    onChange={(e) => setField("eventName", e.target.value)}
                    error={validationErrors.eventName}
                    required
                    maxLength={255}
                    placeholder="Enter the field trip event name"
                  />

                  <Textarea
                    label={EVENT_FIELD_LABELS.description}
                    value={formData.description}
                    onChange={(e) => setField("description", e.target.value)}
                    error={validationErrors.description}
                    required
                    rows={4}
                    placeholder="Describe the field trip, its educational purpose, and activities"
                  />

                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <Input
                      label={EVENT_FIELD_LABELS.partners}
                      value={formData.partners}
                      onChange={(e) => setField("partners", e.target.value)}
                      placeholder="Partner organizations (optional)"
                    />

                    <Input
                      label={EVENT_FIELD_LABELS.listingURL}
                      type="text"
                      prefix="https://"
                      value={formData.listingURL}
                      onChange={(value) => setField("listingURL", value)}
                      placeholder="example.com/field-trip"
                    />
                  </div>
                </div>
              </FormSection>
            </FormCard>

            {/* Scheduling */}
            <FormCard
              title="Event Scheduling"
              icon={ClockIcon}
              className="mb-6"
            >
              <FormSection title="Date and Time Details">
                <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
                  <Input
                    label={EVENT_FIELD_LABELS.startDate}
                    type="date"
                    value={formData.startDate}
                    onChange={(e) => setField("startDate", e.target.value)}
                    error={validationErrors.startDate}
                    required
                  />

                  <Input
                    label={EVENT_FIELD_LABELS.attendeeCapacity}
                    type="number"
                    min="1"
                    max="1000"
                    value={formData.attendeeCapacity}
                    onChange={(e) =>
                      setField("attendeeCapacity", e.target.value)
                    }
                    error={validationErrors.attendeeCapacity}
                    required
                    placeholder="Maximum number of attendees"
                  />

                  <Select
                    label={EVENT_FIELD_LABELS.dayOfWeek}
                    value={formData.dayOfWeek}
                    onChange={(e) => setField("dayOfWeek", e.target.value)}
                    error={validationErrors.dayOfWeek}
                    required
                    options={[
                      { value: "", label: "Select day of week" },
                      ...DAY_OF_WEEK_OPTIONS,
                    ]}
                  />
                </div>

                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6">
                  <Input
                    label={EVENT_FIELD_LABELS.startTime}
                    type="time"
                    value={formData.startTime}
                    onChange={(e) => setField("startTime", e.target.value)}
                    error={validationErrors.startTime}
                    required
                  />

                  <Input
                    label={EVENT_FIELD_LABELS.endTime}
                    type="time"
                    value={formData.endTime}
                    onChange={(e) => setField("endTime", e.target.value)}
                    error={validationErrors.endTime}
                    required
                  />
                </div>
              </FormSection>
            </FormCard>

            {/* Destination Details */}
            <FormCard
              title="Destination Details"
              icon={BuildingLibraryIcon}
              className="mb-6"
            >
              <FormSection title="Field Trip Destination Information">
                <div className="grid grid-cols-1 gap-6">
                  <Input
                    label="Destination Name"
                    value={formData.destinationName}
                    onChange={(e) =>
                      setField("destinationName", e.target.value)
                    }
                    error={validationErrors.destinationName}
                    required
                    placeholder="Museum, Science Center, etc."
                  />

                  <Input
                    label="Destination Address"
                    value={formData.destinationAddress}
                    onChange={(e) =>
                      setField("destinationAddress", e.target.value)
                    }
                    error={validationErrors.destinationAddress}
                    required
                    placeholder="Street address of destination"
                  />

                  <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    <Input
                      label="Destination City"
                      value={formData.destinationCity}
                      onChange={(e) =>
                        setField("destinationCity", e.target.value)
                      }
                      error={validationErrors.destinationCity}
                      required
                      placeholder="City"
                    />

                    <Select
                      label="Destination Province"
                      value={formData.destinationProvince}
                      onChange={(e) =>
                        setField("destinationProvince", e.target.value)
                      }
                      options={[
                        { value: "ON", label: "Ontario" },
                        { value: "QC", label: "Quebec" },
                        { value: "BC", label: "British Columbia" },
                        { value: "AB", label: "Alberta" },
                        { value: "MB", label: "Manitoba" },
                        { value: "SK", label: "Saskatchewan" },
                        { value: "NS", label: "Nova Scotia" },
                        { value: "NB", label: "New Brunswick" },
                        { value: "NL", label: "Newfoundland and Labrador" },
                        { value: "PE", label: "Prince Edward Island" },
                        { value: "YT", label: "Yukon" },
                        { value: "NT", label: "Northwest Territories" },
                        { value: "NU", label: "Nunavut" },
                      ]}
                    />

                    <Input
                      label="Destination Postal Code"
                      value={formData.destinationPostalCode}
                      onChange={(e) =>
                        setField(
                          "destinationPostalCode",
                          e.target.value.toUpperCase(),
                        )
                      }
                      error={validationErrors.destinationPostalCode}
                      required
                      placeholder="K1A 0A6"
                      maxLength={7}
                    />
                  </div>

                  <Input
                    label="Destination Country"
                    value={formData.destinationCountry}
                    onChange={(e) =>
                      setField("destinationCountry", e.target.value)
                    }
                    placeholder="Canada"
                  />
                </div>
              </FormSection>
            </FormCard>

            {/* Transportation Details */}
            <FormCard
              title="Transportation Details"
              icon={TruckIcon}
              className="mb-6"
            >
              <FormSection title="Transportation and Departure Information">
                <div className="grid grid-cols-1 gap-6">
                  <Select
                    label="Transportation Required"
                    value={formData.transportationRequired}
                    onChange={(e) =>
                      setField("transportationRequired", e.target.value)
                    }
                    required
                    options={[
                      { value: "yes", label: "Yes - Transportation provided" },
                      {
                        value: "no",
                        label: "No - Attendees arrange own transport",
                      },
                    ]}
                  />

                  {formData.transportationRequired === "yes" && (
                    <>
                      <div className="grid grid-cols-1 gap-6">
                        <Input
                          label="Departure Address"
                          value={formData.departureAddress}
                          onChange={(e) =>
                            setField("departureAddress", e.target.value)
                          }
                          error={validationErrors.departureAddress}
                          required
                          placeholder="Where the bus/transport will depart from"
                        />

                        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                          <Input
                            label="Departure City"
                            value={formData.departureCity}
                            onChange={(e) =>
                              setField("departureCity", e.target.value)
                            }
                            error={validationErrors.departureCity}
                            required
                            placeholder="City"
                          />

                          <Select
                            label="Departure Province"
                            value={formData.departureProvince}
                            onChange={(e) =>
                              setField("departureProvince", e.target.value)
                            }
                            options={[
                              { value: "ON", label: "Ontario" },
                              { value: "QC", label: "Quebec" },
                              { value: "BC", label: "British Columbia" },
                              { value: "AB", label: "Alberta" },
                              { value: "MB", label: "Manitoba" },
                              { value: "SK", label: "Saskatchewan" },
                              { value: "NS", label: "Nova Scotia" },
                              { value: "NB", label: "New Brunswick" },
                              {
                                value: "NL",
                                label: "Newfoundland and Labrador",
                              },
                              { value: "PE", label: "Prince Edward Island" },
                              { value: "YT", label: "Yukon" },
                              { value: "NT", label: "Northwest Territories" },
                              { value: "NU", label: "Nunavut" },
                            ]}
                          />

                          <Input
                            label="Departure Postal Code"
                            value={formData.departurePostalCode}
                            onChange={(e) =>
                              setField(
                                "departurePostalCode",
                                e.target.value.toUpperCase(),
                              )
                            }
                            error={validationErrors.departurePostalCode}
                            required
                            placeholder="K1A 0A6"
                            maxLength={7}
                          />
                        </div>
                      </div>

                      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                        <Input
                          label="Estimated Travel Time (minutes)"
                          type="number"
                          min="0"
                          max="480"
                          value={formData.estimatedTravelTime}
                          onChange={(e) =>
                            setField("estimatedTravelTime", e.target.value)
                          }
                          placeholder="Travel time to destination"
                        />
                        <div></div> {/* Spacer */}
                      </div>

                      <Textarea
                        label="Transportation Notes"
                        value={formData.transportationNotes}
                        onChange={(e) =>
                          setField("transportationNotes", e.target.value)
                        }
                        rows={3}
                        placeholder="Additional transportation details, pickup instructions, etc."
                      />
                    </>
                  )}
                </div>
              </FormSection>
            </FormCard>

            {/* Additional Configuration */}
            <FormCard
              title="Additional Configuration"
              icon={TagIcon}
              className="mb-6"
            >
              <FormSection title="SHSM and Requirements">
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                  <Select
                    label={EVENT_FIELD_LABELS.isSHSM}
                    value={String(formData.isSHSM)}
                    onChange={(e) =>
                      setField("isSHSM", parseInt(e.target.value))
                    }
                    options={EVENT_SHSM_OPTIONS}
                  />

                  <Select
                    label="Facilitator Requirements"
                    value={formData.facilitatorRequirements}
                    onChange={(e) =>
                      setField("facilitatorRequirements", e.target.value)
                    }
                    options={FACILITATOR_TIME_OPTIONS}
                  />
                </div>
              </FormSection>

              {formData.facilitatorRequirements !== "none" && (
                <FormSection title="Select Facilitators" className="mt-6">
                  <FacilitatorSelect
                    value={formData.facilitatorIds}
                    onChange={(value) => setField("facilitatorIds", value)}
                    multiple
                    placeholder="Search and select facilitators"
                  />
                </FormSection>
              )}

              <FormSection title="Skills and Tags" className="mt-6">
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                  <SkillSetsMultiSelect
                    label={EVENT_FIELD_LABELS.skillSetIDs}
                    value={formData.skillSetIds}
                    onChange={(value) => setField("skillSetIds", value)}
                    placeholder="Select relevant skill sets"
                  />

                  <TagsMultiSelect
                    label={EVENT_FIELD_LABELS.tagIDs}
                    value={formData.tagIds}
                    onChange={(value) => setField("tagIds", value)}
                    placeholder="Add tags for categorization"
                  />
                </div>
              </FormSection>
            </FormCard>

            {/* Form Actions */}
            <div className="flex flex-col sm:flex-row sm:justify-end gap-3 py-6">
              <Button
                type="button"
                variant="secondary"
                onClick={handleCancel}
                icon={XMarkIcon}
              >
                Cancel
              </Button>

              <Button
                type="submit"
                variant="primary"
                icon={CheckIcon}
                disabled={isLoading}
              >
                {isLoading ? "Creating..." : "Create Field Trip Event"}
              </Button>
            </div>
          </form>

          <div className="mt-6">
            <Link
              to="/admin/events/field-trips"
              className={`inline-flex items-center text-sm ${getThemeClasses("link-primary")}`}
            >
              <ArrowRightIcon className="w-4 h-4 mr-1 rotate-180" />
              Back to Field Trip Events
            </Link>
          </div>
        </div>

        <Modal
          isOpen={showCancelWarning}
          onClose={() => setShowCancelWarning(false)}
          title="Are you sure?"
          icon={ExclamationCircleIcon}
        >
          <div className="py-4">
            <p className={`text-sm ${getThemeClasses("text-muted")}`}>
              Your field trip event creation will be cancelled and your work
              will be lost. This cannot be undone. Do you want to continue?
            </p>
          </div>
          <div className="flex flex-col sm:flex-row sm:justify-end gap-3 pt-4">
            <Button
              onClick={() => setShowCancelWarning(false)}
              variant="secondary"
            >
              No, Keep Working
            </Button>
            <Button onClick={handleConfirmCancel} variant="danger">
              Yes, Cancel
            </Button>
          </div>
        </Modal>
      </div>
    );
  },
);

export default AdminEventFieldTripAddPage;
