import React, { useState, useEffect } from "react";
import { useSkillSetManager, useSkillCategoryManager } from "../../../../../services/Services";
import { SettingsDetailView } from "../../../../../components/business/views";
import { UIXThemeProvider, useUIXTheme } from "../../../../../components/UIX";
import { AcademicCapIcon } from "@heroicons/react/24/outline";

function SettingSkillSetDetailPage() {
  return (
    <UIXThemeProvider>
      <SettingSkillSetDetailPageContent />
    </UIXThemeProvider>
  );
}

function SettingSkillSetDetailPageContent() {
  const skillSetManager = useSkillSetManager();
  const skillCategoryManager = useSkillCategoryManager();
  const { getThemeClasses } = useUIXTheme();

  const [categoryOptions, setCategoryOptions] = useState([]);

  // Load skill category options for ID-to-label mapping
  useEffect(() => {
    const loadCategoryOptions = async () => {
      try {
        const options = await skillCategoryManager.getSkillCategorySelectOptions();
        setCategoryOptions(options || []);
      } catch (error) {
        if (import.meta.env.DEV) {
        console.error("Failed to load skill category options:", error);
        setCategoryOptions([]);
        }
      }
    };

    loadCategoryOptions();
  }, [skillCategoryManager]);

  // Helper function to get category label by ID
  const getCategoryLabel = (categoryId) => {
    if (!categoryId || !categoryOptions.length) return categoryId;
    const category = categoryOptions.find(option => option.value === categoryId);
    return category ? category.label : categoryId;
  };

  // Define detail fields
  const fields = [
    {
      name: "category",
      label: "Category",
      required: true,
      render: (value) => getCategoryLabel(value),
    },
    {
      name: "subCategory",
      label: "Sub-Category",
      required: true,
    },
    {
      name: "description",
      label: "Description",
      type: "multiline",
      emptyMessage: "No description provided",
    },
    {
      name: "status",
      label: "Status",
      type: "status",
      render: (value) => {
        const isActive = value === 1;
        return (
          <span
            className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
              isActive ? getThemeClasses('status-active') : getThemeClasses('status-inactive')
            }`}
          >
            {isActive ? "Active" : "Inactive"}
          </span>
        );
      }
    },
  ];

  return (
    <SettingsDetailView
      entityType="skillSet"
      entityTypePlural="Skill Sets"
      entityIcon={AcademicCapIcon}
      entityManager={skillSetManager}
      basePath="/admin/settings/skill-set"
      listPath="/admin/settings/skill-sets"
      title="Skill Set Details"
      subtitle="View skill set information and configuration"
      fields={fields}
    />
  );
}

export default SettingSkillSetDetailPage;