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

function SettingServiceFeeListPage() {
  return (
    <UIXThemeProvider>
      <SettingServiceFeeListPageContent />
    </UIXThemeProvider>
  );
}

const SettingServiceFeeListPageContent = memo(
  function SettingServiceFeeListPageContent() {
    const serviceFeeManager = useServiceFeeManager();
    const { getThemeClasses } = useUIXTheme();

    // Memoize theme classes
    const themeClasses = useMemo(
      () => ({
        textPrimary: getThemeClasses("text-primary"),
        linkHover: getThemeClasses("link-hover"),
        textMuted: getThemeClasses("text-muted"),
        textSuccess: getThemeClasses("text-success"),
        badgeSuccess: getThemeClasses("badge-success"),
        badgeSecondary: getThemeClasses("badge-secondary"),
      }),
      [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, serviceFee) => (
            <Link
              to={`/admin/settings/service-fee/${serviceFee.id}/detail`}
              className={`${themeClasses.textPrimary} ${themeClasses.linkHover} font-medium`}
            >
              {serviceFee.name}
            </Link>
          ),
        },
        {
          key: "description",
          label: "Description",
          render: (value, serviceFee) => (
            <div className="max-w-xs truncate">
              {serviceFee.description || (
                <span className={`${themeClasses.textMuted} italic`}>—</span>
              )}
            </div>
          ),
        },
        {
          key: "amount",
          label: "Amount",
          render: (value, serviceFee) => (
            <span className={`font-mono ${themeClasses.textSuccess}`}>
              ${serviceFee.amount ? serviceFee.amount.toFixed(2) : "0.00"}
            </span>
          ),
        },
        {
          key: "status",
          label: "Status",
          render: (value, serviceFee) => {
            const isActive = serviceFee.status === SERVICE_FEE_STATUS.ACTIVE;
            return (
              <span
                className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
                  isActive
                    ? themeClasses.badgeSuccess
                    : themeClasses.badgeSecondary
                }`}
              >
                {SERVICE_FEE_STATUS_LABELS[serviceFee.status] || "Unknown"}
              </span>
            );
          },
        },
        {
          key: "createdAt",
          label: "Created At",
          render: (value, serviceFee) =>
            formatDateForDisplay(serviceFee.createdAt) || "—",
        },
        {
          key: "actions",
          label: "Actions",
          align: "right",
          render: (value, serviceFee) => (
            <ViewButton
              basePath="/admin/settings/service-fee"
              itemId={serviceFee.id}
            />
          ),
        },
      ],
      [themeClasses],
    );

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

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

    return (
      <SettingsListView
        entityType="serviceFee"
        entityTypePlural="Service Fees"
        entityIcon={CurrencyDollarIcon}
        entityManager={serviceFeeManager}
        basePath="/admin/settings/service-fee"
        createPath="/admin/settings/service-fees/create"
        title="Service Fees"
        subtitle="Manage service fees and pricing structures"
        columns={columns}
        searchPlaceholder="Search by name or description..."
        statusOptions={statusOptions}
        sortOptions={sortOptions}
        onRowClick={handleRowClick}
      />
    );
  },
);

SettingServiceFeeListPageContent.displayName =
  "SettingServiceFeeListPageContent";

export default SettingServiceFeeListPage;
