// File Path: monorepo/web/frontend/src/pages/Admin/Setting/VehicleType/Detail/Page.jsx
import React, { useMemo, memo } from "react";
import { useVehicleTypeManager } from "../../../../../services/Services";
import { SettingsDetailView } from "../../../../../components/business/views";
import { UIXThemeProvider, useUIXTheme } from "../../../../../components/UIX";
import { TruckIcon } from "@heroicons/react/24/outline";
import { VEHICLE_TYPE_STATUS_LABELS } from "../../../../../constants/Settings";

// Move static field configuration outside component to prevent recreation
const DETAIL_FIELDS = [
  {
    name: "name",
    label: "Name",
    required: true,
  },
  {
    name: "description",
    label: "Description",
    type: "multiline",
    emptyMessage: "No description provided",
  },
  {
    name: "status",
    label: "Status",
    type: "status",
  },
];

function SettingVehicleTypeDetailPage() {
  return (
    <UIXThemeProvider>
      <SettingVehicleTypeDetailPageContent />
    </UIXThemeProvider>
  );
}

const SettingVehicleTypeDetailPageContent = memo(function SettingVehicleTypeDetailPageContent() {
  const vehicleTypeManager = useVehicleTypeManager();
  const { getThemeClasses } = useUIXTheme();

  // Memoize theme classes for status badges
  const themeClasses = useMemo(
    () => ({
      badgeActiveBg: getThemeClasses('badge-active-bg'),
      badgeActiveText: getThemeClasses('badge-active-text'),
      badgeInactiveBg: getThemeClasses('badge-inactive-bg'),
      badgeInactiveText: getThemeClasses('badge-inactive-text'),
    }),
    [getThemeClasses],
  );

  // Memoize fields array with custom render function
  const fields = useMemo(() => {
    return DETAIL_FIELDS.map((field) => {
      if (field.name === "status") {
        return {
          ...field,
          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
                    ? `${themeClasses.badgeActiveBg} ${themeClasses.badgeActiveText}`
                    : `${themeClasses.badgeInactiveBg} ${themeClasses.badgeInactiveText}`
                }`}
              >
                {VEHICLE_TYPE_STATUS_LABELS[value] || "Unknown"}
              </span>
            );
          }
        };
      }
      return field;
    });
  }, [themeClasses]);

  return (
    <SettingsDetailView
      entityType="vehicleType"
      entityTypePlural="Vehicle Types"
      entityIcon={TruckIcon}
      entityManager={vehicleTypeManager}
      basePath="/admin/settings/vehicle-type"
      listPath="/admin/settings/vehicle-types"
      title="Vehicle Type Details"
      subtitle="View vehicle type information and configuration"
      fields={fields}
    />
  );
});

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

export default SettingVehicleTypeDetailPage;