import React, { useMemo, useCallback, memo } from "react";
import { Link } from "react-router";
import { useHowHearAboutUsItemManager } from "../../../../../services/Services";
import { SettingsListView } from "../../../../../components/business/views";
import { ViewButton, UIXThemeProvider, useUIXTheme } from "../../../../../components/UIX";
import { MegaphoneIcon, HashtagIcon, UserGroupIcon, BriefcaseIcon, UsersIcon, LockClosedIcon } from "@heroicons/react/24/outline";
import { HOW_HEAR_ABOUT_US_ITEM_STATUS, HOW_HEAR_ABOUT_US_ITEM_STATUS_LABELS } from "../../../../../constants/Settings";
import { formatDateForDisplay } from "../../../../../services/Helpers/DateFormatter";

// Static constants
const STATUS_OPTIONS = [
  { value: "", label: "All Statuses" },
  { value: HOW_HEAR_ABOUT_US_ITEM_STATUS.ACTIVE.toString(), label: HOW_HEAR_ABOUT_US_ITEM_STATUS_LABELS[HOW_HEAR_ABOUT_US_ITEM_STATUS.ACTIVE] },
  { value: HOW_HEAR_ABOUT_US_ITEM_STATUS.INACTIVE.toString(), label: HOW_HEAR_ABOUT_US_ITEM_STATUS_LABELS[HOW_HEAR_ABOUT_US_ITEM_STATUS.INACTIVE] },
];

const SORT_OPTIONS = [
  { value: "sortNumber,ASC", label: "Sort Number (Low → High)" },
  { value: "sortNumber,DESC", label: "Sort Number (High → Low)" },
  { 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 SettingHowHearAboutUsItemListPage() {
  return (
    <UIXThemeProvider>
      <SettingHowHearAboutUsItemListPageContent />
    </UIXThemeProvider>
  );
}

const SettingHowHearAboutUsItemListPageContent = memo(function SettingHowHearAboutUsItemListPageContent() {
  const howHearAboutUsItemManager = useHowHearAboutUsItemManager();
  const { getThemeClasses } = useUIXTheme();

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

  // Get role badges
  const getRoleBadges = useCallback((item) => {
    const badges = [];
    if (item.isForFacilitator) {
      badges.push(
        <span
          key="facilitator"
          className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${themeClasses.badgeInfoBg} ${themeClasses.badgeInfoText}`}
        >
          <BriefcaseIcon className="w-3 h-3 mr-1" />
          Facilitator
        </span>
      );
    }
    if (item.isForCustomer) {
      badges.push(
        <span
          key="customer"
          className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${themeClasses.badgeInfoBg} ${themeClasses.badgeInfoText}`}
        >
          <UsersIcon className="w-3 h-3 mr-1" />
          Customer
        </span>
      );
    }
    if (item.isForStaff) {
      badges.push(
        <span
          key="staff"
          className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${themeClasses.badgeSuccessBg} ${themeClasses.badgeSuccessText}`}
        >
          <UserGroupIcon className="w-3 h-3 mr-1" />
          Staff
        </span>
      );
    }
    return badges.length > 0 ? (
      <div className="flex flex-wrap gap-1">{badges}</div>
    ) : (
      <span className={`${themeClasses.textMuted} italic text-xs`}>No roles</span>
    );
  }, [themeClasses]);

  // Define table columns
  const columns = useMemo(() => [
    {
      key: 'text',
      label: 'Text',
      render: (value, item) => (
        <Link
          to={`/admin/settings/how-hear-about-us-item/${item.id}/detail`}
          className={`${themeClasses.linkText} ${themeClasses.linkHover} font-medium flex items-center`}
        >
          <span>{item?.text || "N/A"}</span>
          {item?.text === "Other" && (
            <LockClosedIcon className={`w-3 h-3 ml-2 ${themeClasses.badgeInfoText}`} />
          )}
        </Link>
      )
    },
    {
      key: 'actions',
      label: 'Actions',
      align: 'right',
      render: (value, item) => (
        <ViewButton basePath="/admin/settings/how-hear-about-us-item" itemId={item.id} />
      )
    }
  ], [themeClasses]);

  return (
    <SettingsListView
      entityType="howHearAboutUsItem"
      entityTypePlural="How Hear About Us Items"
      entityIcon={MegaphoneIcon}
      entityManager={howHearAboutUsItemManager}
      basePath="/admin/settings/how-hear-about-us-item"
      createPath="/admin/settings/how-hear-about-us-item/create"
      title="How Hear About Us Items"
      subtitle="Manage customer acquisition channels and marketing touchpoints"
      columns={columns}
      searchPlaceholder="Search by text..."
      statusOptions={STATUS_OPTIONS}
      sortOptions={SORT_OPTIONS}
      defaultSort="sortNumber"
      defaultSortOrder="ASC"
    />
  );
});

SettingHowHearAboutUsItemListPageContent.displayName = 'SettingHowHearAboutUsItemListPageContent';

export default SettingHowHearAboutUsItemListPage;