bambuddy/frontend/src/pages/InventoryPage.tsx

import { useState, useMemo, useEffect, useRef, useCallback, type ReactNode } from 'react';
import { useSearchParams } from 'react-router-dom';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';
import {
  Plus, Loader2, Trash2, Archive, RotateCcw, Edit2, Package,
  Search, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight,
  TrendingDown, Layers, Printer, AlertTriangle, X, Clock, LayoutGrid, TableProperties, Columns,
  ArrowUp, ArrowDown, ArrowUpDown, Group, ChevronDown, Check, RefreshCw, TrendingUp, Lock, Copy, Eraser,
  Upload, Download,
} from 'lucide-react';
import { ForecastPanel } from '../components/ForecastPanel';
import { api, spoolbuddyApi, ApiError } from '../api/client';
import type { InventorySpool, SpoolCatalogEntry } from '../api/client';
import { Button } from '../components/Button';
import { FilamentSwatch } from '../components/FilamentSwatch';
import { buildFilamentBackground } from '../components/filamentSwatchHelpers';
import {SpoolFormModal, type SpoolFormMode} from '../components/SpoolFormModal';
import { ConfirmModal } from '../components/ConfirmModal';
import { ColumnConfigModal, type ColumnConfig } from '../components/ColumnConfigModal';
import { LabelTemplatePickerModal } from '../components/LabelTemplatePickerModal';
import { SpoolCsvImportModal } from '../components/SpoolCsvImportModal';
import { useToast } from '../contexts/ToastContext';
import { useAuth } from '../contexts/AuthContext';
import { resolveSpoolColorName } from '../utils/colors';
import { getCurrencySymbol } from '../utils/currency';
import { formatDateInput, parseUTCDate, type DateFormat } from '../utils/date';
import { formatSlotLabel } from '../utils/amsHelpers';
import { filterSpoolsByQuery } from '../utils/inventorySearch';
import { aggregateGroupSpool } from '../utils/inventoryGrouping';

type ArchiveFilter = 'active' | 'archived';
type UsageFilter = 'all' | 'used' | 'new' | 'lowstock';
type ViewMode = 'table' | 'cards' | 'forecast';
type SortDirection = 'asc' | 'desc';
type SortState = { column: string; direction: SortDirection } | null;

type DisplayItem =
  | { type: 'single'; spool: InventorySpool }
  | { type: 'group'; key: string; spools: InventorySpool[]; representative: InventorySpool };

function spoolGroupKey(s: InventorySpool): string {
  // Include extra_colors + effect_type so the "Group similar" toggle does
  // not collapse two spools that share the base colour but differ on
  // gradient stops or visual effect (#1154).
  return `${s.material}|${s.subtype || ''}|${s.brand || ''}|${s.color_name || ''}|${s.rgba || ''}|${s.extra_colors || ''}|${s.effect_type || ''}|${s.label_weight}`;
}

// Column definitions for the inventory table
const COLUMN_CONFIG_KEY = 'bambuddy-inventory-columns';

const DEFAULT_COLUMNS: ColumnConfig[] = [
  { id: 'id', label: '#', visible: true },
  { id: 'added_time', label: 'Added', visible: true },
  { id: 'encode_time', label: 'Encoded', visible: false },
  { id: 'last_used_time', label: 'Last Used', visible: false },
  { id: 'rgba', label: 'Color', visible: true },
  { id: 'material', label: 'Material', visible: true },
  { id: 'subtype', label: 'Subtype', visible: true },
  { id: 'color_name', label: 'Color Name', visible: false },
  { id: 'brand', label: 'Brand', visible: true },
  { id: 'slicer_filament', label: 'Slicer Filament', visible: false },
  { id: 'location', label: 'Location', visible: true },
  { id: 'storage_location', label: 'Storage Location', visible: false },
  { id: 'label_weight', label: 'Label', visible: true },
  { id: 'net', label: 'Net', visible: true },
  { id: 'gross', label: 'Gross', visible: false },
  { id: 'added_full', label: 'Full', visible: false },
  { id: 'used', label: 'Used', visible: false },
  { id: 'printed_total', label: 'Printed Total', visible: false },
  { id: 'printed_since_weight', label: 'Printed Since Weight', visible: false },
  { id: 'note', label: 'Note', visible: false },
  { id: 'pa_k', label: 'PA(K)', visible: true },
  { id: 'tag_id', label: 'Tag ID', visible: false },
  { id: 'data_origin', label: 'Data Origin', visible: false },
  { id: 'tag_type', label: 'Linked Tag Type', visible: false },
  { id: 'stock', label: 'Stock', visible: false },
  { id: 'remaining', label: 'Remaining', visible: true },
  { id: 'spool_name', label: 'Spool', visible: false },
  { id: 'cost_per_kg', label: 'Cost/kg', visible: false },
  { id: 'weight_check', label: 'Weight Check', visible: false },
];

function loadColumnConfig(): ColumnConfig[] {
  try {
    const stored = localStorage.getItem(COLUMN_CONFIG_KEY);
    if (stored) {
      const parsed = JSON.parse(stored) as ColumnConfig[];
      const defaultIds = new Set(DEFAULT_COLUMNS.map((c) => c.id));
      const storedIds = new Set(parsed.map((c) => c.id));
      // Keep stored columns that still exist in defaults
      const validStored = parsed.filter((c) => defaultIds.has(c.id));
      // Add any new default columns not in stored config
      const newColumns = DEFAULT_COLUMNS.filter((c) => !storedIds.has(c.id));
      return [...validStored, ...newColumns];
    }
  } catch {
    // Ignore errors
  }
  return DEFAULT_COLUMNS.map((c) => ({ ...c }));
}

function saveColumnConfig(config: ColumnConfig[]) {
  try {
    localStorage.setItem(COLUMN_CONFIG_KEY, JSON.stringify(config));
  } catch {
    // Ignore errors
  }
}

function formatWeight(g: number, useKg = false): string {
  if (useKg && g >= 1000) return `${(g / 1000).toFixed(1)}kg`;
  return `${Math.round(g)}g`;
}

// Material color mapping for pills
const MATERIAL_COLORS: Record<string, string> = {
  PLA: 'bg-green-500/20 text-green-400',
  ABS: 'bg-red-500/20 text-red-400',
  PETG: 'bg-blue-500/20 text-blue-400',
  TPU: 'bg-purple-500/20 text-purple-400',
  ASA: 'bg-orange-500/20 text-orange-400',
  PA: 'bg-yellow-500/20 text-yellow-400',
  PC: 'bg-cyan-500/20 text-cyan-400',
  PET: 'bg-sky-500/20 text-sky-400',
};

type TFn = (key: string, opts?: Record<string, unknown>) => string;

function formatInventoryDate(dateStr: string | null, dateFormat: DateFormat = 'system'): string {
  if (!dateStr) return '-';
  const date = parseUTCDate(dateStr);
  if (!date) return '-';
  return formatDateInput(date, dateFormat);
}

// Slim shape for the LOCATION column — only the fields actually rendered.
// Sourced from either local SpoolAssignment (lokal) or SpoolmanSlotAssignment
// (Spoolman mode), so we can't reuse SpoolAssignment without dummy values.
type LocationDisplay = {
  printer_id: number;
  printer_name: string | null;
  ams_id: number;
  tray_id: number;
  ams_label: string | null;
};

type CellCtx = {
  spool: InventorySpool;
  remaining: number;
  pct: number;
  assignmentMap: Record<number, LocationDisplay>;
  catalogMap: Record<number, SpoolCatalogEntry>;
  currencySymbol: string;
  dateFormat: DateFormat;
  t: TFn;
  onSyncWeight?: (spool: InventorySpool) => void;
};

// Column header labels (25 columns — matching SpoolBuddy exactly)
const columnHeaders: Record<string, (t: TFn) => string> = {
  id: () => '#',
  added_time: () => 'Added',
  encode_time: () => 'Encoded',
  last_used_time: () => 'Last Used',
  rgba: (t) => t('inventory.color'),
  material: (t) => t('inventory.material'),
  subtype: (t) => t('inventory.subtype'),
  color_name: (t) => t('inventory.colorName'),
  brand: (t) => t('inventory.brand'),
  slicer_filament: (t) => t('inventory.slicerFilament'),
  location: () => 'Location',
  storage_location: (t) => t('inventory.storageLocation'),
  label_weight: (t) => t('inventory.labelWeight'),
  net: (t) => t('inventory.net'),
  gross: () => 'Gross',
  added_full: () => 'Full',
  used: (t) => t('inventory.weightUsed'),
  printed_total: () => 'Printed Total',
  printed_since_weight: () => 'Printed Since Weight',
  note: (t) => t('inventory.note'),
  pa_k: () => 'PA(K)',
  tag_id: () => 'Tag ID',
  data_origin: () => 'Data Origin',
  tag_type: () => 'Linked Tag Type',
  stock: (t) => t('inventory.stock'),
  remaining: (t) => t('inventory.remaining'),
  spool_name: (t) => t('inventory.spoolName'),
  cost_per_kg: (t) => t('inventory.costPerKg'),
  weight_check: (t) => t('inventory.weightCheck'),
};

