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

// Move static configuration outside component to prevent recreation
const STATUS_OPTIONS = [
  { value: "", label: "All Statuses" },
  { value: BULLETIN_STATUS.ACTIVE.toString(), label: BULLETIN_STATUS_LABELS[BULLETIN_STATUS.ACTIVE] },
  { value: BULLETIN_STATUS.INACTIVE.toString(), label: BULLETIN_STATUS_LABELS[BULLETIN_STATUS.INACTIVE] },
];

const SORT_OPTIONS = [
  { value: "text,ASC", label: "Text (A-Z)" },
  { value: "text,DESC", label: "Text (Z-A)" },
  { value: "created_at,DESC", label: "Created Date (Newest)" },
  { value: "created_at,ASC", label: "Created Date (Oldest)" },
];

function SettingBulletinListPage() {
  return (
    <UIXThemeProvider>
      <SettingBulletinListPageContent />
    </UIXThemeProvider>
  );
}

const SettingBulletinListPageContent = memo(function SettingBulletinListPageContent() {
  const bulletinManager = useBulletinManager();
  const { getThemeClasses } = useUIXTheme();

  // 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'),
    }),
    [getThemeClasses],
  );

  // Memoize row click handler
  const handleRowClick = useCallback((bulletin) => {
    return `/admin/settings/bulletin/${bulletin.id}/detail`;
  }, []);

  // Memoize table columns with theme-aware styling
  const columns = useMemo(() => [
    {
      key: 'text',
      label: 'Text',
      render: (value, bulletin) => (
        <Link
          to={`/admin/settings/bulletin/${bulletin.id}/detail`}
          className={`${themeClasses.linkText} ${themeClasses.linkHover} font-medium`}
        >
          <div className="max-w-md truncate">
            {bulletin.text}
          </div>
        </Link>
      )
    },
    {
      key: 'status',
      label: 'Status',
      render: (value, bulletin) => {
        const isActive = bulletin.status === BULLETIN_STATUS.ACTIVE;
        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}`
            }`}
          >
            {BULLETIN_STATUS_LABELS[bulletin.status] || "Unknown"}
          </span>
        );
      }
    },
    {
      key: 'createdAt',
      label: 'Created At',
      render: (value, bulletin) => formatDateForDisplay(bulletin.createdAt) || "—"
    },
    {
      key: 'actions',
      label: 'Actions',
      align: 'right',
      render: (value, bulletin) => (
        <ViewButton basePath="/admin/settings/bulletin" itemId={bulletin.id} />
      )
    }
  ], [themeClasses]);

  return (
    <SettingsListView
      entityType="bulletin"
      entityTypePlural="Bulletins"
      entityIcon={NewspaperIcon}
      entityManager={bulletinManager}
      basePath="/admin/settings/bulletin"
      createPath="/admin/settings/bulletin/create"
      title="Bulletins"
      subtitle="Manage system bulletins and announcements"
      columns={columns}
      searchPlaceholder="Search by text..."
      statusOptions={STATUS_OPTIONS}
      sortOptions={SORT_OPTIONS}
      onRowClick={handleRowClick}
    />
  );
});
SettingBulletinListPageContent.displayName = 'SettingBulletinListPageContent';

export default SettingBulletinListPage;