import React, { useMemo, memo } from "react";
import { useBulletinManager } from "../../../../../services/Services";
import { SettingsFormView } from "../../../../../components/business/views";
import { UIXThemeProvider, useUIXTheme } from "../../../../../components/UIX";
import { SpeakerWaveIcon, InformationCircleIcon } from "@heroicons/react/24/outline";
import { BULLETIN_STATUS, BULLETIN_STATUS_LABELS } from "../../../../../constants/Settings";

// Move static configuration outside component to prevent recreation
const FORM_FIELDS = [
  {
    name: "text",
    label: "Bulletin Text",
    type: "text",
    placeholder: "Enter bulletin text",
    required: true,
    maxLength: 255,
  },
  {
    name: "status",
    label: "Status",
    type: "select",
    required: true,
  }
];

const VALIDATION_RULES = {
  text: {
    maxLength: 255,
    minLength: 1,
  },
};

const STATUS_OPTIONS = [
  { value: BULLETIN_STATUS.ACTIVE, label: BULLETIN_STATUS_LABELS[BULLETIN_STATUS.ACTIVE] },
  { value: BULLETIN_STATUS.INACTIVE, label: BULLETIN_STATUS_LABELS[BULLETIN_STATUS.INACTIVE] },
];

function SettingBulletinUpdatePage() {
  return (
    <UIXThemeProvider>
      <SettingBulletinUpdatePageContent />
    </UIXThemeProvider>
  );
}

const SettingBulletinUpdatePageContent = memo(function SettingBulletinUpdatePageContent() {
  const bulletinManager = useBulletinManager();
  const { getThemeClasses } = useUIXTheme();

  // Memoize custom info note
  const customInfoNote = useMemo(() => (
    <div className={`p-4 ${getThemeClasses('alert-info-bg')} border ${getThemeClasses('border-primary')} rounded-lg`}>
      <p className={`text-sm ${getThemeClasses('text-primary')} flex items-start`}>
        <InformationCircleIcon className="w-5 h-5 mr-2 flex-shrink-0 mt-0.5" />
        <span>
          <strong>Note:</strong> Bulletins are used to display important announcements and notices.
          Changes will be visible immediately after updating.
        </span>
      </p>
    </div>
  ), [getThemeClasses]);

  return (
    <SettingsFormView
      entityType="bulletin"
      entityTypePlural="Bulletins"
      entityIcon={SpeakerWaveIcon}
      entityManager={bulletinManager}
      basePath="/admin/settings/bulletin"
      listPath="/admin/settings/bulletins"
      mode="update"
      formFields={FORM_FIELDS}
      validationRules={VALIDATION_RULES}
      statusOptions={STATUS_OPTIONS}
      title="Edit Bulletin"
      subtitle="Update bulletin details and configuration"
      customInfoNote={customInfoNote}
    />
  );
});
SettingBulletinUpdatePageContent.displayName = 'SettingBulletinUpdatePageContent';

export default SettingBulletinUpdatePage;