// Column cell renderers (25 columns — matching SpoolBuddy exactly)
const columnCells: Record<string, (ctx: CellCtx) => ReactNode> = {
  id: ({ spool }) => (
    <span className="text-sm font-medium text-white">{spool.id}</span>
  ),
  added_time: ({ spool, dateFormat }) => (
    <span className="text-sm text-bambu-gray">{formatInventoryDate(spool.created_at, dateFormat)}</span>
  ),
  encode_time: ({ spool, dateFormat }) => (
    <span className="text-sm text-bambu-gray">{formatInventoryDate(spool.encode_time, dateFormat)}</span>
  ),
  last_used_time: ({ spool, dateFormat }) => (
    <span className="text-sm text-bambu-gray">{spool.last_used ? formatInventoryDate(spool.last_used, dateFormat) : 'Never'}</span>
  ),
  rgba: ({ spool }) => (
    <div className="flex items-center justify-center">
      <FilamentSwatch
        rgba={spool.rgba}
        extraColors={spool.extra_colors}
        effectType={spool.effect_type}
        effectSize="table"
        subtype={spool.subtype}
      />
    </div>
  ),
  material: ({ spool }) => (
    <span className="text-sm text-white">{spool.material}</span>
  ),
  subtype: ({ spool }) => (
    <span className="text-sm text-bambu-gray">{spool.subtype || '-'}</span>
  ),
  color_name: ({ spool }) => (
    <span className="text-sm text-bambu-gray">{resolveSpoolColorName(spool.color_name, spool.rgba) || '-'}</span>
  ),
  brand: ({ spool }) => (
    <span className="text-sm text-bambu-gray">{spool.brand || '-'}</span>
  ),
  slicer_filament: ({ spool }) => (
    <span className="text-sm text-bambu-gray" title={spool.slicer_filament || undefined}>
      {spool.slicer_filament_name || spool.slicer_filament || '-'}
    </span>
  ),
  location: ({ spool, assignmentMap }) => {
    const assignment = assignmentMap[spool.id];
    if (!assignment) return <span className="text-sm text-bambu-gray">-</span>;
    const printerLabel = assignment.printer_name || `Printer ${assignment.printer_id}`;
    const isExternal = assignment.ams_id === 254 || assignment.ams_id === 255;
    const isHt = !isExternal && assignment.ams_id >= 128;
    const slotLabel = formatSlotLabel(assignment.ams_id, assignment.tray_id, isHt, isExternal);
    return (
      <span className="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-purple-500/20 text-purple-400">
        {printerLabel} {slotLabel}{assignment.ams_label ? ` (${assignment.ams_label})` : ''}
      </span>
    );
  },
  storage_location: ({ spool }) => {
    if (!spool.storage_location) return <span className="text-sm text-bambu-gray">-</span>;
    return (
      <span className="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-blue-500/20 text-blue-400">
        {spool.storage_location}
      </span>
    );
  },
  label_weight: ({ spool }) => (
    <span className="text-sm text-white">{formatWeight(spool.label_weight)}</span>
  ),
  net: ({ remaining }) => (
    <span className="text-sm text-white">{formatWeight(remaining)}</span>
  ),
  gross: ({ spool, remaining }) => (
    <span className="text-sm text-bambu-gray">{formatWeight(remaining + spool.core_weight)}</span>
  ),
  added_full: ({ spool }) => (
    <span className="text-sm text-bambu-gray">{spool.added_full == null ? '-' : spool.added_full ? 'Yes' : 'No'}</span>
  ),
  used: ({ spool }) => (
    <span className="text-sm text-bambu-gray">{spool.weight_used > 0 ? formatWeight(spool.weight_used) : '-'}</span>
  ),
  printed_total: () => (
    <span className="text-sm text-bambu-gray/50">-</span>
  ),
  printed_since_weight: () => (
    <span className="text-sm text-bambu-gray/50">-</span>
  ),
  note: ({ spool }) => (
    <span className="text-sm text-bambu-gray max-w-[150px] truncate block" title={spool.note || undefined}>{spool.note || '-'}</span>
  ),
  pa_k: ({ spool }) => {
    const count = spool.k_profiles?.length ?? 0;
    if (count === 0) return <span className="text-sm text-bambu-gray">-</span>;
    return (
      <span className="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-bambu-green/20 text-bambu-green">
        K
      </span>
    );
  },
  tag_id: ({ spool }) => {
    const tag = spool.tag_uid || spool.tray_uuid;
    if (!tag) return <span className="text-sm text-bambu-gray/50">-</span>;
    return (
      <span className="text-sm text-bambu-gray font-mono" title={tag}>
        {tag.length > 12 ? `${tag.slice(0, 6)}...${tag.slice(-4)}` : tag}
      </span>
    );
  },
  data_origin: ({ spool }) => (
    <span className="text-sm text-bambu-gray">{spool.data_origin || '-'}</span>
  ),
  tag_type: ({ spool }) => (
    <span className="text-sm text-bambu-gray">{spool.tag_type || '-'}</span>
  ),
  stock: ({ spool, t }) => {
    if (!spool.slicer_filament) {
      return (
        <span className="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-amber-500/20 text-amber-400">
          {t('inventory.stock')}
        </span>
      );
    }
    return <span className="text-sm text-bambu-gray">-</span>;
  },
  remaining: ({ remaining, pct }) => (
    <div className="flex items-center gap-2">
      <div className="flex-1 h-2 bg-bambu-dark-tertiary rounded-full overflow-hidden">
        <div
          className={`h-full rounded-full ${pct > 50 ? 'bg-bambu-green' : pct > 20 ? 'bg-yellow-500' : 'bg-red-500'}`}
          style={{ width: `${Math.min(pct, 100)}%` }}
        />
      </div>
      <span className="text-xs text-bambu-gray min-w-[40px] text-right">{Math.round(remaining)}g</span>
    </div>
  ),
  spool_name: ({ spool, catalogMap }) => {
    const entry = spool.core_weight_catalog_id != null ? catalogMap[spool.core_weight_catalog_id] : undefined;
    return <span className="text-sm text-bambu-gray">{entry?.name || '-'}</span>;
  },
  cost_per_kg: ({ spool, currencySymbol }) => (
    <span className="text-sm text-bambu-gray">
      {spool.cost_per_kg != null ? `${currencySymbol}${spool.cost_per_kg.toFixed(2)}` : '-'}
    </span>
  ),
  weight_check: ({ spool, onSyncWeight }) => {
    const scaleWeight = spool.last_scale_weight;
    if (scaleWeight == null) return <span className="text-sm text-bambu-gray/50" title="No scale measurement">-</span>;

    const coreWeight = spool.core_weight || 0;
    const calculatedWeight = Math.max(0, spool.label_weight - spool.weight_used) + coreWeight;

    // Edge case: scale < core_weight means spool is empty or not on scale — treat as match
    let difference: number;
    let isMatch: boolean;
    if (scaleWeight < coreWeight) {
      difference = scaleWeight - coreWeight;
      isMatch = true;
    } else {
      difference = scaleWeight - calculatedWeight;
      isMatch = Math.abs(difference) <= 50;
    }

    const diffStr = difference > 0 ? `+${Math.round(difference)}` : `${Math.round(difference)}`;
    const tooltip = isMatch
      ? `Scale: ${Math.round(scaleWeight)}g\nCalculated: ${Math.round(calculatedWeight)}g\nDifference: ${diffStr}g (within tolerance)`
      : `Scale: ${Math.round(scaleWeight)}g\nCalculated: ${Math.round(calculatedWeight)}g\nDifference: ${diffStr}g (mismatch!)`;

    return (
      <div
        className={`flex items-center gap-1 text-sm font-medium ${isMatch ? 'text-green-400' : 'text-yellow-400'}`}
        title={tooltip}
      >
        <span>{Math.round(scaleWeight)}g</span>
        {isMatch ? (
          <Check className="w-3 h-3" />
        ) : (
          <>
            <AlertTriangle className="w-3 h-3" />
            {onSyncWeight && (
              <button
                type="button"
                onClick={(e) => {
                  e.stopPropagation();
                  e.preventDefault();
                  onSyncWeight(spool);
                }}
                className="p-1 hover:bg-bambu-green/20 rounded transition-colors text-bambu-green"
                title="Sync: trust scale weight and reset tracking"
              >
                <RefreshCw className="w-3.5 h-3.5" />
              </button>
            )}
          </>
        )}
      </div>
    );
  },
};

// Sort value extractors — return a comparable value for each sortable column
const columnSortValues: Record<string, (spool: InventorySpool, assignmentMap: Record<number, LocationDisplay>) => string | number> = {
  id: (s) => s.id,
  added_time: (s) => s.created_at || '',
  encode_time: (s) => s.encode_time || '',
  last_used_time: (s) => s.last_used || '',
  material: (s) => (s.material || '').toLowerCase(),
  subtype: (s) => (s.subtype || '').toLowerCase(),
  color_name: (s) => (s.color_name || '').toLowerCase(),
  brand: (s) => (s.brand || '').toLowerCase(),
  slicer_filament: (s) => (s.slicer_filament_name || s.slicer_filament || '').toLowerCase(),
  location: (s, am) => {
    const a = am[s.id];
    if (!a) return '';
    const isExt = a.ams_id === 254 || a.ams_id === 255;
    const isHt = !isExt && a.ams_id >= 128;
    const label = a.ams_label ? ` (${a.ams_label})` : '';
    return `${a.printer_name || ''} ${formatSlotLabel(a.ams_id, a.tray_id, isHt, isExt)}${label}`;
  },
  storage_location: (s) => (s.storage_location || '').toLowerCase(),
  label_weight: (s) => s.label_weight,
  net: (s) => Math.max(0, s.label_weight - s.weight_used),
  gross: (s) => Math.max(0, s.label_weight - s.weight_used) + s.core_weight,
  used: (s) => s.weight_used,
  remaining: (s) => s.label_weight > 0 ? Math.max(0, s.label_weight - s.weight_used) / s.label_weight : 0,
  note: (s) => (s.note || '').toLowerCase(),
  data_origin: (s) => (s.data_origin || '').toLowerCase(),
  tag_type: (s) => (s.tag_type || '').toLowerCase(),
  stock: (s) => s.slicer_filament ? 1 : 0,
  spool_name: (s) => s.core_weight_catalog_id ?? 0,
  cost_per_kg: (s) => s.cost_per_kg ?? 0,
  weight_check: (s) => {
    if (s.last_scale_weight == null) return -1;
    const expectedGross = Math.max(0, s.label_weight - s.weight_used) + s.core_weight;
    return Math.abs(s.last_scale_weight - expectedGross);
  },
};

const SORT_STATE_KEY = 'bambuddy-inventory-sort';

function loadSortState(): SortState {
  try {
    const stored = localStorage.getItem(SORT_STATE_KEY);
    if (stored) return JSON.parse(stored);
  } catch { /* ignore */ }
  return null;
}

function saveSortState(state: SortState) {
  try {
    if (state) {
      localStorage.setItem(SORT_STATE_KEY, JSON.stringify(state));
    } else {
      localStorage.removeItem(SORT_STATE_KEY);
    }
  } catch { /* ignore */ }
}

// Wrapper: detects Spoolman mode and passes it to the shared inventory UI
export default function InventoryPageRouter() {
  const { data: spoolmanSettings } = useQuery({
    queryKey: ['spoolman-settings'],
    queryFn: api.getSpoolmanSettings,
    staleTime: 5 * 60 * 1000,
  });

  const spoolmanModeReady = spoolmanSettings !== undefined;
  const spoolmanMode =
    spoolmanSettings?.spoolman_enabled === 'true' && !!spoolmanSettings?.spoolman_url;

  return <InventoryPage spoolmanMode={spoolmanMode} spoolmanModeReady={spoolmanModeReady} />;
}

