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

function SettingSkillCategoryCreatePage() {
  return (
    <UIXThemeProvider>
      <SettingSkillCategoryCreatePageContent />
    </UIXThemeProvider>
  );
}

function SettingSkillCategoryCreatePageContent() {
  const skillCategoryManager = useSkillCategoryManager();
  const { getThemeClasses } = useUIXTheme();

  // Define form fields
  const formFields = [
    {
      name: "name",
      label: "Skill Category Name",
      type: "text",
      placeholder: "Enter skill category name (e.g., Technical Skills, Communication Skills, Leadership)",
      required: true,
      maxLength: 100,
      defaultValue: "",
    },
    {
      name: "description",
      label: "Description",
      type: "textarea",
      placeholder: "Describe the purpose and characteristics of this skill category...",
      rows: 4,
      maxLength: 500,
      required: true,
      defaultValue: "",
      description: "Provide a detailed description of what types of skills belong in this category",
    },
    {
      name: "status",
      label: "Status",
      type: "select",
      required: true,
      defaultValue: SKILL_CATEGORY_STATUS.ACTIVE,
    }
  ];

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

  // Define status options
  const statusOptions = [
    { value: SKILL_CATEGORY_STATUS.ACTIVE, label: SKILL_CATEGORY_STATUS_LABELS[SKILL_CATEGORY_STATUS.ACTIVE] },
    { value: SKILL_CATEGORY_STATUS.INACTIVE, label: SKILL_CATEGORY_STATUS_LABELS[SKILL_CATEGORY_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> Skill categories are used to classify and organize different types of skills.
          Changes will be visible immediately after creating.
        </span>
      </p>
    </div>
  );

  return (
    <SettingsFormView
      entityType="skillCategory"
      entityTypePlural="Skill Categories"
      entityIcon={AcademicCapIcon}
      entityManager={skillCategoryManager}
      basePath="/admin/settings/skill-category"
      listPath="/admin/settings/skill-categories"
      mode="create"
      formFields={formFields}
      validationRules={validationRules}
      statusOptions={statusOptions}
      title="Create Skill Category"
      subtitle="Add a new skill category to classify and organize skills"
      customInfoNote={customInfoNote}
    />
  );
}

export default SettingSkillCategoryCreatePage;
