import React, { useMemo, memo } from "react";
import { useCertificationManager } from "../../../../../services/Services";
import { SettingsDetailView } from "../../../../../components/business/views";
import { UIXThemeProvider, useUIXTheme } from "../../../../../components/UIX";
import { ClipboardDocumentCheckIcon } from "@heroicons/react/24/outline";
import { CERTIFICATION_STATUS_LABELS } from "../../../../../constants/Settings";

function SettingCertificationDetailPage() {
  return (
    <UIXThemeProvider>
      <SettingCertificationDetailPageContent />
    </UIXThemeProvider>
  );
}

const SettingCertificationDetailPageContent = memo(function SettingCertificationDetailPageContent() {
  const certificationManager = useCertificationManager();
  const { getThemeClasses } = useUIXTheme();

  // Memoize theme classes
  const themeClasses = useMemo(
    () => ({
      badgeActiveBg: getThemeClasses('badge-active-bg'),
      badgeActiveText: getThemeClasses('badge-active-text'),
      badgeInactiveBg: getThemeClasses('badge-inactive-bg'),
      badgeInactiveText: getThemeClasses('badge-inactive-text'),
    }),
    [getThemeClasses],
  );

  // Memoize detail fields
  const fields = useMemo(() => [
    {
      name: "specializationName",
      label: "Specialization",
      emptyMessage: "No specialization assigned",
    },
    {
      name: "name",
      label: "Certification Name",
      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
                ? `${themeClasses.badgeActiveBg} ${themeClasses.badgeActiveText}`
                : `${themeClasses.badgeInactiveBg} ${themeClasses.badgeInactiveText}`
            }`}
          >
            {CERTIFICATION_STATUS_LABELS[value] || "Unknown"}
          </span>
        );
      }
    },
  ], [themeClasses]);

  return (
    <SettingsDetailView
      entityType="certification"
      entityTypePlural="Certifications"
      entityIcon={ClipboardDocumentCheckIcon}
      entityManager={certificationManager}
      basePath="/admin/settings/certification"
      listPath="/admin/settings/certification"
      title="Certification Details"
      subtitle="View certification information and details"
      fields={fields}
    />
  );
});
SettingCertificationDetailPageContent.displayName = 'SettingCertificationDetailPageContent';

export default SettingCertificationDetailPage;