// File Path: monorepo/web/frontend/src/pages/Admin/Setting/VehicleType/Create/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,
    defaultValue: "",
  },
  {
    name: "description",
    label: "Description",
    type: "textarea",
    placeholder:
      "Enter description (optional) - additional details about this vehicle type",
    rows: 4,
    maxLength: 500,
    defaultValue: "",
  },
  {
    name: "status",
    label: "Status",
    type: "select",
    required: true,
    defaultValue: 1,
  },
];

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

function SettingVehicleTypeCreatePage() {
  return (
    <UIXThemeProvider>
      <SettingVehicleTypeCreatePageContent />
    </UIXThemeProvider>
  );
}

const SettingVehicleTypeCreatePageContent = memo(
  function SettingVehicleTypeCreatePageContent() {
    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"),
        cardBg: getThemeClasses("card-bg"),
        borderSecondary: getThemeClasses("border-secondary"),
        textSecondary: getThemeClasses("text-secondary"),
        bgSecondary: getThemeClasses("bg-secondary"),
      }),
      [getThemeClasses],
    );

    // Memoize custom preview component
    const customPreview = useMemo(
      () => (
        <div
          className={`p-4 ${themeClasses.alertInfoBg} border ${themeClasses.borderPrimary} rounded-lg`}
        >
          <h3
            className={`text-sm font-medium ${themeClasses.textPrimary} mb-3 flex items-center`}
          >
            <InformationCircleIcon className="w-4 h-4 mr-2" />
            Preview
          </h3>
          <div
            className={`${themeClasses.cardBg} p-3 rounded border ${themeClasses.borderSecondary}`}
          >
            <p className={`text-xs ${themeClasses.textSecondary} mb-2`}>
              How this will appear in vehicle forms:
            </p>
            <div
              className={`text-sm ${themeClasses.textPrimary} p-2 ${themeClasses.bgSecondary} rounded border`}
            >
              <span className="font-medium">Vehicle Type Name</span>
              <p className={`text-xs ${themeClasses.textSecondary} mt-1`}>
                Description will appear here
              </p>
            </div>
          </div>
        </div>
      ),
      [themeClasses],
    );

    // 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 creating.
            </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="create"
        formFields={FORM_FIELDS}
        validationRules={VALIDATION_RULES}
        title="Create Vehicle Type"
        subtitle="Add a new vehicle type to the system"
        customPreview={customPreview}
        customInfoNote={customInfoNote}
      />
    );
  },
);

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

export default SettingVehicleTypeCreatePage;
