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,
    defaultValue: "",
  },
  {
    name: "description",
    label: "Description",
    type: "textarea",
    placeholder: "Enter a detailed description of this insurance requirement (optional)",
    rows: 4,
    maxLength: 500,
    defaultValue: "",
  },
  {
    name: "status",
    label: "Status",
    type: "select",
    required: true,
    defaultValue: INSURANCE_REQUIREMENT_STATUS.ACTIVE,
  }
];

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 SettingInsuranceRequirementCreatePage() {
  return (
    <UIXThemeProvider>
      <SettingInsuranceRequirementCreatePageContent />
    </UIXThemeProvider>
  );
}

const SettingInsuranceRequirementCreatePageContent = memo(
  function SettingInsuranceRequirementCreatePageContent() {
    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 ensure facilitators and jobs meet necessary coverage standards.
              Changes will be visible immediately after creating.
            </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="create"
        formFields={FORM_FIELDS}
        validationRules={VALIDATION_RULES}
        statusOptions={STATUS_OPTIONS}
        title="Create Insurance Requirement"
        subtitle="Add a new insurance requirement to the system"
        customInfoNote={customInfoNote}
      />
    );
  },
);

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

export default SettingInsuranceRequirementCreatePage;