function InventoryPage({ spoolmanMode = false, spoolmanModeReady = true }: { spoolmanMode?: boolean; spoolmanModeReady?: boolean }) {
  const { t } = useTranslation();
  const queryClient = useQueryClient();
  const { showToast } = useToast();
  const { hasPermission, loading: authLoading } = useAuth();
  const canViewForecast = !authLoading && hasPermission('inventory:forecast_read');
  const [searchParams, setSearchParams] = useSearchParams();
  const [formModal, setFormModal] = useState<{ spool?: InventorySpool | null; mode: SpoolFormMode } | null>(null);
  const deepLinkHandled = useRef(false);
  const [confirmAction, setConfirmAction] = useState<
    | { type: 'delete' | 'archive' | 'reset-consumed-counter'; spoolId: number }
    | { type: 'reset-all-consumed-counters' }
    | null
  >(null);
  // Label printing (#809). null = closed; otherwise the IDs to print labels for.
  const [labelPickerSpoolIds, setLabelPickerSpoolIds] = useState<number[] | null>(null);
  // CSV import/export (#1576). Local inventory only — hidden in Spoolman mode.
  const [csvImportOpen, setCsvImportOpen] = useState(false);
  const [exportingCsv, setExportingCsv] = useState(false);

  // Filter state
  const [archiveFilter, setArchiveFilter] = useState<ArchiveFilter>('active');
  const [usageFilter, setUsageFilter] = useState<UsageFilter>('all');
  const [materialFilter, setMaterialFilter] = useState('');
  const [brandFilter, setBrandFilter] = useState('');
  const [categoryFilter, setCategoryFilter] = useState('');
  const [spoolFilter, setSpoolFilter] = useState('');
  const [stockFilter, setStockFilter] = useState<'all' | 'stock' | 'configured'>('all');
  // #1400: storage-location dropdown. Uses the sentinel `__none__` for the
  // "no storage location set" group, same pattern as the category filter so
  // users can find unfiled spools.
  const [storageLocationFilter, setStorageLocationFilter] = useState('');
  const [search, setSearch] = useState('');
  const [viewMode, setViewMode] = useState<ViewMode>('table');
  const [sortState, setSortState] = useState<SortState>(loadSortState);
  const [columnConfig, setColumnConfig] = useState<ColumnConfig[]>(loadColumnConfig);
  const [showColumnModal, setShowColumnModal] = useState(false);
  const [groupSimilar, setGroupSimilar] = useState(() => {
    try {
      return localStorage.getItem('bambuddy-inventory-group') === 'true';
    } catch { return false; }
  });
  const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set());

  // Pagination state (pageSize persisted to localStorage)
  const [pageIndex, setPageIndex] = useState(0);
  const [pageSize, setPageSize] = useState(() => {
    try {
      const stored = localStorage.getItem('bambuddy-inventory-pageSize');
      if (stored) {
        const n = Number(stored);
        if ([15, 30, 50, 100, -1].includes(n)) return n;
      }
    } catch { /* ignore */ }
    return 15;
  });

  const { data: settings } = useQuery({
    queryKey: ['settings'],
    queryFn: api.getSettings,
  });

  const dateFormat: DateFormat = settings?.date_format || 'system';

  // Query key and fetch function differ based on data source
  const spoolsQueryKey = spoolmanMode ? ['spoolman-inventory-spools'] : ['inventory-spools'];
  const { data: spools, isLoading } = useQuery({
    queryKey: spoolsQueryKey,
    queryFn: () =>
      spoolmanMode ? api.getSpoolmanInventorySpools(true) : api.getSpools(true),
    refetchInterval: 30000,
  });

  // CSV export (#1576) — downloads the active inventory as a CSV file.
  const handleExportCsv = useCallback(async () => {
    setExportingCsv(true);
    try {
      await api.exportSpoolsCsv();
    } catch (err) {
      showToast(
        err instanceof Error ? err.message : t('inventory.csv.exportError', 'Export failed'),
        'error',
      );
    } finally {
      setExportingCsv(false);
    }
  }, [showToast, t]);

  // Shown as the tooltip on both CSV buttons when they're disabled in Spoolman mode.
  const spoolmanCsvHint = spoolmanMode
    ? t('inventory.csv.spoolmanHint', 'In Spoolman mode, use Spoolman\'s built-in CSV import/export.')
    : undefined;

  // Deep-link: open edit modal for ?spool=<id>
  // Prefer the already-loaded spool list (no extra API call); fall back to a
  // targeted fetch for the rare case where the full list hasn't arrived yet.
  const _rawSpoolParam = searchParams.get('spool');
  // Only accept strings of digits representing a positive integer — guards against
  // NaN (Number('abc')), 0, negatives, and floats like '1.5' that would produce
  // an invalid path parameter and trigger unnecessary 422 responses from the API.
  const deepLinkSpoolId =
    _rawSpoolParam && /^\d+$/.test(_rawSpoolParam) && Number(_rawSpoolParam) > 0
      ? Number(_rawSpoolParam)
      : null;
  const deepLinkInList = spools?.find((s) => s.id === deepLinkSpoolId) ?? null;

  const clearDeepLinkParam = useCallback(() => {
    deepLinkHandled.current = true;
    setSearchParams((prev) => { prev.delete('spool'); return prev; }, { replace: true });
  }, [setSearchParams]);

  // Targeted fetch — only fires when mode is known and spool isn't in the list yet
  const { data: deepLinkSpool, isError: deepLinkFetchFailed, error: deepLinkError } = useQuery({
    queryKey: spoolmanMode
      ? ['spoolman-inventory-spool', deepLinkSpoolId]
      : ['inventory-spool', deepLinkSpoolId],
    queryFn: () =>
      spoolmanMode
        ? api.getSpoolmanInventorySpool(deepLinkSpoolId!)
        : api.getSpool(deepLinkSpoolId!),
    enabled: spoolmanModeReady && deepLinkSpoolId !== null && deepLinkInList === null,
    staleTime: Infinity,
    retry: (failureCount, error) =>
      failureCount < 2 && !(error instanceof ApiError && error.status === 404),
  });

  useEffect(() => {
    if (deepLinkHandled.current) return;

    // Case 1: spool is already in the fetched list
    if (spoolmanModeReady && deepLinkSpoolId && deepLinkInList) {
      clearDeepLinkParam();
      setFormModal({ spool: deepLinkInList, mode: 'edit' });
      return;
    }

    // Case 2: spool was fetched individually
    if (deepLinkSpool) {
      clearDeepLinkParam();
      setFormModal({ spool: deepLinkSpool, mode: 'edit' });
      return;
    }

    // Case 3: fetch failed
    if (deepLinkFetchFailed) {
      clearDeepLinkParam();
      const is404 = deepLinkError instanceof ApiError && deepLinkError.status === 404;
      showToast(t(is404 ? 'inventory.deepLinkSpoolNotFound' : 'inventory.deepLinkFetchFailed'), 'error');
    }
  }, [
    spoolmanModeReady,
    deepLinkSpoolId,
    deepLinkInList,
    deepLinkSpool,
    deepLinkFetchFailed,
    deepLinkError,
    clearDeepLinkParam,
    showToast,
    t,
  ]);

  const { data: assignments } = useQuery({
    queryKey: ['spool-assignments'],
    queryFn: () => api.getAssignments(),
    refetchInterval: 30000,
  });

  // Spoolman-mode slot assignments. spool.id IS the spoolman_spool_id, so this
  // feeds into the same assignmentMap that the LOCATION column reads.
  const {
    data: spoolmanSlotAssignments = [],
    isError: spoolmanSlotAssignmentsError,
  } = useQuery({
    queryKey: ['spoolman-slot-assignments-all'],
    queryFn: () => api.getSpoolmanSlotAssignments(),
    enabled: spoolmanMode,
    refetchInterval: 30000,
    staleTime: 10000,
    retry: 1,
  });

  // Surface a single toast when the slot-assignment endpoint goes down — the
  // LOCATION column would otherwise silently show "-" for every Spoolman spool.
  // useRef guard prevents repeated toasts during refetchInterval polls.
  const slotErrorToastShown = useRef(false);
  useEffect(() => {
    if (spoolmanSlotAssignmentsError && !slotErrorToastShown.current) {
      slotErrorToastShown.current = true;
      showToast(t('inventory.spoolmanUnreachable'), 'error');
    } else if (!spoolmanSlotAssignmentsError) {
      slotErrorToastShown.current = false;
    }
  }, [spoolmanSlotAssignmentsError, showToast, t]);

  const { data: catalogEntries } = useQuery({
    queryKey: ['spool-catalog'],
    queryFn: () => api.getSpoolCatalog(),
  });

  const deleteMutation = useMutation({
    mutationFn: (id: number) =>
      spoolmanMode ? api.deleteSpoolmanInventorySpool(id) : api.deleteSpool(id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: spoolsQueryKey });
      showToast(t('inventory.spoolDeleted'), 'success');
    },
    onError: (error: Error) => {
      if (error instanceof ApiError && error.status === 404) {
        showToast(t('inventory.deleteSpoolNotFound'), 'error');
      } else if (error instanceof ApiError && error.status === 503) {
        showToast(t('inventory.spoolmanUnreachable'), 'error');
      } else {
        showToast(t('inventory.deleteFailed'), 'error');
      }
    },
  });

  const archiveMutation = useMutation({
    mutationFn: (id: number) =>
      spoolmanMode ? api.archiveSpoolmanInventorySpool(id) : api.archiveSpool(id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: spoolsQueryKey });
      showToast(t('inventory.spoolArchived'), 'success');
    },
    onError: (error: Error) => {
      if (error instanceof ApiError && error.status === 404) {
        showToast(t('inventory.archiveSpoolNotFound'), 'error');
      } else if (error instanceof ApiError && error.status === 503) {
        showToast(t('inventory.spoolmanUnreachable'), 'error');
      } else {
        showToast(t('inventory.archiveFailed'), 'error');
      }
    },
  });

  const restoreMutation = useMutation({
    mutationFn: (id: number) =>
      spoolmanMode ? api.restoreSpoolmanInventorySpool(id) : api.restoreSpool(id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: spoolsQueryKey });
      showToast(t('inventory.spoolRestored'), 'success');
    },
    onError: (error: Error) => {
      if (error instanceof ApiError && error.status === 404) {
        showToast(t('inventory.restoreSpoolNotFound'), 'error');
      } else if (error instanceof ApiError && error.status === 503) {
        showToast(t('inventory.spoolmanUnreachable'), 'error');
      } else {
        showToast(t('inventory.restoreFailed'), 'error');
      }
    },
  });

  const resetConsumedCounterMutation = useMutation({
    mutationFn: (id: number) =>
      spoolmanMode
        ? api.resetSpoolmanInventorySpoolConsumedCounter(id)
        : api.resetSpoolConsumedCounter(id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: spoolsQueryKey });
      showToast(t('inventory.consumedCounterReset'), 'success');
    },
    onError: () => {
      showToast(t('inventory.resetConsumedCounterFailed'), 'error');
    },
  });

  const bulkResetConsumedCounterMutation = useMutation({
    mutationFn: (ids: number[]) =>
      spoolmanMode
        ? api.bulkResetSpoolmanInventorySpoolConsumedCounter(ids)
        : api.bulkResetSpoolConsumedCounter(ids),
    onSuccess: (data) => {
      queryClient.invalidateQueries({ queryKey: spoolsQueryKey });
      showToast(t('inventory.allConsumedCountersReset', { count: data.reset }), 'success');
    },
    onError: () => {
      showToast(t('inventory.resetConsumedCounterFailed'), 'error');
    },
  });

  // Spool IDs the "Reset all usage" button bulk-targets. Includes archived
  // spools too — without them, the broadened "Total Consumed" stat (which
  // sums archived consumption per the #1390 follow-up) would stay non-zero
  // after a Reset-all click, surprising the user. Backend reset endpoints
  // (both internal and Spoolman) already accept archived IDs without a
  // route-level guard, so this just removes the frontend filter.
  const resetableSpoolIds = useMemo(
    () => (spools ?? []).map((s) => s.id),
    [spools],
  );

  const handleSyncWeight = async (spool: InventorySpool) => {
    if (spool.last_scale_weight == null) return;
    try {
      if (spoolmanMode) {
        await api.syncSpoolmanSpoolWeight(spool.id, spool.last_scale_weight);
      } else {
        await spoolbuddyApi.updateSpoolWeight(spool.id, spool.last_scale_weight);
      }
      queryClient.invalidateQueries({ queryKey: spoolsQueryKey });
      const spoolName = [spool.brand, spool.material, spool.color_name].filter(Boolean).join(' ');
      showToast(`Synced "${spoolName}" to scale weight`, 'success');
    } catch (e) {
      const is404 = e instanceof ApiError && e.status === 404;
      const is503 = e instanceof ApiError && e.status === 503;
      if (is404) showToast(t('inventory.syncWeightSpoolNotFound'), 'error');
      else if (is503) showToast(t('inventory.syncWeightSpoolmanUnreachable'), 'error');
      else showToast(t('inventory.syncWeightFailed'), 'error');
    }
  };

  // Low stock threshold from backend settings
  const lowStockThreshold = settings?.low_stock_threshold ?? 20;
  const [showThresholdInput, setShowThresholdInput] = useState(false);
  const [thresholdInput, setThresholdInput] = useState(lowStockThreshold.toString());

  // Sync thresholdInput when lowStockThreshold changes and input is not shown
  useEffect(() => {
    if (!showThresholdInput) {
      setThresholdInput(lowStockThreshold.toString());
    }
  }, [lowStockThreshold, showThresholdInput]);

  const updateThresholdMutation = useMutation({
    mutationFn: (threshold: number) => api.updateSettings({ low_stock_threshold: threshold }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['settings'] });
      showToast(t('common.saved'), 'success');
      setShowThresholdInput(false);
    },
    onError: () => {
      showToast(t('inventory.lowStockThresholdError'), 'error');
    },
  });

  // Stats calculation.
  //
  // "Total Consumed" sums over ALL spools (active AND archived) because it's
  // a running counter — past consumption of a now-archived spool is real
  // history and silently dropping it on archive made the running total
  // collapse mysteriously (#1390 follow-up). The other aggregates
  // (totalWeight, lowStock, byMaterial, activeCount) describe what's
  // currently in active inventory and stay active-only.
  const stats = useMemo(() => {
    if (!spools) return null;
    let totalWeight = 0;
    let totalConsumed = 0;
    let lowStock = 0;
    let activeCount = 0;
    const byMaterial: Record<string, { count: number; weight: number }> = {};
    for (const s of spools) {
      // "Total Consumed" is the resettable counter (weight_used - baseline)
      // rather than raw weight_used so the per-spool / bulk eraser zeroes
      // the stat without inflating remaining back to label_weight (#1390).
      // Computed before the archived-skip below so archived consumption
      // stays in the running total.
      totalConsumed += Math.max(0, s.weight_used - (s.weight_used_baseline ?? 0));
      if (s.archived_at) continue;
      activeCount++;
      const remaining = Math.max(0, s.label_weight - s.weight_used);
      totalWeight += remaining;
      const pct = s.label_weight > 0 ? (remaining / s.label_weight) * 100 : 0;
      const threshold = s.low_stock_threshold_pct ?? lowStockThreshold;
      if (pct < threshold) lowStock++;
      const mat = s.material || 'Unknown';
      if (!byMaterial[mat]) byMaterial[mat] = { count: 0, weight: 0 };
      byMaterial[mat].count++;
      byMaterial[mat].weight += remaining;
    }
    return { totalWeight, totalConsumed, lowStock, byMaterial, totalSpools: activeCount };
  }, [spools, lowStockThreshold]);

  const inPrinterCount =
    (assignments?.length ?? 0) + (spoolmanMode ? spoolmanSlotAssignments.length : 0);

  const currencySymbol = getCurrencySymbol(settings?.currency || 'USD');

  // Map spool_id -> location display data for the LOCATION column.
  // Local SpoolAssignment entries first, then Spoolman SlotAssignment fills in
  // remaining IDs. Local wins on collision (defensive — modes are exclusive in
  // practice, but a stray pair with the same numeric id would otherwise be
  // unpredictable). spool.id IS the spoolman_spool_id in Spoolman mode.
  const assignmentMap = useMemo<Record<number, LocationDisplay>>(() => {
    const map: Record<number, LocationDisplay> = {};
    for (const a of assignments || []) {
      map[a.spool_id] = {
        printer_id: a.printer_id,
        printer_name: a.printer_name,
        ams_id: a.ams_id,
        tray_id: a.tray_id,
        ams_label: a.ams_label ?? null,
      };
    }
    for (const a of spoolmanSlotAssignments) {
      // Defensive: skip malformed entries (missing or invalid spool id, ams id,
      // tray id). The Pydantic response model on the backend should already
      // reject these, but MITM proxies and stale CDN responses can drop fields.
      if (
        typeof a?.spoolman_spool_id !== 'number' ||
        a.spoolman_spool_id <= 0 ||
        typeof a.printer_id !== 'number' ||
        typeof a.ams_id !== 'number' ||
        typeof a.tray_id !== 'number'
      ) continue;
      if (!map[a.spoolman_spool_id]) {
        map[a.spoolman_spool_id] = {
          printer_id: a.printer_id,
          printer_name: a.printer_name ?? null,
          ams_id: a.ams_id,
          tray_id: a.tray_id,
          ams_label: a.ams_label ?? null,
        };
      }
    }
    return map;
  }, [assignments, spoolmanSlotAssignments]);

  // Map catalog_id -> catalog entry for spool name column
  const catalogMap = useMemo(() => {
    const map: Record<number, SpoolCatalogEntry> = {};
    for (const e of catalogEntries || []) {
      map[e.id] = e;
    }
    return map;
  }, [catalogEntries]);

  // Top materials by weight for stat card pills
  const topMaterials = useMemo(() => {
    if (!stats) return [];
    return Object.entries(stats.byMaterial)
      .sort((a, b) => b[1].weight - a[1].weight)
      .slice(0, 4);
  }, [stats]);

  // Filtering pipeline
  const filteredSpools = useMemo(() => {
    let filtered = spools || [];

    // Archive filter
    if (archiveFilter === 'active') {
      filtered = filtered.filter((s) => !s.archived_at);
    } else {
      filtered = filtered.filter((s) => !!s.archived_at);
    }

    // Usage filter
    if (usageFilter === 'used') {
      filtered = filtered.filter((s) => s.weight_used > 0);
    } else if (usageFilter === 'new') {
      filtered = filtered.filter((s) => s.weight_used === 0);
    } else if (usageFilter === 'lowstock') {
      filtered = filtered.filter((s) => {
        const remaining = Math.max(0, s.label_weight - s.weight_used);
        const pct = s.label_weight > 0 ? (remaining / s.label_weight) * 100 : 0;
        const threshold = s.low_stock_threshold_pct ?? lowStockThreshold;
        return pct < threshold;
      });
    }

    // Material dropdown
    if (materialFilter) {
      filtered = filtered.filter((s) => s.material === materialFilter);
    }

    // Brand dropdown
    if (brandFilter) {
      filtered = filtered.filter((s) => s.brand === brandFilter);
    }

    // Category dropdown (#729)
    if (categoryFilter) {
      if (categoryFilter === '__none__') {
        filtered = filtered.filter((s) => !s.category);
      } else {
        filtered = filtered.filter((s) => s.category === categoryFilter);
      }
    }

    // Spool name dropdown
    if (spoolFilter) {
      const catalogId = Number(spoolFilter);
      filtered = filtered.filter((s) => s.core_weight_catalog_id === catalogId);
    }

    // Storage location dropdown (#1400). `__none__` lets the user find
    // spools that haven't been assigned a storage location yet.
    if (storageLocationFilter) {
      if (storageLocationFilter === '__none__') {
        filtered = filtered.filter((s) => !s.storage_location?.trim());
      } else {
        filtered = filtered.filter((s) => s.storage_location?.trim() === storageLocationFilter);
      }
    }

    // Stock filter
    if (stockFilter === 'stock') {
      filtered = filtered.filter((s) => !s.slicer_filament);
    } else if (stockFilter === 'configured') {
      filtered = filtered.filter((s) => !!s.slicer_filament);
    }

    // Global search
    if (search) {
      filtered = filterSpoolsByQuery(filtered, search);
    }

    return filtered;
  }, [spools, archiveFilter, usageFilter, materialFilter, brandFilter, categoryFilter, spoolFilter, stockFilter, storageLocationFilter, search, lowStockThreshold]);

  // Reset page on filter changes
  const resetPage = () => setPageIndex(0);

  // Unique values for filter dropdowns
  const uniqueMaterials = [...new Set(spools?.map((s) => s.material) || [])].sort();
  const uniqueBrands = [...new Set(spools?.map((s) => s.brand).filter(Boolean) || [])].sort() as string[];
  const uniqueCategories = [...new Set(spools?.map((s) => s.category?.trim()).filter(Boolean) as string[] || [])].sort();
  const hasUncategorized = (spools ?? []).some((s) => !s.category);
  const uniqueSpoolCatalogIds = [...new Set(spools?.map((s) => s.core_weight_catalog_id).filter((id): id is number => id != null) || [])].sort((a, b) => {
    const nameA = (catalogMap[a]?.name || '').toLowerCase();
    const nameB = (catalogMap[b]?.name || '').toLowerCase();
    return nameA.localeCompare(nameB);
  });
  // #1400: storage-location distinct values. `.trim()` so accidental
  // trailing whitespace doesn't show up as a separate option.
  const uniqueStorageLocations = [...new Set(spools?.map((s) => s.storage_location?.trim()).filter(Boolean) as string[] || [])].sort();
  const hasUnsetStorageLocation = (spools ?? []).some((s) => !s.storage_location?.trim());

  // Check if any filters are non-default
  const hasActiveFilters = archiveFilter !== 'active' || usageFilter !== 'all' || !!materialFilter || !!brandFilter || !!categoryFilter || !!spoolFilter || !!storageLocationFilter || stockFilter !== 'all' || !!search;

  const handleColumnConfigSave = (config: ColumnConfig[]) => {
    setColumnConfig(config);
    saveColumnConfig(config);
  };

  // Visible column IDs in order
  const visibleColumns = useMemo(
    () => columnConfig.filter((c) => c.visible).map((c) => c.id),
    [columnConfig]
  );

  const handleSort = (colId: string) => {
    if (!columnSortValues[colId]) return; // Not sortable
    setSortState((prev) => {
      let next: SortState;
      if (prev?.column === colId) {
        // Toggle direction, or clear on third click
        next = prev.direction === 'asc' ? { column: colId, direction: 'desc' } : null;
      } else {
        next = { column: colId, direction: 'asc' };
      }
      saveSortState(next);
      return next;
    });
    resetPage();
  };

  // Sort filtered spools
  const sortedSpools = useMemo(() => {
    if (!sortState) return filteredSpools;
    const extractor = columnSortValues[sortState.column];
    if (!extractor) return filteredSpools;
    const sorted = [...filteredSpools].sort((a, b) => {
      const va = extractor(a, assignmentMap);
      const vb = extractor(b, assignmentMap);
      if (va < vb) return sortState.direction === 'asc' ? -1 : 1;
      if (va > vb) return sortState.direction === 'asc' ? 1 : -1;
      return 0;
    });
    return sorted;
  }, [filteredSpools, sortState, assignmentMap]);

  // Group similar spools when toggle is active
  const displayItems = useMemo((): DisplayItem[] => {
    if (!groupSimilar) return sortedSpools.map((s) => ({ type: 'single' as const, spool: s }));

    const groups = new Map<string, InventorySpool[]>();

    for (const spool of sortedSpools) {
      // Only group unused & unassigned spools
      if (spool.weight_used > 0 || assignmentMap[spool.id]) {
        // Will be added as singles in the walk below
      } else {
        const key = spoolGroupKey(spool);
        const arr = groups.get(key);
        if (arr) arr.push(spool);
        else groups.set(key, [spool]);
      }
    }

    const items: DisplayItem[] = [];
    const processedKeys = new Set<string>();

    // Walk sortedSpools order so groups appear at the position of their first member
    for (const spool of sortedSpools) {
      if (spool.weight_used > 0 || assignmentMap[spool.id]) {
        items.push({ type: 'single', spool });
        continue;
      }
      const key = spoolGroupKey(spool);
      if (processedKeys.has(key)) continue;
      processedKeys.add(key);
      const members = groups.get(key)!;
      if (members.length === 1) {
        items.push({ type: 'single', spool: members[0] });
      } else {
        items.push({ type: 'group', key, spools: members, representative: members[0] });
      }
    }
    return items;
  }, [sortedSpools, groupSimilar, assignmentMap]);

  // Pagination (after sorting) — pageSize -1 means "All"
  const showAll = pageSize === -1;
  const totalDisplayItems = displayItems.length;
  const effectivePageSize = showAll ? totalDisplayItems || 1 : pageSize;
  const totalPages = Math.max(1, Math.ceil(totalDisplayItems / effectivePageSize));
  const safePageIndex = showAll ? 0 : Math.min(pageIndex, totalPages - 1);
  const pagedItems = showAll
    ? displayItems
    : displayItems.slice(safePageIndex * effectivePageSize, (safePageIndex + 1) * effectivePageSize);
  const toggleGroupSimilar = () => {
    const next = !groupSimilar;
    setGroupSimilar(next);
    setExpandedGroups(new Set());
    resetPage();
    try { localStorage.setItem('bambuddy-inventory-group', String(next)); } catch { /* ignore */ }
  };

  const toggleGroupExpand = (key: string) => {
    setExpandedGroups((prev) => {
      const next = new Set(prev);
      if (next.has(key)) next.delete(key);
      else next.add(key);
      return next;
    });
  };

  const handlePageSizeChange = (size: number) => {
    setPageSize(size);
    setPageIndex(0);
    try { localStorage.setItem('bambuddy-inventory-pageSize', String(size)); } catch { /* ignore */ }
  };

  const clearAllFilters = () => {
    setArchiveFilter('active');
    setUsageFilter('all');
    setMaterialFilter('');
    setBrandFilter('');
    setCategoryFilter('');
    setSpoolFilter('');
    setStorageLocationFilter('');
    setStockFilter('all');
    setSearch('');
    resetPage();
  };

  return (
    <div className="p-4 md:p-8 space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-white flex items-center gap-3">
            <Package className="w-7 h-7 text-bambu-green" />
            {t('inventory.title')}
          </h1>
          <p className="text-bambu-gray mt-1">{t('inventory.subtitle')}</p>
        </div>
        <div className="flex items-center gap-2">
          {/* CSV import/export (#1576). Operates on Bambuddy's local inventory.
              In Spoolman mode the buttons stay visible (feature parity) but are
              disabled with a hint pointing at Spoolman's own CSV export, since
              Spoolman owns the data store in that mode. */}
          <Button
            variant="secondary"
            disabled={spoolmanMode}
            onClick={() => setCsvImportOpen(true)}
            title={spoolmanCsvHint}
          >
            <Upload className="w-4 h-4" />
            {t('inventory.csv.importButton', 'Import CSV')}
          </Button>
          <Button
            variant="secondary"
            disabled={spoolmanMode || exportingCsv}
            onClick={handleExportCsv}
            title={spoolmanCsvHint}
          >
            {exportingCsv ? <Loader2 className="w-4 h-4 animate-spin" /> : <Download className="w-4 h-4" />}
            {t('inventory.csv.exportButton', 'Export CSV')}
          </Button>
          <Button
            variant="secondary"
            disabled={filteredSpools.length === 0}
            // Pre-select every visible spool so the user lands in "all
            // checked", then refines downward in the modal. Per-card icon
            // pre-selects only that spool — both flows share the same picker.
            onClick={() => setLabelPickerSpoolIds(filteredSpools.map((s) => s.id))}
            title={
              filteredSpools.length === 0
                ? t('inventory.labels.noSpoolsTitle', 'No spools to label')
                : t('inventory.labels.bulkTitle', 'Pick spools to print labels for from the {{count}} currently shown', { count: filteredSpools.length })
            }
          >
            <Printer className="w-4 h-4" />
            {t('inventory.labels.printLabels', 'Print labels…')}
          </Button>
          <Button onClick={() => setFormModal({ spool: null, mode: 'create' })}>
            <Plus className="w-4 h-4" />
            {t('inventory.addSpool')}
          </Button>
        </div>
      </div>

      {/* Stats Bar */}
      {stats && !isLoading && (
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3">
          {/* Total Inventory */}
          <div className="bg-bambu-dark-secondary rounded-lg p-4">
            <div className="flex items-center gap-2 mb-1">
              <Package className="w-4 h-4 text-bambu-green" />
              <span className="text-xs text-bambu-gray font-medium uppercase tracking-wide">{t('inventory.totalInventory')}</span>
            </div>
            <div className="text-xl font-bold text-white">{formatWeight(stats.totalWeight, true)}</div>
            <div className="text-xs text-bambu-gray mt-1">{stats.totalSpools} {stats.totalSpools !== 1 ? t('inventory.spools') : t('inventory.spool')}</div>
          </div>

          {/* Total Consumed */}
          <div className="bg-bambu-dark-secondary rounded-lg p-4">
            <div className="flex items-center justify-between gap-2 mb-1">
              <div className="flex items-center gap-2">
                <TrendingDown className="w-4 h-4 text-blue-400" />
                <span className="text-xs text-bambu-gray font-medium uppercase tracking-wide">{t('inventory.totalConsumed')}</span>
              </div>
              {stats.totalConsumed > 0 && resetableSpoolIds.length > 0 && (
                <button
                  onClick={() => setConfirmAction({ type: 'reset-all-consumed-counters' })}
                  className="p-1 text-bambu-gray hover:text-red-400 rounded transition-colors"
                  title={t('inventory.resetAllConsumedCountersTooltip')}
                  aria-label={t('inventory.resetAllConsumedCounters')}
                >
                  <Eraser className="w-3.5 h-3.5" />
                </button>
              )}
            </div>
            <div className="text-xl font-bold text-white">{formatWeight(stats.totalConsumed, true)}</div>
            <div className="text-xs text-bambu-gray mt-1">{t('inventory.sinceTracking')}</div>
          </div>

          {/* By Material */}
          <div className="bg-bambu-dark-secondary rounded-lg p-4">
            <div className="flex items-center gap-2 mb-1">
              <Layers className="w-4 h-4 text-green-400" />
              <span className="text-xs text-bambu-gray font-medium uppercase tracking-wide">{t('inventory.byMaterial')}</span>
            </div>
            <div className="flex flex-wrap gap-1.5 mt-1">
              {topMaterials.map(([mat, data]) => (
                <span
                  key={mat}
                  className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium ${MATERIAL_COLORS[mat] || 'bg-bambu-dark-tertiary text-bambu-gray'}`}
                >
                  {mat} <span className="opacity-70">{formatWeight(data.weight, true)}</span>
                </span>
              ))}
            </div>
          </div>

          {/* In Printer */}
          <div className="bg-bambu-dark-secondary rounded-lg p-4">
            <div className="flex items-center gap-2 mb-1">
              <Printer className="w-4 h-4 text-purple-400" />
              <span className="text-xs text-bambu-gray font-medium uppercase tracking-wide">{t('inventory.inPrinter')}</span>
            </div>
            <div className="text-xl font-bold text-white">{inPrinterCount}</div>
            <div className="text-xs text-bambu-gray mt-1">{t('inventory.loadedInAms')}</div>
          </div>

          {/* Low Stock */}
          <div className="bg-bambu-dark-secondary rounded-lg p-4">
            <div className="flex items-center gap-2 mb-1">
              <AlertTriangle className="w-4 h-4 text-yellow-400" />
              <span className="text-xs text-bambu-gray font-medium uppercase tracking-wide">{t('inventory.lowStock')}</span>
            </div>
            <div className={`text-xl font-bold ${stats.lowStock > 0 ? 'text-yellow-400' : 'text-white'}`}>{stats.lowStock}</div>
            <div className="text-xs text-bambu-gray mt-1 flex items-center gap-2">
              {showThresholdInput ? (
                <form
                  onSubmit={e => {
                    e.preventDefault();
                    const val = parseFloat(thresholdInput);
                    if (!isNaN(val) && val >= 0.1 && val <= 99.9) {
                      updateThresholdMutation.mutate(val);
                    } else {
                      showToast(t('inventory.lowStockThresholdError'), 'error');
                    }
                  }}
                  className="flex items-center gap-2"
                >
                  <span className="text-xs text-bambu-gray">{'<'}</span>
                  <input
                    type="text"
                    inputMode="decimal"
                    pattern="^\d{0,2}(\.\d?)?$"
                    maxLength={4}
                    value={thresholdInput}
                    onChange={e => {
                      // Only allow up to 2 digits before decimal and 1 after
                      const val = e.target.value.replace(/[^\d.]/g, '');
                      if (/^\d{0,2}(\.\d?)?$/.test(val)) {
                        setThresholdInput(val);
                      }
                    }}
                    className="px-1.5 py-1 rounded border border-bambu-dark-tertiary text-xs text-white bg-bambu-dark-secondary focus:outline-none focus:border-bambu-green w-14 text-center"
                    onWheel={e => e.currentTarget.blur()}
                    disabled={updateThresholdMutation.isPending}
                  />

                  <span className="text-xs text-bambu-gray">%</span>
                  <Button type="submit" size="sm" disabled={updateThresholdMutation.isPending}>{t('common.save')}</Button>
                  <Button type="button" size="sm" variant="ghost" onClick={() => setShowThresholdInput(false)} disabled={updateThresholdMutation.isPending}>{t('common.cancel')}</Button>
                </form>
              ) : (
                <>
                  <span className="text-bambu-gray">{'< '}{lowStockThreshold}%</span>
                  <button
                    className="p-1.5 text-bambu-gray hover:text-white rounded transition-colors"
                    title={t('common.edit')}
                    onClick={() => {
                      setThresholdInput(lowStockThreshold.toString());
                      setShowThresholdInput(true);
                    }}
                  >
                    <Edit2 className="w-4 h-4" />
                  </button>
                </>
              )}
            </div>
          </div>
        </div>
      )}

      {/* Toolbar: Search + View toggle */}
      <div className="flex flex-col sm:flex-row gap-3 items-start sm:items-center justify-between">
        <div className={`relative flex-1 max-w-md ${viewMode === 'forecast' ? 'invisible pointer-events-none' : ''}`}>
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-bambu-gray/50" />
          <input
            type="text"
            value={search}
            onChange={(e) => { setSearch(e.target.value); resetPage(); }}
            placeholder={t('inventory.search')}
            className="w-full pl-10 pr-8 py-2 bg-bambu-dark-secondary border border-bambu-dark-tertiary rounded-lg text-white text-sm placeholder:text-bambu-gray/50 focus:outline-none focus:border-bambu-green"
          />
          {search && (
            <button
              onClick={() => { setSearch(''); resetPage(); }}
              className="absolute right-3 top-1/2 -translate-y-1/2 text-bambu-gray hover:text-white"
            >
              <X className="w-4 h-4" />
            </button>
          )}
        </div>

        <div className="flex items-center gap-2">
          {/* Columns button (table view only) */}
          {viewMode === 'table' && (
            <button
              onClick={() => setShowColumnModal(true)}
              className="flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-bambu-gray border border-bambu-dark-tertiary rounded-lg hover:bg-bambu-dark-tertiary transition-colors"
              title={t('inventory.configureColumns')}
            >
              <Columns className="w-4 h-4" />
              <span className="hidden sm:inline">{t('inventory.columns')}</span>
            </button>
          )}
          {/* Group similar toggle — hidden in forecast mode */}
          {viewMode !== 'forecast' && (
            <button
              onClick={toggleGroupSimilar}
              className={`flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium border rounded-lg transition-colors ${
                groupSimilar
                  ? 'bg-bambu-green/20 text-bambu-green border-bambu-green/30'
                  : 'text-bambu-gray border-bambu-dark-tertiary hover:bg-bambu-dark-tertiary'
              }`}
              title={t('inventory.groupSimilar')}
            >
              <Group className="w-4 h-4" />
              <span className="hidden sm:inline">{t('inventory.groupSimilar')}</span>
            </button>
          )}
          {/* Table / Cards toggle */}
          <div className="flex bg-bambu-dark-primary border border-bambu-dark-tertiary rounded-lg overflow-hidden">
            <button
              onClick={() => setViewMode('table')}
              className={`flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium transition-colors ${
                viewMode === 'table'
                  ? 'bg-bambu-green text-white'
                  : 'text-bambu-gray hover:bg-bambu-dark-tertiary'
              }`}
            >
              <TableProperties className="w-4 h-4" />
              <span className="hidden sm:inline">{t('inventory.table')}</span>
            </button>
            <button
              onClick={() => setViewMode('cards')}
              className={`flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium transition-colors ${
                viewMode === 'cards'
                  ? 'bg-bambu-green text-white'
                  : 'text-bambu-gray hover:bg-bambu-dark-tertiary'
              }`}
            >
              <LayoutGrid className="w-4 h-4" />
              <span className="hidden sm:inline">{t('inventory.cards')}</span>
            </button>
            <button
              onClick={() => canViewForecast && setViewMode('forecast')}
              disabled={!canViewForecast}
              title={canViewForecast ? undefined : t('forecast.noReadAccess')}
              className={`flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium transition-colors disabled:opacity-40 disabled:cursor-not-allowed ${
                viewMode === 'forecast'
                  ? 'bg-bambu-green text-white'
                  : 'text-bambu-gray hover:bg-bambu-dark-tertiary'
              }`}
            >
              {canViewForecast ? <TrendingUp className="w-4 h-4" /> : <Lock className="w-4 h-4" />}
              <span className="hidden sm:inline">{t('forecast.title')}</span>
            </button>
          </div>
        </div>
      </div>

      {/* Filter chips row — hidden in forecast mode */}
      <div className={`flex flex-wrap items-center gap-2 ${viewMode === 'forecast' ? 'hidden' : ''}`}>
        {/* Active / Archived chips */}
        <div className="flex items-center rounded-lg border border-bambu-dark-tertiary overflow-hidden">
          <button
            onClick={() => { setArchiveFilter('active'); resetPage(); }}
            className={`flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium transition-colors ${
              archiveFilter === 'active'
                ? 'bg-bambu-green/20 text-bambu-green'
                : 'text-bambu-gray hover:bg-bambu-dark-tertiary'
            }`}
          >
            <Package className="w-3.5 h-3.5" />
            {t('inventory.active')}
          </button>
          <button
            onClick={() => { setArchiveFilter('archived'); resetPage(); }}
            className={`flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium transition-colors ${
              archiveFilter === 'archived'
                ? 'bg-bambu-green/20 text-bambu-green'
                : 'text-bambu-gray hover:bg-bambu-dark-tertiary'
            }`}
          >
            <Archive className="w-3.5 h-3.5" />
            {t('inventory.archived')}
          </button>
        </div>

        <div className="w-px h-5 bg-bambu-dark-tertiary" />

        {/* All / Used / New chips */}
        <div className="flex items-center rounded-lg border border-bambu-dark-tertiary overflow-hidden">
          <button
            onClick={() => { setUsageFilter('all'); resetPage(); }}
            className={`px-3 py-1.5 text-xs font-medium transition-colors ${
              usageFilter === 'all'
                ? 'bg-bambu-green/20 text-bambu-green'
                : 'text-bambu-gray hover:bg-bambu-dark-tertiary'
            }`}
          >
            {t('inventory.all')}
          </button>
          <button
            onClick={() => { setUsageFilter('used'); resetPage(); }}
            className={`flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium transition-colors ${
              usageFilter === 'used'
                ? 'bg-bambu-green/20 text-bambu-green'
                : 'text-bambu-gray hover:bg-bambu-dark-tertiary'
            }`}
          >
            <Clock className="w-3.5 h-3.5" />
            {t('inventory.used')}
          </button>
          <button
            onClick={() => { setUsageFilter('new'); resetPage(); }}
            className={`px-3 py-1.5 text-xs font-medium transition-colors ${
              usageFilter === 'new'
                ? 'bg-bambu-green/20 text-bambu-green'
                : 'text-bambu-gray hover:bg-bambu-dark-tertiary'
            }`}
          >
            {t('inventory.new')}
          </button>
          <button
            onClick={() => { setUsageFilter('lowstock'); resetPage(); }}
            className={`flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium transition-colors ${
              usageFilter === 'lowstock'
                ? 'bg-yellow-500/20 text-yellow-400'
                : 'text-bambu-gray hover:bg-bambu-dark-tertiary'
            }`}
          >
            <AlertTriangle className="w-3.5 h-3.5" />
            {t('inventory.lowStock')}
          </button>
        </div>

        {/* Stock filter chips */}
        <div className="flex items-center rounded-lg border border-bambu-dark-tertiary overflow-hidden">
          <button
            onClick={() => { setStockFilter('all'); resetPage(); }}
            className={`px-3 py-1.5 text-xs font-medium transition-colors ${
              stockFilter === 'all'
                ? 'bg-bambu-green/20 text-bambu-green'
                : 'text-bambu-gray hover:bg-bambu-dark-tertiary'
            }`}
          >
            {t('inventory.all')}
          </button>
          <button
            onClick={() => { setStockFilter('stock'); resetPage(); }}
            className={`px-3 py-1.5 text-xs font-medium transition-colors ${
              stockFilter === 'stock'
                ? 'bg-amber-500/20 text-amber-400'
                : 'text-bambu-gray hover:bg-bambu-dark-tertiary'
            }`}
          >
            {t('inventory.stock')}
          </button>
          <button
            onClick={() => { setStockFilter('configured'); resetPage(); }}
            className={`px-3 py-1.5 text-xs font-medium transition-colors ${
              stockFilter === 'configured'
                ? 'bg-bambu-green/20 text-bambu-green'
                : 'text-bambu-gray hover:bg-bambu-dark-tertiary'
            }`}
          >
            {t('inventory.configured')}
          </button>
        </div>

        <div className="w-px h-5 bg-bambu-dark-tertiary" />

        {/* Material dropdown chip */}
        <select
          value={materialFilter}
          onChange={(e) => { setMaterialFilter(e.target.value); resetPage(); }}
          className={`px-3 py-1.5 rounded-lg border text-xs font-medium transition-colors cursor-pointer focus:outline-none ${
            materialFilter
              ? 'bg-bambu-green/20 text-bambu-green border-bambu-green/30'
              : 'bg-transparent text-bambu-gray border-bambu-dark-tertiary hover:bg-bambu-dark-tertiary'
          }`}
        >
          <option value="">{t('inventory.material')}</option>
          {uniqueMaterials.map((m) => (
            <option key={m} value={m}>{m}</option>
          ))}
        </select>

        {/* Brand dropdown chip */}
        <select
          value={brandFilter}
          onChange={(e) => { setBrandFilter(e.target.value); resetPage(); }}
          className={`px-3 py-1.5 rounded-lg border text-xs font-medium transition-colors cursor-pointer focus:outline-none ${
            brandFilter
              ? 'bg-bambu-green/20 text-bambu-green border-bambu-green/30'
              : 'bg-transparent text-bambu-gray border-bambu-dark-tertiary hover:bg-bambu-dark-tertiary'
          }`}
        >
          <option value="">{t('inventory.brand')}</option>
          {uniqueBrands.map((b) => (
            <option key={b} value={b}>{b}</option>
          ))}
        </select>

        {/* Category dropdown chip (#729) — only render once at least one
            spool carries a category, otherwise it's noise. */}
        {(uniqueCategories.length > 0 || categoryFilter) && (
          <select
            value={categoryFilter}
            onChange={(e) => { setCategoryFilter(e.target.value); resetPage(); }}
            className={`px-3 py-1.5 rounded-lg border text-xs font-medium transition-colors cursor-pointer focus:outline-none ${
              categoryFilter
                ? 'bg-bambu-green/20 text-bambu-green border-bambu-green/30'
                : 'bg-transparent text-bambu-gray border-bambu-dark-tertiary hover:bg-bambu-dark-tertiary'
            }`}
          >
            <option value="">{t('inventory.category')}</option>
            {uniqueCategories.map((c) => (
              <option key={c} value={c}>{c}</option>
            ))}
            {hasUncategorized && (
              <option value="__none__">{t('inventory.categoryNone')}</option>
            )}
          </select>
        )}

        {/* Spool name dropdown chip */}
        {uniqueSpoolCatalogIds.length > 0 && (
          <select
            value={spoolFilter}
            onChange={(e) => { setSpoolFilter(e.target.value); resetPage(); }}
            className={`px-3 py-1.5 rounded-lg border text-xs font-medium transition-colors cursor-pointer focus:outline-none ${
              spoolFilter
                ? 'bg-bambu-green/20 text-bambu-green border-bambu-green/30'
                : 'bg-transparent text-bambu-gray border-bambu-dark-tertiary hover:bg-bambu-dark-tertiary'
            }`}
          >
            <option value="">{t('inventory.spoolName')}</option>
            {uniqueSpoolCatalogIds.map((id) => (
              <option key={id} value={id}>{catalogMap[id]?.name || `#${id}`}</option>
            ))}
          </select>
        )}

        {/* Storage location dropdown chip (#1400) — only render when at
            least one spool carries a storage location, otherwise it's noise
            (matches the category chip pattern). */}
        {(uniqueStorageLocations.length > 0 || storageLocationFilter) && (
          <select
            value={storageLocationFilter}
            onChange={(e) => { setStorageLocationFilter(e.target.value); resetPage(); }}
            className={`px-3 py-1.5 rounded-lg border text-xs font-medium transition-colors cursor-pointer focus:outline-none ${
              storageLocationFilter
                ? 'bg-bambu-green/20 text-bambu-green border-bambu-green/30'
                : 'bg-transparent text-bambu-gray border-bambu-dark-tertiary hover:bg-bambu-dark-tertiary'
            }`}
          >
            <option value="">{t('inventory.storageLocation')}</option>
            {uniqueStorageLocations.map((loc) => (
              <option key={loc} value={loc}>{loc}</option>
            ))}
            {hasUnsetStorageLocation && (
              <option value="__none__">{t('inventory.storageLocationNone')}</option>
            )}
          </select>
        )}

        {/* Clear filters */}
        {hasActiveFilters && (
          <>
            <div className="w-px h-5 bg-bambu-dark-tertiary" />
            <button
              onClick={clearAllFilters}
              className="flex items-center gap-1 text-xs text-bambu-gray hover:text-bambu-green transition-colors"
            >
              <X className="w-3.5 h-3.5" />
              {t('inventory.clearFilters')}
            </button>
          </>
        )}

        {/* Results count — hidden in forecast mode */}
        {viewMode !== 'forecast' && (
          <span className="ml-auto text-xs text-bambu-gray">
            {sortedSpools.length} {sortedSpools.length !== 1 ? t('inventory.spools') : t('inventory.spool')}
            {groupSimilar && totalDisplayItems < sortedSpools.length && ` (${totalDisplayItems} ${t('inventory.groupedRows')})`}
          </span>
        )}
      </div>

      {/* Content */}
      {isLoading ? (
        <div className="flex justify-center py-16">
          <Loader2 className="w-8 h-8 text-bambu-green animate-spin" />
        </div>
      ) : viewMode === 'forecast' ? (
        /* Forecast view */
        <ForecastPanel spools={spools || []} />
      ) : viewMode === 'cards' ? (
        /* Cards view */
        pagedItems.length > 0 ? (
          <>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
              {pagedItems.map((item) => {
                if (item.type === 'group') {
                  const { key, spools: groupSpools, representative: rep } = item;
                  // Total remaining filament across the group (#1368) — the
                  // headline number for the collapsed card, vs one member's.
                  const groupRemaining = groupSpools.reduce(
                    (sum, s) => sum + Math.max(0, s.label_weight - s.weight_used),
                    0,
                  );
                  const groupBannerStyle = buildFilamentBackground({
                    rgba: rep.rgba,
                    extraColors: rep.extra_colors,
                    effectType: rep.effect_type,
                    subtype: rep.subtype,
                    effectSize: 'groupheader',
                  });
                  const isExpanded = expandedGroups.has(key);
                  return (
                    <div key={`group-${key}`} className="col-span-full">
                      {/* Group header card */}
                      <div
                        className="bg-bambu-dark-secondary rounded-lg overflow-hidden border border-bambu-green/30 hover:border-bambu-green transition-colors cursor-pointer"
                        onClick={() => toggleGroupExpand(key)}
                      >
                        <div className="h-10 flex items-center px-4 gap-3" style={groupBannerStyle}>
                          <span className="bg-white/90 text-gray-800 px-3 py-0.5 rounded-full text-sm font-medium">
                            {resolveSpoolColorName(rep.color_name, rep.rgba) || '-'}
                          </span>
                        </div>
                        <div className="px-4 py-3 flex items-center justify-between">
                          <div className="flex items-center gap-3">
                            <ChevronDown className={`w-4 h-4 text-bambu-gray transition-transform ${isExpanded ? '' : '-rotate-90'}`} />
                            <div>
                              <h3 className="font-semibold text-white">{rep.material}{rep.subtype ? ` ${rep.subtype}` : ''}</h3>
                              <p className="text-sm text-bambu-gray">{rep.brand || '-'}</p>
                            </div>
                          </div>
                          <div className="flex items-center gap-2">
                            <span className="text-sm text-bambu-gray" title={t('inventory.remaining')}>
                              {formatWeight(groupRemaining)}
                            </span>
                            <span className="text-xs font-medium bg-bambu-green/20 text-bambu-green px-2 py-0.5 rounded-full">
                              {t('inventory.groupedSpools', { count: groupSpools.length })}
                            </span>
                          </div>
                        </div>
                      </div>
                      {/* Expanded individual spools */}
                      {isExpanded && (
                        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 mt-2 ml-4">
                          {groupSpools.map((spool) => {
                            const remaining = Math.max(0, spool.label_weight - spool.weight_used);
                            const pct = spool.label_weight > 0 ? (remaining / spool.label_weight) * 100 : 0;
                            return (
                              <SpoolCard
                                key={spool.id}
                                spool={spool}
                                remaining={remaining}
                                pct={pct}
                                onClick={() => setFormModal({ spool, mode: 'edit' })}
                                onPrintLabel={() => setLabelPickerSpoolIds([spool.id])}
                                onCopy={() => setFormModal({ spool: spool, mode: 'copy' })}
                                t={t}
                              />
                            );
                          })}
                        </div>
                      )}
                    </div>
                  );
                }
                const spool = item.spool;
                const remaining = Math.max(0, spool.label_weight - spool.weight_used);
                const pct = spool.label_weight > 0 ? (remaining / spool.label_weight) * 100 : 0;
                return (
                  <SpoolCard
                    key={spool.id}
                    spool={spool}
                    remaining={remaining}
                    pct={pct}
                    onClick={() => setFormModal({ spool, mode: 'edit' })}
                    onPrintLabel={() => setLabelPickerSpoolIds([spool.id])}
                    onCopy={() => setFormModal({ spool: spool, mode: 'copy' })}
                    t={t}
                  />
                );
              })}
            </div>
            {/* Pagination for cards */}
            <PaginationBar
              pageIndex={safePageIndex}
              pageSize={pageSize}
              totalRows={totalDisplayItems}
              totalPages={totalPages}
              onPageChange={setPageIndex}
              onPageSizeChange={handlePageSizeChange}
              t={t}
            />
          </>
        ) : (
          <EmptyFilterState
            hasFilters={hasActiveFilters}
            onAddSpool={() => setFormModal({ spool: null, mode: 'create' })}
            t={t}
          />
        )
      ) : (
        /* Table view */
        pagedItems.length > 0 ? (
          <div className="bg-bambu-dark-secondary rounded-lg overflow-hidden border border-bambu-dark-tertiary">
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead>
                  <tr className="border-b border-bambu-dark-tertiary bg-bambu-dark-tertiary/30">
                    {visibleColumns.map((colId) => {
                      const sortable = !!columnSortValues[colId];
                      const isActive = sortState?.column === colId;
                      return (
                        <th
                          key={colId}
                          className={`text-left py-3 px-4 text-xs font-medium uppercase tracking-wide select-none ${colId === 'remaining' ? 'min-w-[150px]' : ''} ${
                            sortable ? 'cursor-pointer hover:text-bambu-green transition-colors' : ''
                          } ${isActive ? 'text-bambu-green' : 'text-bambu-gray'}`}
                          onClick={sortable ? () => handleSort(colId) : undefined}
                        >
                          <span className="inline-flex items-center gap-1">
                            {columnHeaders[colId]?.(t) ?? colId}
                            {sortable && (
                              isActive
                                ? sortState.direction === 'asc'
                                  ? <ArrowUp className="w-3 h-3" />
                                  : <ArrowDown className="w-3 h-3" />
                                : <ArrowUpDown className="w-3 h-3 opacity-30" />
                            )}
                          </span>
                        </th>
                      );
                    })}
                    <th className="text-right py-3 px-4 text-xs font-medium text-bambu-gray uppercase tracking-wide">{t('common.actions')}</th>
                  </tr>
                </thead>
                <tbody>
                  {pagedItems.map((item) => {
                    if (item.type === 'group') {
                      const { key, spools: groupSpools } = item;
                      const isExpanded = expandedGroups.has(key);
                      // Header row shows group totals (#1368): an aggregate
                      // spool plus remaining / pct summed across all members.
                      const headerSpool = aggregateGroupSpool(groupSpools);
                      const remaining = Math.max(0, headerSpool.label_weight - headerSpool.weight_used);
                      const pct = headerSpool.label_weight > 0 ? (remaining / headerSpool.label_weight) * 100 : 0;
                      return (
                        <SpoolTableGroup
                          key={`group-${key}`}
                          spools={groupSpools}
                          headerSpool={headerSpool}
                          remaining={remaining}
                          pct={pct}
                          isExpanded={isExpanded}
                          onToggle={() => toggleGroupExpand(key)}
                          onEdit={(s) => setFormModal({ spool: s, mode: 'edit' })}
                          onCopy={(s) => setFormModal({ spool: s, mode: 'copy' })}
                          onArchive={(id) => setConfirmAction({ type: 'archive', spoolId: id })}
                          onDelete={(id) => setConfirmAction({ type: 'delete', spoolId: id })}
                          onPrintLabel={(id) => setLabelPickerSpoolIds([id])}
                          onResetConsumedCounter={(id) => setConfirmAction({ type: 'reset-consumed-counter', spoolId: id })}
                          visibleColumns={visibleColumns}
                          assignmentMap={assignmentMap}
                          catalogMap={catalogMap}
                          currencySymbol={currencySymbol}
                          dateFormat={dateFormat}
                          t={t}
                          onSyncWeight={handleSyncWeight}
                        />
                      );
                    }
                    const spool = item.spool;
                    const remaining = Math.max(0, spool.label_weight - spool.weight_used);
                    const pct = spool.label_weight > 0 ? (remaining / spool.label_weight) * 100 : 0;
                    return (
                      <SpoolTableRow
                        key={spool.id}
                        spool={spool}
                        remaining={remaining}
                        pct={pct}
                        onEdit={() => setFormModal({ spool, mode: 'edit' })}
                        onCopy={() => setFormModal({ spool: spool, mode: 'copy' })}
                        onRestore={() => restoreMutation.mutate(spool.id)}
                        onArchive={() => setConfirmAction({ type: 'archive', spoolId: spool.id })}
                        onDelete={() => setConfirmAction({ type: 'delete', spoolId: spool.id })}
                        onPrintLabel={() => setLabelPickerSpoolIds([spool.id])}
                        onResetConsumedCounter={() => setConfirmAction({ type: 'reset-consumed-counter', spoolId: spool.id })}
                        visibleColumns={visibleColumns}
                        assignmentMap={assignmentMap}
                        catalogMap={catalogMap}
                        currencySymbol={currencySymbol}
                        dateFormat={dateFormat}
                        t={t}
                        onSyncWeight={handleSyncWeight}
                      />
                    );
                  })}
                </tbody>
              </table>
            </div>

            {/* Pagination inside card footer */}
            <div className="flex items-center justify-between px-4 py-3 bg-bambu-dark-tertiary/50 border-t border-bambu-dark-tertiary text-sm">
              <span className="text-bambu-gray">
                {showAll
                  ? `${totalDisplayItems} ${totalDisplayItems !== 1 ? t('inventory.spools') : t('inventory.spool')}`
                  : <>{t('inventory.showing')} {safePageIndex * effectivePageSize + 1} {t('inventory.to')}{' '}
                    {Math.min((safePageIndex + 1) * effectivePageSize, totalDisplayItems)}{' '}
                    {t('inventory.of')} {totalDisplayItems} {t('inventory.spools')}</>
                }
              </span>

              <div className="flex items-center gap-2">
                <span className="text-bambu-gray">{t('inventory.show')}</span>
                <select
                  value={pageSize}
                  onChange={(e) => handlePageSizeChange(Number(e.target.value))}
                  className="px-2 py-1 bg-bambu-dark-secondary border border-bambu-dark-tertiary rounded text-white text-sm focus:outline-none focus:border-bambu-green"
                >
                  {[15, 30, 50, 100].map((n) => (
                    <option key={n} value={n}>{n}</option>
                  ))}
                  <option value={-1}>{t('inventory.all')}</option>
                </select>

                {!showAll && (
                  <>
                    <button
                      onClick={() => setPageIndex(0)}
                      disabled={safePageIndex === 0}
                      className="p-1.5 rounded text-bambu-gray hover:text-white disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
                      title="First page"
                    >
                      <ChevronsLeft className="w-4 h-4" />
                    </button>
                    <button
                      onClick={() => setPageIndex((p) => Math.max(0, p - 1))}
                      disabled={safePageIndex === 0}
                      className="p-1.5 rounded text-bambu-gray hover:text-white disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
                    >
                      <ChevronLeft className="w-4 h-4" />
                    </button>
                    <span className="text-bambu-gray px-2 whitespace-nowrap">
                      {t('inventory.page')} {safePageIndex + 1} {t('inventory.of')} {totalPages}
                    </span>
                    <button
                      onClick={() => setPageIndex((p) => Math.min(totalPages - 1, p + 1))}
                      disabled={safePageIndex >= totalPages - 1}
                      className="p-1.5 rounded text-bambu-gray hover:text-white disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
                    >
                      <ChevronRight className="w-4 h-4" />
                    </button>
                    <button
                      onClick={() => setPageIndex(totalPages - 1)}
                      disabled={safePageIndex >= totalPages - 1}
                      className="p-1.5 rounded text-bambu-gray hover:text-white disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
                      title="Last page"
                    >
                      <ChevronsRight className="w-4 h-4" />
                    </button>
                  </>
                )}
              </div>
            </div>
          </div>
        ) : (
          <EmptyFilterState
            hasFilters={hasActiveFilters}
            onAddSpool={() => setFormModal({ spool: null, mode: 'create' })}
            t={t}
          />
        )
      )}

      {/* Spool Form Modal */}
      {formModal !== null && (
        <SpoolFormModal
          isOpen={true}
          onClose={() => setFormModal(null)}
          spool={formModal.spool}
          mode={formModal.mode}
          currencySymbol={currencySymbol}
          spoolmanMode={spoolmanMode}
          spoolsQueryKey={spoolsQueryKey}
        />
      )}

      {/* Confirm Modal (delete / archive / reset-consumed-counter / reset-all-consumed-counters) */}
      {confirmAction && (
        <ConfirmModal
          title={
            confirmAction.type === 'delete' ? t('common.delete') :
            confirmAction.type === 'archive' ? t('inventory.archive') :
            confirmAction.type === 'reset-consumed-counter' ? t('inventory.resetConsumedCounter') :
            t('inventory.resetAllConsumedCounters')
          }
          message={
            confirmAction.type === 'delete' ? t('inventory.deleteConfirm') :
            confirmAction.type === 'archive' ? t('inventory.archiveConfirm') :
            confirmAction.type === 'reset-consumed-counter' ? t('inventory.resetConsumedCounterConfirm') :
            t('inventory.resetAllConsumedCountersConfirm', { count: resetableSpoolIds.length })
          }
          confirmText={
            confirmAction.type === 'delete' ? t('common.delete') :
            confirmAction.type === 'archive' ? t('inventory.archive') :
            t('inventory.resetConsumedCounter')
          }
          variant={confirmAction.type === 'archive' ? 'warning' : 'danger'}
          onConfirm={() => {
            if (confirmAction.type === 'delete') {
              deleteMutation.mutate(confirmAction.spoolId);
            } else if (confirmAction.type === 'archive') {
              archiveMutation.mutate(confirmAction.spoolId);
            } else if (confirmAction.type === 'reset-consumed-counter') {
              resetConsumedCounterMutation.mutate(confirmAction.spoolId);
            } else {
              bulkResetConsumedCounterMutation.mutate(resetableSpoolIds);
            }
            setConfirmAction(null);
          }}
          onCancel={() => setConfirmAction(null)}
        />
      )}

      {/* Column Config Modal */}
      <ColumnConfigModal
        isOpen={showColumnModal}
        onClose={() => setShowColumnModal(false)}
        columns={columnConfig}
        defaultColumns={DEFAULT_COLUMNS}
        onSave={handleColumnConfigSave}
      />

      <LabelTemplatePickerModal
        isOpen={labelPickerSpoolIds !== null}
        onClose={() => setLabelPickerSpoolIds(null)}
        availableSpools={filteredSpools}
        initialSelectedIds={labelPickerSpoolIds ?? []}
        spoolmanMode={spoolmanMode}
      />

      {csvImportOpen && (
        <SpoolCsvImportModal
          onClose={() => setCsvImportOpen(false)}
          onImported={(created) => {
            setCsvImportOpen(false);
            queryClient.invalidateQueries({ queryKey: spoolsQueryKey });
            showToast(t('inventory.csv.importSuccess', '{{count}} spools imported', { count: created }), 'success');
          }}
        />
      )}
    </div>
  );
}

