bambuddy/frontend/src/components/ConfigureAmsSlotModal.tsx

import { useState, useMemo, useEffect, useCallback, useRef } from 'react';
import { useQuery, useMutation } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';
import { X, Loader2, Settings2, ChevronDown, CheckCircle2, RotateCcw } from 'lucide-react';
import { api } from '../api/client';
import type { KProfile } from '../api/client';
import { matchesPrinterModelSuffix, presetCompatibility, buildCompatibilityIndex, extractPresetModel } from '../utils/slicerPrinterMatch';
import { toFilamentId } from './spool-form/utils';
import { Button } from './Button';
import { getAmsLabel } from '../utils/amsHelpers';
import { getSwatchStyle } from '../utils/colors';
import { useCancellableTimeout } from '../hooks/useCancellableTimeout';

interface SlotInfo {
  amsId: number;
  trayId: number;
  trayCount: number;
  trayType?: string;
  trayColor?: string;
  traySubBrands?: string;
  trayInfoIdx?: string;
  extruderId?: number;
  caliIdx?: number | null;
  savedPresetId?: string;
}

// Convert setting_id to tray_info_idx (filament_id format)
// Bambu format: setting_id "GFSL05" → tray_info_idx "GFL05"
function convertToTrayInfoIdx(settingId: string): string {
  // Strip version suffix if present (e.g., GFSL05_07 -> GFSL05)
  const baseId = settingId.includes('_') ? settingId.split('_')[0] : settingId;

  // Bambu presets start with "GFS" - remove the 'S' to get filament_id
  if (baseId.startsWith('GFS')) {
    return 'GF' + baseId.slice(3);
  }

  // User presets (PFUS*, PFSP*) - use the base setting_id (without version suffix)
  // This follows the pattern that filament_id and setting_id share the same base ID
  if (baseId.startsWith('PFUS') || baseId.startsWith('PFSP')) {
    return baseId;  // Use base ID without version suffix
  }

  // For other formats, use as-is
  return baseId;
}

interface ConfigureAmsSlotModalProps {
  isOpen: boolean;
  onClose: () => void;
  printerId: number;
  slotInfo: SlotInfo;
  nozzleDiameter?: string;
  printerModel?: string;
  onSuccess?: () => void;
  fullScreen?: boolean;
}

// Known filament material types
const MATERIAL_TYPES = ['PLA', 'PETG', 'PCTG', 'ABS', 'ASA', 'TPU', 'PC', 'PA', 'NYLON', 'PVA', 'HIPS', 'PP', 'PET'];

// Extract filament type from preset name by finding known material type
function parsePresetName(name: string): { material: string; brand: string; variant: string } {
  // Remove printer/nozzle suffix first
  const withoutSuffix = name.replace(/@.+$/, '').trim();
  const upperName = withoutSuffix.toUpperCase();

  // Handle "X Support for Y" pattern: the filament type is Y, not X.
  // e.g. "PLA Support for PETG PETG Basic" → material is PETG
  const supportMatch = upperName.match(/\bSUPPORT\s+FOR\s+/);
  if (supportMatch) {
    const afterSupport = upperName.slice(supportMatch.index! + supportMatch[0].length);
    for (const mat of MATERIAL_TYPES) {
      const regex = new RegExp(`\\b${mat}\\b`);
      if (regex.test(afterSupport)) {
        const brand = withoutSuffix.slice(0, supportMatch.index).trim();
        return { material: mat, brand, variant: 'Support' };
      }
    }
  }

  // Try to find a known material type in the name
  for (const mat of MATERIAL_TYPES) {
    // Use word boundary to match whole words only
    const regex = new RegExp(`\\b${mat}\\b`, 'i');
    if (regex.test(upperName)) {
      // Found material, extract brand (everything before material) and variant (after)
      const parts = withoutSuffix.split(regex);
      const brand = parts[0]?.trim() || '';
      const variant = parts[1]?.trim() || '';
      return { material: mat, brand, variant };
    }
  }

  // Fallback: assume first word is brand, second is material
  const parts = withoutSuffix.split(/\s+/);
  if (parts.length >= 2) {
    return { material: parts[1], brand: parts[0], variant: parts.slice(2).join(' ') };
  }

  return { material: withoutSuffix, brand: '', variant: '' };
}

// Identity of a K-profile inside the picker. Both profile lists are
// deduplicated on name+k_value, so this is unique across the whole option set
// — unlike the bare name, which two profiles can share (#2710).
// Option identity. The extruder has to be in here: the printer's calibration
// table is numbered per nozzle, so one filament calibrated on both hotends gives
// two profiles with the same name — and on a Filament Track Switch machine they
// are both offered, because such a slot can reach either nozzle. Keying on
// name+K alone made the two indistinguishable and, when their K happened to
// match, silently collapsed them into whichever came first.
function kProfileOptionValue(profile: KProfile): string {
  return `${profile.extruder_id ?? 0}|${profile.name}|${profile.k_value}`;
}

/**
 * Does the printer file its calibration table per hotend?
 *
 * It is not a property of the machine but of the table it sent. When the
 * slot's own hotend appears in it, an index means "entry N of *that* hotend's
 * table" and the tagging is load-bearing. When the hotend appears nowhere, the
 * tagging says nothing about this slot and scoping by it only hides profiles
 * the slot really does use.
 */
function tableNamesThisHotend(profiles: KProfile[], extruderId: number | undefined): boolean {
  if (extruderId === undefined) return false;
  return profiles.some(p => (p.extruder_id ?? 0) === extruderId);
}

/**
 * The profile a slot's `cali_idx` points at.
 *
 * Scoped to the slot's own hotend where the table names it: on the
 * maintainer's H2C, index 16 is the left hotend's black PLA at K=0.018 and
 * index 15 is the right's at K=0.020, so a right-hand slot bound to 16 must
 * come up empty rather than follow the index into the left's table.
 *
 * Where the table does not name the hotend, the printer is filing one profile
 * per filament instead — an X2D's second AMS points at the same entries as its
 * first — and demanding a match found nothing at all, leaving every slot on
 * that AMS unconfigured with no error (#3044). There the index stands alone.
 */
function findProfileByCaliIdx(
  profiles: KProfile[],
  caliIdx: number,
  extruderId: number | undefined
): KProfile | undefined {
  if (tableNamesThisHotend(profiles, extruderId)) {
    return profiles.find(p => p.slot_id === caliIdx && (p.extruder_id ?? 0) === extruderId);
  }
  return profiles.find(p => p.slot_id === caliIdx);
}

// Suffix naming the hotend a profile was calibrated on, for printers that have
// more than one. Empty on single-nozzle machines, where it would be noise.
function kProfileNozzleSuffix(profile: KProfile, isDualNozzle: boolean, t: (k: string) => string): string {
  if (!isDualNozzle) return '';
  return ` \u00b7 ${profile.extruder_id === 1 ? t('common.left') : t('common.right')}`;
}

// Check if a preset is a user preset (not built-in)
function isUserPreset(settingId: string): boolean {
  // Built-in presets have specific patterns, user presets are UUIDs
  return !settingId.startsWith('GF') && !settingId.startsWith('P1');
}

// Common color name to hex mapping
const COLOR_NAME_MAP: Record<string, string> = {
  // Basic colors
  'white': 'FFFFFF',
  'black': '000000',
  'red': 'FF0000',
  'green': '00FF00',
  'blue': '0000FF',
  'yellow': 'FFFF00',
  'cyan': '00FFFF',
  'magenta': 'FF00FF',
  'orange': 'FFA500',
  'purple': '800080',
  'pink': 'FFC0CB',
  'brown': '8B4513',
  'gray': '808080',
  'grey': '808080',
  // Filament-specific colors
  'jade white': 'FFFEF2',
  'ivory': 'FFFFF0',
  'beige': 'F5F5DC',
  'cream': 'FFFDD0',
  'silver': 'C0C0C0',
  'gold': 'FFD700',
  'bronze': 'CD7F32',
  'copper': 'B87333',
  'navy': '000080',
  'teal': '008080',
  'olive': '808000',
  'maroon': '800000',
  'coral': 'FF7F50',
  'salmon': 'FA8072',
  'lime': '32CD32',
  'mint': '98FF98',
  'forest green': '228B22',
  'sky blue': '87CEEB',
  'royal blue': '4169E1',
  'turquoise': '40E0D0',
  'lavender': 'E6E6FA',
  'violet': 'EE82EE',
  'plum': 'DDA0DD',
  'tan': 'D2B48C',
  'chocolate': 'D2691E',
  'charcoal': '36454F',
  'slate': '708090',
  'transparent': '000000', // Will need special handling
  'natural': 'F5F5DC',
  'wood': 'DEB887',
};

// Quick-select color presets (common filament colors)
// Basic colors shown by default
const QUICK_COLORS_BASIC = [
  { name: 'White', hex: 'FFFFFF' },
  { name: 'Black', hex: '000000' },
  { name: 'Red', hex: 'FF0000' },
  { name: 'Blue', hex: '0000FF' },
  { name: 'Green', hex: '00AA00' },
  { name: 'Yellow', hex: 'FFFF00' },
  { name: 'Orange', hex: 'FFA500' },
  { name: 'Gray', hex: '808080' },
];

