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

// Move static configuration outside component to prevent recreation
const FORM_FIELDS = [
  {
    name: "name",
    label: "Name",
    type: "text",
    placeholder: "Enter vehicle type name (e.g., 'Semi Truck', 'Delivery Van')",
    required: true,
    maxLength: 100,
  },
  {
    name: "description",
    label: "Description",
    type: "textarea",
    placeholder:
      "Enter description (optional) - additional details about this vehicle type",
    rows: 4,
    maxLength: 500,
  },
  {
    name: "status",
    label: "Status",
    type: "select",
    required: true,
  },
];

const VALIDATION_RULES = {
  name: {
    maxLength: 100,
    minLength: 1,
  },
  description: {
    maxLength: 500,
  },
};

function SettingVehicleTypeUpdatePage() {
  return (
    <UIXThemeProvider>
      <SettingVehicleTypeUpdatePageContent />
    </UIXThemeProvider>
  );
}

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

    // Memoize theme classes
    const themeClasses = useMemo(
      () => ({
        alertInfoBg: getThemeClasses("alert-info-bg"),
        borderPrimary: getThemeClasses("border-primary"),
        textPrimary: getThemeClasses("text-primary"),
      }),
      [getThemeClasses],
    );

    // Memoize custom info note
    const customInfoNote = useMemo(
      () => (
        <div
          className={`p-4 ${themeClasses.alertInfoBg} border ${themeClasses.borderPrimary} rounded-lg`}
        >
          <p className={`text-sm ${themeClasses.textPrimary} flex items-start`}>
            <InformationCircleIcon className="w-5 h-5 mr-2 flex-shrink-0 mt-0.5" />
            <span>
              <strong>Note:</strong> Vehicle types are used to categorize
              different types of vehicles in the system. Changes will be visible
              immediately after updating.
            </span>
          </p>
        </div>
      ),
      [themeClasses],
    );

    return (
      <SettingsFormView
        entityType="vehicleType"
        entityTypePlural="Vehicle Types"
        entityIcon={TruckIcon}
        entityManager={vehicleTypeManager}
        basePath="/admin/settings/vehicle-type"
        listPath="/admin/settings/vehicle-types"
        mode="update"
        formFields={FORM_FIELDS}
        validationRules={VALIDATION_RULES}
        title="Edit Vehicle Type"
        subtitle="Update vehicle type details and configuration"
        customInfoNote={customInfoNote}
      />
    );
  },
);

// Set display name for React DevTools
SettingVehicleTypeUpdatePageContent.displayName =
  "SettingVehicleTypeUpdatePageContent";

export default SettingVehicleTypeUpdatePage;