/* Pagination bar (reused for cards view) */
function PaginationBar({
  pageIndex, pageSize, totalRows, totalPages, onPageChange, onPageSizeChange, t,
}: {
  pageIndex: number;
  pageSize: number;
  totalRows: number;
  totalPages: number;
  onPageChange: (page: number) => void;
  onPageSizeChange: (size: number) => void;
  t: (key: string) => string;
}) {
  const isShowAll = pageSize === -1;
  if (totalPages <= 1 && !isShowAll) return null;
  const effectiveSize = isShowAll ? totalRows || 1 : pageSize;
  return (
    <div className="flex items-center justify-between pt-2 text-sm">
      <span className="text-bambu-gray">
        {isShowAll
          ? `${totalRows} ${totalRows !== 1 ? t('inventory.spools') : t('inventory.spool')}`
          : <>{t('inventory.showing')} {pageIndex * effectiveSize + 1} {t('inventory.to')}{' '}
              {Math.min((pageIndex + 1) * effectiveSize, totalRows)}{' '}
              {t('inventory.of')} {totalRows} {t('inventory.spools')}</>
        }
      </span>
      <div className="flex items-center gap-2">
        <span className="text-bambu-gray">{t('inventory.show')}</span>
        <select
          value={pageSize}
          onChange={(e) => onPageSizeChange(Number(e.target.value))}
          className="px-2 py-1 bg-bambu-dark-secondary border border-bambu-dark-tertiary rounded text-white text-sm focus:outline-none focus:border-bambu-green"
        >
          {[15, 30, 50, 100].map((n) => (
            <option key={n} value={n}>{n}</option>
          ))}
          <option value={-1}>{t('inventory.all')}</option>
        </select>
        {!isShowAll && (
          <>
            <button
              onClick={() => onPageChange(0)}
              disabled={pageIndex === 0}
              className="p-1.5 rounded text-bambu-gray hover:text-white disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
            >
              <ChevronsLeft className="w-4 h-4" />
            </button>
            <button
              onClick={() => onPageChange(Math.max(0, pageIndex - 1))}
              disabled={pageIndex === 0}
              className="p-1.5 rounded text-bambu-gray hover:text-white disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
            >
              <ChevronLeft className="w-4 h-4" />
            </button>
            <span className="text-bambu-gray px-2 whitespace-nowrap">
              {t('inventory.page')} {pageIndex + 1} {t('inventory.of')} {totalPages}
            </span>
            <button
              onClick={() => onPageChange(Math.min(totalPages - 1, pageIndex + 1))}
              disabled={pageIndex >= totalPages - 1}
              className="p-1.5 rounded text-bambu-gray hover:text-white disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
            >
              <ChevronRight className="w-4 h-4" />
            </button>
            <button
              onClick={() => onPageChange(totalPages - 1)}
              disabled={pageIndex >= totalPages - 1}
              className="p-1.5 rounded text-bambu-gray hover:text-white disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
            >
              <ChevronsRight className="w-4 h-4" />
            </button>
          </>
        )}
      </div>
    </div>
  );
}

