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

function SettingSpecializationUpdatePage() {
  return (
    <UIXThemeProvider>
      <SettingSpecializationUpdatePageContent />
    </UIXThemeProvider>
  );
}

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

  // Define form fields
  const formFields = [
    {
      name: "name",
      label: "Specialization Name",
      type: "text",
      placeholder: "Enter specialization name",
      required: true,
      maxLength: 100,
    },
    {
      name: "description",
      label: "Description",
      type: "textarea",
      placeholder: "Enter description (optional)",
      rows: 4,
      maxLength: 500,
    },
    {
      name: "status",
      label: "Status",
      type: "select",
      required: true,
    }
  ];

  // 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 define specific areas of expertise and focus.
          Changes will be visible immediately after updating.
        </span>
      </p>
    </div>
  );

  return (
    <SettingsFormView
      entityType="specialization"
      entityTypePlural="Specializations"
      entityIcon={AcademicCapIcon}
      entityManager={specializationManager}
      basePath="/admin/settings/specialization"
      listPath="/admin/settings/specializations"
      mode="update"
      formFields={formFields}
      validationRules={validationRules}
      statusOptions={statusOptions}
      title="Edit Specialization"
      subtitle="Update specialization details and configuration"
      customInfoNote={customInfoNote}
    />
  );
}

export default SettingSpecializationUpdatePage;