// File Path: monorepo/web/frontend/src/pages/Admin/Customer/Add/Step6Page.jsx

import React, { useState, useEffect, useCallback } from "react";
import { Link, useNavigate } from "react-router";
import {
  useAuthManager,
  useCustomerManager,
} from "../../../../services/Services";
import {
  UserPlusIcon,
  ArrowLeftIcon,
  PencilSquareIcon,
  UserIcon,
  MapPinIcon,
  ChartBarSquareIcon,
  CheckCircleIcon,
  ChartPieIcon,
  ExclamationTriangleIcon,
  ChevronRightIcon,
} from "@heroicons/react/24/outline";
import {
  StepWizard,
  Alert,
  Button,
  FormCard,
  UIXThemeProvider,
  useUIXTheme,
} from "../../../../components/UIX";
import {
  HowHearAboutUsDisplay,
  TagsDisplay,
} from "../../../../components/business/displays";

import {
  CUSTOMER_PHONE_TYPE_LABELS,
  CUSTOMER_PHONE_TYPES,
  CUSTOMER_TYPE_OPTIONS,
  CUSTOMER_TYPE_REVERSE_MAPPING,
  CUSTOMER_GENDER_LABELS,
  CUSTOMER_GENDER_TYPES,
} from "../../../../constants/Customer";

// Wizard steps configuration
const WIZARD_STEPS = [
  { id: 1, title: "Search", isCompleted: true },
  { id: 2, title: "Type", isCompleted: true },
  { id: 3, title: "Contact", isCompleted: true },
  { id: 4, title: "Address", isCompleted: true },
  { id: 5, title: "Account", isCompleted: true },
  { id: 6, title: "Review", isCompleted: false },
];


// Field to step mapping for navigation
const FIELD_TO_STEP_MAPPING = {
  // Step 2 fields
  type: 2,
  organization_id: 2,
  organizationId: 2,
  division_id: 2,
  divisionId: 2,

  // Step 3 fields
  first_name: 3,
  firstName: 3,
  last_name: 3,
  lastName: 3,
  email: 3,
  phone: 3,
  phone_type: 3,
  phoneType: 3,
  phone_extension: 3,
  phoneExtension: 3,
  is_ok_to_email: 3,
  isOkToEmail: 3,
  is_ok_to_text: 3,
  isOkToText: 3,
  other_phone: 3,
  otherPhone: 3,
  other_phone_type: 3,
  otherPhoneType: 3,
  other_phone_extension: 3,
  otherPhoneExtension: 3,

  // Step 4 fields
  address_line1: 4,
  addressLine1: 4,
  address_line2: 4,
  addressLine2: 4,
  city: 4,
  region: 4,
  postal_code: 4,
  postalCode: 4,
  country: 4,
  has_shipping_address: 4,
  hasShippingAddress: 4,
  shipping_name: 4,
  shippingName: 4,
  shipping_phone: 4,
  shippingPhone: 4,
  shipping_address_line1: 4,
  shippingAddressLine1: 4,
  shipping_address_line2: 4,
  shippingAddressLine2: 4,
  shipping_city: 4,
  shippingCity: 4,
  shipping_region: 4,
  shippingRegion: 4,
  shipping_postal_code: 4,
  shippingPostalCode: 4,
  shipping_country: 4,
  shippingCountry: 4,

  // Step 5 fields
  tags: 5,
  how_did_you_hear_about_us_id: 5,
  howDidYouHearAboutUsId: 5,
  howDidYouHearAboutUsID: 5,
  is_how_did_you_hear_about_us_other: 5,
  isHowDidYouHearAboutUsOther: 5,
  how_did_you_hear_about_us_other: 5,
  howDidYouHearAboutUsOther: 5,
  gender: 5,
  gender_other: 5,
  genderOther: 5,
  birth_date: 5,
  birthDate: 5,
  join_date: 5,
  joinDate: 5,
  preferred_language: 5,
  preferredLanguage: 5,
  additional_comment: 5,
  additionalComment: 5,
};