/* Spool card for cards view */
function SpoolCard({
  spool, remaining, pct, onClick, onPrintLabel, onCopy, t,
}: {
  spool: InventorySpool;
  remaining: number;
  pct: number;
  onClick: () => void;
  onPrintLabel?: () => void;
  onCopy?: () => void;
  t: (key: string, opts?: Record<string, unknown>) => string;
}) {
  const bannerStyle = buildFilamentBackground({
    rgba: spool.rgba,
    extraColors: spool.extra_colors,
    effectType: spool.effect_type,
    subtype: spool.subtype,
    effectSize: 'card',
  });
  return (
    <div
      className={`bg-bambu-dark-secondary rounded-lg overflow-hidden border border-bambu-dark-tertiary hover:border-bambu-green transition-colors cursor-pointer ${spool.archived_at ? 'opacity-50' : ''}`}
      onClick={onClick}
    >
      <div className="h-14 flex items-center justify-center" style={bannerStyle}>
        <span className="bg-white/90 text-gray-800 px-3 py-0.5 rounded-full text-sm font-medium">
          {resolveSpoolColorName(spool.color_name, spool.rgba) || '-'}
        </span>
        {onCopy && (
          <button
            type="button"
            onClick={(e) => { e.stopPropagation(); onCopy(); }}
            className="p-1.5 bg-black/20 hover:bg-black/40 text-white rounded-full transition-colors"
            title={t('inventory.copySpool')}
          >
            <Copy className="w-3.5 h-3.5" />
          </button>
        )}
      </div>
      <div className="p-4 space-y-3">
        <div className="flex items-start justify-between gap-2">
          <div>
            <h3 className="font-semibold text-white">
              {spool.material}{spool.subtype ? ` ${spool.subtype}` : ''}
            </h3>
            <p className="text-sm text-bambu-gray">{spool.brand || '-'}</p>
          </div>
          <div className="flex items-center gap-1">
            {onPrintLabel && (
              <button
                onClick={(e) => { e.stopPropagation(); onPrintLabel(); }}
                className="p-1 text-bambu-gray hover:text-white rounded transition-colors"
                title={t('inventory.labels.printOne')}
                aria-label={t('inventory.labels.printOne')}
              >
                <Printer className="w-4 h-4" />
              </button>
            )}
            <span className="text-xs font-mono text-bambu-gray bg-bambu-dark-tertiary px-2 py-1 rounded">
              #{spool.id}
            </span>
          </div>
        </div>
        <div>
          <div className="flex justify-between text-xs text-bambu-gray mb-1">
            <span>{t('inventory.remaining')}</span>
            <span>{Math.round(pct)}%</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="flex-1 h-2 bg-bambu-dark-tertiary rounded-full overflow-hidden">
              <div
                className={`h-full rounded-full ${pct > 50 ? 'bg-bambu-green' : pct > 20 ? 'bg-yellow-500' : 'bg-red-500'}`}
                style={{ width: `${Math.min(pct, 100)}%` }}
              />
            </div>
            <span className="text-xs text-bambu-gray min-w-[40px] text-right">
              {Math.round(remaining)}g
            </span>
          </div>
        </div>
        <div className="grid grid-cols-2 gap-2 text-xs">
          <div>
            <span className="text-bambu-gray/60">{t('inventory.labelWeight')}: </span>
            <span className="text-bambu-gray">{formatWeight(spool.label_weight)}</span>
          </div>
          <div>
            <span className="text-bambu-gray/60">{t('inventory.weightUsed')}: </span>
            <span className="text-bambu-gray">
              {spool.weight_used > 0 ? formatWeight(spool.weight_used) : '-'}
            </span>
          </div>
        </div>
        {spool.note && (
          <div
            className="text-xs text-bambu-gray/60 pt-2 border-t border-bambu-dark-tertiary truncate"
            title={spool.note}
          >
            {spool.note}
          </div>
        )}
      </div>
    </div>
  );
}

