import React, { useMemo, memo } from "react";
import { useInsuranceRequirementManager } from "../../../../../services/Services";
import { SettingsFormView } from "../../../../../components/business/views";
import { UIXThemeProvider, useUIXTheme } from "../../../../../components/UIX";
import { ShieldCheckIcon, InformationCircleIcon } from "@heroicons/react/24/outline";
import { INSURANCE_REQUIREMENT_STATUS, INSURANCE_REQUIREMENT_STATUS_LABELS } from "../../../../../constants/Settings";

// Move static configuration outside component to prevent recreation
const FORM_FIELDS = [
  {
    name: "name",
    label: "Insurance Requirement Name",
    type: "text",
    placeholder: "Enter insurance requirement name (e.g., General Liability, Professional Indemnity)",
    required: true,
    maxLength: 100,
  },
  {
    name: "description",
    label: "Description",
    type: "textarea",
    placeholder: "Enter description (optional)",
    rows: 4,
    maxLength: 500,
  },
  {
    name: "status",
    label: "Status",
    type: "select",
    required: true,
  }
];

const VALIDATION_RULES = {
  name: {
    maxLength: 100,
    minLength: 1,
  },
  description: {
    maxLength: 500,
  },
};

const STATUS_OPTIONS = [
  { value: INSURANCE_REQUIREMENT_STATUS.ACTIVE, label: INSURANCE_REQUIREMENT_STATUS_LABELS[INSURANCE_REQUIREMENT_STATUS.ACTIVE] },
  { value: INSURANCE_REQUIREMENT_STATUS.INACTIVE, label: INSURANCE_REQUIREMENT_STATUS_LABELS[INSURANCE_REQUIREMENT_STATUS.INACTIVE] },
];

function SettingInsuranceRequirementUpdatePage() {
  return (
    <UIXThemeProvider>
      <SettingInsuranceRequirementUpdatePageContent />
    </UIXThemeProvider>
  );
}

const SettingInsuranceRequirementUpdatePageContent = memo(
  function SettingInsuranceRequirementUpdatePageContent() {
    const insuranceRequirementManager = useInsuranceRequirementManager();
    const { getThemeClasses } = useUIXTheme();

    // Memoize theme classes
    const themeClasses = useMemo(
      () => ({
        alertInfoBg: getThemeClasses("alert-info-bg"),
        borderPrimary: getThemeClasses("border-primary"),
        textPrimary: getThemeClasses("text-primary"),
      }),
      [getThemeClasses],
    );

    // Memoize custom info note
    const customInfoNote = useMemo(
      () => (
        <div className={`p-4 ${themeClasses.alertInfoBg} border ${themeClasses.borderPrimary} rounded-lg`}>
          <p className={`text-sm ${themeClasses.textPrimary} flex items-start`}>
            <InformationCircleIcon className="w-5 h-5 mr-2 flex-shrink-0 mt-0.5" />
            <span>
              <strong>Note:</strong> Insurance requirements are used to specify different types of insurance coverage needed
              for jobs or facilitators. Changes will be visible immediately after updating.
            </span>
          </p>
        </div>
      ),
      [themeClasses],
    );

    return (
      <SettingsFormView
        entityType="insuranceRequirement"
        entityTypePlural="Insurance Requirements"
        entityIcon={ShieldCheckIcon}
        entityManager={insuranceRequirementManager}
        basePath="/admin/settings/insurance-requirement"
        listPath="/admin/settings/insurance-requirements"
        mode="update"
        formFields={FORM_FIELDS}
        validationRules={VALIDATION_RULES}
        statusOptions={STATUS_OPTIONS}
        title="Edit Insurance Requirement"
        subtitle="Update insurance coverage requirement details"
        customInfoNote={customInfoNote}
      />
    );
  },
);

// Set display name for React DevTools
SettingInsuranceRequirementUpdatePageContent.displayName =
  "SettingInsuranceRequirementUpdatePageContent";

export default SettingInsuranceRequirementUpdatePage;