// Extended colors shown when expanded
const QUICK_COLORS_EXTENDED = [
  { name: 'Cyan', hex: '00FFFF' },
  { name: 'Magenta', hex: 'FF00FF' },
  { name: 'Purple', hex: '800080' },
  { name: 'Pink', hex: 'FFC0CB' },
  { name: 'Brown', hex: '8B4513' },
  { name: 'Beige', hex: 'F5F5DC' },
  { name: 'Navy', hex: '000080' },
  { name: 'Teal', hex: '008080' },
  { name: 'Lime', hex: '32CD32' },
  { name: 'Gold', hex: 'FFD700' },
  { name: 'Silver', hex: 'C0C0C0' },
  { name: 'Maroon', hex: '800000' },
  { name: 'Olive', hex: '808000' },
  { name: 'Coral', hex: 'FF7F50' },
  { name: 'Salmon', hex: 'FA8072' },
  { name: 'Turquoise', hex: '40E0D0' },
  { name: 'Violet', hex: 'EE82EE' },
  { name: 'Indigo', hex: '4B0082' },
  { name: 'Chocolate', hex: 'D2691E' },
  { name: 'Tan', hex: 'D2B48C' },
  { name: 'Slate', hex: '708090' },
  { name: 'Charcoal', hex: '36454F' },
  { name: 'Ivory', hex: 'FFFFF0' },
  { name: 'Cream', hex: 'FFFDD0' },
];

// Try to convert color name to hex
function colorNameToHex(name: string): string | null {
  const normalized = name.toLowerCase().trim();
  return COLOR_NAME_MAP[normalized] || null;
}

