// File Path: monorepo/web/frontend/src/pages/Admin/Incident/Update/Page.jsx

import React, { useState, useEffect } from "react";
import { Link, useNavigate, useParams } from "react-router";
import { useIncidentManager, useAuthManager } from "../../../../services/Services";
import {
  INCIDENT_STATUS,
  INCIDENT_STATUS_OPTIONS_WITH_EMPTY,
  INCIDENT_SEVERITY,
  INCIDENT_SEVERITY_OPTIONS_WITH_EMPTY,
  INCIDENT_INITIATED_BY,
  INCIDENT_INITIATED_BY_OPTIONS_WITH_EMPTY,
  INCIDENT_LIMITS,
} from "../../../../constants/Incident";
import {
  ExclamationTriangleIcon,
  CheckCircleIcon,
  ChartBarIcon,
  FireIcon,
  PencilSquareIcon,
  CalendarIcon,
  DocumentTextIcon,
  ChevronRightIcon,
  ArrowLeftIcon,
  FlagIcon,
} from "@heroicons/react/24/outline";
import { UIXThemeProvider, useUIXTheme } from "../../../../components/UIX";
import OrganizationSelect from "../../../../components/business/selects/OrganizationSelect";
import DivisionSelect from "../../../../components/business/selects/DivisionSelect";
import CustomerSelect from "../../../../components/business/selects/CustomerSelect";
import FacilitatorSelect from "../../../../components/business/selects/FacilitatorSelect";
import SpeakerSelect from "../../../../components/business/selects/SpeakerSelect";
import StaffSelect from "../../../../components/business/selects/StaffSelect";