/* Single spool row for table view */
function SpoolTableRow({
  spool, remaining, pct, onEdit, onCopy, onRestore, onArchive, onDelete, onPrintLabel, onResetConsumedCounter,
  visibleColumns, assignmentMap, catalogMap, currencySymbol, dateFormat, t, onSyncWeight,
}: {
  spool: InventorySpool;
  remaining: number;
  pct: number;
  onEdit: () => void;
  onCopy?: () => void;
  onRestore: () => void;
  onArchive: () => void;
  onDelete: () => void;
  onPrintLabel?: () => void;
  onResetConsumedCounter?: () => void;
  visibleColumns: string[];
  assignmentMap: Record<number, LocationDisplay>;
  catalogMap: Record<number, SpoolCatalogEntry>;
  currencySymbol: string;
  dateFormat: DateFormat;
  t: TFn;
  onSyncWeight?: (spool: InventorySpool) => void;
}) {
  return (
    <tr
      className={`border-b border-bambu-dark-tertiary/50 hover:bg-bambu-dark-tertiary/30 transition-colors cursor-pointer ${
        spool.archived_at ? 'opacity-50' : ''
      }`}
      onClick={onEdit}
    >
      {visibleColumns.map((colId) => (
        <td key={colId} className="py-3 px-4">
          {columnCells[colId]?.({ spool, remaining, pct, assignmentMap, catalogMap, currencySymbol, dateFormat, t, onSyncWeight })}
        </td>
      ))}
      <td className="py-3 px-4">
        <div className="flex items-center justify-end gap-1" onClick={(e) => e.stopPropagation()}>
          <button onClick={onEdit} className="p-1.5 text-bambu-gray hover:text-white rounded transition-colors" title={t('common.edit')}>
            <Edit2 className="w-4 h-4" />
          </button>
          {onCopy && (
            <button onClick={onCopy} className="p-1.5 text-bambu-gray hover:text-bambu-green rounded transition-colors" title={t('inventory.copySpool')}>
              <Copy className="w-4 h-4" />
            </button>
          )}
          {onPrintLabel && (
            <button onClick={onPrintLabel} className="p-1.5 text-bambu-gray hover:text-white rounded transition-colors" title={t('inventory.labels.printOne')}>
              <Printer className="w-4 h-4" />
            </button>
          )}
          {onResetConsumedCounter && spool.weight_used > 0 && (
            // Eraser also shows on archived spools (#1390 follow-up):
            // archived consumed weight now counts in "Total Consumed", so
            // the user needs a way to zero an archived spool's tracking
            // counter individually without having to un-archive it first.
            <button onClick={onResetConsumedCounter} className="p-1.5 text-bambu-gray hover:text-orange-400 rounded transition-colors" title={t('inventory.resetConsumedCounterTooltip')}>
              <Eraser className="w-4 h-4" />
            </button>
          )}
          {spool.archived_at ? (
            <button onClick={onRestore} className="p-1.5 text-bambu-gray hover:text-bambu-green rounded transition-colors" title={t('inventory.restore')}>
              <RotateCcw className="w-4 h-4" />
            </button>
          ) : (
            <button onClick={onArchive} className="p-1.5 text-bambu-gray hover:text-yellow-400 rounded transition-colors" title={t('inventory.archive')}>
              <Archive className="w-4 h-4" />
            </button>
          )}
          <button onClick={onDelete} className="p-1.5 text-bambu-gray hover:text-red-400 rounded transition-colors" title={t('common.delete')}>
            <Trash2 className="w-4 h-4" />
          </button>
        </div>
      </td>
    </tr>
  );
}

