import React, { useMemo, memo } from "react";
import { useBulletinManager } from "../../../../../services/Services";
import { SettingsFormView } from "../../../../../components/business/views";
import { UIXThemeProvider, useUIXTheme } from "../../../../../components/UIX";
import { NewspaperIcon, 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 Message",
    type: "textarea",
    placeholder: "Type your bulletin message here...",
    required: true,
    maxLength: 1000,
    rows: 4,
    defaultValue: "",
    description: "Keep it short and clear. The bulletin will be active and visible to all users immediately after creation.",
  },
  {
    name: "status",
    label: "Status",
    type: "select",
    required: true,
    defaultValue: BULLETIN_STATUS.ACTIVE,
  }
];

const VALIDATION_RULES = {
  text: {
    maxLength: 1000,
    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 SettingBulletinCreatePage() {
  return (
    <UIXThemeProvider>
      <SettingBulletinCreatePageContent />
    </UIXThemeProvider>
  );
}

const SettingBulletinCreatePageContent = memo(function SettingBulletinCreatePageContent() {
  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 share important information and announcements with your team.
          Changes will be visible immediately after creating.
        </span>
      </p>
    </div>
  ), [getThemeClasses]);

  return (
    <SettingsFormView
      entityType="bulletin"
      entityTypePlural="Bulletins"
      entityIcon={NewspaperIcon}
      entityManager={bulletinManager}
      basePath="/admin/settings/bulletin"
      listPath="/admin/settings/bulletins"
      mode="create"
      formFields={FORM_FIELDS}
      validationRules={VALIDATION_RULES}
      statusOptions={STATUS_OPTIONS}
      title="Create Bulletin"
      subtitle="Add a new bulletin to share important information with your team"
      customInfoNote={customInfoNote}
    />
  );
});
SettingBulletinCreatePageContent.displayName = 'SettingBulletinCreatePageContent';

export default SettingBulletinCreatePage;