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

import React, { useState, useEffect, useCallback } from "react";
import { Link, useNavigate } from "react-router";
import {
  useEventOrderWizardStorage,
  useAttachmentManager,
} from "../../../../services/Services";
import {
  Button,
  Card,
  Alert,
  Spinner,
  UIXThemeProvider,
  useUIXTheme,
} from "../../../../components/UIX";
import {
  ChevronRightIcon,
  ChartBarIcon,
  TicketIcon,
  CheckCircleIcon,
  ArrowLeftIcon,
  ArrowRightIcon,
  ExclamationTriangleIcon,
  DocumentTextIcon,
  PaperClipIcon,
  CloudArrowUpIcon,
  TrashIcon,
  DocumentIcon,
  InformationCircleIcon,
  PlusIcon,
} from "@heroicons/react/24/outline";
// Note: Using string "temporary" instead of ATTACHMENT_OWNERSHIP_TYPE.TEMPORARY
// because AttachmentAPI expects string keys for ATTACHMENT_TYPE_NAMES lookup

function AdminEventOrderAddStep4Page() {
  const navigate = useNavigate();
  const wizardStorage = useEventOrderWizardStorage();
  const attachmentManager = useAttachmentManager();
  const { getThemeClasses } = useUIXTheme();

  // State management
  const [customer, setCustomer] = useState(null);
  const [event, setEvent] = useState(null);
  const [orderDetails, setOrderDetails] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // Attachment state
  const [attachments, setAttachments] = useState([]);
  const [isUploadingFiles, setIsUploadingFiles] = useState(false);
  const [uploadProgress, setUploadProgress] = useState({});
  const [errors, setErrors] = useState({});
  const [successMessage, setSuccessMessage] = useState("");
  const [isDragOver, setIsDragOver] = useState(false);

  // Load wizard data on mount
  useEffect(() => {
    const customerData = wizardStorage.getCustomer();
    const eventData = wizardStorage.getEvent();
    const orderDetailsData = wizardStorage.getOrderDetails();

    // Check if we have required data
    if (!customerData) {
      setError("Customer information is missing. Please start from step 1.");
      setLoading(false);
      return;
    }

    if (!eventData) {
      setError(
        "Event information is missing. Please select an event in step 2.",
      );
      setLoading(false);
      return;
    }

    if (
      !orderDetailsData ||
      !orderDetailsData.eventAttendeeCapacity ||
      !orderDetailsData.sector ||
      !orderDetailsData.eventCategoryId ||
      orderDetailsData.specializationIds === undefined ||
      orderDetailsData.certificationIds === undefined
    ) {
      setError(
        "Order requirements are missing. Please complete all requirements in step 3.",
      );
      setLoading(false);
      return;
    }

    setCustomer(customerData);
    setEvent(eventData);
    setOrderDetails(orderDetailsData);
    setLoading(false);
  }, [wizardStorage]);

  // Generate a valid MongoDB ObjectID for temporary attachments
  const generateObjectId = useCallback(() => {
    // MongoDB ObjectID is a 24-character hex string
    // First 4 bytes: timestamp, next 5 bytes: random, last 3 bytes: counter
    const timestamp = Math.floor(Date.now() / 1000)
      .toString(16)
      .padStart(8, "0");
    const randomBytes = Math.random()
      .toString(16)
      .substring(2, 12)
      .padEnd(10, "0");
    const counter = Math.floor(Math.random() * 0xffffff)
      .toString(16)
      .padStart(6, "0");
    return timestamp + randomBytes + counter;
  }, []);

  // Get list of temporary attachment IDs for this wizard session
  const getTemporaryAttachmentIds = useCallback(() => {
    const attachmentIds =
      wizardStorage.getWizardStep("temporaryAttachmentIds") || [];
    return Array.isArray(attachmentIds) ? attachmentIds : [];
  }, [wizardStorage]);

  // Add a temporary attachment ID to the list
  const addTemporaryAttachmentId = useCallback(
    (attachmentId) => {
      const currentIds = getTemporaryAttachmentIds();

      if (!currentIds.includes(attachmentId)) {
        const updatedIds = [...currentIds, attachmentId];
        wizardStorage.updateWizardStep("temporaryAttachmentIds", updatedIds);
      }
    },
    [wizardStorage, getTemporaryAttachmentIds],
  );

  // Remove a temporary attachment ID from the list
  const removeTemporaryAttachmentId = useCallback(
    (attachmentId) => {
      const currentIds = getTemporaryAttachmentIds();
      const updatedIds = currentIds.filter((id) => id !== attachmentId);
      wizardStorage.updateWizardStep("temporaryAttachmentIds", updatedIds);
    },
    [wizardStorage, getTemporaryAttachmentIds],
  );

  // Clear all temporary attachment IDs (for cleanup after order creation)
  const clearTemporaryAttachmentIds = useCallback(() => {
    wizardStorage.updateWizardStep("temporaryAttachmentIds", []);
  }, [wizardStorage]);

  // Handle unauthorized access for attachment operations
  const onUnauthorized = useCallback(() => {
    navigate("/login?unauthorized=true");
  }, [navigate]);

  // Load attachments for this session
  const loadAttachments = useCallback(async () => {
    try {
      setErrors({});

      const temporaryAttachmentIds = getTemporaryAttachmentIds();

      // If no temporary attachment IDs are stored, show empty list
      if (temporaryAttachmentIds.length === 0) {
        setAttachments([]);
        return;
      }

      // Get all temporary attachments and then filter by our specific IDs
      const attachmentsData = await attachmentManager.getAttachments(
        {
          ownershipType: "temporary", // Use string key for ATTACHMENT_TYPE_NAMES lookup
          sortBy: "created_at",
          sortOrder: "DESC",
          limit: 1000, // Get more to ensure we capture all our attachments
        },
        onUnauthorized,
        true, // force refresh
      );

      // Filter to only show attachments with temporaryIds that match our stored temporary IDs
      const filteredAttachments = (attachmentsData.results || []).filter(
        (attachment) => temporaryAttachmentIds.includes(attachment.temporaryId),
      );

      setAttachments(filteredAttachments);
    } catch (error) {
      if (process.env.NODE_ENV === "development") {
        console.error("Step4Page: Failed to load attachments", error);
      }
      setErrors({
        load: "Failed to load attachments. Please try again.",
      });
    }
  }, [attachmentManager, getTemporaryAttachmentIds, onUnauthorized]);

  // Load attachments on component mount
  useEffect(() => {
    loadAttachments();
  }, [loadAttachments]);

  // File upload handler
  const handleFileUpload = useCallback(
    async (files) => {
      if (!files || files.length === 0) return;

      try {
        setIsUploadingFiles(true);
        setErrors({});

        const uploadPromises = Array.from(files).map(async (file, index) => {
          const fileId = `${Date.now()}_${index}`;
          setUploadProgress((prev) => ({ ...prev, [fileId]: 0 }));

          try {
            // Generate a unique temporary ID for this attachment
            const temporaryAttachmentId = generateObjectId();

            const metadata = {
              ownershipType: "temporary", // Use string key for ATTACHMENT_TYPE_NAMES lookup
              ownershipId: temporaryAttachmentId, // Use unique ID for each attachment
              title: file.name,
              description: `Temporary attachment for event order creation - File: ${file.name}`,
            };

            const uploadedAttachment = await attachmentManager.uploadAttachment(
              file,
              metadata,
              (progress) => {
                setUploadProgress((prev) => ({ ...prev, [fileId]: progress }));
              },
              onUnauthorized,
            );

            setUploadProgress((prev) => {
              const updated = { ...prev };
              delete updated[fileId];
              return updated;
            });

            // Add the temporary attachment ID to our stored list (not the server's attachment ID)
            // The backend will use this temporary ID to find the attachment
            addTemporaryAttachmentId(temporaryAttachmentId);

            return uploadedAttachment;
          } catch (error) {
            setUploadProgress((prev) => {
              const updated = { ...prev };
              delete updated[fileId];
              return updated;
            });
            throw error;
          }
        });

        await Promise.all(uploadPromises);

        // Reload attachments after successful upload
        await loadAttachments();

        setSuccessMessage(`Successfully uploaded ${files.length} file(s)`);
        setTimeout(() => setSuccessMessage(""), 3000);
      } catch (error) {
        if (process.env.NODE_ENV === "development") {
          console.error("Step4Page: File upload failed", error);
        }
        setErrors({
          upload:
            typeof error === "string"
              ? error
              : "Failed to upload files. Please try again.",
        });
      } finally {
        setIsUploadingFiles(false);
        setUploadProgress({});
      }
    },
    [
      attachmentManager,
      onUnauthorized,
      loadAttachments,
      generateObjectId,
      addTemporaryAttachmentId,
    ],
  );

  // File deletion handler
  const handleDeleteAttachment = useCallback(
    async (attachment) => {
      if (!window.confirm("Are you sure you want to delete this attachment?")) {
        return;
      }

      try {
        setErrors({});
        await attachmentManager.deleteAttachment(attachment.id, onUnauthorized);

        // Remove from our stored list of temporary attachment IDs (using temporaryId, not attachment.id)
        removeTemporaryAttachmentId(attachment.temporaryId);

        // Remove from local state
        setAttachments((prev) =>
          prev.filter((att) => att.id !== attachment.id),
        );

        setSuccessMessage("Attachment deleted successfully");
        setTimeout(() => setSuccessMessage(""), 3000);
      } catch (error) {
        if (process.env.NODE_ENV === "development") {
          console.error("Step4Page: Failed to delete attachment", error);
        }
        setErrors({
          delete: "Failed to delete attachment. Please try again.",
        });
      }
    },
    [attachmentManager, onUnauthorized, removeTemporaryAttachmentId],
  );

  // Drag and drop handlers
  const handleDragOver = useCallback((e) => {
    e.preventDefault();
    setIsDragOver(true);
  }, []);

  const handleDragLeave = useCallback((e) => {
    e.preventDefault();
    setIsDragOver(false);
  }, []);

  const handleDrop = useCallback(
    (e) => {
      e.preventDefault();
      setIsDragOver(false);

      const files = e.dataTransfer.files;
      if (files.length > 0) {
        handleFileUpload(files);
      }
    },
    [handleFileUpload],
  );

  // File input change handler
  const handleFileInputChange = useCallback(
    (e) => {
      const files = e.target.files;
      if (files && files.length > 0) {
        handleFileUpload(files);
      }
      // Reset the input so the same file can be uploaded again
      e.target.value = "";
    },
    [handleFileUpload],
  );

  // Format file size for display
  const formatFileSize = useCallback((bytes) => {
    if (bytes === 0) return "0 Bytes";
    const k = 1024;
    const sizes = ["Bytes", "KB", "MB", "GB"];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
  }, []);

  // Get file type icon
  const getFileTypeIcon = useCallback((fileType) => {
    if (fileType?.startsWith("image/")) {
      return <DocumentIcon className="w-6 h-6 text-green-500" />;
    } else if (fileType === "application/pdf") {
      return <DocumentIcon className="w-6 h-6 text-red-500" />;
    } else if (fileType?.includes("word") || fileType?.includes("document")) {
      return <DocumentIcon className="w-6 h-6 text-blue-500" />;
    } else if (fileType?.includes("sheet") || fileType?.includes("excel")) {
      return <DocumentIcon className="w-6 h-6 text-green-600" />;
    } else {
      return (
        <DocumentIcon className="w-6 h-6 ${getThemeClasses('text-muted')}" />
      );
    }
  }, []);

  // Handle continue to review step
  const handleContinue = () => {
    // Navigate to final review step
    navigate("/admin/event-orders/add/step-5");
  };

  // Handle going back to order requirements
  const handleBackToOrderRequirements = () => {
    navigate("/admin/event-orders/add/step-3");
  };

  // Handle starting over
  const handleStartOver = () => {
    // Clear temporary attachment IDs before clearing wizard data
    clearTemporaryAttachmentIds();
    wizardStorage.clearWizardData();
    navigate("/admin/event-orders/add/step-1-search");
  };

  // Show loading state while checking wizard data
  if (loading) {
    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-8">
          <div className="flex flex-col items-center justify-center py-12">
            <Spinner size="lg" />
            <p className={`mt-4 ${getThemeClasses("text-secondary")}`}>
              Loading additional details...
            </p>
          </div>
        </div>
      </div>
    );
  }

  // Show error state if missing required data
  if (error && (!customer || !event || !orderDetails)) {
    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-8">
          <Card>
            <div className="p-6 text-center">
              <ExclamationTriangleIcon
                className={`mx-auto h-12 w-12 ${getThemeClasses("text-muted")} mb-4`}
              />
              <h3
                className={`text-lg font-medium ${getThemeClasses("text-primary")} mb-2`}
              >
                Missing Information
              </h3>
              <p className={`${getThemeClasses("text-secondary")} mb-6`}>
                {error}
              </p>
              <div className="flex justify-center gap-3">
                <Button variant="secondary" onClick={handleStartOver}>
                  Start Over
                </Button>
                <Link to="/admin/event-orders">
                  <Button variant="primary">Go to Event Orders</Button>
                </Link>
              </div>
            </div>
          </Card>
        </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-8">
        {/* Breadcrumb */}
        <nav className="flex mb-8" aria-label="Breadcrumb">
          <ol className="inline-flex items-center space-x-1 md:space-x-3">
            <li className="inline-flex items-center">
              <Link
                to="/admin/dashboard"
                className={`inline-flex items-center text-sm font-medium ${getThemeClasses("text-secondary")} hover:text-blue-600`}
              >
                <ChartBarIcon className="w-4 h-4 mr-2" />
                Dashboard
              </Link>
            </li>
            <li>
              <div className="flex items-center">
                <ChevronRightIcon
                  className={`w-5 h-5 ${getThemeClasses("text-muted")}`}
                />
                <Link
                  to="/admin/event-orders"
                  className={`ml-1 text-sm font-medium ${getThemeClasses("text-secondary")} hover:text-blue-600 md:ml-2`}
                >
                  Event Orders
                </Link>
              </div>
            </li>
            <li aria-current="page">
              <div className="flex items-center">
                <ChevronRightIcon
                  className={`w-5 h-5 ${getThemeClasses("text-muted")}`}
                />
                <span
                  className={`ml-1 text-sm font-medium ${getThemeClasses("text-primary")} md:ml-2`}
                >
                  Create New Order
                </span>
              </div>
            </li>
          </ol>
        </nav>

        {/* Header */}
        <div className="mb-8">
          <h1
            className={`text-3xl font-bold ${getThemeClasses("text-primary")} flex items-center`}
          >
            <PaperClipIcon className="w-8 h-8 mr-3 text-blue-600" />
            Create Event Order - Step 4: Attachments
          </h1>
          <p className={`mt-2 ${getThemeClasses("text-secondary")}`}>
            Upload any relevant documents or files for this event order. All
            attachments are temporary and will be associated with the order upon
            creation.
          </p>
        </div>

        {/* Progress Steps */}
        <div className="mb-8">
          <div className="flex items-center">
            <div className="flex items-center">
              <div className="flex items-center justify-center w-8 h-8 bg-green-600 rounded-full text-white text-sm font-bold">
                <CheckCircleIcon className="w-5 h-5" />
              </div>
              <span className="ml-2 text-sm font-medium ${getThemeClasses('text-primary')}">
                Find Customer
              </span>
            </div>
            <ChevronRightIcon className="w-5 h-5 ${getThemeClasses('text-muted')} mx-4" />
            <div className="flex items-center">
              <div className="flex items-center justify-center w-8 h-8 bg-green-600 rounded-full text-white text-sm font-bold">
                <CheckCircleIcon className="w-5 h-5" />
              </div>
              <span className="ml-2 text-sm font-medium ${getThemeClasses('text-primary')}">
                Select Event
              </span>
            </div>
            <ChevronRightIcon className="w-5 h-5 ${getThemeClasses('text-muted')} mx-4" />
            <div className="flex items-center">
              <div className="flex items-center justify-center w-8 h-8 bg-green-600 rounded-full text-white text-sm font-bold">
                <CheckCircleIcon className="w-5 h-5" />
              </div>
              <span className="ml-2 text-sm font-medium ${getThemeClasses('text-primary')}">
                Order Requirements
              </span>
            </div>
            <ChevronRightIcon className="w-5 h-5 ${getThemeClasses('text-muted')} mx-4" />
            <div className="flex items-center">
              <div className="flex items-center justify-center w-8 h-8 bg-blue-600 rounded-full text-white text-sm font-bold">
                4
              </div>
              <span className="ml-2 text-sm font-medium ${getThemeClasses('text-primary')}">
                Attachments
              </span>
            </div>
            <ChevronRightIcon className="w-5 h-5 ${getThemeClasses('text-muted')} mx-4" />
            <div className="flex items-center">
              <div className="flex items-center justify-center w-8 h-8 bg-gray-300 rounded-full ${getThemeClasses('text-secondary')} text-sm font-bold">
                5
              </div>
              <span className="ml-2 text-sm font-medium ${getThemeClasses('text-muted')}">
                Review & Confirm
              </span>
            </div>
          </div>
        </div>

        {/* Error and Success Messages */}
        {errors.load && (
          <div className="mb-6">
            <Alert variant="error" icon={ExclamationTriangleIcon}>
              {errors.load}
            </Alert>
          </div>
        )}

        {errors.upload && (
          <div className="mb-6">
            <Alert variant="error" icon={ExclamationTriangleIcon}>
              {errors.upload}
            </Alert>
          </div>
        )}

        {errors.delete && (
          <div className="mb-6">
            <Alert variant="error" icon={ExclamationTriangleIcon}>
              {errors.delete}
            </Alert>
          </div>
        )}

        {successMessage && (
          <div className="mb-6">
            <Alert variant="success" icon={CheckCircleIcon}>
              {successMessage}
            </Alert>
          </div>
        )}

        {/* Error Messages */}
        {error && !loading && (
          <Alert
            type="error"
            dismissible
            onDismiss={() => setError(null)}
            className="mb-6"
          >
            {error}
          </Alert>
        )}

        {/* Attachments Section */}
        <div className="space-y-6">
          {/* File Upload Card */}
          <Card>
            <div className="p-6">
              <div className="flex items-center mb-4">
                <CloudArrowUpIcon className="w-6 h-6 text-blue-600 mr-2" />
                <h2 className="text-xl font-semibold ${getThemeClasses('text-primary')}">
                  Upload Attachments
                </h2>
              </div>

              {/* File Upload Area */}
              <div
                className={`border-2 border-dashed rounded-lg p-8 text-center transition-colors ${
                  isDragOver
                    ? "border-blue-500 bg-blue-50"
                    : "${getThemeClasses('border-border')} hover:border-gray-400"
                } ${isUploadingFiles ? "opacity-50 pointer-events-none" : ""}`}
                onDragOver={handleDragOver}
                onDragLeave={handleDragLeave}
                onDrop={handleDrop}
              >
                <CloudArrowUpIcon className="w-12 h-12 ${getThemeClasses('text-muted')} mx-auto mb-4" />
                <div className="space-y-2">
                  <p className="text-lg font-medium ${getThemeClasses('text-primary')}">
                    {isDragOver
                      ? "Drop files here"
                      : "Drag and drop files here"}
                  </p>
                  <p className="${getThemeClasses('text-secondary')}">
                    or{" "}
                    <label
                      htmlFor="file-upload"
                      className="text-blue-600 hover:text-blue-700 cursor-pointer font-medium"
                    >
                      browse to upload
                    </label>
                  </p>
                  <p className="text-sm ${getThemeClasses('text-muted')}">
                    Supports: PDF, Word, Excel, Images, Text files (max 50MB
                    each)
                  </p>
                </div>

                <input
                  id="file-upload"
                  type="file"
                  multiple
                  className="hidden"
                  onChange={handleFileInputChange}
                  disabled={isUploadingFiles}
                  accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.webp,.txt,.csv"
                />
              </div>

              {/* Upload Progress */}
              {Object.keys(uploadProgress).length > 0 && (
                <div className="mt-4 space-y-2">
                  <p className="text-sm font-medium ${getThemeClasses('text-secondary')}">
                    Uploading files...
                  </p>
                  {Object.entries(uploadProgress).map(([fileId, progress]) => (
                    <div
                      key={fileId}
                      className="w-full bg-gray-200 rounded-full h-2"
                    >
                      <div
                        className="bg-blue-600 h-2 rounded-full transition-all duration-300"
                        style={{ width: `${progress}%` }}
                      ></div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </Card>

          {/* Attachments List Card */}
          <Card>
            <div className="p-6">
              <div className="flex items-center justify-between mb-4">
                <div className="flex items-center">
                  <PaperClipIcon className="w-6 h-6 text-blue-600 mr-2" />
                  <h2 className="text-xl font-semibold ${getThemeClasses('text-primary')}">
                    Uploaded Attachments
                  </h2>
                  <span className="ml-2 px-2 py-1 ${getThemeClasses('bg-muted')} ${getThemeClasses('text-secondary')} rounded-full text-sm">
                    {attachments.length}
                  </span>
                </div>
              </div>

              {/* Attachments List */}
              {loading && attachments.length === 0 ? (
                <div className="text-center py-8">
                  <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
                  <p className="mt-2 ${getThemeClasses('text-secondary')}">
                    Loading attachments...
                  </p>
                </div>
              ) : attachments.length === 0 ? (
                <div className="text-center py-8">
                  <DocumentIcon className="w-12 h-12 text-gray-300 mx-auto mb-4" />
                  <p className="${getThemeClasses('text-secondary')}">
                    No attachments uploaded yet
                  </p>
                  <p className="text-sm ${getThemeClasses('text-muted')} mt-1">
                    Upload files using the area above
                  </p>
                </div>
              ) : (
                <div className="space-y-3">
                  {attachments.map((attachment) => (
                    <div
                      key={attachment.id}
                      className="flex items-center justify-between p-4 ${getThemeClasses('bg-muted')} rounded-lg border"
                    >
                      <div className="flex items-center space-x-3">
                        {getFileTypeIcon(attachment.fileType)}
                        <div>
                          <p className="font-medium ${getThemeClasses('text-primary')}">
                            {attachment.fileName || attachment.title}
                          </p>
                          <div className="flex items-center space-x-4 text-sm ${getThemeClasses('text-muted')}">
                            <span>{formatFileSize(attachment.fileSize)}</span>
                            <span>{attachment.fileType}</span>
                            {attachment.createdAt && (
                              <span>Uploaded: {attachment.createdAt}</span>
                            )}
                          </div>
                        </div>
                      </div>

                      <div className="flex items-center space-x-2">
                        <Button
                          variant="danger"
                          size="sm"
                          onClick={() => handleDeleteAttachment(attachment)}
                          className="flex items-center"
                        >
                          <TrashIcon className="w-4 h-4 mr-1" />
                          Delete
                        </Button>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </Card>

          {/* Navigation Card */}
          <Card>
            <div className="p-6">
              <div className="flex items-center mb-4">
                <InformationCircleIcon className="w-6 h-6 text-blue-600 mr-2" />
                <h2 className="text-xl font-semibold ${getThemeClasses('text-primary')}">
                  Next Steps
                </h2>
              </div>

              <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
                <p className="text-sm text-blue-800">
                  When you're finished uploading attachments, proceed to the
                  final step to review and create your event order.
                </p>
              </div>

              {/* Action Buttons */}
              <div className="flex justify-between">
                <div className="flex gap-3">
                  <Button
                    variant="secondary"
                    onClick={handleBackToOrderRequirements}
                  >
                    <ArrowLeftIcon className="w-4 h-4 mr-1" />
                    Back to Order Requirements
                  </Button>
                  <Button variant="secondary" onClick={handleStartOver}>
                    Start Over
                  </Button>
                </div>
                <div className="flex gap-3">
                  <Link to="/admin/event-orders">
                    <Button variant="secondary">Cancel</Button>
                  </Link>
                  <Button variant="primary" onClick={handleContinue}>
                    Next: Review & Confirm
                    <CheckCircleIcon className="w-4 h-4 ml-1" />
                  </Button>
                </div>
              </div>
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
}

function AdminEventOrderAddStep4PageWrapper() {
  return (
    <UIXThemeProvider>
      <AdminEventOrderAddStep4Page />
    </UIXThemeProvider>
  );
}

export default AdminEventOrderAddStep4PageWrapper;