// Escape regex metacharacters and turn whitespace into ``\s+`` so a literal
export function ConfigureAmsSlotModal({
  isOpen,
  onClose,
  printerId,
  slotInfo,
  nozzleDiameter = '0.4',
  printerModel,
  onSuccess,
  fullScreen,
}: ConfigureAmsSlotModalProps) {
  const { t } = useTranslation();
  const [selectedPresetId, setSelectedPresetId] = useState<string>('');
  const [selectedKProfile, setSelectedKProfile] = useState<KProfile | null>(null);
  // The same value, readable at mutation-execute time rather than at
  // closure-capture time. useMutation hands its options to the observer from an
  // *effect*, so a click that lands between a commit and that effect flushing
  // runs the previous render's mutationFn — one that closed over the profile as
  // it was before the K-profile query resolved. The picker showed the right
  // profile and the printer was sent cali_idx -1, binding the default 0.020
  // instead of the calibrated K. Written during render on purpose: an effect
  // here would inherit the very flush ordering this exists to escape.
  const selectedKProfileRef = useRef<KProfile | null>(null);
  selectedKProfileRef.current = selectedKProfile;
  const [colorHex, setColorHex] = useState<string>(''); // Just the 6-char hex, no alpha
  const [colorInput, setColorInput] = useState<string>(''); // User's text input (name or hex)
  const [searchQuery, setSearchQuery] = useState('');
  const [showSuccess, setShowSuccess] = useState(false);
  const [showExtendedColors, setShowExtendedColors] = useState(false);
  const scrolledToRef = useRef<string>('');
  // The success state is held briefly before the modal closes itself; that
  // timer must not outlive the modal.
  const { schedule: scheduleClose } = useCancellableTimeout();

  // Fetch cloud settings (gracefully handle 401 when logged out)
  const { data: cloudSettings, isLoading: settingsLoading, isError: cloudError } = useQuery({
    queryKey: ['cloudSettings'],
    queryFn: () => api.getCloudSettings(),
    enabled: isOpen,
    retry: false,
  });

  // Orca Cloud filament profiles, same shape as Bambu Cloud's. Each query
  // is independent — the picker degrades gracefully if Orca Cloud isn't
  // connected (no entries surface, no error banner because we don't want
  // to nag users who deliberately only use Bambu Cloud).
  const { data: orcaCloudList } = useQuery({
    queryKey: ['orcaCloudProfilesForAmsSlot'],
    queryFn: () => api.orcaCloudListProfiles(),
    enabled: isOpen,
    retry: false,
  });

  // Fetch local presets
  const { data: localPresets, isLoading: localLoading } = useQuery({
    queryKey: ['localPresets'],
    queryFn: () => api.getLocalPresets(),
    enabled: isOpen,
  });

  // Fetch built-in filament names (static fallback)
  const { data: builtinFilaments, isLoading: builtinLoading } = useQuery({
    queryKey: ['builtinFilaments'],
    queryFn: () => api.getBuiltinFilaments(),
    enabled: isOpen,
    staleTime: Infinity,
  });

  // Fetch K profiles
  const { data: kprofilesData, isLoading: kprofilesLoading } = useQuery({
    queryKey: ['kprofiles', printerId, nozzleDiameter],
    queryFn: () => api.getKProfiles(printerId, nozzleDiameter),
    enabled: isOpen && !!printerId,
  });

  // Fetch color catalog
  const { data: colorCatalog } = useQuery({
    queryKey: ['colorCatalog'],
    queryFn: () => api.getColorCatalog(),
    enabled: isOpen,
    staleTime: Infinity,
  });

  // Backend Bambu printer-model registry — drives the @BBL short-code matcher
  // and (here) the reverse short-code → long-name lookup that lets us check
  // imported local presets' `compatible_printers` list against the slot's
  // printer (#1623). Long staleTime: the registry only changes across backend
  // releases.
  const { data: printerModelsData } = useQuery({
    queryKey: ['slicerPrinterModels'],
    queryFn: api.getSlicerPrinterModels,
    enabled: isOpen,
    staleTime: Infinity,
  });

  // What the spool in this slot is configured to use here: its filament preset
  // for this printer's MODEL and its K profile for this slot's hotend. Those
  // are the values the user set on the spool, so they are the right defaults
  // for a dialog that configures the slot that spool sits in -- the slot's own
  // last manual configuration and the tray's RFID data are the fallbacks, not
  // the other way round.
  const { data: slotSpoolDefaults } = useQuery({
    queryKey: ['slot-spool-defaults', printerId, slotInfo.amsId, slotInfo.trayId],
    queryFn: () => api.getSlotSpoolDefaults(printerId, slotInfo.amsId, slotInfo.trayId),
    enabled: isOpen,
    staleTime: 0,
  });

  const compatIndex = useMemo(
    () => buildCompatibilityIndex(printerModelsData ?? {}),
    [printerModelsData],
  );

  // The full printer-preset name for this slot's printer — e.g. the short
  // code "X1C" resolves to "Bambu Lab X1 Carbon 0.4 nozzle" via the backend
  // registry plus the slot's nozzle. Used to filter imported local presets
  // whose `compatible_printers` list is keyed by the full slicer preset name.
  // Null when the registry hasn't loaded or no model is known — caller skips
  // the filter in that case (fail-open, same shape as the cloud-preset filter).
  const fullPrinterName = useMemo<string | null>(() => {
    if (!printerModel || !printerModelsData) return null;
    for (const [longName, shortCode] of Object.entries(printerModelsData)) {
      if (shortCode === printerModel) {
        return `${longName.startsWith('Bambu Lab ') ? longName : `Bambu Lab ${longName}`} ${nozzleDiameter} nozzle`;
      }
    }
    return null;
  }, [printerModel, printerModelsData, nozzleDiameter]);

  // Configure slot mutation
  const configureMutation = useMutation({
    mutationFn: async () => {
      if (!selectedPresetId) throw new Error('No filament preset selected');

      // Determine preset source. Orca detection is done via setting_id
      // lookup as well as the ``orca_`` prefix because the saved-preset
      // pre-population on modal open (the useEffect at the top of this
      // component) writes ``slotInfo.savedPresetId`` verbatim — which for a
      // historical Orca save would be the raw UUID, no prefix. Falling
      // through to the cloud lookup in that case would have thrown
      // "Selected preset not found".
      const isLocal = selectedPresetId.startsWith('local_');
      const isBuiltin = selectedPresetId.startsWith('builtin_');
      const orcaSettingId = selectedPresetId.startsWith('orca_')
        ? selectedPresetId.replace('orca_', '')
        : selectedPresetId;
      const orcaPresetCandidate = (!isLocal && !isBuiltin)
        ? orcaCloudList?.filament.find(p => p.setting_id === orcaSettingId)
        : undefined;
      const isOrca = !!orcaPresetCandidate;
      const orcaPreset = orcaPresetCandidate ?? null;
      const localId = isLocal ? parseInt(selectedPresetId.replace('local_', ''), 10) : null;
      const builtinFilamentId = isBuiltin ? selectedPresetId.replace('builtin_', '') : null;
      const localPreset = isLocal
        ? localPresets?.filament.find(p => p.id === localId)
        : null;
      const builtinPreset = isBuiltin
        ? builtinFilaments?.find(b => b.filament_id === builtinFilamentId)
        : null;

      // Get the selected cloud preset details (null for local/builtin/orca presets)
      const selectedPreset = (!isLocal && !isBuiltin && !isOrca)
        ? cloudSettings?.filament.find(p => p.setting_id === selectedPresetId)
        : null;

      if (!isLocal && !isBuiltin && !isOrca && !selectedPreset) throw new Error('Selected preset not found');
      if (isLocal && !localPreset) throw new Error('Selected local preset not found');
      if (isBuiltin && !builtinPreset) throw new Error('Selected builtin preset not found');
      if (isOrca && !orcaPreset) throw new Error('Selected Orca Cloud preset not found');

      // Parse the preset name for filament info
      const presetName = isLocal
        ? localPreset!.name
        : isBuiltin
          ? builtinPreset!.name
          : isOrca
            ? orcaPreset!.name
            : selectedPreset!.name;
      const parsed = parsePresetName(presetName);

      // Get cali_idx from selected K profile's slot_id (-1 = use default 0.020)
      const caliIdx = selectedKProfileRef.current?.slot_id ?? -1;

      // Use custom color if set, otherwise use current slot color or default
      const color = colorHex || slotInfo.trayColor?.slice(0, 6) || 'FFFFFF';

      // Create the tray_sub_brands from preset name (without printer/nozzle suffix)
      const traySubBrands = presetName.replace(/@.+$/, '').trim();

      let trayInfoIdx: string;
      let settingId: string;

      // Parsed material from preset name — handles "Support for" patterns correctly.
      // Prefer this over stored filament_type which may have been parsed with old logic.
      const parsedMat = parsed.material.toUpperCase();

      // Generic Bambu filament-ID map used to derive a ``tray_info_idx`` for
      // presets that don't carry a Bambu setting_id of their own (local
      // imports and Orca Cloud sync both fall in this bucket). The printer's
      // firmware needs SOMETHING in tray_info_idx to recognize the filament
      // type for HMS / drying / colour-matching; the closest generic Bambu
      // filament for the parsed material is the right choice.
      const GENERIC_IDS: Record<string, string> = {
        'PLA': 'GFL99', 'PLA-CF': 'GFL98', 'PLA SILK': 'GFL96', 'PLA HIGH SPEED': 'GFL95',
        'PETG': 'GFG99', 'PETG HF': 'GFG96', 'PETG-CF': 'GFG98', 'PCTG': 'GFG97',
        'ABS': 'GFB99', 'ASA': 'GFB98',
        'PC': 'GFC99',
        'PA': 'GFN99', 'PA-CF': 'GFN98', 'NYLON': 'GFN99',
        'TPU': 'GFU99',
        'PVA': 'GFS99', 'HIPS': 'GFS98',
        'PE': 'GFP99', 'PP': 'GFP97',
      };

      if (isLocal) {
        // Local presets have no Bambu Cloud setting_id, but need a valid
        // tray_info_idx for the printer to recognize the filament type.
        const material = (MATERIAL_TYPES.includes(parsedMat) ? parsedMat : localPreset?.filament_type || parsed.material || '').toUpperCase();
        // Try exact match first, then base material (strip suffixes like "-CF", "+", " HF")
        trayInfoIdx = GENERIC_IDS[material]
          || GENERIC_IDS[material.replace(/[-\s]?CF$/, '')]
          || GENERIC_IDS[material.replace(/\+$/, '')]
          || GENERIC_IDS[material.split(/[-\s]/)[0]]
          || '';
        settingId = '';
      } else if (isOrca) {
        // An Orca Cloud profile's setting_id is a UUID the printer cannot hold,
        // so this used to skip straight to a generic — which meant every Orca
        // custom filament reached the slicer as "Generic <material>", without
        // ever asking whether the profile had a usable id (#3003).
        //
        // It usually does. The profile's slicer JSON carries its own
        // filament_id, the same 8-character "P…" the printer stores for a
        // Bambu custom preset, and OrcaProfileDetail deliberately exposes that
        // JSON under `setting` in the shape SlicerSettingDetail uses. So the
        // lookup is the same one the Bambu Cloud branch does below.
        //
        // settingId stays empty either way: it is the UUID that is foreign to
        // the slicer, not the filament id.
        let orcaFilamentId = '';
        try {
          const orcaDetail = await api.orcaCloudGetProfile(orcaSettingId);
          const fromProfile = orcaDetail.setting?.filament_id;
          if (typeof fromProfile === 'string' && fromProfile) {
            orcaFilamentId = fromProfile;
          }
        } catch (e) {
          console.warn('Failed to fetch Orca Cloud profile for filament_id:', e);
        }
        trayInfoIdx = orcaFilamentId;
        if (!trayInfoIdx) {
          // No id of its own — fall back to the generic for the material, the
          // same last resort every other source ends at.
          const material = (MATERIAL_TYPES.includes(parsedMat) ? parsedMat : parsed.material || '').toUpperCase();
          trayInfoIdx = GENERIC_IDS[material]
            || GENERIC_IDS[material.replace(/[-\s]?CF$/, '')]
            || GENERIC_IDS[material.replace(/\+$/, '')]
            || GENERIC_IDS[material.split(/[-\s]/)[0]]
            || '';
        }
        settingId = '';
      } else if (isBuiltin) {
        // Built-in presets use the filament_id directly as tray_info_idx
        trayInfoIdx = builtinFilamentId!;
        settingId = '';
      } else {
        trayInfoIdx = convertToTrayInfoIdx(selectedPresetId);
        settingId = selectedPresetId;

        // User cloud presets may carry a distinct filament_id in the cloud detail
        // (e.g. "P285e239"); prefer it when present. Never fall back to base_id —
        // that collapses custom presets to the inherited generic's filament_id and
        // makes the slicer resolve the slot to "Generic …" instead (#1053).
        if (!selectedPresetId.startsWith('GFS')) {
          try {
            const detail = await api.getCloudSettingDetail(selectedPresetId);
            // The preset's own filament_id is what puts it in the slot as
            // itself — the printer stores that id and the slicer matches its
            // presets against it. Bambu Cloud normally returns it on the
            // envelope; the `setting` fallback covers a response that carries
            // it in the preset JSON instead. A preset created in Orca has none
            // in either place (#1053), and legitimately falls through.
            const nested = detail.setting?.filament_id;
            const ownFilamentId = detail.filament_id || (typeof nested === 'string' ? nested : '');
            if (ownFilamentId) {
              trayInfoIdx = ownFilamentId;
            }
          } catch (e) {
            console.warn('Failed to fetch preset detail for filament_id:', e);
          }
        }

        // Last resort: neither place had one, so trayInfoIdx is still the
        // cloud setting_id — and sending one is worse than sending nothing
        // (#3003). tray_info_idx is 8 characters on the printer; an
        // 18-character PFUS is stored truncated and acknowledged as a success,
        // so the slot ends up holding an id that resolves nowhere — the slicer
        // shows "Generic", and the calibration table, keyed by this field,
        // loses the slot too. Blank means the backend picks the slot's
        // existing filament id or a generic for the material; settingId still
        // carries the preset.
        if (/^(PFUS|PFSP|PFCN)/.test(trayInfoIdx)) {
          console.warn(
            `Cloud preset ${selectedPresetId} carries no filament_id in either place; ` +
            'sending no tray_info_idx so the printer keeps a resolvable one.'
          );
          trayInfoIdx = '';
        }
      }

      // Default temp range — use local preset core fields if available
      let tempMin = isLocal && localPreset?.nozzle_temp_min ? localPreset.nozzle_temp_min : 190;
      let tempMax = isLocal && localPreset?.nozzle_temp_max ? localPreset.nozzle_temp_max : 230;

      if (!isLocal || isBuiltin || isOrca || (!localPreset?.nozzle_temp_min && !localPreset?.nozzle_temp_max)) {
        // Fall back to material-based defaults (prefer parsed material for "Support for" handling)
        const material = (isLocal
          ? (MATERIAL_TYPES.includes(parsedMat) ? parsedMat : localPreset?.filament_type || parsed.material || '')
          : parsed.material).toUpperCase();
        if (material.includes('PLA')) {
          tempMin = 190;
          tempMax = 230;
        } else if (material.includes('PETG')) {
          tempMin = 220;
          tempMax = 260;
        } else if (material.includes('ABS')) {
          tempMin = 240;
          tempMax = 280;
        } else if (material.includes('ASA')) {
          tempMin = 240;
          tempMax = 280;
        } else if (material.includes('TPU')) {
          tempMin = 200;
          tempMax = 240;
        } else if (material === 'PCTG') {
          tempMin = 220;
          tempMax = 260;
        } else if (material.includes('PC')) {
          tempMin = 260;
          tempMax = 300;
        } else if (material.includes('PA') || material.includes('NYLON')) {
          tempMin = 250;
          tempMax = 290;
        }
      }

      // Parse K value from selected profile
      const kValue = selectedKProfileRef.current?.k_value
        ? parseFloat(selectedKProfileRef.current.k_value)
        : 0;

      // Determine tray_type: prefer parsed material from preset name (handles "Support for"
      // patterns correctly) over stored filament_type which may have been parsed with old logic.
      const trayType = isLocal
        ? (MATERIAL_TYPES.includes(parsedMat) ? parsedMat : localPreset?.filament_type || parsed.material || 'PLA')
        : isOrca
          ? (MATERIAL_TYPES.includes(parsedMat) ? parsedMat : parsed.material || 'PLA')
          : (parsed.material || 'PLA');

      // Configure the slot via MQTT
      const result = await api.configureAmsSlot(printerId, slotInfo.amsId, slotInfo.trayId, {
        tray_info_idx: trayInfoIdx,
        tray_type: trayType,
        tray_sub_brands: traySubBrands,
        tray_color: color + 'FF', // Add alpha
        nozzle_temp_min: tempMin,
        nozzle_temp_max: tempMax,
        cali_idx: caliIdx,
        nozzle_diameter: nozzleDiameter,
        setting_id: settingId, // Full setting ID for slicer compatibility (empty for local)
        // Pass K profile's filament_id and setting_id for proper linking
        kprofile_filament_id: selectedKProfileRef.current?.filament_id,
        kprofile_setting_id: selectedKProfileRef.current?.setting_id || undefined,
        // Also pass the K value directly for extrusion_cali_set command
        k_value: kValue,
      });

      // Save the preset mapping so we can display the correct name in the UI
      // This is needed because user presets use filament_id (e.g., P285e239) as tray_info_idx,
      // which can't be resolved to a name via the filamentInfo API
      const mappingPresetId = isLocal
        ? `local_${localId}`
        : isBuiltin
          ? `builtin_${builtinFilamentId}`
          : isOrca
            ? selectedPresetId
            : selectedPresetId;
      const mappingSource = isLocal
        ? 'local'
        : isBuiltin
          ? 'builtin'
          : isOrca
            ? 'orca_cloud'
            : 'cloud';
      try {
        await api.saveSlotPreset(printerId, slotInfo.amsId, slotInfo.trayId, mappingPresetId, traySubBrands, mappingSource);
      } catch (e) {
        console.warn('Failed to save slot preset mapping:', e);
        // Don't fail the whole operation - slot was configured successfully
      }

      return result;
    },
    onSuccess: () => {
      setShowSuccess(true);
      onSuccess?.();
      // Close after showing success briefly
      scheduleClose(() => {
        setShowSuccess(false);
        onClose();
      }, 1500);
    },
  });

  // Reset slot mutation
  const resetMutation = useMutation({
    mutationFn: async () => {
      return api.resetAmsSlot(printerId, slotInfo.amsId, slotInfo.trayId);
    },
    onSuccess: () => {
      setShowSuccess(true);
      onSuccess?.();
      scheduleClose(() => {
        setShowSuccess(false);
        onClose();
      }, 1500);
    },
  });

  // Unified preset item for the list (orca_cloud + cloud + local + builtin fallback)
  type PresetItem = { id: string; name: string; source: 'orca_cloud' | 'cloud' | 'local' | 'builtin'; isUser: boolean };

  // Filter filament presets based on search (merged orca_cloud + cloud + local + builtin)
  const filteredPresets = useMemo(() => {
    const query = searchQuery.toLowerCase();
    const items: PresetItem[] = [];

    // Collect IDs already covered by higher-priority tiers to avoid duplicates
    const coveredIds = new Set<string>();

    // Currently-configured preset should always be shown (bypass model filter)
    const savedId = slotInfo.savedPresetId;
    const trayIdx = slotInfo.trayInfoIdx;

    // 0. Orca Cloud filament presets — surfaced first because the user
    // explicitly opted into Orca sync; their picks should outrank Bambu Cloud
    // presets of the same name. IDs are prefixed ``orca_`` so the configure
    // flow can detect "this is an Orca preset" via a cheap string check
    // (mirrors the ``local_`` / ``builtin_`` prefix convention already in use).
    if (orcaCloudList?.filament) {
      for (const op of orcaCloudList.filament) {
        const orcaId = `orca_${op.setting_id}`;
        coveredIds.add(op.setting_id);
        coveredIds.add(orcaId);
        if (query && !op.name.toLowerCase().includes(query)) continue;
        if (printerModel) {
          const presetModel = extractPresetModel(op.name, printerModelsData ?? {});
          if (presetModel && !matchesPrinterModelSuffix(presetModel, printerModel)) continue;
        }
        // All Orca Cloud profiles are user-authored, so isUser is always true.
        items.push({ id: orcaId, name: op.name, source: 'orca_cloud', isUser: true });
      }
    }

    // 1. Cloud presets
    if (cloudSettings?.filament) {
      for (const cp of cloudSettings.filament) {
        if (coveredIds.has(cp.setting_id)) continue;
        coveredIds.add(cp.setting_id);
        // Keep preset if it matches the slot's saved mapping or current tray_info_idx
        const isSavedPreset = savedId === cp.setting_id;
        const isCurrentPreset = isSavedPreset
          || (trayIdx && (cp.setting_id === trayIdx || convertToTrayInfoIdx(cp.setting_id) === trayIdx));
        // Search filter applies to ALL presets (including saved) — no bypass
        if (query && !cp.name.toLowerCase().includes(query)) continue;
        // Filter by printer model if set (skip for current preset). Uses the
        // alias-aware match so Bambu's "A1 Mini" → "A1M" cloud rename (#1649)
        // doesn't hide A1 Mini cloud profiles.
        if (!isCurrentPreset && printerModel) {
          const presetModel = extractPresetModel(cp.name, printerModelsData ?? {});
          if (presetModel && !matchesPrinterModelSuffix(presetModel, printerModel)) continue;
        }
        items.push({ id: cp.setting_id, name: cp.name, source: 'cloud', isUser: isUserPreset(cp.setting_id) });
      }
    }

    // 2. Local presets — filter by the slicer's own ``compatible_printers``
    // list when present (#1623). LocalPreset.compatible_printers is a JSON-
    // encoded string array; presetCompatibility returns 'mismatch' when the
    // list is set and our derived full printer name isn't in it, 'unknown'
    // when neither the list nor an @BBL token is parseable — we hide on
    // 'mismatch' only so user-imported presets without compatible_printers
    // still surface (back-compat with the prior "always show" behaviour for
    // hand-edited / lossily-imported presets).
    if (localPresets?.filament) {
      const savedLocalId = slotInfo.savedPresetId;
      for (const lp of localPresets.filament) {
        const localId = `local_${lp.id}`;
        if (query && !lp.name.toLowerCase().includes(query)) continue;
        const isCurrentPreset = savedLocalId === localId;
        if (!isCurrentPreset && fullPrinterName) {
          let compatList: string[] | null = null;
          if (lp.compatible_printers) {
            try {
              const parsed = JSON.parse(lp.compatible_printers);
              if (Array.isArray(parsed)) compatList = parsed.filter((s): s is string => typeof s === 'string');
            } catch {
              compatList = null;
            }
          }
          const verdict = presetCompatibility(
            { name: lp.name, compatible_printers: compatList },
            'filament',
            fullPrinterName,
            compatIndex,
          );
          if (verdict === 'mismatch') continue;
        }
        items.push({ id: localId, name: lp.name, source: 'local', isUser: false });
      }
    }

    // 3. Built-in filament names (fallback — only add entries not already covered)
    if (builtinFilaments) {
      for (const bf of builtinFilaments) {
        if (coveredIds.has(bf.filament_id)) continue;
        // Convert filament_id to setting_id format for cloud compatibility
        // e.g. "GFA00" → cloud setting_id would be "GFSA00" (insert S after GF)
        const settingId = bf.filament_id.startsWith('GF')
          ? 'GFS' + bf.filament_id.slice(2)
          : bf.filament_id;
        if (coveredIds.has(settingId)) continue;
        if (!query || bf.name.toLowerCase().includes(query)) {
          items.push({ id: `builtin_${bf.filament_id}`, name: bf.name, source: 'builtin', isUser: false });
        }
      }
    }

    // Sort: local first (user explicitly imported them), then orca_cloud,
    // then bambu cloud, then builtin fallback. Matches the SliceModal
    // tier priority.
    return items.sort((a, b) => {
      const sourceOrder = { local: 0, orca_cloud: 1, cloud: 2, builtin: 3 };
      if (a.source !== b.source) return sourceOrder[a.source] - sourceOrder[b.source];
      if (a.isUser && !b.isUser) return -1;
      if (!a.isUser && b.isUser) return 1;
      return a.name.localeCompare(b.name);
    });
  }, [orcaCloudList?.filament, cloudSettings?.filament, localPresets?.filament, builtinFilaments, searchQuery, printerModel, slotInfo.savedPresetId, slotInfo.trayInfoIdx, fullPrinterName, compatIndex, printerModelsData]);

  // Get full preset name for K profile filtering (brand + material, without printer suffix)
  const selectedPresetInfo = useMemo(() => {
    if (!selectedPresetId) return null;

    // Resolve the name from orca, cloud, local, or builtin presets. The
    // Orca branch tolerates both ``orca_<UUID>`` and a bare UUID — see the
    // configure-mutation comment for why the raw UUID also reaches us.
    // ``filamentId`` is the bare Bambu filament_id (e.g. "GFG98") when the
    // preset has one — used to id-match K-profiles directly without name
    // parsing (#1688). Empty string for paths with no usable filament_id
    // (orca presets, local presets), which makes the id-match branch skip.
    let presetName: string | null = null;
    let filamentId = '';
    if (selectedPresetId.startsWith('local_')) {
      const localId = parseInt(selectedPresetId.replace('local_', ''), 10);
      const lp = localPresets?.filament.find(p => p.id === localId);
      presetName = lp?.name || null;
    } else if (selectedPresetId.startsWith('builtin_')) {
      const builtinFilamentId = selectedPresetId.replace('builtin_', '');
      const bf = builtinFilaments?.find(b => b.filament_id === builtinFilamentId);
      presetName = bf?.name || null;
      filamentId = toFilamentId(builtinFilamentId);
    } else {
      const orcaCandidateId = selectedPresetId.startsWith('orca_')
        ? selectedPresetId.replace('orca_', '')
        : selectedPresetId;
      const op = orcaCloudList?.filament.find(p => p.setting_id === orcaCandidateId);
      if (op) {
        presetName = op.name;
      } else if (cloudSettings?.filament) {
        const cp = cloudSettings.filament.find(p => p.setting_id === selectedPresetId);
        presetName = cp?.name || null;
        if (cp) {
          // SlicerSetting only carries setting_id ("GFSG98_09"); toFilamentId
          // drops the variant suffix and the "S" infix to yield "GFG98".
          filamentId = toFilamentId(cp.setting_id);
        }
      }
    }
    if (!presetName) {
      return null;
    }

    // Remove printer/nozzle suffix (e.g., "@BBL X1C" or "@0.4 nozzle")
    let nameWithoutSuffix = presetName.replace(/@.+$/, '').trim();
    // Strip leading "# " from custom preset names (user convention)
    if (nameWithoutSuffix.startsWith('# ')) {
      nameWithoutSuffix = nameWithoutSuffix.slice(2).trim();
    }
    const parsed = parsePresetName(nameWithoutSuffix);

    return {
      fullName: nameWithoutSuffix,
      material: parsed.material,
      brand: parsed.brand,
      filamentId,
    };
  }, [selectedPresetId, cloudSettings?.filament, localPresets?.filament, builtinFilaments, orcaCloudList?.filament]);

  // For backwards compatibility with the label
  const selectedMaterial = selectedPresetInfo?.fullName || '';

  // Filter color catalog entries matching the selected preset's brand + material
  const catalogColors = useMemo(() => {
    if (!colorCatalog || !selectedPresetInfo) return [];

    const { fullName, brand } = selectedPresetInfo;

    // Try to find colors matching the full preset name (e.g., "PLA Metal")
    // The catalog uses the variant as part of the material field (e.g., material="PLA Metal")
    // Extract the full material+variant from the preset name
    const materialVariant = fullName.replace(/^(Bambu\s*(Lab)?|eSUN|Polymaker|Overture|Sunlu|Hatchbox)\s*/i, '').trim();

    return colorCatalog.filter(entry => {
      const entryMaterial = (entry.material || '').toUpperCase();
      const entryManufacturer = entry.manufacturer.toUpperCase();

      // Match material: try full material+variant first, then just material type
      const materialMatch = entryMaterial === materialVariant.toUpperCase()
        || entryMaterial.includes(materialVariant.toUpperCase())
        || materialVariant.toUpperCase().includes(entryMaterial);

      if (!materialMatch) return false;

      // If brand is present, also match manufacturer
      if (brand) {
        const upperBrand = brand.toUpperCase();
        // Fuzzy match: "Bambu" matches "Bambu Lab", etc.
        if (!entryManufacturer.includes(upperBrand) && !upperBrand.includes(entryManufacturer)) {
          return false;
        }
      }

      return true;
    });
  }, [colorCatalog, selectedPresetInfo]);

  // Dual-nozzle if the printer reported calibration profiles for more than one
  // extruder. Self-contained, and exactly the condition under which naming the
  // hotend on each option is worth the space.
  const isDualNozzleProfiles = useMemo(
    () => new Set((kprofilesData?.profiles ?? []).map(p => p.extruder_id ?? 0)).size > 1,
    [kprofilesData?.profiles]
  );

  const matchingKProfiles = useMemo(() => {
    if (!kprofilesData?.profiles) return [];
    if (!selectedPresetInfo) {
      // Assigned-but-unconfigured slot (filament loaded but the printer hasn't
      // bound a preset yet: tray_type=""/tray_info_idx=""/no slot_preset_mappings
      // row). The cali_idx safety net further down lives past the main name+id
      // matcher and never runs from here, so surface the slot's currently-active
      // K-profile directly so Configure Slot keeps showing it across reopen
      // instead of dropping to default 0.020 (#1689 follow-up).
      const activeIdx = slotInfo.caliIdx;
      if (activeIdx != null && activeIdx > 0) {
        const active = findProfileByCaliIdx(kprofilesData.profiles, activeIdx, slotInfo.extruderId);
        if (active) return [active];
      }
      return [];
    }

    const { fullName, material, brand, filamentId } = selectedPresetInfo;
    const upperFullName = fullName.toUpperCase();
    const upperMaterial = material.toUpperCase();
    // "Generic" leads every built-in Bambu preset name ("Generic PLA",
    // "Generic PETG") but is not a manufacturer (#2710). Treating it as one
    // put the filter into brand-gated mode and demanded "GENERIC" in the
    // K-profile name, which no real profile has — so selecting a built-in
    // generic preset matched nothing at all.
    const upperBrand = brand.toUpperCase() === 'GENERIC' ? '' : brand.toUpperCase();
    const presetFid = filamentId; // already normalised via toFilamentId

    // Material must be at least 2 chars to avoid false positives
    if (!upperMaterial || upperMaterial.length < 2) return [];

    // Filter profiles - require brand match if brand is present in selected preset
    const filtered = kprofilesData.profiles.filter(p => {
      // Preferred: exact filament_id match (#1688). A user's custom K-profile
      // whose name doesn't agree with the slicer preset still surfaces when
      // both sides agree on filament_id.
      //
      // Generic GFx99 ids count here too (#2710). The equality test already
      // means both sides carry the *same* id, so the old "generic ids
      // over-match" exclusion could only ever fire when the selected preset
      // was itself the generic one — precisely the case where the match is
      // right. The printer keeps one calibration table per filament_id, so a
      // slot on "Generic PLA" should offer every profile calibrated under
      // Generic PLA, whatever the user named them.
      if (presetFid) {
        const calFid = toFilamentId(p.filament_id);
        if (calFid && calFid === presetFid) {
          return true;
        }
      }

      const profileName = p.name.toUpperCase();

      // If the selected preset has a brand (e.g., "Azurefilm PLA Wood"),
      // only show profiles that match the brand
      if (upperBrand) {
        // Must contain the brand name
        if (!profileName.includes(upperBrand)) {
          return false;
        }
        // And must contain the material type
        if (!profileName.includes(upperMaterial)) {
          return false;
        }
        return true;
      }

      // No brand in selected preset - match on full name or material
      // Priority 1: Exact match with full name
      if (profileName.includes(upperFullName)) {
        return true;
      }

      // Priority 2: Material type match (only when no brand specified)
      if (profileName.includes(upperMaterial)) {
        return true;
      }

      // Check for common material aliases
      const aliases: Record<string, string[]> = {
        'NYLON': ['PA', 'PA-CF', 'PA6'],
        'PA': ['NYLON'],
      };

      const materialAliases = aliases[upperMaterial] || [];
      for (const alias of materialAliases) {
        if (profileName.includes(alias)) {
          return true;
        }
      }

      return false;
    });

    // Scope to the slot's own nozzle where the table names it: a K-profile
    // calibrated on the other hotend is not a match for this slot, and offering
    // it as one is how the wrong K got bound. Those profiles are still
    // reachable below under "Other", where the option label names the hotend.
    //
    // Where the table names no profile on this hotend at all, scoping emptied
    // the list instead — the X2D case in #3044, where the second AMS's slots
    // point at the first's entries — so the tagging is ignored rather than
    // enforced.
    const onThisNozzle = tableNamesThisHotend(kprofilesData.profiles, slotInfo.extruderId)
      ? filtered.filter(p => (p.extruder_id ?? 0) === slotInfo.extruderId)
      : filtered;

    // Deduplicate genuine duplicates — same nozzle, same name, same K.
    const seen = new Map<string, KProfile>();
    for (const profile of onThisNozzle) {
      const key = kProfileOptionValue(profile);
      if (!seen.has(key)) seen.set(key, profile);
    }

    const result = Array.from(seen.values());

    // Always include the slot's currently-active K-profile (by cali_idx / slot_id),
    // even if its name and filament_id didn't match the selected preset (#1689).
    // A spool assigned under "Generic PLA" can have a K-profile actively bound on
    // the printer whose filament_id differs from "Generic PLA"; without this
    // safety net the modal shows "not assigned, default 0.020" while the printer
    // card's hover-card correctly shows the active profile.
    const activeIdx = slotInfo.caliIdx;
    if (activeIdx != null && activeIdx > 0 && !result.some(p => p.slot_id === activeIdx)) {
      const active = findProfileByCaliIdx(kprofilesData.profiles, activeIdx, slotInfo.extruderId);
      if (active) result.unshift(active);
    }

    return result;
  }, [kprofilesData?.profiles, selectedPresetInfo, slotInfo.extruderId, slotInfo.caliIdx]);

  // Every remaining K-profile the printer holds, offered under a separate group
  // after the matching ones (#2710). The matcher works off preset names and
  // filament ids, neither of which the user controls when they name a profile
  // after its colour — so there is always a residual chance it filters out a
  // profile the user wants. This makes that recoverable in the UI instead of
  // sending them to the slicer: the printer's own calibration table is the
  // authority on what can be selected, and the backend realigns the slot's
  // filament context to whichever profile is picked.
  const otherKProfiles = useMemo(() => {
    if (!kprofilesData?.profiles) return [];
    const matched = new Set(matchingKProfiles.map(p => kProfileOptionValue(p)));
    // Same name+k_value dedup as the matching list, so a multi-nozzle printer's
    // duplicate rows don't show up twice here either.
    const seen = new Map<string, KProfile>();
    for (const profile of kprofilesData.profiles) {
      const key = kProfileOptionValue(profile);
      if (matched.has(key)) continue;
      if (!seen.has(key)) seen.set(key, profile);
    }
    return Array.from(seen.values()).sort((a, b) => a.name.localeCompare(b.name));
  }, [kprofilesData?.profiles, matchingKProfiles]);

  const hasAnyKProfile = matchingKProfiles.length > 0 || otherKProfiles.length > 0;

  const selectKProfileByValue = useCallback((value: string) => {
    if (!value) {
      setSelectedKProfile(null);
      return;
    }
    const profile = matchingKProfiles.find(p => kProfileOptionValue(p) === value)
      || otherKProfiles.find(p => kProfileOptionValue(p) === value)
      || null;
    setSelectedKProfile(profile);
  }, [matchingKProfiles, otherKProfiles]);

  // Pre-select current profile when modal opens, reset when closes
  useEffect(() => {
    if (isOpen) {
      // The spool's own per-model preset first -- see the query above.
      if (slotSpoolDefaults?.slicer_filament) {
        setSelectedPresetId(slotSpoolDefaults.slicer_filament);
      } else if (slotInfo.savedPresetId) {
        setSelectedPresetId(slotInfo.savedPresetId);
      } else if (slotInfo.trayInfoIdx && cloudSettings?.filament) {
        // Fallback: try to match by tray_info_idx in cloud presets
        // First try exact match on setting_id
        let currentPreset = cloudSettings.filament.find(
          p => p.setting_id === slotInfo.trayInfoIdx
        );
        // Then try matching by converting setting_id → filament_id format
        if (!currentPreset) {
          currentPreset = cloudSettings.filament.find(
            p => convertToTrayInfoIdx(p.setting_id) === slotInfo.trayInfoIdx
          );
        }
        if (currentPreset) {
          setSelectedPresetId(currentPreset.setting_id);
        }
      } else if (slotInfo.trayInfoIdx && builtinFilaments?.length) {
        // Last resort: match trayInfoIdx against builtin presets
        const trayIdx = slotInfo.trayInfoIdx;
        const match = builtinFilaments.find(bf => bf.filament_id === trayIdx);
        if (match) {
          setSelectedPresetId(`builtin_${match.filament_id}`);
        }
      }

      // Pre-populate color from current slot (black is valid — empty slots don't pass trayColor)
      if (slotInfo.trayColor) {
        const hex = slotInfo.trayColor.slice(0, 6);
        if (hex) {
          setColorHex(hex);
        }
      }
    } else {
      // Reset when modal closes
      setSelectedPresetId('');
      setSelectedKProfile(null);
      setColorHex('');
      setColorInput('');
      setSearchQuery('');
      setShowSuccess(false);
      scrolledToRef.current = '';
    }
  }, [
    isOpen,
    slotSpoolDefaults?.slicer_filament,
    slotInfo.savedPresetId,
    slotInfo.trayInfoIdx,
    slotInfo.trayColor,
    cloudSettings?.filament,
    builtinFilaments,
  ]);

  // Auto-select best matching K profile when preset changes
  useEffect(() => {
    if (matchingKProfiles.length > 0) {
      // The profile the spool is configured with for THIS hotend, if it still
      // exists on the printer. Ahead of the slot's live cali_idx, which is
      // whatever was selected last rather than what the spool is set to.
      if (slotSpoolDefaults?.cali_idx != null) {
        const configured = findProfileByCaliIdx(
          matchingKProfiles,
          slotSpoolDefaults.cali_idx,
          slotSpoolDefaults.extruder ?? slotInfo.extruderId,
        );
        if (configured) {
          setSelectedKProfile(configured);
          return;
        }
      }
      // Prefer the currently-active K-profile, resolved against this slot's own
      // nozzle — the index alone is ambiguous across hotends.
      if (slotInfo.caliIdx != null && slotInfo.caliIdx > 0) {
        const active = findProfileByCaliIdx(matchingKProfiles, slotInfo.caliIdx, slotInfo.extruderId);
        if (active) {
          setSelectedKProfile(active);
          return;
        }
      }
      // Fallback: the first match. matchingKProfiles is already scoped to this
      // slot's nozzle when we know which one it is, so this cannot hand over a
      // profile calibrated on the other hotend.
      setSelectedKProfile(matchingKProfiles[0]);
    } else {
      setSelectedKProfile(null);
    }
  }, [
    selectedPresetId,
    matchingKProfiles,
    slotSpoolDefaults?.cali_idx,
    slotSpoolDefaults?.extruder,
    slotInfo.caliIdx,
    slotInfo.extruderId,
  ]);

  // Escape key handler
  const handleKeyDown = useCallback((e: KeyboardEvent) => {
    if (e.key === 'Escape') {
      onClose();
    }
  }, [onClose]);

  useEffect(() => {
    if (isOpen) {
      document.addEventListener('keydown', handleKeyDown);
      return () => document.removeEventListener('keydown', handleKeyDown);
    }
  }, [isOpen, handleKeyDown]);

  const isLoading = (settingsLoading && !cloudError) || localLoading || builtinLoading || kprofilesLoading;

  // Scroll selected preset into view when data finishes loading or the selection changes.
  // Uses a ref guard so scrollIntoView only fires once per selection, preventing the
  // infinite scroll loop that occurred on Windows with inline callback refs.
  useEffect(() => {
    if (!isLoading && selectedPresetId && selectedPresetId !== scrolledToRef.current) {
      const raf = requestAnimationFrame(() => {
          const modal = document.querySelector('[class*="fixed inset-0 z-50"]');
          const el = modal?.querySelector(`[data-preset-id="${CSS.escape(selectedPresetId)}"]`);
        if (el) {
          scrolledToRef.current = selectedPresetId;
          el.scrollIntoView({ block: 'nearest' });
        }
      });
      return () => cancelAnimationFrame(raf);
    }
  }, [selectedPresetId, isLoading]);

  if (!isOpen) return null;
  const canSave = selectedPresetId && !configureMutation.isPending;

  // Get display color (custom or slot default)
  // Not sliced to six: a clear tray reports RRGGBB00, and cutting the alpha off
  // here previewed it as solid black. `colorHex` is the edited form value and is
  // always six characters, so only the tray fallback ever carries an alpha (#2912).
  const displayColor = colorHex || slotInfo.trayColor || 'FFFFFF';

  return (
    <div className={`fixed inset-0 z-50 flex ${fullScreen ? '' : 'items-center justify-center'}`}>
      {/* Backdrop */}
      {!fullScreen && (
        <div
          className="absolute inset-0 bg-black/60 backdrop-blur-sm"
          onClick={onClose}
        />
      )}

      {/* Modal */}
      <div className={fullScreen
        ? 'relative w-full h-full bg-bambu-dark-secondary flex flex-col'
        : 'relative w-full max-w-lg mx-4 bg-bambu-dark-secondary border border-bambu-dark-tertiary rounded-xl shadow-2xl'
      }>
        {/* Header */}
        <div className="flex items-center justify-between p-4 border-b border-bambu-dark-tertiary shrink-0">
          <div className="flex items-center gap-2">
            <Settings2 className="w-5 h-5 text-bambu-blue" />
            <h2 className="text-lg font-semibold text-white">{t('configureAmsSlot.title')}</h2>
            {/* Inline slot info in fullScreen mode */}
            {fullScreen && (
              <div className="flex items-center gap-2 ml-4 text-sm text-bambu-gray">
                <span className="text-white/30">|</span>
                {slotInfo.trayColor && (
                  <span
                    className="w-4 h-4 rounded-full border border-black/20"
                    style={getSwatchStyle(slotInfo.trayColor)}
                  />
                )}
                <span className="text-white/70">
                  {t('configureAmsSlot.slotLabel', { ams: getAmsLabel(slotInfo.amsId, slotInfo.trayCount), slot: slotInfo.trayId + 1 })}
                </span>
                {slotInfo.traySubBrands && (
                  <span>({slotInfo.traySubBrands})</span>
                )}
              </div>
            )}
          </div>
          <button
            onClick={onClose}
            className="p-1 text-bambu-gray hover:text-white rounded transition-colors"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Content */}
        <div className={`p-4 overflow-y-auto ${fullScreen ? 'flex-1 min-h-0' : 'space-y-4 max-h-[60vh]'}`}>
          {/* Success overlay */}
          {showSuccess && (
            <div className="absolute inset-0 bg-bambu-dark-secondary/95 z-10 flex items-center justify-center rounded-xl">
              <div className="text-center space-y-3">
                <CheckCircle2 className="w-16 h-16 text-bambu-green mx-auto" />
                <p className="text-lg font-semibold text-white">{t('configureAmsSlot.slotConfigured')}</p>
                <p className="text-sm text-bambu-gray">{t('configureAmsSlot.settingsSentToPrinter')}</p>
              </div>
            </div>
          )}

          {/* Slot info */}
          {!fullScreen && (
            <div className="p-3 bg-bambu-dark rounded-lg border border-bambu-dark-tertiary">
              <p className="text-xs text-bambu-gray mb-1">{t('configureAmsSlot.configuringSlot')}</p>
              <div className="flex items-center gap-2">
                {slotInfo.trayColor && (
                  <span
                    className="w-4 h-4 rounded-full border border-black/20"
                    style={getSwatchStyle(slotInfo.trayColor)}
                  />
                )}
                <span className="text-white font-medium">
                  {t('configureAmsSlot.slotLabel', { ams: getAmsLabel(slotInfo.amsId, slotInfo.trayCount), slot: slotInfo.trayId + 1 })}
                </span>
                {slotInfo.traySubBrands && (
                  <span className="text-bambu-gray">({slotInfo.traySubBrands})</span>
                )}
              </div>
            </div>
          )}

          {isLoading ? (
            <div className="flex justify-center py-8">
              <Loader2 className="w-6 h-6 text-bambu-green animate-spin" />
            </div>
          ) : fullScreen ? (
            /* Two-column layout for kiosk display */
            <div className="flex gap-4 h-full">
              {/* Left column: Filament preset list (takes full height) */}
              <div className="w-1/2 flex flex-col min-h-0">
                <label className="block text-sm text-bambu-gray mb-2">
                  {t('configureAmsSlot.filamentProfile')} <span className="text-red-600 dark:text-red-400">*</span>
                </label>
                <input
                  type="text"
                  placeholder={t('configureAmsSlot.searchPresets')}
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="w-full px-3 py-2 bg-bambu-dark border border-bambu-dark-tertiary rounded-lg text-white placeholder:text-bambu-gray focus:border-bambu-green focus:outline-none mb-2 shrink-0"
                />
                <div className="flex-1 min-h-0 overflow-y-auto space-y-1">
                  {filteredPresets.length === 0 ? (
                    <p className="text-center py-4 text-bambu-gray">
                      {(cloudSettings?.filament?.length === 0 && !localPresets?.filament?.length)
                        ? t('configureAmsSlot.noPresetsAvailable')
                        : t('configureAmsSlot.noMatchingPresets')}
                    </p>
                  ) : (
                    filteredPresets.map((preset) => (
                      <button
                        key={preset.id}
                        data-preset-id={preset.id}
                        onClick={() => setSelectedPresetId(preset.id)}
                        className={`group w-full p-2 rounded-lg border text-left transition-colors ${
                          selectedPresetId === preset.id
                            ? 'bg-bambu-green/20 border-bambu-green'
                            : 'bg-bambu-dark border-bambu-dark-tertiary hover:border-bambu-gray'
                        }`}
                      >
                        <div className="flex items-center justify-between">
                          <span className="text-white text-sm truncate group-hover:whitespace-normal group-hover:break-all" title={preset.name}>{preset.name}</span>
                          <div className="flex items-center gap-1 flex-shrink-0">
                            {preset.source === 'local' && (
                              <span className="text-xs px-1.5 py-0.5 rounded bg-green-100 dark:bg-green-500/20 text-green-700 dark:text-green-400">
                                {t('profiles.localProfiles.badge')}
                              </span>
                            )}
                            {preset.source === 'orca_cloud' && (
                              <span className="text-xs px-1.5 py-0.5 rounded bg-purple-100 dark:bg-purple-500/20 text-purple-700 dark:text-purple-400">
                                {t('configureAmsSlot.orcaCloud')}
                              </span>
                            )}
                            {preset.source === 'cloud' && (
                              <span className="text-xs px-1.5 py-0.5 rounded bg-bambu-blue/20 text-bambu-blue">
                                {t('configureAmsSlot.bambuCloud')}
                              </span>
                            )}
                            {preset.source === 'builtin' && (
                              <span className="text-xs px-1.5 py-0.5 rounded bg-amber-100 dark:bg-amber-500/20 text-amber-700 dark:text-amber-400">
                                {t('configureAmsSlot.builtin')}
                              </span>
                            )}
                          </div>
                        </div>
                      </button>
                    ))
                  )}
                </div>
              </div>

              {/* Right column: K Profile + Color */}
              <div className="w-1/2 flex flex-col gap-4 min-h-0 overflow-y-auto">
                {/* K Profile Select */}
                <div>
                  <label className="block text-sm text-bambu-gray mb-2">
                    {t('configureAmsSlot.kProfileLabel')}
                    {selectedMaterial && (
                      <span className="ml-2 text-xs text-bambu-blue">
                        {t('configureAmsSlot.filteringFor', { material: selectedMaterial })}
                      </span>
                    )}
                  </label>
                  {hasAnyKProfile ? (
                    <div className="relative">
                      <select
                        value={selectedKProfile ? kProfileOptionValue(selectedKProfile) : ''}
                        onChange={(e) => selectKProfileByValue(e.target.value)}
                        className="w-full px-3 py-2 bg-bambu-dark border border-bambu-dark-tertiary rounded-lg text-white focus:border-bambu-green focus:outline-none appearance-none pr-10"
                      >
                        <option value="">{t('configureAmsSlot.noKProfile')}</option>
                        {matchingKProfiles.map((profile) => (
                          <option key={kProfileOptionValue(profile)} value={kProfileOptionValue(profile)}>
                            {profile.name} (K={profile.k_value}){kProfileNozzleSuffix(profile, isDualNozzleProfiles, t)}
                          </option>
                        ))}
                        {otherKProfiles.length > 0 && (
                          <optgroup label={t('configureAmsSlot.otherKProfiles')}>
                            {otherKProfiles.map((profile) => (
                              <option key={kProfileOptionValue(profile)} value={kProfileOptionValue(profile)}>
                                {profile.name} (K={profile.k_value}){kProfileNozzleSuffix(profile, isDualNozzleProfiles, t)}
                              </option>
                            ))}
                          </optgroup>
                        )}
                      </select>
                      <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-bambu-gray pointer-events-none" />
                    </div>
                  ) : selectedPresetId ? (
                    <p className="text-sm text-bambu-gray italic py-2">
                      {t('configureAmsSlot.noMatchingKProfiles')}
                    </p>
                  ) : (
                    <span className="inline-block text-xs px-2 py-1 rounded bg-amber-100 dark:bg-amber-500/20 text-amber-700 dark:text-amber-400 border border-amber-300 dark:border-amber-500/30">
                      {t('configureAmsSlot.selectFilamentFirst')}
                    </span>
                  )}
                  {selectedKProfile && (
                    <p className="text-xs text-bambu-green mt-1">
                      {t('configureAmsSlot.kFromCalibration', { value: selectedKProfile.k_value })}
                    </p>
                  )}
                </div>

                {/* Custom color */}
                <div>
                  <label className="block text-sm text-bambu-gray mb-2">
                    {t('configureAmsSlot.customColorLabel')}
                  </label>
                  {catalogColors.length > 0 && (
                    <div className="mb-3">
                      <p className="text-xs text-bambu-gray mb-1.5">
                        {t('configureAmsSlot.presetColors', { name: selectedPresetInfo?.fullName })}
                      </p>
                      <div className="flex flex-wrap gap-1.5">
                        {catalogColors.map((entry) => (
                          <button
                            key={entry.id}
                            onClick={() => {
                              const hex = entry.hex_color.replace('#', '').toUpperCase();
                              setColorHex(hex);
                              setColorInput(entry.color_name);
                            }}
                            className={`h-7 px-2 rounded-md border-2 transition-all flex items-center gap-1.5 ${
                              colorHex === entry.hex_color.replace('#', '').toUpperCase()
                                ? 'border-bambu-green scale-105'
                                : 'border-white/20 hover:border-white/40'
                            }`}
                            title={entry.color_name}
                          >
                            <span
                              className="w-4 h-4 rounded-full border border-black/20 flex-shrink-0"
                              style={{ backgroundColor: entry.hex_color }}
                            />
                            <span className="text-xs text-white/80 whitespace-nowrap">{entry.color_name}</span>
                          </button>
                        ))}
                      </div>
                    </div>
                  )}
                  <div className="flex flex-wrap gap-1.5 mb-2">
                    {QUICK_COLORS_BASIC.map((color) => (
                      <button
                        key={color.hex}
                        onClick={() => {
                          setColorHex(color.hex);
                          setColorInput(color.name);
                        }}
                        className={`w-7 h-7 rounded-md border-2 transition-all ${
                          colorHex === color.hex
                            ? 'border-bambu-green scale-110'
                            : 'border-white/20 hover:border-white/40'
                        }`}
                        style={{ backgroundColor: `#${color.hex}` }}
                        title={color.name}
                      />
                    ))}
                    <button
                      onClick={() => setShowExtendedColors(!showExtendedColors)}
                      className="w-7 h-7 rounded-md border-2 border-white/20 hover:border-white/40 flex items-center justify-center text-white/60 hover:text-white/80 transition-all text-xs"
                      title={showExtendedColors ? t('configureAmsSlot.showLessColors') : t('configureAmsSlot.showMoreColors')}
                    >
                      {showExtendedColors ? '−' : '+'}
                    </button>
                  </div>
                  {showExtendedColors && (
                    <div className="flex flex-wrap gap-1.5 mb-2">
                      {QUICK_COLORS_EXTENDED.map((color) => (
                        <button
                          key={color.hex}
                          onClick={() => {
                            setColorHex(color.hex);
                            setColorInput(color.name);
                          }}
                          className={`w-7 h-7 rounded-md border-2 transition-all ${
                            colorHex === color.hex
                              ? 'border-bambu-green scale-110'
                              : 'border-white/20 hover:border-white/40'
                          }`}
                          style={{ backgroundColor: `#${color.hex}` }}
                          title={color.name}
                        />
                      ))}
                    </div>
                  )}
                  <div className="flex gap-2 items-center">
                    <div
                      className="w-10 h-10 rounded-lg border-2 border-white/20 flex-shrink-0"
                      style={getSwatchStyle(displayColor)}
                    />
                    <input
                      type="text"
                      placeholder={t('configureAmsSlot.colorPlaceholder')}
                      value={colorInput}
                      onChange={(e) => {
                        const input = e.target.value;
                        setColorInput(input);
                        const nameHex = colorNameToHex(input);
                        if (nameHex) {
                          setColorHex(nameHex);
                        } else {
                          const cleaned = input.replace(/[^0-9A-Fa-f]/g, '').toUpperCase();
                          if (cleaned.length === 6) {
                            setColorHex(cleaned);
                          } else if (cleaned.length === 3) {
                            setColorHex(cleaned.split('').map(c => c + c).join(''));
                          }
                        }
                      }}
                      className="flex-1 px-3 py-2 bg-bambu-dark border border-bambu-dark-tertiary rounded-lg text-white placeholder:text-bambu-gray focus:border-bambu-green focus:outline-none text-sm"
                    />
                    {colorHex && (
                      <button
                        onClick={() => {
                          setColorHex('');
                          setColorInput('');
                        }}
                        className="px-2 py-1 text-xs text-bambu-gray hover:text-white bg-bambu-dark-tertiary rounded"
                        title={t('configureAmsSlot.clearCustomColor')}
                      >
                        {t('configureAmsSlot.clear')}
                      </button>
                    )}
                  </div>
                  {colorHex && (
                    <p className="text-xs text-bambu-gray mt-1.5">
                      {t('configureAmsSlot.hexLabel', { hex: colorHex })}
                    </p>
                  )}
                </div>
              </div>
            </div>
          ) : (
            <>
              {/* Filament Profile Select */}
              <div>
                <label className="block text-sm text-bambu-gray mb-2">
                  {t('configureAmsSlot.filamentProfile')} <span className="text-red-600 dark:text-red-400">*</span>
                </label>
                <div className="relative">
                  <input
                    type="text"
                    placeholder={t('configureAmsSlot.searchPresets')}
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    className="w-full px-3 py-2 bg-bambu-dark border border-bambu-dark-tertiary rounded-lg text-white placeholder:text-bambu-gray focus:border-bambu-green focus:outline-none mb-2"
                  />
                  <div className="max-h-48 overflow-y-auto space-y-1">
                    {filteredPresets.length === 0 ? (
                      <p className="text-center py-4 text-bambu-gray">
                        {(cloudSettings?.filament?.length === 0 && !localPresets?.filament?.length)
                          ? t('configureAmsSlot.noPresetsAvailable')
                          : t('configureAmsSlot.noMatchingPresets')}
                      </p>
                    ) : (
                      filteredPresets.map((preset) => (
                        <button
                          key={preset.id}
                          data-preset-id={preset.id}
                          onClick={() => setSelectedPresetId(preset.id)}
                          className={`group w-full p-2 rounded-lg border text-left transition-colors ${
                            selectedPresetId === preset.id
                              ? 'bg-bambu-green/20 border-bambu-green'
                              : 'bg-bambu-dark border-bambu-dark-tertiary hover:border-bambu-gray'
                          }`}
                        >
                          <div className="flex items-center justify-between">
                            <span className="text-white text-sm truncate group-hover:whitespace-normal group-hover:break-all" title={preset.name}>{preset.name}</span>
                            <div className="flex items-center gap-1 flex-shrink-0">
                              {preset.source === 'local' && (
                                <span className="text-xs px-1.5 py-0.5 rounded bg-green-100 dark:bg-green-500/20 text-green-700 dark:text-green-400">
                                  {t('profiles.localProfiles.badge')}
                                </span>
                              )}
                              {preset.source === 'orca_cloud' && (
                                <span className="text-xs px-1.5 py-0.5 rounded bg-purple-100 dark:bg-purple-500/20 text-purple-700 dark:text-purple-400">
                                  {t('configureAmsSlot.orcaCloud')}
                                </span>
                              )}
                              {preset.source === 'cloud' && (
                                <span className="text-xs px-1.5 py-0.5 rounded bg-bambu-blue/20 text-bambu-blue">
                                  {t('configureAmsSlot.bambuCloud')}
                                </span>
                              )}
                              {preset.source === 'builtin' && (
                                <span className="text-xs px-1.5 py-0.5 rounded bg-amber-100 dark:bg-amber-500/20 text-amber-700 dark:text-amber-400">
                                  {t('configureAmsSlot.builtin')}
                                </span>
                              )}
                            </div>
                          </div>
                        </button>
                      ))
                    )}
                  </div>
                </div>
              </div>

              {/* K Profile Select */}
              <div>
                <label className="block text-sm text-bambu-gray mb-2">
                  {t('configureAmsSlot.kProfileLabel')}
                  {selectedMaterial && (
                    <span className="ml-2 text-xs text-bambu-blue">
                      {t('configureAmsSlot.filteringFor', { material: selectedMaterial })}
                    </span>
                  )}
                </label>
                {hasAnyKProfile ? (
                  <div className="relative">
                    <select
                      value={selectedKProfile ? kProfileOptionValue(selectedKProfile) : ''}
                      onChange={(e) => selectKProfileByValue(e.target.value)}
                      className="w-full px-3 py-2 bg-bambu-dark border border-bambu-dark-tertiary rounded-lg text-white focus:border-bambu-green focus:outline-none appearance-none pr-10"
                    >
                      <option value="">{t('configureAmsSlot.noKProfile')}</option>
                      {matchingKProfiles.map((profile) => (
                        <option key={kProfileOptionValue(profile)} value={kProfileOptionValue(profile)}>
                          {profile.name} (K={profile.k_value}){kProfileNozzleSuffix(profile, isDualNozzleProfiles, t)}
                        </option>
                      ))}
                      {otherKProfiles.length > 0 && (
                        <optgroup label={t('configureAmsSlot.otherKProfiles')}>
                          {otherKProfiles.map((profile) => (
                            <option key={kProfileOptionValue(profile)} value={kProfileOptionValue(profile)}>
                              {profile.name} (K={profile.k_value}){kProfileNozzleSuffix(profile, isDualNozzleProfiles, t)}
                            </option>
                          ))}
                        </optgroup>
                      )}
                    </select>
                    <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-bambu-gray pointer-events-none" />
                  </div>
                ) : selectedPresetId ? (
                  <p className="text-sm text-bambu-gray italic py-2">
                    {t('configureAmsSlot.noMatchingKProfiles')}
                  </p>
                ) : (
                  <span className="inline-block text-xs px-2 py-1 rounded bg-amber-100 dark:bg-amber-500/20 text-amber-700 dark:text-amber-400 border border-amber-300 dark:border-amber-500/30">
                    {t('configureAmsSlot.selectFilamentFirst')}
                  </span>
                )}
                {selectedKProfile && (
                  <p className="text-xs text-bambu-green mt-1">
                    {t('configureAmsSlot.kFromCalibration', { value: selectedKProfile.k_value })}
                  </p>
                )}
              </div>

              {/* Optional: Custom color */}
              <div>
                <label className="block text-sm text-bambu-gray mb-2">
                  {t('configureAmsSlot.customColorLabel')}
                </label>
                {/* Catalog colors matching selected preset */}
                {catalogColors.length > 0 && (
                  <div className="mb-3">
                    <p className="text-xs text-bambu-gray mb-1.5">
                      {t('configureAmsSlot.presetColors', { name: selectedPresetInfo?.fullName })}
                    </p>
                    <div className="flex flex-wrap gap-1.5">
                      {catalogColors.map((entry) => (
                        <button
                          key={entry.id}
                          onClick={() => {
                            const hex = entry.hex_color.replace('#', '').toUpperCase();
                            setColorHex(hex);
                            setColorInput(entry.color_name);
                          }}
                          className={`h-7 px-2 rounded-md border-2 transition-all flex items-center gap-1.5 ${
                            colorHex === entry.hex_color.replace('#', '').toUpperCase()
                              ? 'border-bambu-green scale-105'
                              : 'border-white/20 hover:border-white/40'
                          }`}
                          title={entry.color_name}
                        >
                          <span
                            className="w-4 h-4 rounded-full border border-black/20 flex-shrink-0"
                            style={{ backgroundColor: entry.hex_color }}
                          />
                          <span className="text-xs text-white/80 whitespace-nowrap">{entry.color_name}</span>
                        </button>
                      ))}
                    </div>
                  </div>
                )}
                {/* Quick color buttons */}
                <div className="flex flex-wrap gap-1.5 mb-2">
                  {QUICK_COLORS_BASIC.map((color) => (
                    <button
                      key={color.hex}
                      onClick={() => {
                        setColorHex(color.hex);
                        setColorInput(color.name);
                      }}
                      className={`w-7 h-7 rounded-md border-2 transition-all ${
                        colorHex === color.hex
                          ? 'border-bambu-green scale-110'
                          : 'border-white/20 hover:border-white/40'
                      }`}
                      style={{ backgroundColor: `#${color.hex}` }}
                      title={color.name}
                    />
                  ))}
                  <button
                    onClick={() => setShowExtendedColors(!showExtendedColors)}
                    className="w-7 h-7 rounded-md border-2 border-white/20 hover:border-white/40 flex items-center justify-center text-white/60 hover:text-white/80 transition-all text-xs"
                    title={showExtendedColors ? t('configureAmsSlot.showLessColors') : t('configureAmsSlot.showMoreColors')}
                  >
                    {showExtendedColors ? '−' : '+'}
                  </button>
                </div>
                {/* Extended colors (collapsible) */}
                {showExtendedColors && (
                  <div className="flex flex-wrap gap-1.5 mb-2">
                    {QUICK_COLORS_EXTENDED.map((color) => (
                      <button
                        key={color.hex}
                        onClick={() => {
                          setColorHex(color.hex);
                          setColorInput(color.name);
                        }}
                        className={`w-7 h-7 rounded-md border-2 transition-all ${
                          colorHex === color.hex
                            ? 'border-bambu-green scale-110'
                            : 'border-white/20 hover:border-white/40'
                        }`}
                        style={{ backgroundColor: `#${color.hex}` }}
                        title={color.name}
                      />
                    ))}
                  </div>
                )}
                {/* Color input: name or hex */}
                <div className="flex gap-2 items-center">
                  <div
                    className="w-10 h-10 rounded-lg border-2 border-white/20 flex-shrink-0"
                    style={getSwatchStyle(displayColor)}
                  />
                  <input
                    type="text"
                    placeholder={t('configureAmsSlot.colorPlaceholder')}
                    value={colorInput}
                    onChange={(e) => {
                      const input = e.target.value;
                      setColorInput(input);

                      // Try to parse as color name first
                      const nameHex = colorNameToHex(input);
                      if (nameHex) {
                        setColorHex(nameHex);
                      } else {
                        // Try to parse as hex code
                        const cleaned = input.replace(/[^0-9A-Fa-f]/g, '').toUpperCase();
                        if (cleaned.length === 6) {
                          setColorHex(cleaned);
                        } else if (cleaned.length === 3) {
                          // Expand shorthand hex (e.g., F00 -> FF0000)
                          setColorHex(cleaned.split('').map(c => c + c).join(''));
                        }
                      }
                    }}
                    className="flex-1 px-3 py-2 bg-bambu-dark border border-bambu-dark-tertiary rounded-lg text-white placeholder:text-bambu-gray focus:border-bambu-green focus:outline-none text-sm"
                  />
                  {colorHex && (
                    <button
                      onClick={() => {
                        setColorHex('');
                        setColorInput('');
                      }}
                      className="px-2 py-1 text-xs text-bambu-gray hover:text-white bg-bambu-dark-tertiary rounded"
                      title={t('configureAmsSlot.clearCustomColor')}
                    >
                      {t('configureAmsSlot.clear')}
                    </button>
                  )}
                </div>
                {colorHex && (
                  <p className="text-xs text-bambu-gray mt-1.5">
                    {t('configureAmsSlot.hexLabel', { hex: colorHex })}
                  </p>
                )}
              </div>
            </>
          )}
        </div>

        {/* Footer */}
        <div className="flex justify-between p-4 border-t border-bambu-dark-tertiary shrink-0">
          {/* Reset button on the left */}
          <Button
            variant="secondary"
            onClick={() => resetMutation.mutate()}
            disabled={resetMutation.isPending || configureMutation.isPending}
            className="text-red-600 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 hover:bg-red-50 dark:hover:bg-red-500/10"
          >
            {resetMutation.isPending ? (
              <>
                <Loader2 className="w-4 h-4 animate-spin" />
                {t('configureAmsSlot.resetting')}
              </>
            ) : (
              <>
                <RotateCcw className="w-4 h-4" />
                {t('configureAmsSlot.resetSlot')}
              </>
            )}
          </Button>
          {/* Cancel and Configure buttons on the right */}
          <div className="flex gap-2">
            <Button variant="secondary" onClick={onClose}>
              {t('configureAmsSlot.cancel')}
            </Button>
            <Button
              onClick={() => configureMutation.mutate()}
              disabled={!canSave}
            >
              {configureMutation.isPending ? (
                <>
                  <Loader2 className="w-4 h-4 animate-spin" />
                  {t('configureAmsSlot.configuring')}
                </>
              ) : (
                <>
                  <Settings2 className="w-4 h-4" />
                  {t('configureAmsSlot.configureSlot')}
                </>
              )}
            </Button>
          </div>
        </div>

        {/* Error */}
        {(configureMutation.isError || resetMutation.isError) && (
          <div className="mx-4 mb-4 p-2 bg-red-100 dark:bg-red-500/20 border border-red-300 dark:border-red-500/50 rounded text-sm text-red-700 dark:text-red-400">
            {(configureMutation.error as Error)?.message || (resetMutation.error as Error)?.message}
          </div>
        )}
      </div>
    </div>
  );
}