import React, { useMemo, useCallback, memo } from "react";
import { Link } from "react-router";
import { useSpecializationManager } from "../../../../../services/Services";
import { SettingsListView } from "../../../../../components/business/views";
import { ViewButton, UIXThemeProvider, useUIXTheme } from "../../../../../components/UIX";
import { StarIcon } from "@heroicons/react/24/outline";
import { SPECIALIZATION_STATUS, SPECIALIZATION_STATUS_LABELS } from "../../../../../constants/Settings";
import { formatDateForDisplay } from "../../../../../services/Helpers/DateFormatter";

function SettingSpecializationListPage() {
  return (
    <UIXThemeProvider>
      <SettingSpecializationListPageContent />
    </UIXThemeProvider>
  );
}

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

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

  // Memoize row click handler
  const handleRowClick = useCallback((item) => {
    return `${window.location.pathname}/${item.id}/detail`;
  }, []);

  // Memoize table columns with theme-aware styling
  const columns = useMemo(() => [
    {
      key: 'name',
      label: 'Name',
      render: (value, specialization) => (
        <Link
          to={`/admin/settings/specialization/${specialization.id}/detail`}
          className={`font-medium ${themeClasses.linkText} ${themeClasses.linkHover}`}
        >
          {specialization.name}
        </Link>
      )
    },
    {
      key: 'actions',
      label: 'Actions',
      align: 'right',
      render: (value, specialization) => (
        <ViewButton basePath="/admin/settings/specialization" itemId={specialization.id} />
      )
    }
  ], [themeClasses]);

  // Define status options
  const statusOptions = [
    { value: "", label: "All Statuses" },
    { value: SPECIALIZATION_STATUS.ACTIVE.toString(), label: SPECIALIZATION_STATUS_LABELS[SPECIALIZATION_STATUS.ACTIVE] },
    { value: SPECIALIZATION_STATUS.INACTIVE.toString(), label: SPECIALIZATION_STATUS_LABELS[SPECIALIZATION_STATUS.INACTIVE] },
  ];

  // Define sort options
  const sortOptions = [
    { value: "name,ASC", label: "Name (A-Z)" },
    { value: "name,DESC", label: "Name (Z-A)" },
    { value: "created_at,DESC", label: "Created Date (Newest)" },
    { value: "created_at,ASC", label: "Created Date (Oldest)" },
  ];

  return (
    <SettingsListView
      entityType="specialization"
      entityTypePlural="Specializations"
      entityIcon={StarIcon}
      entityManager={specializationManager}
      basePath="/admin/settings/specialization"
      createPath="/admin/settings/specialization/create"
      title="Specializations"
      subtitle="Manage facilitator specializations and expertise areas"
      columns={columns}
      searchPlaceholder="Search by name or description..."
      statusOptions={statusOptions}
      sortOptions={sortOptions}
      onRowClick={handleRowClick}
    />
  );
});

SettingSpecializationListPageContent.displayName = 'SettingSpecializationListPageContent';

export default SettingSpecializationListPage;