// Field label mapping for user-friendly error messages
const FIELD_LABEL_MAPPING = {
  email: "Email",
  firstName: "First Name",
  first_name: "First Name",
  lastName: "Last Name",
  last_name: "Last Name",
  phone: "Phone",
  organizationId: "Organization",
  organization_id: "Organization",
  divisionId: "Division",
  division_id: "Division",
  type: "Customer Type",
  addressLine1: "Address",
  address_line1: "Address",
  city: "City",
  region: "Province/Territory",
  postalCode: "Postal Code",
  postal_code: "Postal Code",
  country: "Country",
  tags: "Tags",
  howDidYouHearAboutUsId: "How did you hear about us",
  howDidYouHearAboutUsID: "How did you hear about us",
  how_did_you_hear_about_us_id: "How did you hear about us",
  birthDate: "Birth Date",
  birth_date: "Birth Date",
  joinDate: "Join Date",
  join_date: "Join Date",
  preferredLanguage: "Preferred Language",
  preferred_language: "Preferred Language",
};

function AdminCustomerAddStep6Page() {
  const authManager = useAuthManager();
  const customerManager = useCustomerManager();
  const navigate = useNavigate();
  const { getThemeClasses } = useUIXTheme();

  // Component states
  const [errors, setErrors] = useState({});
  const [fieldErrors, setFieldErrors] = useState({});
  const [isLoading, setIsLoading] = useState(false);
  const [customerData, setCustomerData] = useState(null);

  const loadCustomerState = useCallback(() => {
    try {
      const existing = sessionStorage.getItem(
        "FLASHPOINTTRAINING_CUSTOMER_CREATION_STATE",
      );
      if (existing) {
        const customerState = JSON.parse(existing);
        setCustomerData(customerState);
      } else {
        // No state found, redirect back to step 1
        navigate("/admin/customers/add/step-1");
      }
    } catch (error) {
      if (import.meta.env.DEV) {
        console.error("Error loading customer state:", error);
      }
      navigate("/admin/customers/add/step-1");
    }
  }, [navigate]);

  // Check authentication and load existing state
  useEffect(() => {
    if (!authManager.isAuthenticated()) {
      navigate("/login");
      return;
    }

    loadCustomerState();
  }, [authManager, navigate, loadCustomerState]);

  const processCustomerData = useCallback((data) => {
    // Create a payload with the customer data
    const payload = { ...data };

    // Ensure organization_id and division_id are included
    if (!payload.organization_id) {
      throw new Error("Organization ID is required");
    }
    if (!payload.division_id) {
      throw new Error("Division ID is required");
    }

    // Clean up tags - ensure they are valid MongoDB ObjectID strings
    if (payload.tags && Array.isArray(payload.tags)) {
      payload.tags = payload.tags.filter(
        (tag) =>
          tag !== null &&
          tag !== undefined &&
          tag !== "" &&
          tag !== "0" &&
          tag !== 0 &&
          typeof tag === "string" &&
          tag.length === 24, // MongoDB ObjectIDs are 24 characters
      );

      // If no valid tags remain, set to empty array
      if (payload.tags.length === 0) {
        payload.tags = [];
      }
    } else {
      payload.tags = [];
    }

    // Format join date for API
    if (payload.join_date) {
      const joinDateObject = new Date(payload.join_date);
      payload.join_date = joinDateObject.toISOString();
    }

    // Format birth date if present
    if (payload.birth_date && !payload.birth_date.includes("T")) {
      payload.birth_date = new Date(payload.birth_date).toISOString();
    }

    // Convert numeric fields to ensure they are integers
    if (payload.type !== undefined) {
      payload.type = parseInt(payload.type);
    }
    if (payload.phone_type !== undefined) {
      payload.phone_type = parseInt(payload.phone_type);
    }
    if (
      payload.other_phone_type !== undefined &&
      payload.other_phone_type !== 0
    ) {
      payload.other_phone_type = parseInt(payload.other_phone_type);
    }
    if (payload.gender !== undefined && payload.gender !== 0) {
      payload.gender = parseInt(payload.gender);
    }
    if (payload.gender_other === undefined) {
      payload.gender_other = "";
    }

    // IMPORTANT: Keep IDs as strings (MongoDB ObjectIDs)
    if (payload.how_did_you_hear_about_us_id) {
      payload.how_did_you_hear_about_us_id = String(
        payload.how_did_you_hear_about_us_id,
      );
    }
    if (payload.organization_id) {
      payload.organization_id = String(payload.organization_id);
    }
    if (payload.division_id) {
      payload.division_id = String(payload.division_id);
    }

    // Remove the is_how_did_you_hear_about_us_other field if it's false
    if (payload.is_how_did_you_hear_about_us_other === false) {
      delete payload.is_how_did_you_hear_about_us_other;
    }

    // Remove empty/zero values for optional numeric fields
    if (payload.other_phone_type === 0) delete payload.other_phone_type;

    // Remove the customerTypeString as it's not needed by the backend
    delete payload.customerTypeString;

    return payload;
  }, []);

  const onSubmitClick = useCallback(async (e) => {
    e.preventDefault();
    setErrors({});
    setFieldErrors({});
    setIsLoading(true);

    try {
      if (!customerData) {
        throw new Error("No customer data found");
      }

      // Process the data for API submission
      const processedData = processCustomerData(customerData);

      if (import.meta.env.DEV) {
        // SECURITY: Only log non-sensitive summary in development
        console.log("Submitting customer data for:", processedData.email);
      }

      // Submit to API
      const response = await customerManager.createCustomer(processedData, () =>
        navigate("/login?unauthorized=true"),
      );

      if (import.meta.env.DEV) {
        console.log("Customer created successfully with ID:", response.id);
      }

      // Clear the session storage
      sessionStorage.removeItem("FLASHPOINTTRAINING_CUSTOMER_CREATION_STATE");

      // Show success message and redirect
      navigate(`/admin/customer/${response.id}`, {
        state: { successMessage: "Customer created successfully!" },
      });
    } catch (error) {
      if (import.meta.env.DEV) {
        console.error("Failed to create customer:", error);
      }

      // Handle different error formats
      if (error && typeof error === "object") {
        // Check if it's field-specific errors
        const hasFieldErrors = Object.keys(error).some(
          (key) =>
            key !== "message" &&
            key !== "non_field_error" &&
            key !== "nonFieldError" &&
            key !== "detail",
        );

        if (hasFieldErrors) {
          // Extract field errors
          const fieldErrs = {};
          Object.keys(error).forEach((key) => {
            if (
              key !== "message" &&
              key !== "non_field_error" &&
              key !== "nonFieldError" &&
              key !== "detail"
            ) {
              fieldErrs[key] = error[key];
            }
          });
          setFieldErrors(fieldErrs);

          // Set a general message
          if (
            error.message ||
            error.non_field_error ||
            error.nonFieldError ||
            error.detail
          ) {
            setErrors({
              message:
                error.message ||
                error.non_field_error ||
                error.nonFieldError ||
                error.detail,
            });
          } else {
            setErrors({
              message: "Please correct the errors below and try again.",
            });
          }
        } else if (
          error.message ||
          error.non_field_error ||
          error.nonFieldError ||
          error.detail
        ) {
          // General error message
          setErrors({
            message:
              error.message ||
              error.non_field_error ||
              error.nonFieldError ||
              error.detail,
          });
        } else {
          // Unknown error format
          setErrors({
            message:
              "An unexpected error occurred while creating the customer.",
          });
        }
      } else {
        // Error is not an object
        setErrors({
          message:
            error ||
            "An unexpected error occurred while creating the customer.",
        });
      }

      window.scrollTo(0, 0);
    } finally {
      setIsLoading(false);
    }
  }, [customerData, processCustomerData, customerManager, navigate]);

  // Helper function to get the step number for a field
  const getStepForField = useCallback((fieldName) => {
    return FIELD_TO_STEP_MAPPING[fieldName] || null;
  }, []);

  // Helper function to get user-friendly field label
  const getFieldLabel = useCallback((fieldName) => {
    return FIELD_LABEL_MAPPING[fieldName] || fieldName;
  }, []);

  // Detail Field Component for displaying read-only data
  const DetailField = ({ label, value, fullWidth = false }) => (
    <div className={fullWidth ? "lg:col-span-2" : ""}>
      <dt className={`text-xs sm:text-sm font-medium ${getThemeClasses('text-secondary')} mb-1`}>
        {label}
      </dt>
      <dd className={`text-sm sm:text-base font-medium ${getThemeClasses('text-primary')} break-words`}>
        {value || "-"}
      </dd>
    </div>
  );

  const getTypeLabel = useCallback((type) => {
    const option = CUSTOMER_TYPE_OPTIONS.find((opt) => opt.value === type);
    return option ? option.label : "Unknown";
  }, []);

  const getCustomerTypeStringLabel = useCallback((customerData) => {
    // If we have the original string type saved, use it for display
    if (customerData.customerTypeString) {
      return (
        customerData.customerTypeString.charAt(0).toUpperCase() +
        customerData.customerTypeString.slice(1)
      );
    }
    // Otherwise use the reverse mapping
    const typeString = CUSTOMER_TYPE_REVERSE_MAPPING[customerData.type];
    if (typeString) {
      return typeString.charAt(0).toUpperCase() + typeString.slice(1);
    }
    // Fall back to the numeric type label
    return getTypeLabel(customerData.type);
  }, [getTypeLabel]);

  const getPhoneTypeLabel = useCallback((phoneType) => {
    return CUSTOMER_PHONE_TYPE_LABELS[phoneType] || "Unknown";
  }, []);

  const getGenderLabel = useCallback((gender) => {
    return CUSTOMER_GENDER_LABELS[gender] || "Unknown";
  }, []);

  // Helper function to parse array values
  const parseArrayValue = useCallback((value) => {
    if (!value) return [];
    if (Array.isArray(value)) return value;
    if (typeof value === "string") {
      return value
        .split(",")
        .map((id) => id.trim())
        .filter(Boolean);
    }
    return [];
  }, []);

  const handleBack = useCallback(() => {
    navigate("/admin/customers/add/step-5");
  }, [navigate]);

  if (!customerData) {
    return (
      <UIXThemeProvider>
        <StepWizard
          steps={WIZARD_STEPS}
          currentStep={6}
          title="Add New Customer"
          subtitle="Review and submit"
          icon={UserPlusIcon}
        >
        <div className="flex items-center justify-center py-12">
          <div className={`animate-spin rounded-full h-12 w-12 border-b-2 ${getThemeClasses('border-accent')}`}></div>
          <span className={`ml-3 ${getThemeClasses('text-secondary')}`}>Loading...</span>
        </div>
      </StepWizard>
      </UIXThemeProvider>
    );
  }

  return (
    <UIXThemeProvider>
      <StepWizard
        steps={WIZARD_STEPS}
        currentStep={6}
        title="Add New Customer"
        subtitle="Review and submit"
        icon={UserPlusIcon}
      >
      <div className="mb-6">
        <p className={`text-sm sm:text-base ${getThemeClasses('text-secondary')}`}>
          Please carefully review the following customer details. If
          everything looks correct, click the <strong>Submit</strong> button
          to create the new customer.
        </p>
      </div>

      {/* General Error Message */}
      {errors.message && (
        <Alert
          type="error"
          message={errors.message}
          onClose={() => setErrors({})}
          className="mb-6"
        />
      )}

            {/* Field-Specific Errors */}
            {Object.keys(fieldErrors).length > 0 && (
              <div className={`mb-6 ${getThemeClasses('alert-error-bg')} border ${getThemeClasses('alert-error-border')} rounded-lg p-4`}>
                <div className="flex items-start mb-3">
                  <ExclamationTriangleIcon className={`w-5 h-5 ${getThemeClasses('alert-error-text')} mr-2 flex-shrink-0 mt-0.5`} />
                  <div className="flex-1">
                    <h3 className={`text-sm font-medium ${getThemeClasses('alert-error-text')}`}>
                      Please correct the following errors:
                    </h3>
                  </div>
                </div>
                <ul className="space-y-2">
                  {Object.entries(fieldErrors).map(
                    ([fieldName, errorMessage]) => {
                      const step = getStepForField(fieldName);
                      const fieldLabel = getFieldLabel(fieldName);
                      return (
                        <li key={fieldName} className="flex items-start">
                          <span className={`w-2 h-2 ${getThemeClasses('alert-error-text')} rounded-full mt-1.5 mr-2 flex-shrink-0`}></span>
                          <div className="flex-1">
                            <span className={`text-sm ${getThemeClasses('alert-error-text')}`}>
                              <strong>{fieldLabel}:</strong> {errorMessage}
                            </span>
                            {step && (
                              <Link
                                to={`/admin/customers/add/step-${step}`}
                                className={`ml-2 text-xs ${getThemeClasses('alert-error-text')} hover:opacity-80 underline inline-flex items-center`}
                              >
                                Go to Step {step}
                                <ChevronRightIcon className="w-3 h-3 ml-1" />
                              </Link>
                            )}
                          </div>
                        </li>
                      );
                    },
                  )}
                </ul>
              </div>
            )}

            {isLoading ? (
              <div className="flex items-center justify-center py-8">
                <div className={`animate-spin rounded-full h-12 w-12 border-b-2 ${getThemeClasses('border-accent')}`}></div>
                <span className={`ml-3 ${getThemeClasses('text-secondary')}`}>Creating customer...</span>
              </div>
            ) : (
              <div className="space-y-0">
                {/* Type and Organization Information Section */}
                <FormCard
                  title="Type and Organization"
                  icon={ChartBarSquareIcon}
                  maxWidth="full"
                  className="mb-6"
                  actions={
                    <Link
                      to="/admin/customers/add/step-2"
                      className={`inline-flex items-center text-xs sm:text-sm ${getThemeClasses('text-accent')} ${getThemeClasses('link-hover')}`}
                    >
                      <PencilSquareIcon className="w-3 sm:w-4 h-3 sm:h-4 mr-1" />
                      Edit
                    </Link>
                  }
                >
                  <dl className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6">
                    <DetailField
                      label="Customer Type"
                      value={getCustomerTypeStringLabel(customerData)}
                    />
                    {customerData.organizationName && (
                      <DetailField
                        label="Organization"
                        value={customerData.organizationName}
                      />
                    )}
                    {customerData.divisionName && (
                      <DetailField
                        label="Division"
                        value={customerData.divisionName}
                      />
                    )}
                  </dl>
                </FormCard>

                {/* Contact Information Section */}
                <FormCard
                  title="Contact Information"
                  icon={UserIcon}
                  maxWidth="full"
                  className="mb-6"
                  actions={
                    <Link
                      to="/admin/customers/add/step-3"
                      className={`inline-flex items-center text-xs sm:text-sm ${getThemeClasses('text-accent')} ${getThemeClasses('link-hover')}`}
                    >
                      <PencilSquareIcon className="w-3 sm:w-4 h-3 sm:h-4 mr-1" />
                      Edit
                    </Link>
                  }
                >
                  <dl className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6">
                    <DetailField
                      label="First Name"
                      value={customerData.first_name}
                    />
                    <DetailField
                      label="Last Name"
                      value={customerData.last_name}
                    />
                    <DetailField
                      label="Email"
                      value={customerData.email || "Not provided"}
                    />
                    <DetailField
                      label="Phone"
                      value={`${customerData.phone} (${getPhoneTypeLabel(customerData.phone_type)})`}
                    />

                    {customerData.phone_type === CUSTOMER_PHONE_TYPES.WORK &&
                      customerData.phone_extension && (
                        <DetailField
                          label="Phone Extension"
                          value={customerData.phone_extension}
                        />
                      )}

                    <DetailField
                      label="OK to Email"
                      value={customerData.is_ok_to_email ? "Yes" : "No"}
                    />
                    <DetailField
                      label="OK to Text"
                      value={customerData.is_ok_to_text ? "Yes" : "No"}
                    />

                    {customerData.other_phone && (
                      <>
                        <DetailField
                          label="Other Phone"
                          value={`${customerData.other_phone} (${getPhoneTypeLabel(customerData.other_phone_type)})`}
                        />
                        {customerData.other_phone_type ===
                          CUSTOMER_PHONE_TYPES.WORK &&
                          customerData.other_phone_extension && (
                            <DetailField
                              label="Other Phone Extension"
                              value={customerData.other_phone_extension}
                            />
                          )}
                      </>
                    )}
                  </dl>
                </FormCard>

                {/* Address Information Section */}
                <FormCard
                  title="Address Information"
                  icon={MapPinIcon}
                  maxWidth="full"
                  className="mb-6"
                  actions={
                    <Link
                      to="/admin/customers/add/step-4"
                      className={`inline-flex items-center text-xs sm:text-sm ${getThemeClasses('text-accent')} ${getThemeClasses('link-hover')}`}
                    >
                      <PencilSquareIcon className="w-3 sm:w-4 h-3 sm:h-4 mr-1" />
                      Edit
                    </Link>
                  }
                >
                  <dl className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6">
                    <DetailField
                      label="Address"
                      value={customerData.address_line1}
                    />
                    {customerData.address_line2 && (
                      <DetailField
                        label="Address Line 2"
                        value={customerData.address_line2}
                      />
                    )}
                    <DetailField label="City" value={customerData.city} />
                    <DetailField
                      label="Province/Territory"
                      value={customerData.region}
                    />
                    <DetailField
                      label="Postal Code"
                      value={customerData.postal_code}
                    />
                    <DetailField label="Country" value={customerData.country} />
                  </dl>

                  {customerData.has_shipping_address && (
                    <div className={`mt-6 pt-6 border-t ${getThemeClasses('border-border')}`}>
                      <p className={`text-sm font-semibold ${getThemeClasses('text-secondary')} mb-4`}>
                        Shipping Address
                      </p>
                      <dl className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6">
                        <DetailField
                          label="Name"
                          value={customerData.shipping_name}
                        />
                        <DetailField
                          label="Phone"
                          value={customerData.shipping_phone}
                        />
                        <DetailField
                          label="Address"
                          value={customerData.shipping_address_line1}
                        />
                        {customerData.shipping_address_line2 && (
                          <DetailField
                            label="Address Line 2"
                            value={customerData.shipping_address_line2}
                          />
                        )}
                        <DetailField
                          label="City"
                          value={customerData.shipping_city}
                        />
                        <DetailField
                          label="Province/Territory"
                          value={customerData.shipping_region}
                        />
                        <DetailField
                          label="Postal Code"
                          value={customerData.shipping_postal_code}
                        />
                        <DetailField
                          label="Country"
                          value={customerData.shipping_country}
                        />
                      </dl>
                    </div>
                  )}
                </FormCard>

                {/* Metrics Information Section */}
                <FormCard
                  title="Metrics Information"
                  icon={ChartPieIcon}
                  maxWidth="full"
                  className="mb-6"
                  actions={
                    <Link
                      to="/admin/customers/add/step-5"
                      className={`inline-flex items-center text-xs sm:text-sm ${getThemeClasses('text-accent')} ${getThemeClasses('link-hover')}`}
                    >
                      <PencilSquareIcon className="w-3 sm:w-4 h-3 sm:h-4 mr-1" />
                      Edit
                    </Link>
                  }
                >
                  {/* Tags Display */}
                  {customerData.tags && customerData.tags.length > 0 && (
                    <div className="mb-4">
                      <TagsDisplay
                        values={parseArrayValue(customerData.tags)}
                        label="Tags"
                        variant="success"
                      />
                    </div>
                  )}

                  {/* How Heard About Us Display */}
                  {customerData.how_did_you_hear_about_us_id && (
                    <div className="mb-4">
                      <HowHearAboutUsDisplay
                        value={customerData.how_did_you_hear_about_us_id}
                        label="How did you hear about us?"
                      />
                    </div>
                  )}

                  {/* Other Metrics */}
                  <dl className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6">
                    {customerData.how_did_you_hear_about_us_other && (
                      <DetailField
                        label="How did you hear about us? (Other)"
                        value={customerData.how_did_you_hear_about_us_other}
                        fullWidth
                      />
                    )}

                    <DetailField
                      label="Gender"
                      value={getGenderLabel(customerData.gender)}
                    />

                    {customerData.gender === CUSTOMER_GENDER_TYPES.OTHER &&
                      customerData.gender_other && (
                        <DetailField
                          label="Gender (Other)"
                          value={customerData.gender_other}
                        />
                      )}

                    {customerData.birth_date && (
                      <DetailField
                        label="Birth Date"
                        value={customerData.birth_date}
                      />
                    )}

                    <DetailField
                      label="Join Date"
                      value={customerData.join_date}
                    />
                    <DetailField
                      label="Preferred Language"
                      value={customerData.preferred_language}
                    />
                  </dl>

                  {customerData.additional_comment && (
                    <div className={`mt-6 pt-6 border-t ${getThemeClasses('border-border')}`}>
                      <DetailField
                        label="Additional Comments"
                        value={customerData.additional_comment}
                        fullWidth
                      />
                    </div>
                  )}
                </FormCard>

                {/* Form Actions */}
                <div className="flex flex-col sm:flex-row gap-3 mt-6">
                  <Button
                    type="button"
                    variant="outline"
                    onClick={handleBack}
                    icon={ArrowLeftIcon}
                    className="flex-1"
                  >
                    Back
                  </Button>
                  <Button
                    type="button"
                    variant="success"
                    onClick={onSubmitClick}
                    icon={CheckCircleIcon}
                    disabled={isLoading}
                    loading={isLoading}
                    className="flex-1"
                  >
                    Submit
                  </Button>
                </div>
              </div>
            )}
      </StepWizard>
    </UIXThemeProvider>
    );
  }

export default AdminCustomerAddStep6Page;
