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

// Move static configuration outside component to prevent recreation
const SORT_OPTIONS = [
  { value: "startDate,DESC", label: "Start Date (Newest)" },
  { value: "startDate,ASC", label: "Start Date (Oldest)" },
  { value: "facilitatorName,ASC", label: "Facilitator (A-Z)" },
  { value: "facilitatorName,DESC", label: "Facilitator (Z-A)" },
];

function SettingFacilitatorAwayLogListPage() {
  return (
    <UIXThemeProvider>
      <SettingFacilitatorAwayLogListPageContent />
    </UIXThemeProvider>
  );
}

const SettingFacilitatorAwayLogListPageContent = memo(function SettingFacilitatorAwayLogListPageContent() {
  const facilitatorAwayLogManager = useFacilitatorAwayLogManager();
  const { getThemeClasses } = useUIXTheme();

  // Memoize theme classes
  const themeClasses = useMemo(
    () => ({
      linkText: getThemeClasses('text-primary'),
      linkHover: getThemeClasses('text-primary-hover'),
      accentText: getThemeClasses('text-accent'),
      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: 'facilitatorName',
      label: 'Facilitator',
      render: (value, awayLog) => (
        <Link
          to={`/admin/settings/facilitator-away-log/${awayLog.id}/detail`}
          className={`${themeClasses.linkText} ${themeClasses.linkHover} font-medium`}
        >
          {awayLog.facilitatorName || awayLog.facilitator?.name || "—"}
        </Link>
      )
    },
    {
      key: 'startDate',
      label: 'Start Date',
      render: (value, awayLog) => formatDateForDisplay(awayLog.startDate) || "—"
    },
    {
      key: 'untilFurtherNotice',
      label: 'End Date',
      render: (value, awayLog) => {
        if (awayLog.untilFurtherNotice === 1) {
          return <span className={`font-medium ${themeClasses.accentText}`}>Until Further Notice</span>;
        }
        return formatDateForDisplay(awayLog.untilDate) || "—";
      }
    },
    {
      key: 'actions',
      label: 'Actions',
      align: 'right',
      render: (value, awayLog) => (
        <ViewButton basePath="/admin/settings/facilitator-away-log" itemId={awayLog.id} />
      )
    }
  ], [themeClasses]);

  return (
    <SettingsListView
      entityType="facilitatorAwayLog"
      entityTypePlural="Facilitator Away Logs"
      entityIcon={ClockIcon}
      entityManager={facilitatorAwayLogManager}
      basePath="/admin/settings/facilitator-away-log"
      createPath="/admin/settings/facilitator-away-log/create"
      title="Facilitator Away Logs"
      subtitle="Manage facilitator availability and absence tracking"
      columns={columns}
      searchPlaceholder="Search by facilitator name..."
      sortOptions={SORT_OPTIONS}
      onRowClick={handleRowClick}
      defaultSort="startDate"
      defaultSortOrder="DESC"
    />
  );
});

// Set display name for React DevTools
SettingFacilitatorAwayLogListPageContent.displayName = 'SettingFacilitatorAwayLogListPageContent';

export default SettingFacilitatorAwayLogListPage;