// File Path: monorepo/web/frontend/src/pages/Admin/Settings/EventCategory/List/Page.jsx
import React, { useMemo, useCallback, memo, useEffect } from "react";
import { Link } from "react-router";
import { useEventCategoryManager } from "../../../../../services/Services";
import { SettingsListView } from "../../../../../components/business/views";
import {
  ViewButton,
  UIXThemeProvider,
  useUIXTheme,
} from "../../../../../components/UIX";
import { CalendarDaysIcon } from "@heroicons/react/24/outline";
import {
  EVENT_CATEGORY_STATUS,
  EVENT_CATEGORY_STATUS_LABELS,
} from "../../../../../constants/Settings";
import { formatDateForDisplay } from "../../../../../services/Helpers/DateFormatter";

// Static configuration outside component
const STATUS_OPTIONS = [
  { value: "", label: "All Statuses" },
  {
    value: EVENT_CATEGORY_STATUS.ACTIVE.toString(),
    label: EVENT_CATEGORY_STATUS_LABELS[EVENT_CATEGORY_STATUS.ACTIVE],
  },
  {
    value: EVENT_CATEGORY_STATUS.INACTIVE.toString(),
    label: EVENT_CATEGORY_STATUS_LABELS[EVENT_CATEGORY_STATUS.INACTIVE],
  },
];

const SORT_OPTIONS = [
  { 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)" },
];

function SettingEventCategoryListPage() {
  return (
    <UIXThemeProvider>
      <SettingEventCategoryListPageContent />
    </UIXThemeProvider>
  );
}

const SettingEventCategoryListPageContent = memo(
  function SettingEventCategoryListPageContent() {
    const eventCategoryManager = useEventCategoryManager();
    const { getThemeClasses } = useUIXTheme();

    // Clear cache on component mount to ensure fresh data is fetched
    useEffect(() => {
      if (import.meta.env.DEV) {
      console.log("EventCategory List Page: Clearing cache to force fresh data fetch");
      eventCategoryManager.clearEventCategoriesCache();
      }
    }, [eventCategoryManager]);

    // Memoize theme classes
    const themeClasses = useMemo(
      () => ({
        linkText: getThemeClasses("text-primary"),
        linkHover: getThemeClasses("text-primary-hover"),
        badgeActiveBg: getThemeClasses("badge-active-bg"),
        badgeActiveText: getThemeClasses("badge-active-text"),
        badgeInactiveBg: getThemeClasses("badge-inactive-bg"),
        badgeInactiveText: getThemeClasses("badge-inactive-text"),
        textMuted: getThemeClasses("text-muted"),
      }),
      [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, eventCategory) => (
            <Link
              to={`/admin/settings/event-categories/${eventCategory.id}/detail`}
              className={`font-medium ${themeClasses.linkText} ${themeClasses.linkHover}`}
            >
              {eventCategory.name}
            </Link>
          ),
        },
        {
          key: "actions",
          label: "Actions",
          align: "right",
          render: (value, eventCategory) => (
            <ViewButton
              basePath="/admin/settings/event-categories"
              itemId={eventCategory.id}
            />
          ),
        },
      ],
      [themeClasses],
    );

    return (
      <SettingsListView
        entityType="eventCategory"
        entityTypePlural="Event Categories"
        entityIcon={CalendarDaysIcon}
        entityManager={eventCategoryManager}
        basePath="/admin/settings/event-categories"
        createPath="/admin/settings/event-categories/create"
        title="Event Categories"
        subtitle="Manage event categories and classification types"
        columns={columns}
        searchPlaceholder="Search by name or description..."
        statusOptions={STATUS_OPTIONS}
        sortOptions={SORT_OPTIONS}
        onRowClick={handleRowClick}
      />
    );
  },
);
SettingEventCategoryListPageContent.displayName =
  "SettingEventCategoryListPageContent";

export default SettingEventCategoryListPage;
