import React, { useMemo, memo } from "react";
import { useEventCategoryManager } from "../../../../../services/Services";
import { SettingsFormView } from "../../../../../components/business/views";
import { UIXThemeProvider, useUIXTheme } from "../../../../../components/UIX";
import { CalendarDaysIcon, InformationCircleIcon } from "@heroicons/react/24/outline";
import { EVENT_CATEGORY_STATUS, EVENT_CATEGORY_STATUS_LABELS } from "../../../../../constants/Settings";

// Static configuration outside component
const FORM_FIELDS = [
  {
    name: "name",
    label: "Event Category Name",
    type: "text",
    placeholder: "Enter event category name (e.g., Workshop, Conference, Seminar)",
    required: true,
    maxLength: 100,
    defaultValue: "",
    autoComplete: "new-password",
  },
  {
    name: "description",
    label: "Description",
    type: "textarea",
    placeholder: "Describe the purpose and characteristics of this event category (optional)",
    rows: 4,
    maxLength: 500,
    defaultValue: "",
    autoComplete: "new-password",
  },
  {
    name: "status",
    label: "Status",
    type: "select",
    required: true,
    defaultValue: EVENT_CATEGORY_STATUS.ACTIVE,
    autoComplete: "new-password",
  }
];

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

const STATUS_OPTIONS = [
  { value: EVENT_CATEGORY_STATUS.ACTIVE, label: EVENT_CATEGORY_STATUS_LABELS[EVENT_CATEGORY_STATUS.ACTIVE] },
  { value: EVENT_CATEGORY_STATUS.INACTIVE, label: EVENT_CATEGORY_STATUS_LABELS[EVENT_CATEGORY_STATUS.INACTIVE] },
];

function SettingEventCategoryCreatePage() {
  return (
    <UIXThemeProvider>
      <SettingEventCategoryCreatePageContent />
    </UIXThemeProvider>
  );
}

const SettingEventCategoryCreatePageContent = memo(function SettingEventCategoryCreatePageContent() {
  const eventCategoryManager = useEventCategoryManager();
  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> Event categories are used to classify and organize different types of events.
          Changes will be visible immediately after creating.
        </span>
      </p>
    </div>
  ), [themeClasses]);

  return (
    <SettingsFormView
      entityType="eventCategory"
      entityTypePlural="Event Categories"
      entityIcon={CalendarDaysIcon}
      entityManager={eventCategoryManager}
      basePath="/admin/settings/event-categories"
      listPath="/admin/settings/event-categories"
      mode="create"
      formFields={FORM_FIELDS}
      validationRules={VALIDATION_RULES}
      statusOptions={STATUS_OPTIONS}
      title="Create Event Category"
      subtitle="Add a new event category to classify and organize events"
      customInfoNote={customInfoNote}
    />
  );
});
SettingEventCategoryCreatePageContent.displayName = 'SettingEventCategoryCreatePageContent';

export default SettingEventCategoryCreatePage;