/* Grouped spool rows for table view */
function SpoolTableGroup({
  spools, headerSpool, remaining, pct, isExpanded, onToggle,
  onEdit, onCopy, onArchive, onDelete, onPrintLabel, onResetConsumedCounter,
  visibleColumns, assignmentMap, catalogMap, currencySymbol, dateFormat, t, onSyncWeight,
}: {
  spools: InventorySpool[];
  // Aggregate of all members (summed quantities, shared identity) — rendered
  // in the collapsed header row so it shows group totals (#1368).
  headerSpool: InventorySpool;
  remaining: number;
  pct: number;
  isExpanded: boolean;
  onToggle: () => void;
  onEdit: (spool: InventorySpool) => void;
  onCopy?: (spool: InventorySpool) => void;
  onArchive: (id: number) => void;
  onDelete: (id: number) => void;
  onPrintLabel?: (spoolId: number) => void;
  onResetConsumedCounter?: (id: number) => void;
  visibleColumns: string[];
  assignmentMap: Record<number, LocationDisplay>;
  catalogMap: Record<number, SpoolCatalogEntry>;
  currencySymbol: string;
  dateFormat: DateFormat;
  t: TFn;
  onSyncWeight?: (spool: InventorySpool) => void;
}) {
  return (
    <>
      {/* Group header row */}
      <tr
        className="border-b border-bambu-dark-tertiary/50 hover:bg-bambu-dark-tertiary/30 transition-colors cursor-pointer bg-bambu-green/5"
        onClick={onToggle}
      >
        {visibleColumns.map((colId, idx) => (
          <td key={colId} className="py-3 px-4">
            {idx === 0 ? (
              <div className="flex items-center gap-2">
                <ChevronDown className={`w-4 h-4 text-bambu-gray transition-transform ${isExpanded ? '' : '-rotate-90'}`} />
                {columnCells[colId]?.({ spool: headerSpool, remaining, pct, assignmentMap, catalogMap, currencySymbol, dateFormat, t, onSyncWeight })}
              </div>
            ) : colId === 'id' ? (
              <span className="text-xs font-medium bg-bambu-green/20 text-bambu-green px-2 py-0.5 rounded-full">
                {t('inventory.groupedSpools', { count: spools.length })}
              </span>
            ) : (
              columnCells[colId]?.({ spool: headerSpool, remaining, pct, assignmentMap, catalogMap, currencySymbol, dateFormat, t, onSyncWeight })
            )}
          </td>
        ))}
        <td className="py-3 px-4">
          <span className="text-xs text-bambu-gray">
            {spools.map((s) => `#${s.id}`).join(', ')}
          </span>
        </td>
      </tr>
      {/* Expanded individual rows */}
      {isExpanded && spools.map((spool) => {
        const r = Math.max(0, spool.label_weight - spool.weight_used);
        const p = spool.label_weight > 0 ? (r / spool.label_weight) * 100 : 0;
        return (
          <SpoolTableRow
            key={spool.id}
            spool={spool}
            remaining={r}
            pct={p}
            onEdit={() => onEdit(spool)}
            onCopy={onCopy ? () => onCopy(spool) : undefined}
            onRestore={() => {}}
            onArchive={() => onArchive(spool.id)}
            onDelete={() => onDelete(spool.id)}
            onPrintLabel={onPrintLabel ? () => onPrintLabel(spool.id) : undefined}
            onResetConsumedCounter={onResetConsumedCounter ? () => onResetConsumedCounter(spool.id) : undefined}
            visibleColumns={visibleColumns}
            assignmentMap={assignmentMap}
            catalogMap={catalogMap}
            currencySymbol={currencySymbol}
            dateFormat={dateFormat}
            t={t}
            onSyncWeight={onSyncWeight}
          />
        );
      })}
    </>
  );
}

