import React, { useMemo, memo } from "react";
import { useServiceFeeManager } from "../../../../../services/Services";
import { SettingsDetailView } from "../../../../../components/business/views";
import { UIXThemeProvider, useUIXTheme } from "../../../../../components/UIX";
import { CreditCardIcon, PercentBadgeIcon } from "@heroicons/react/24/outline";
import { SERVICE_FEE_STATUS_LABELS } from "../../../../../constants/Settings";

function SettingServiceFeeDetailPage() {
  return (
    <UIXThemeProvider>
      <SettingServiceFeeDetailPageContent />
    </UIXThemeProvider>
  );
}

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

  // Memoize theme classes
  const themeClasses = useMemo(
    () => ({
      textRequired: getThemeClasses('text-error'),
    }),
    [getThemeClasses],
  );

  // Define detail fields - memoized
  const fields = useMemo(() => [
    {
      name: "name",
      label: "Service Fee Name",
      required: true,
    },
    {
      name: "description",
      label: "Description",
      type: "multiline",
      emptyMessage: "No description provided",
    },
    {
      name: "percentage",
      label: "Percentage Rate",
      render: (value) => (
        <div className="flex items-center space-x-2">
          <PercentBadgeIcon className={`w-5 h-5 ${getThemeClasses('text-success')}`} />
          <span className={`text-2xl font-bold ${getThemeClasses('text-success')}`}>
            {value}%
          </span>
        </div>
      )
    },
    {
      name: "status",
      label: "Status",
      type: "status",
      render: (value) => {
        const isActive = value === 1;
        return (
          <span
            className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
              isActive
                ? getThemeClasses('badge-success')
                : getThemeClasses('badge-secondary')
            }`}
          >
            {SERVICE_FEE_STATUS_LABELS[value] || "Unknown"}
          </span>
        );
      }
    },
  ], [getThemeClasses]);

  // Custom fields with example calculation - memoized
  const customFields = useMemo(() => (entityData) => {
    if (!entityData) return null;
    return (
    <div className="space-y-6">
      {fields.map((field, index) => (
        <div key={field.name || index}>
          <label className={`block text-base sm:text-lg font-semibold ${getThemeClasses('text-primary')} mb-3 flex items-center`}>
            {field.label}
            {field.required && <span className={`${themeClasses.textRequired} ml-1`}>*</span>}
          </label>
          <div className={`p-5 ${getThemeClasses('bg-gradient-primary')} rounded-xl border ${getThemeClasses('card-border')} ${field.className || ''} ${field.type === 'multiline' ? 'min-h-[100px]' : ''}`}>
            {field.type === 'multiline' ? (
              <div className={`text-lg ${getThemeClasses('text-secondary')} whitespace-pre-wrap`}>
                {field.render ? field.render(entityData[field.name], entityData) : (entityData[field.name] || <span className={`${getThemeClasses('text-muted')} italic`}>{field.emptyMessage || "Not provided"}</span>)}
              </div>
            ) : (
              <div className={`text-lg font-semibold ${getThemeClasses('text-primary')}`}>
                {field.render ? field.render(entityData[field.name], entityData) : (entityData[field.name] || <span className={`${getThemeClasses('text-muted')} italic`}>{field.emptyMessage || "Not provided"}</span>)}
              </div>
            )}
          </div>
        </div>
      ))}

      {/* Example Calculation */}
      {entityData?.percentage && (
        <div>
          <label className={`block text-base sm:text-lg font-semibold ${getThemeClasses('text-primary')} mb-3`}>
            Example Calculation
          </label>
          <div className={`p-5 ${getThemeClasses('alert-info-bg')} rounded-xl border ${getThemeClasses('border-primary')}`}>
            <div className={`text-lg ${getThemeClasses('text-primary')}`}>
              <p className="mb-2">On a <strong>$100.00</strong> transaction:</p>
              <p className="text-xl font-bold">
                Service Fee: ${((100 * parseFloat(entityData?.percentage || 0)) / 100).toFixed(2)}
              </p>
            </div>
          </div>
        </div>
      )}
    </div>
    );
  }, [fields, getThemeClasses, themeClasses]);

  return (
    <SettingsDetailView
      entityType="serviceFee"
      entityTypePlural="Service Fees"
      entityIcon={CreditCardIcon}
      entityManager={serviceFeeManager}
      basePath="/admin/settings/service-fee"
      listPath="/admin/settings/service-fees"
      title="Service Fee Details"
      subtitle="View service fee information and rate configuration"
      fields={fields}
      customFields={customFields}
    />
  );
});
SettingServiceFeeDetailPageContent.displayName = 'SettingServiceFeeDetailPageContent';

export default SettingServiceFeeDetailPage;