// File Path: monorepo/web/frontend/src/pages/Admin/Setting/VehicleType/List/Page.jsx
import React, { useMemo, useCallback } from "react";
import { Link } from "react-router";
import { useVehicleTypeManager } from "../../../../../services/Services";
import { SettingsListView } from "../../../../../components/business/views";
import { ViewButton } from "../../../../../components/UIX";
import { TruckIcon } from "@heroicons/react/24/outline";
import {
  VEHICLE_TYPE_STATUS,
  VEHICLE_TYPE_STATUS_LABELS,
} from "../../../../../constants/Settings";
import { formatDateForDisplay } from "../../../../../services/Helpers/DateFormatter";

// Move static configuration arrays outside component to prevent recreation
const STATUS_OPTIONS = [
  { value: "", label: "All Statuses" },
  {
    value: VEHICLE_TYPE_STATUS.ACTIVE.toString(),
    label: VEHICLE_TYPE_STATUS_LABELS[VEHICLE_TYPE_STATUS.ACTIVE],
  },
  {
    value: VEHICLE_TYPE_STATUS.INACTIVE.toString(),
    label: VEHICLE_TYPE_STATUS_LABELS[VEHICLE_TYPE_STATUS.INACTIVE],
  },
];

const SORT_OPTIONS = [
  { value: "name,ASC", label: "Name (A-Z)" },
  { value: "name,DESC", label: "Name (Z-A)" },
  { value: "created_at,DESC", label: "Created Date (Newest)" },
  { value: "created_at,ASC", label: "Created Date (Oldest)" },
];

function SettingVehicleTypeListPage() {
  const vehicleTypeManager = useVehicleTypeManager();

  // Memoize row click handler
  const handleRowClick = useCallback((vehicleType) => {
    return `/admin/settings/vehicle-type/${vehicleType.id}/detail`;
  }, []);

  // Memoize table columns
  const columns = useMemo(
    () => [
      {
        key: "name",
        label: "Name",
        render: (value, vehicleType) => (
          <Link
            to={`/admin/settings/vehicle-type/${vehicleType.id}/detail`}
            className="text-gray-900 hover:text-blue-600 dark:text-gray-100 dark:hover:text-blue-400 font-medium"
          >
            {vehicleType.name}
          </Link>
        ),
      },
      {
        key: "description",
        label: "Description",
        render: (value, vehicleType) => (
          <div className="max-w-xs truncate">
            {vehicleType.description || (
              <span className="text-gray-400 dark:text-gray-500 italic">—</span>
            )}
          </div>
        ),
      },
      {
        key: "status",
        label: "Status",
        render: (value, vehicleType) => {
          const isActive = vehicleType.status === VEHICLE_TYPE_STATUS.ACTIVE;
          return (
            <span
              className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
                isActive
                  ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
                  : "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200"
              }`}
            >
              {VEHICLE_TYPE_STATUS_LABELS[vehicleType.status] || "Unknown"}
            </span>
          );
        },
      },
      {
        key: "createdAt",
        label: "Created At",
        render: (value, vehicleType) =>
          formatDateForDisplay(vehicleType.createdAt) || "—",
      },
      {
        key: "actions",
        label: "Actions",
        align: "right",
        render: (value, vehicleType) => (
          <ViewButton
            basePath="/admin/settings/vehicle-type"
            itemId={vehicleType.id}
          />
        ),
      },
    ],
    [],
  );

  return (
    <SettingsListView
      entityType="vehicleType"
      entityTypePlural="Vehicle Types"
      entityIcon={TruckIcon}
      entityManager={vehicleTypeManager}
      basePath="/admin/settings/vehicle-type"
      createPath="/admin/settings/vehicle-type/create"
      title="Vehicle Types"
      subtitle="Manage vehicle type categories and classifications"
      columns={columns}
      searchPlaceholder="Search by name or description..."
      statusOptions={STATUS_OPTIONS}
      sortOptions={SORT_OPTIONS}
      onRowClick={handleRowClick}
    />
  );
}

export default SettingVehicleTypeListPage;