/* Empty state matching SpoolBuddy's design */
function EmptyFilterState({
  hasFilters,
  onAddSpool,
  t,
}: {
  hasFilters: boolean;
  onAddSpool: () => void;
  t: (key: string) => string;
}) {
  return (
    <div className="flex flex-col items-center justify-center py-16 px-4">
      <div className="relative mb-6">
        <div className="absolute inset-0 -m-4 bg-bambu-green/5 rounded-full blur-2xl" />
        <div className="relative flex items-center justify-center w-24 h-24 rounded-2xl bg-gradient-to-br from-bambu-dark-secondary to-bambu-dark-tertiary border border-bambu-dark-tertiary shadow-lg">
          <div className="absolute -top-1 -right-1 w-3 h-3 rounded-full bg-bambu-green/30" />
          <div className="absolute -bottom-2 -left-2 w-2 h-2 rounded-full bg-bambu-green/20" />
          {hasFilters ? (
            <Search className="w-10 h-10 text-bambu-gray/40" strokeWidth={1.5} />
          ) : (
            <div className="relative">
              <div className="w-14 h-14 rounded-full border-4 border-bambu-gray/20 flex items-center justify-center">
                <div className="w-6 h-6 rounded-full bg-bambu-gray/10 border-2 border-bambu-gray/20" />
              </div>
              <div className="absolute -bottom-1 -right-1 w-6 h-6 rounded-full bg-bambu-green flex items-center justify-center shadow-md">
                <span className="text-white text-lg font-bold leading-none">+</span>
              </div>
            </div>
          )}
        </div>
      </div>
      <h3 className="text-lg font-semibold text-white mb-2 text-center">
        {hasFilters ? t('inventory.noSpoolsMatch') : t('inventory.noSpools').split('.')[0]}
      </h3>
      <p className="text-sm text-bambu-gray text-center max-w-sm mb-6">
        {hasFilters
          ? t('inventory.noSpoolsMatchDesc')
          : t('inventory.noSpools')
        }
      </p>
      {!hasFilters && (
        <Button onClick={onAddSpool}>
          <Package className="w-4 h-4" />
          {t('inventory.addSpool')}
        </Button>
      )}
    </div>
  );
}