function AdminIncidentUpdatePage() {
  const { id } = useParams();
  const incidentManager = useIncidentManager();
  const authManager = useAuthManager();
  const navigate = useNavigate();
  const { getThemeClasses } = useUIXTheme();

  // Component states
  const [errors, setErrors] = useState({});
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [date, setDate] = useState("");
  const [severity, setSeverity] = useState(0);
  const [status, setStatus] = useState(0);
  const [initiatedBy, setInitiatedBy] = useState(0);
  const [initiatedByOther, setInitiatedByOther] = useState("");
  const [publicId, setPublicId] = useState(null);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isFetching, setIsFetching] = useState(true);
  const [showSuccessMessage, setShowSuccessMessage] = useState(false);

  // Entity selection states
  const [selectedOrganizationId, setSelectedOrganizationId] = useState("");
  const [selectedDivisionId, setSelectedDivisionId] = useState("");
  const [selectedCustomerId, setSelectedCustomerId] = useState("");
  const [selectedFacilitatorId, setSelectedFacilitatorId] = useState("");
  const [selectedSpeakerId, setSelectedSpeakerId] = useState("");
  const [selectedStaffId, setSelectedStaffId] = useState("");

  const onUnauthorized = () => {
    navigate("/login?unauthorized=true");
  };

  // Handler to clear entity selections when initiatedBy changes
  const handleInitiatedByChange = (value) => {
    setInitiatedBy(value);
    // Clear all entity selections when changing initiatedBy
    setSelectedOrganizationId("");
    setSelectedDivisionId("");
    setSelectedCustomerId("");
    setSelectedFacilitatorId("");
    setSelectedSpeakerId("");
    setSelectedStaffId("");
  };

  // Fetch incident detail on mount
  useEffect(() => {
    let mounted = true;

    const fetchIncident = async () => {
      if (!authManager.isAuthenticated()) {
        navigate("/login?unauthorized=true");
        return;
      }

      if (!id) {
        navigate("/admin/incidents");
        return;
      }

      try {
        setIsFetching(true);
        const response = await incidentManager.getIncidentDetail(
          id,
          onUnauthorized,
        );

        if (mounted) {
          // Populate form with fetched data
          setTitle(response.title || "");
          setDescription(response.description || "");

          // Format date for input (YYYY-MM-DD)
          if (response.date) {
            const dateObj = new Date(response.date);
            const formattedDate = dateObj.toISOString().split('T')[0];
            setDate(formattedDate);
          }

          setSeverity(response.severity || 0);
          setStatus(response.status || 0);
          setInitiatedBy(response.initiatedBy || 0);
          setInitiatedByOther(response.initiatedByOther || "");
          setPublicId(response.publicId || null);

          // Populate entity selections based on initiatedBy type
          if (response.organizationId) {
            setSelectedOrganizationId(response.organizationId);
          }
          if (response.divisionId) {
            setSelectedDivisionId(response.divisionId);
          }
          if (response.customerId) {
            setSelectedCustomerId(response.customerId);
          }
          if (response.facilitatorId) {
            setSelectedFacilitatorId(response.facilitatorId);
          }
          if (response.speakerId) {
            setSelectedSpeakerId(response.speakerId);
          }
          if (response.staffId) {
            setSelectedStaffId(response.staffId);
          }
        }
      } catch (error) {
        if (process.env.NODE_ENV === 'development') {
          console.error("Failed to fetch incident:", error);
        }
        setErrors(error);
      } finally {
        if (mounted) {
          setIsFetching(false);
        }
      }
    };

    fetchIncident();

    return () => {
      mounted = false;
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [id]);

  // Handle form submission
  const onSubmitClick = async () => {
    // Prepare payload
    const incidentData = {
      title: title.trim(),
      description: description.trim(),
      date: date,
      severity: severity,
      status: status,
      initiatedBy: initiatedBy,
      initiatedByOther: initiatedByOther.trim(),
    };

    // Add entity ID based on initiatedBy value
    if (initiatedBy === INCIDENT_INITIATED_BY.ORGANIZATION && selectedOrganizationId) {
      incidentData.organizationId = selectedOrganizationId;
    } else if (initiatedBy === INCIDENT_INITIATED_BY.DIVISION && selectedDivisionId) {
      incidentData.divisionId = selectedDivisionId;
    } else if (initiatedBy === INCIDENT_INITIATED_BY.CUSTOMER && selectedCustomerId) {
      incidentData.customerId = selectedCustomerId;
    } else if (initiatedBy === INCIDENT_INITIATED_BY.FACILITATOR && selectedFacilitatorId) {
      incidentData.facilitatorId = selectedFacilitatorId;
    } else if (initiatedBy === INCIDENT_INITIATED_BY.SPEAKER && selectedSpeakerId) {
      incidentData.speakerId = selectedSpeakerId;
    } else if (initiatedBy === INCIDENT_INITIATED_BY.STAFF && selectedStaffId) {
      incidentData.staffId = selectedStaffId;
    }

    setIsSubmitting(true);
    setErrors({});

    try {
      await incidentManager.updateIncident(
        id,
        incidentData,
        onUnauthorized,
      );

      // Show success message
      setShowSuccessMessage(true);

      // Redirect after 2 seconds
      setTimeout(() => {
        navigate(`/admin/incidents/${id}`);
      }, 2000);
    } catch (error) {
      if (process.env.NODE_ENV === 'development') {
        console.error("AdminIncidentUpdatePage: Failed to update incident:", error);
      }
      setErrors(error);
      window.scrollTo(0, 0);
      setIsSubmitting(false);
    }
  };

  // Show loading state while fetching
  if (isFetching) {
    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">
          <div className={`${getThemeClasses('bg-card')} shadow-lg rounded-lg p-8`}>
            <div className="flex items-center justify-center">
              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
              <span className={`ml-3 text-lg ${getThemeClasses('text-secondary')}`}>Loading incident...</span>
            </div>
          </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">
        {/* Enhanced Breadcrumb */}
        <nav
          className={`flex mb-4 ${getThemeClasses('bg-card')} rounded-lg shadow-sm p-2 sm:p-3`}
          aria-label="Breadcrumb"
        >
          <ol className="inline-flex items-center space-x-1 md:space-x-3 flex-wrap">
            <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 transition-colors`}
              >
                <ChartBarIcon className="w-4 h-4 mr-1 sm:mr-2" />
                <span className="hidden sm:inline">Dashboard</span>
                <span className="sm:hidden">Dash</span>
              </Link>
            </li>
            <li>
              <div className="flex items-center">
                <ChevronRightIcon className={`w-4 h-4 ${getThemeClasses('text-muted')}`} />
                <Link
                  to="/admin/incidents"
                  className={`ml-1 text-sm font-medium ${getThemeClasses('text-secondary')} hover:text-blue-600 transition-colors md:ml-2`}
                >
                  <span className="inline-flex items-center">
                    <FireIcon className="w-4 h-4 mr-1 sm:mr-2" />
                    Incidents
                  </span>
                </Link>
              </div>
            </li>
            <li>
              <div className="flex items-center">
                <ChevronRightIcon className={`w-4 h-4 ${getThemeClasses('text-muted')}`} />
                <Link
                  to={`/admin/incidents/${id}`}
                  className={`ml-1 text-sm font-medium ${getThemeClasses('text-secondary')} hover:text-blue-600 transition-colors md:ml-2`}
                >
                  <span className="inline-flex items-center">
                    #{publicId || id}
                  </span>
                </Link>
              </div>
            </li>
            <li aria-current="page">
              <div className="flex items-center">
                <ChevronRightIcon className={`w-4 h-4 ${getThemeClasses('text-muted')}`} />
                <span className={`ml-1 text-sm font-medium ${getThemeClasses('text-muted')} md:ml-2 inline-flex items-center`}>
                  <PencilSquareIcon className="w-4 h-4 mr-1 sm:mr-2" />
                  Edit
                </span>
              </div>
            </li>
          </ol>
        </nav>

        {/* Success Message */}
        {showSuccessMessage && (
          <div className="mb-6 bg-green-50 border-l-4 border-green-400 p-4 rounded-lg shadow-sm">
            <div className="flex items-center">
              <CheckCircleIcon className="h-5 w-5 text-green-600 mr-3" />
              <p className="text-sm font-medium text-green-800">
                Incident updated successfully! Redirecting...
              </p>
            </div>
          </div>
        )}

        {/* Page Title */}
        <div className={`mb-6 ${getThemeClasses('bg-card')} rounded-lg shadow-sm p-4 sm:p-6`}>
          <div className="flex items-center justify-between">
            <div>
              <h1 className={`text-xl sm:text-2xl font-bold ${getThemeClasses('text-primary')} flex items-center`}>
                <FireIcon className="w-6 h-6 sm:w-7 sm:h-7 mr-2 sm:mr-3 text-red-600" />
                Edit Incident #{publicId || id}
              </h1>
              <p className={`mt-1 text-sm ${getThemeClasses('text-secondary')}`}>
                Update the incident report details
              </p>
            </div>
          </div>
        </div>

        {/* Main Content Card with Dark Header */}
        <div className={`${getThemeClasses('bg-card')} shadow-lg rounded-lg overflow-hidden`}>
          <div className="px-4 sm:px-6 py-4 bg-gradient-to-r from-gray-800 to-gray-700 border-b border-gray-600">
            <h2 className="text-base sm:text-lg font-semibold text-white flex items-center">
              <PencilSquareIcon className="w-5 h-5 mr-2 text-blue-400" />
              Update Incident Form
            </h2>
            <p className="text-xs sm:text-sm text-gray-300 mt-1">
              Modify the incident details below
            </p>
          </div>

          <div className="p-4 sm:p-6">
            {/* Error Display */}
            {errors && Object.keys(errors).length > 0 && (
              <div className="mb-6 bg-red-50 border-l-4 border-red-400 p-4 rounded-lg">
                <div className="flex">
                  <ExclamationTriangleIcon className="h-5 w-5 text-red-600 mr-3 flex-shrink-0" />
                  <div>
                    <h3 className="text-sm font-medium text-red-800">
                      There were errors with your submission:
                    </h3>
                    <ul className="list-disc list-inside mt-2 text-sm text-red-700">
                      {Object.entries(errors).map(([key, value]) => (
                        <li key={key}>
                          <strong>{key}:</strong> {typeof value === "string" ? value : JSON.stringify(value)}
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
              </div>
            )}

            {/* Title Field */}
            <div className="mb-6">
              <label
                htmlFor="title"
                className={`block text-sm font-medium ${getThemeClasses('text-secondary')} mb-2`}
              >
                Title <span className="text-red-500">*</span>
              </label>
              <div className="relative">
                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                  <DocumentTextIcon className={`h-5 w-5 ${getThemeClasses('text-muted')}`} />
                </div>
                <input
                  type="text"
                  id="title"
                  name="title"
                  placeholder="Enter incident title"
                  value={title}
                  onChange={(e) => setTitle(e.target.value)}
                  maxLength={INCIDENT_LIMITS.MAX_TITLE_LENGTH}
                  className={`block w-full pl-10 pr-3 py-2 border ${errors.title ? "border-red-500" : getThemeClasses('border-border')} rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm`}
                />
              </div>
              {errors.title && (
                <p className="mt-1 text-sm text-red-600">{errors.title}</p>
              )}
              <p className={`mt-1 text-xs ${getThemeClasses('text-muted')}`}>
                {title.length}/{INCIDENT_LIMITS.MAX_TITLE_LENGTH} characters
              </p>
            </div>

            {/* Description Field */}
            <div className="mb-6">
              <label
                htmlFor="description"
                className={`block text-sm font-medium ${getThemeClasses('text-secondary')} mb-2`}
              >
                Description <span className="text-red-500">*</span>
              </label>
              <div className="relative">
                <textarea
                  id="description"
                  name="description"
                  placeholder="Describe the incident in detail"
                  value={description}
                  onChange={(e) => setDescription(e.target.value)}
                  rows={5}
                  maxLength={INCIDENT_LIMITS.MAX_DESCRIPTION_LENGTH}
                  className={`block w-full px-3 py-2 border ${errors.description ? "border-red-500" : getThemeClasses('border-border')} rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm`}
                />
              </div>
              {errors.description && (
                <p className="mt-1 text-sm text-red-600">
                  {errors.description}
                </p>
              )}
              <p className={`mt-1 text-xs ${getThemeClasses('text-muted')}`}>
                {description.length}/{INCIDENT_LIMITS.MAX_DESCRIPTION_LENGTH} characters
              </p>
            </div>

            {/* Date Field */}
            <div className="mb-6">
              <label
                htmlFor="date"
                className={`block text-sm font-medium ${getThemeClasses('text-secondary')} mb-2`}
              >
                Incident Date <span className="text-red-500">*</span>
              </label>
              <div className="relative">
                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                  <CalendarIcon className={`h-5 w-5 ${getThemeClasses('text-muted')}`} />
                </div>
                <input
                  type="date"
                  id="date"
                  name="date"
                  value={date}
                  onChange={(e) => setDate(e.target.value)}
                  className={`block w-full pl-10 pr-3 py-2 border ${errors.date ? "border-red-500" : getThemeClasses('border-border')} rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm`}
                />
              </div>
              {errors.date && (
                <p className="mt-1 text-sm text-red-600">{errors.date}</p>
              )}
              <p className={`mt-1 text-xs ${getThemeClasses('text-muted')}`}>
                The date (without time) this incident occurred
              </p>
            </div>

            {/* Severity Field */}
            <div className="mb-6">
              <label
                htmlFor="severity"
                className={`block text-sm font-medium ${getThemeClasses('text-secondary')} mb-2`}
              >
                Severity <span className="text-red-500">*</span>
              </label>
              <select
                id="severity"
                name="severity"
                value={severity}
                onChange={(e) => setSeverity(parseInt(e.target.value))}
                className={`block w-full px-3 py-2 border ${errors.severity ? "border-red-500" : "border-gray-300"} rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm`}
              >
                {INCIDENT_SEVERITY_OPTIONS_WITH_EMPTY.map((option) => (
                  <option key={option.value} value={option.value}>
                    {option.label}
                  </option>
                ))}
              </select>
              {errors.severity && (
                <p className="mt-1 text-sm text-red-600">{errors.severity}</p>
              )}
              <p className={`mt-1 text-xs ${getThemeClasses('text-muted')}`}>
                Select the severity level of this incident
              </p>
            </div>

            {/* Status Field */}
            <div className="mb-6">
              <label
                htmlFor="status"
                className={`block text-sm font-medium ${getThemeClasses('text-secondary')} mb-2`}
              >
                Status <span className="text-red-500">*</span>
              </label>
              <select
                id="status"
                name="status"
                value={status}
                onChange={(e) => setStatus(parseInt(e.target.value))}
                className={`block w-full px-3 py-2 border ${errors.status ? "border-red-500" : "border-gray-300"} rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm`}
              >
                {INCIDENT_STATUS_OPTIONS_WITH_EMPTY.map((option) => (
                  <option key={option.value} value={option.value}>
                    {option.label}
                  </option>
                ))}
              </select>
              {errors.status && (
                <p className="mt-1 text-sm text-red-600">{errors.status}</p>
              )}
              <p className={`mt-1 text-xs ${getThemeClasses('text-muted')}`}>
                Select the current status of this incident
              </p>
            </div>

            {/* Initiated By Field */}
            <div className="mb-6">
              <label
                htmlFor="initiatedBy"
                className={`block text-sm font-medium ${getThemeClasses('text-secondary')} mb-2`}
              >
                Initiated By <span className="text-red-500">*</span>
              </label>
              <select
                id="initiatedBy"
                name="initiatedBy"
                value={initiatedBy}
                onChange={(e) => handleInitiatedByChange(parseInt(e.target.value))}
                className={`block w-full px-3 py-2 border ${errors.initiatedBy ? "border-red-500" : "border-gray-300"} rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm`}
              >
                {INCIDENT_INITIATED_BY_OPTIONS_WITH_EMPTY.map((option) => (
                  <option key={option.value} value={option.value}>
                    {option.label}
                  </option>
                ))}
              </select>
              {errors.initiatedBy && (
                <p className="mt-1 text-sm text-red-600">{errors.initiatedBy}</p>
              )}
              <p className={`mt-1 text-xs ${getThemeClasses('text-muted')}`}>
                Select who initiated this incident
              </p>
            </div>

            {/* Initiated By Other Field - Only show when "Other" is selected */}
            {initiatedBy === INCIDENT_INITIATED_BY.OTHER && (
              <div className="mb-6">
                <label
                  htmlFor="initiatedByOther"
                  className={`block text-sm font-medium ${getThemeClasses('text-secondary')} mb-2`}
                >
                  Please Specify Other <span className="text-red-500">*</span>
                </label>
                <div className="relative">
                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <DocumentTextIcon className="h-5 w-5 text-gray-400" />
                  </div>
                  <input
                    type="text"
                    id="initiatedByOther"
                    name="initiatedByOther"
                    placeholder="Specify who initiated this incident"
                    value={initiatedByOther}
                    onChange={(e) => setInitiatedByOther(e.target.value)}
                    maxLength={200}
                    className={`block w-full pl-10 pr-3 py-2 border ${errors.initiatedByOther ? "border-red-500" : "border-gray-300"} rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm`}
                  />
                </div>
                {errors.initiatedByOther && (
                  <p className="mt-1 text-sm text-red-600">{errors.initiatedByOther}</p>
                )}
                <p className={`mt-1 text-xs ${getThemeClasses('text-muted')}`}>
                  Please specify who initiated this incident (required when "Other" is selected)
                </p>
              </div>
            )}

            {/* Organization Select - Show when Organization is selected */}
            {initiatedBy === INCIDENT_INITIATED_BY.ORGANIZATION && (
              <div className="mb-6">
                <OrganizationSelect
                  value={selectedOrganizationId}
                  onChange={setSelectedOrganizationId}
                  error={errors.organizationId}
                  required={true}
                  onUnauthorized={onUnauthorized}
                  label="Organization"
                  helperText="Select the organization that initiated this incident"
                />
              </div>
            )}

            {/* Division Select - Show when Division is selected */}
            {initiatedBy === INCIDENT_INITIATED_BY.DIVISION && (
              <div className="mb-6">
                <DivisionSelect
                  value={selectedDivisionId}
                  onChange={setSelectedDivisionId}
                  error={errors.divisionId}
                  required={true}
                  onUnauthorized={onUnauthorized}
                  organizationId={null}
                  label="Division"
                  helperText="Select the division that initiated this incident"
                />
              </div>
            )}

            {/* Customer Select - Show when Customer is selected */}
            {initiatedBy === INCIDENT_INITIATED_BY.CUSTOMER && (
              <div className="mb-6">
                <CustomerSelect
                  value={selectedCustomerId}
                  onChange={setSelectedCustomerId}
                  error={errors.customerId}
                  required={true}
                  onUnauthorized={onUnauthorized}
                  label="Customer"
                  helperText="Select the customer that initiated this incident"
                />
              </div>
            )}

            {/* Facilitator Select - Show when Facilitator is selected */}
            {initiatedBy === INCIDENT_INITIATED_BY.FACILITATOR && (
              <div className="mb-6">
                <FacilitatorSelect
                  value={selectedFacilitatorId}
                  onChange={setSelectedFacilitatorId}
                  error={errors.facilitatorId}
                  required={true}
                  onUnauthorized={onUnauthorized}
                  label="Facilitator"
                  helperText="Select the facilitator that initiated this incident"
                />
              </div>
            )}

            {/* Speaker Select - Show when Speaker is selected */}
            {initiatedBy === INCIDENT_INITIATED_BY.SPEAKER && (
              <div className="mb-6">
                <SpeakerSelect
                  value={selectedSpeakerId}
                  onChange={setSelectedSpeakerId}
                  error={errors.speakerId}
                  required={true}
                  onUnauthorized={onUnauthorized}
                  label="Speaker"
                  helperText="Select the speaker that initiated this incident"
                />
              </div>
            )}

            {/* Staff Select - Show when Staff is selected */}
            {initiatedBy === INCIDENT_INITIATED_BY.STAFF && (
              <div className="mb-6">
                <StaffSelect
                  value={selectedStaffId}
                  onChange={setSelectedStaffId}
                  error={errors.staffId}
                  required={true}
                  onUnauthorized={onUnauthorized}
                  label="Staff"
                  helperText="Select the staff member that initiated this incident"
                />
              </div>
            )}

            {/* Action Buttons */}
            <div className="flex flex-col sm:flex-row justify-between pt-6 border-t gap-3">
              <Link to={`/admin/incidents/${id}`}>
                <button className={`w-full sm:w-auto inline-flex items-center justify-center px-4 py-2 border ${getThemeClasses('border-border')} rounded-lg text-sm font-medium ${getThemeClasses('text-secondary')} ${getThemeClasses('bg-card')} hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all`}>
                  <ArrowLeftIcon className="w-4 h-4 mr-2" />
                  Cancel
                </button>
              </Link>

              <button
                onClick={onSubmitClick}
                disabled={isSubmitting}
                className="w-full sm:w-auto inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-lg text-sm font-medium text-white bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-all transform hover:scale-105 shadow-lg"
              >
                {isSubmitting ? (
                  <>
                    <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
                    Updating...
                  </>
                ) : (
                  <>
                    <CheckCircleIcon className="w-4 h-4 mr-2" />
                    Update Incident
                  </>
                )}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function AdminIncidentUpdatePageWrapper() {
  return (
    <UIXThemeProvider>
      <AdminIncidentUpdatePage />
    </UIXThemeProvider>
  );
}

export default AdminIncidentUpdatePageWrapper;
