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

function SettingInsuranceRequirementDetailPage() {
  return (
    <UIXThemeProvider>
      <SettingInsuranceRequirementDetailPageContent />
    </UIXThemeProvider>
  );
}

const SettingInsuranceRequirementDetailPageContent = memo(function SettingInsuranceRequirementDetailPageContent() {
  const insuranceRequirementManager = useInsuranceRequirementManager();
  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],
  );

  // Define detail fields - memoized
  const fields = useMemo(() => [
    {
      name: "name",
      label: "Insurance Requirement 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}`
            }`}
          >
            {INSURANCE_REQUIREMENT_STATUS_LABELS[value] || "Unknown"}
          </span>
        );
      }
    },
  ], [themeClasses]);

  return (
    <SettingsDetailView
      entityType="insuranceRequirement"
      entityTypePlural="Insurance Requirements"
      entityIcon={ShieldCheckIcon}
      entityManager={insuranceRequirementManager}
      basePath="/admin/settings/insurance-requirement"
      listPath="/admin/settings/insurance-requirements"
      title="Insurance Requirement Details"
      subtitle="View insurance coverage requirement information"
      fields={fields}
    />
  );
});
SettingInsuranceRequirementDetailPageContent.displayName = 'SettingInsuranceRequirementDetailPageContent';

export default SettingInsuranceRequirementDetailPage;