import React from "react";
import { useSpecializationManager } from "../../../../../services/Services";
import { SettingsFormView } from "../../../../../components/business/views";
import { UIXThemeProvider, useUIXTheme } from "../../../../../components/UIX";
import { StarIcon, InformationCircleIcon } from "@heroicons/react/24/outline";
import { SPECIALIZATION_STATUS, SPECIALIZATION_STATUS_LABELS } from "../../../../../constants/Settings";

function SettingSpecializationCreatePage() {
  return (
    <UIXThemeProvider>
      <SettingSpecializationCreatePageContent />
    </UIXThemeProvider>
  );
}

function SettingSpecializationCreatePageContent() {
  const specializationManager = useSpecializationManager();
  const { getThemeClasses } = useUIXTheme();

  // Define form fields
  const formFields = [
    {
      name: "name",
      label: "Specialization Name",
      type: "text",
      placeholder: "Enter specialization name (e.g., Safety Training, Technical Skills)",
      required: true,
      maxLength: 100,
      defaultValue: "",
    },
    {
      name: "description",
      label: "Description",
      type: "textarea",
      placeholder: "Enter a detailed description of this specialization (optional)",
      rows: 4,
      maxLength: 500,
      defaultValue: "",
    },
    {
      name: "status",
      label: "Status",
      type: "select",
      required: true,
      defaultValue: SPECIALIZATION_STATUS.ACTIVE,
    }
  ];

  // Define validation rules
  const validationRules = {
    name: {
      maxLength: 100,
      minLength: 1,
    },
    description: {
      maxLength: 500,
    },
  };

  // Define status options
  const statusOptions = [
    { value: SPECIALIZATION_STATUS.ACTIVE, label: SPECIALIZATION_STATUS_LABELS[SPECIALIZATION_STATUS.ACTIVE] },
    { value: SPECIALIZATION_STATUS.INACTIVE, label: SPECIALIZATION_STATUS_LABELS[SPECIALIZATION_STATUS.INACTIVE] },
  ];

  // Custom info note
  const customInfoNote = (
    <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> Specializations are used to categorize specific areas of expertise and training.
          Changes will be visible immediately after creating.
        </span>
      </p>
    </div>
  );

  return (
    <SettingsFormView
      entityType="specialization"
      entityTypePlural="Specializations"
      entityIcon={StarIcon}
      entityManager={specializationManager}
      basePath="/admin/settings/specialization"
      listPath="/admin/settings/specializations"
      mode="create"
      formFields={formFields}
      validationRules={validationRules}
      statusOptions={statusOptions}
      title="Create Specialization"
      subtitle="Add a new specialization to the system"
      customInfoNote={customInfoNote}
    />
  );
}

export default SettingSpecializationCreatePage;