bambuddy/frontend/src/pages/InventoryPage.tsx

import { useState, useMemo, useEffect, useRef, useCallback, type ReactNode } from 'react';
import { useSearchParams } from 'react-router-dom';
import { useQuery, useQueries, 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, MapPin,
  Upload, Download, Store,
} from 'lucide-react';
import { ForecastPanel } from '../components/ForecastPanel';
import { api, spoolbuddyApi, ApiError } from '../api/client';
import type { InventorySpool, SpoolCatalogEntry, LocationHASensorReading } from '../api/client';
import { Button } from '../components/Button';
import { FilamentSwatch } from '../components/FilamentSwatch';
import { describeHASensorReading, iconForHASensor } from '../utils/haSensorDisplay';
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 { LocationsModal } from '../components/LocationsModal';
import { SuppliersModal } from '../components/SuppliersModal';
import { BulkEditSpoolsModal } from '../components/BulkEditSpoolsModal';
import { useToast } from '../contexts/ToastContext';
import { useAuth } from '../contexts/AuthContext';
import { colorSortKey, resolveSpoolColorName } from '../utils/colors';
import { useColorCatalogVersion } from '../hooks/useColorCatalogVersion';
import { getCurrencySymbol } from '../utils/currency';
import { formatDateInput, parseUTCDate, type DateFormat } from '../utils/date';
import { formatSlotLabel } from '../utils/amsHelpers';
import { filterSpoolsByQuery } from '../utils/inventorySearch';
import {
  inventoryLocationsQueryKey,
  invalidateSpoolAndLocationQueries,
} from '../utils/inventoryQueries';
import { aggregateGroupSpool } from '../utils/inventoryGrouping';
import {
  locationSensorReadingAlertStatus,
  locationSensorValueColorClass,
  useLocationSensorColorPrefs,
  type LocationSensorAlertColor,
} from '../utils/locationSensorDefaults';

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 dedupeAndSort(values: Array<string | null | undefined>): string[] {
  const set = new Set<string>();
  for (const v of values) {
    if (typeof v === 'string') {
      const trimmed = v.trim();
      if (trimmed) set.add(trimmed);
    }
  }
  return Array.from(set).sort((a, b) => a.localeCompare(b));
}

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).
  // last_dried_at too: a dried spool is not interchangeable with an undried
  // one, and folding it into a group would hide the date (#2863).
  return `${s.material}|${s.subtype || ''}|${s.brand || ''}|${s.color_name || ''}|${s.rgba || ''}|${s.extra_colors || ''}|${s.effect_type || ''}|${s.label_weight}|${s.last_dried_at || ''}`;
}

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

// Sentinel for the "no material number" slot in the filter dropdown (#2870).
// The other chips use a readable '__none__', but a material number is free
// text and could literally be '__none__'. SpoolBase caps the column at 64
// characters, so a 65-character sentinel is one no spool can ever carry.
const MATERIAL_NUMBER_NONE = 'none'.padStart(65, '_');

// Sort key for the material-number column (#2870). The table compares sort
// values with plain < / >, which puts "15" before "2"; padding every digit run
// to the column's 64-character cap makes that comparison numeric-aware, so the
// column orders the same way as the filter chip and the dialog suggestions.
function materialNumberSortKey(value: string | null): string {
  return (value || '').toLowerCase().replace(/\d+/g, (digits) => digits.padStart(64, '0'));
}

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: 'temperature', label: 'Temperature', visible: false },
  { id: 'humidity', label: 'Humidity', visible: false },
  { id: 'last_dried', label: 'Last Dried', visible: true },
  { id: 'battery', label: 'Battery', 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: 'material_number', label: 'Material No.', visible: false },
  { id: 'suppliers', label: 'Suppliers', 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));
      const merged = [...validStored];
      for (const col of DEFAULT_COLUMNS) {
        if (storedIds.has(col.id)) continue;
        const defaultIndex = DEFAULT_COLUMNS.indexOf(col);
        let insertAt = merged.length;
        for (let i = defaultIndex - 1; i >= 0; i--) {
          const idx = merged.findIndex((c) => c.id === DEFAULT_COLUMNS[i].id);
          if (idx !== -1) {
            insertAt = idx + 1;
            break;
          }
        }
        merged.splice(insertAt, 0, col);
      }
      return merged;
    }
  } 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-100 dark:bg-green-500/20 text-green-700 dark:text-green-400',
  ABS: 'bg-red-100 dark:bg-red-500/20 text-red-700 dark:text-red-400',
  PETG: 'bg-blue-100 dark:bg-blue-500/20 text-blue-700 dark:text-blue-400',
  TPU: 'bg-purple-100 dark:bg-purple-500/20 text-purple-700 dark:text-purple-400',
  ASA: 'bg-orange-100 dark:bg-orange-500/20 text-orange-700 dark:text-orange-400',
  PA: 'bg-yellow-100 dark:bg-yellow-500/20 text-yellow-700 dark:text-yellow-400',
  PC: 'bg-cyan-100 dark:bg-cyan-500/20 text-cyan-700 dark:text-cyan-400',
  PET: 'bg-sky-100 dark:bg-sky-500/20 text-sky-700 dark:text-sky-400',
};

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

// "55°C · 8h" for the last drying (#2863); empty when neither is known, which
// is the case for a date set by hand or a run Bambuddy did not start or watch.
function formatLastDriedDetails(spool: InventorySpool): string {
  const parts: string[] = [];
  if (spool.last_dried_temp != null) parts.push(`${spool.last_dried_temp}°C`);
  if (spool.last_dried_hours != null) parts.push(`${Number(spool.last_dried_hours.toFixed(1))}h`);
  return parts.join(' · ');
}

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>;
  locationReadingsMap: Record<number, LocationHASensorReading[]>;
  currencySymbol: string;
  dateFormat: DateFormat;
  t: TFn;
  onSyncWeight?: (spool: InventorySpool) => void;
  colorizeLocationSensors: boolean;
  locationSensorAboveColor: LocationSensorAlertColor;
  locationSensorBelowColor: LocationSensorAlertColor;
  locationSensorOptimalColor: LocationSensorAlertColor;
};

// 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'),
  temperature: (t) => t('inventory.temperature'),
  humidity: (t) => t('inventory.humidity'),
  last_dried: (t) => t('inventory.lastDried'),
  battery: (t) => t('inventory.battery'),
  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'),
  material_number: (t) => t('inventory.materialNumber'),
  suppliers: (t) => t('inventory.suppliers.label'),
  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>
  ),
  last_dried: ({ spool, dateFormat }) => {
    if (!spool.last_dried_at) return <span className="text-sm text-bambu-gray">-</span>;
    const details = formatLastDriedDetails(spool);
    return (
      <div className="text-sm text-bambu-gray">
        <div>{formatInventoryDate(spool.last_dried_at, dateFormat)}</div>
        {details && <div className="text-xs text-bambu-gray/60">{details}</div>}
      </div>
    );
  },
  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, spool.color_name_is_synthesized) || '-'}</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-100 dark:bg-purple-500/20 text-purple-700 dark: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-100 dark:bg-blue-500/20 text-blue-700 dark:text-blue-400">
        {spool.storage_location}
      </span>
    );
  },
  temperature: ({ spool, locationReadingsMap, t, colorizeLocationSensors, locationSensorAboveColor, locationSensorBelowColor, locationSensorOptimalColor }) => {
    const reading = spool.location_id
      ? locationReadingsMap[spool.location_id]?.find((r) => r.device_class === 'temperature')
      : undefined;
    if (!reading) return <span className="text-sm text-bambu-gray/50">-</span>;
    return (
      <span
        title={reading.name}
        className={`text-sm ${locationSensorCellColor(reading, colorizeLocationSensors, locationSensorAboveColor, locationSensorBelowColor, locationSensorOptimalColor)}`}
      >
        {describeLocationSensor(reading, t)}
      </span>
    );
  },
  humidity: ({ spool, locationReadingsMap, t, colorizeLocationSensors, locationSensorAboveColor, locationSensorBelowColor, locationSensorOptimalColor }) => {
    const reading = spool.location_id
      ? locationReadingsMap[spool.location_id]?.find((r) => r.device_class === 'humidity')
      : undefined;
    if (!reading) return <span className="text-sm text-bambu-gray/50">-</span>;
    return (
      <span
        title={reading.name}
        className={`text-sm ${locationSensorCellColor(reading, colorizeLocationSensors, locationSensorAboveColor, locationSensorBelowColor, locationSensorOptimalColor)}`}
      >
        {describeLocationSensor(reading, t)}
      </span>
    );
  },
  battery: ({ spool, locationReadingsMap, t, colorizeLocationSensors, locationSensorAboveColor, locationSensorBelowColor, locationSensorOptimalColor }) => {
    const reading = spool.location_id
      ? locationReadingsMap[spool.location_id]?.find((r) => r.device_class === 'battery')
      : undefined;
    if (!reading) return <span className="text-sm text-bambu-gray/50">-</span>;
    return (
      <span
        title={reading.name}
        className={`text-sm ${locationSensorCellColor(reading, colorizeLocationSensors, locationSensorAboveColor, locationSensorBelowColor, locationSensorOptimalColor)}`}
      >
        {describeLocationSensor(reading, t)}
      </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>
  ),
  material_number: ({ spool }) => (
    <span className="text-sm text-bambu-gray">{spool.material_number || '-'}</span>
  ),
  // Supplier chips (#2988): purchase source first and highlighted; the
  // others read as alternative sources. Tooltip carries the supplier's
  // article number when set.
  suppliers: ({ spool }) => {
    const links = spool.suppliers ?? [];
    if (links.length === 0) return <span className="text-sm text-bambu-gray">-</span>;
    const sorted = [...links].sort((a, b) => Number(b.is_purchase_source) - Number(a.is_purchase_source));
    return (
      <div className="flex flex-wrap gap-1 max-w-[220px]">
        {sorted.map((link) => (
          <span
            key={link.id}
            title={link.supplier_article_number || undefined}
            className={`inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-medium ${
              link.is_purchase_source
                ? 'bg-bambu-green/20 text-bambu-green'
                : 'bg-bambu-gray/10 text-bambu-gray'
            }`}
          >
            {link.supplier_name}
          </span>
        ))}
      </div>
    );
  },
  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-100 dark:bg-amber-500/20 text-amber-700 dark: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-700 dark:text-green-400' : 'text-yellow-700 dark: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>,
    locationReadingsMap: Record<number, LocationHASensorReading[]>
  ) => 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 || '',
  last_dried: (s) => s.last_dried_at || '',
  material: (s) => (s.material || '').toLowerCase(),
  subtype: (s) => (s.subtype || '').toLowerCase(),
  color_name: (s) => (s.color_name || '').toLowerCase(),
  // Sorts the swatch column itself (#2729). Multi-colour spools sort on their
  // primary colour — extra_colors are gradient stops, and a spool has to sit in
  // exactly one place in the list.
  rgba: (s) => colorSortKey(s.rgba),
  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(),
  material_number: (s) => materialNumberSortKey(s.material_number),
  // Sorts on the purchase-source supplier, falling back to the first
  // assignment — a spool has to sit in exactly one place in the list.
  suppliers: (s) => {
    const links = s.suppliers ?? [];
    const primary = links.find((l) => l.is_purchase_source) ?? links[0];
    return (primary?.supplier_name || '').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);
  },
  temperature: (s, _am, lrm) => {
    const readings = s.location_id ? lrm[s.location_id] : undefined;
    return readings?.find((r) => r.device_class === 'temperature')?.value ?? -Infinity;
  },
  humidity: (s, _am, lrm) => {
    const readings = s.location_id ? lrm[s.location_id] : undefined;
    return readings?.find((r) => r.device_class === 'humidity')?.value ?? -Infinity;
  },
  battery: (s, _am, lrm) => {
    const readings = s.location_id ? lrm[s.location_id] : undefined;
    return readings?.find((r) => r.device_class === 'battery')?.value ?? -Infinity;
  },
};

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();
  // The spool filter below resolves colour names through the catalog; its
  // memo has to recompute when the catalog finishes loading (#3090).
  const colorCatalogVersion = useColorCatalogVersion();
  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);
  const [locationsModalOpen, setLocationsModalOpen] = useState(false);
  const [suppliersModalOpen, setSuppliersModalOpen] = 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('');
  // Filter on the internal material number (#2870), same shape as category.
  const [materialNumberFilter, setMaterialNumberFilter] = useState('');
  // Filter on an assigned supplier (#2988), same shape as category.
  const [supplierFilter, setSupplierFilter] = useState('');
  const [spoolFilter, setSpoolFilter] = useState('');
  const [stockFilter, setStockFilter] = useState<'all' | 'stock' | 'configured'>('all');
  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());

  // Bulk-selection state for batch actions on the spool list (#1795).
  // Cleared when the user switches filter/tab/page because cross-page selection
  // produces a confusing toolbar count vs. visible-row count delta.
  const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set());
  const [bulkEditOpen, setBulkEditOpen] = useState(false);
  const [bulkConfirmAction, setBulkConfirmAction] = useState<'delete' | 'archive' | 'restore' | 'reset-consumed-counter' | null>(null);
  const toggleSelected = useCallback((id: number) => {
    setSelectedIds((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  }, []);
  const clearSelection = useCallback(() => setSelectedIds(new Set()), []);

  // Clear selection on any filter/tab change so the toolbar count stays
  // honest vs. what the user is actually looking at.
  useEffect(() => {
    setSelectedIds(new Set());
  }, [archiveFilter, usageFilter, materialFilter, brandFilter, categoryFilter, materialNumberFilter, supplierFilter, spoolFilter, stockFilter, search]);

  // 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';
  const locationSensorPollIntervalMs = (settings?.location_sensor_poll_interval || 120) * 1000;

  const {
    colorize: colorizeLocationSensors,
    aboveColor: locationSensorAboveColor,
    belowColor: locationSensorBelowColor,
    optimalColor: locationSensorOptimalColor,
  } = useLocationSensorColorPrefs();

  // Query key and fetch function differ based on data source
  const spoolsQueryKey = spoolmanMode ? ['spoolman-inventory-spools'] : ['inventory-spools'];
  const refreshSpoolQueries = () => invalidateSpoolAndLocationQueries(queryClient, spoolsQueryKey);
  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;

  const { data: storageLocations = [] } = useQuery({
    queryKey: inventoryLocationsQueryKey,
    queryFn: api.getLocations,
  });

  // Deep-link / filter: ?location_id=<id> or ?location_id=__none__
  const _rawLocationParam = searchParams.get('location_id');
  const storageLocationFilter =
    _rawLocationParam === '__none__'
      ? '__none__'
      : _rawLocationParam && /^\d+$/.test(_rawLocationParam) && Number(_rawLocationParam) > 0
        ? _rawLocationParam
        : '';

  // 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: () => {
      refreshSpoolQueries();
      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: () => {
      refreshSpoolQueries();
      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: () => {
      refreshSpoolQueries();
      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');
      // Close any open bulk-confirm modal + clear selection so the toolbar
      // collapses after the action — matches the other three bulk mutations
      // and stops the confirm dialog from lingering after Reset.
      setBulkConfirmAction(null);
      clearSelection();
    },
    onError: () => {
      showToast(t('inventory.resetConsumedCounterFailed'), 'error');
    },
  });

  // Bulk action mutations (#1795). Each invalidates the same query keys as
  // the per-spool equivalents so the table refreshes with the new state.
  // Helper: count items that didn't succeed across the two response shapes
  // (internal mode returns not_found, Spoolman returns errors[]). When the
  // success count is 0 OR any failures occurred, surface that to the user
  // instead of the silent green-toast-and-clear flow the first cut shipped.
  const failedCount = (data: { not_found?: number[]; errors?: Array<{ id: number }> }): number =>
    (data.not_found?.length ?? 0) + (data.errors?.length ?? 0);

  const bulkUpdateMutation = useMutation({
    mutationFn: async ({ ids, update }: { ids: number[]; update: Partial<Omit<InventorySpool, 'id' | 'archived_at' | 'created_at' | 'updated_at' | 'k_profiles'>> }): Promise<{ updated: number; not_found?: number[]; errors?: Array<{ id: number; status: number; detail: string }> }> => {
      if (spoolmanMode) return api.bulkUpdateSpoolmanInventorySpools(ids, update);
      return api.bulkUpdateSpools(ids, update);
    },
    onSuccess: (data) => {
      refreshSpoolQueries();
      const failed = failedCount(data);
      if (data.updated === 0) {
        showToast(t('inventory.bulk.updateAllFailed', { count: failed }), 'error');
        return; // keep modal open + selection intact so user can retry
      }
      if (failed > 0) {
        showToast(t('inventory.bulk.updatePartial', { ok: data.updated, failed }), 'warning');
      } else {
        showToast(t('inventory.bulk.updateSuccess', { count: data.updated }), 'success');
      }
      setBulkEditOpen(false);
      clearSelection();
    },
    onError: (err: Error) => {
      showToast(err.message || t('inventory.bulk.updateFailed'), 'error');
    },
  });

  const bulkDeleteMutation = useMutation({
    mutationFn: async (ids: number[]): Promise<{ deleted: number; not_found?: number[]; errors?: Array<{ id: number; status: number; detail: string }> }> => {
      if (spoolmanMode) return api.bulkDeleteSpoolmanInventorySpools(ids);
      return api.bulkDeleteSpools(ids);
    },
    onSuccess: (data) => {
      refreshSpoolQueries();
      const failed = failedCount(data);
      if (data.deleted === 0) {
        showToast(t('inventory.bulk.deleteAllFailed', { count: failed }), 'error');
        return;
      }
      if (failed > 0) {
        showToast(t('inventory.bulk.deletePartial', { ok: data.deleted, failed }), 'warning');
      } else {
        showToast(t('inventory.bulk.deleteSuccess', { count: data.deleted }), 'success');
      }
      setBulkConfirmAction(null);
      clearSelection();
    },
    onError: (err: Error) => {
      showToast(err.message || t('inventory.bulk.deleteFailed'), 'error');
    },
  });

  const bulkArchiveMutation = useMutation({
    mutationFn: async (ids: number[]): Promise<{ archived: number; already_archived?: number[]; not_found?: number[]; errors?: Array<{ id: number; status: number; detail: string }> }> => {
      if (spoolmanMode) return api.bulkArchiveSpoolmanInventorySpools(ids);
      return api.bulkArchiveSpools(ids);
    },
    onSuccess: (data) => {
      refreshSpoolQueries();
      // already-archived rows are NOT failures — they're correctly idempotent.
      const failed = failedCount(data);
      if (data.archived === 0 && failed > 0) {
        showToast(t('inventory.bulk.archiveAllFailed', { count: failed }), 'error');
        return;
      }
      if (failed > 0) {
        showToast(t('inventory.bulk.archivePartial', { ok: data.archived, failed }), 'warning');
      } else {
        showToast(t('inventory.bulk.archiveSuccess', { count: data.archived }), 'success');
      }
      setBulkConfirmAction(null);
      clearSelection();
    },
    onError: (err: Error) => {
      showToast(err.message || t('inventory.bulk.archiveFailed'), 'error');
    },
  });

  const bulkRestoreMutation = useMutation({
    mutationFn: async (ids: number[]): Promise<{ restored: number; already_active?: number[]; not_found?: number[]; errors?: Array<{ id: number; status: number; detail: string }> }> => {
      if (spoolmanMode) return api.bulkRestoreSpoolmanInventorySpools(ids);
      return api.bulkRestoreSpools(ids);
    },
    onSuccess: (data) => {
      refreshSpoolQueries();
      const failed = failedCount(data);
      if (data.restored === 0 && failed > 0) {
        showToast(t('inventory.bulk.restoreAllFailed', { count: failed }), 'error');
        return;
      }
      if (failed > 0) {
        showToast(t('inventory.bulk.restorePartial', { ok: data.restored, failed }), 'warning');
      } else {
        showToast(t('inventory.bulk.restoreSuccess', { count: data.restored }), 'success');
      }
      setBulkConfirmAction(null);
      clearSelection();
    },
    onError: (err: Error) => {
      showToast(err.message || t('inventory.bulk.restoreFailed'), '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,
        resolveSpoolColorName(spool.color_name, spool.rgba, spool.color_name_is_synthesized),
      ]
        .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]);

  // Not polled — it only changes via explicit create/edit/delete, all of
  // which already invalidate this key, and it also seeds the SpoolCard
  // footers below (same query key, so they share this fetch instead of each
  // issuing their own).
  const { data: locationHaSensorsList } = useQuery({
    queryKey: ['locationHaSensors'],
    queryFn: () => api.getLocationHASensors(),
  });

  const locationIdsWithSensors = useMemo(
    () => new Set((locationHaSensorsList ?? []).map((s) => s.location_id)),
    [locationHaSensorsList]
  );

  const usedLocationIds = useMemo(() => {
    const ids = new Set<number>();
    for (const s of spools || []) {
      // Skip locations with no bound sensor at all — polling them would only
      // ever come back empty, and most installs have far more storage
      // locations than ones actually wired up to Home Assistant.
      if (s.location_id && locationIdsWithSensors.has(s.location_id)) ids.add(s.location_id);
    }
    return Array.from(ids);
  }, [spools, locationIdsWithSensors]);

  // Card view always needs readings (the SpoolCard footer below reads this
  // same cache and filters to show_on_card itself); table view only needs
  // them when a sensor column is actually visible, since the default
  // column config hides all three.
  const needsLocationReadings =
    viewMode === 'cards' ||
    (viewMode === 'table' &&
      columnConfig.some((c) => c.visible && (c.id === 'temperature' || c.id === 'humidity' || c.id === 'battery')));

  const locationReadingsQueries = useQueries({
    queries: usedLocationIds.map((locationId) => ({
      queryKey: ['locationHaSensorReadings', locationId],
      queryFn: () => api.getLocationHASensorReadings(locationId, false),
      refetchInterval: locationSensorPollIntervalMs,
      enabled: needsLocationReadings,
    })),
  });

  const locationReadingsMap = useMemo(() => {
    const map: Record<number, LocationHASensorReading[]> = {};
    usedLocationIds.forEach((locationId, i) => {
      const data = locationReadingsQueries[i]?.data;
      if (data) map[locationId] = data;
    });
    return map;
  }, [usedLocationIds, locationReadingsQueries]);

  // 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(() => {
    // Named so this memo depends on it: the global search below resolves
    // colour names through the catalog, which `resolveSpoolColorName` reads
    // from module state the linter cannot follow. Without it a query typed
    // before the catalog loads keeps its empty result (#3090).
    void colorCatalogVersion;
    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);
      }
    }

    // Material number dropdown (#2870). The sentinel finds spools that have
    // no number assigned yet.
    if (materialNumberFilter) {
      if (materialNumberFilter === MATERIAL_NUMBER_NONE) {
        filtered = filtered.filter((s) => !s.material_number?.trim());
      } else {
        filtered = filtered.filter((s) => s.material_number === materialNumberFilter);
      }
    }

    // Supplier dropdown (#2988): "everything from supplier X" matches ANY
    // assignment, purchase source or alternative; `__none__` finds spools
    // without supplier assignments.
    if (supplierFilter) {
      if (supplierFilter === '__none__') {
        filtered = filtered.filter((s) => (s.suppliers ?? []).length === 0);
      } else {
        const supplierId = Number(supplierFilter);
        filtered = filtered.filter((s) => (s.suppliers ?? []).some((l) => l.supplier_id === supplierId));
      }
    }

    // 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.location_id && !s.storage_location?.trim());
      } else {
        const locId = Number(storageLocationFilter);
        const locName = storageLocations.find((l) => l.id === locId)?.name?.trim().toLowerCase();
        filtered = filtered.filter((s) => {
          if (s.location_id != null) return s.location_id === locId;
          if (locName) return (s.storage_location || '').trim().toLowerCase() === locName;
          return false;
        });
      }
    }

    // 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, materialNumberFilter, supplierFilter, spoolFilter, stockFilter, storageLocationFilter, search, lowStockThreshold, storageLocations, colorCatalogVersion]);

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

  const setStorageLocationFilter = useCallback((value: string) => {
    setSearchParams((prev) => {
      prev.delete('location_id');
      if (value) {
        prev.set('location_id', value);
      }
      return prev;
    }, { replace: true });
    resetPage();
  }, [setSearchParams]);

  // 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);
  // #2870: distinct material numbers, numeric-aware sort ("2" before "15").
  const uniqueMaterialNumbers = [...new Set(spools?.map((s) => s.material_number?.trim()).filter(Boolean) as string[] || [])]
    .sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
  const hasUnnumbered = (spools ?? []).some((s) => !s.material_number?.trim());
  // #2988: suppliers seen across the inventory, for the filter dropdown.
  const uniqueSuppliers = useMemo(() => {
    const byId = new Map<number, string>();
    for (const s of spools ?? []) {
      for (const link of s.suppliers ?? []) {
        byId.set(link.supplier_id, link.supplier_name);
      }
    }
    return [...byId.entries()].map(([id, name]) => ({ id, name })).sort((a, b) => a.name.localeCompare(b.name));
  }, [spools]);
  const hasUnsupplied = (spools ?? []).some((s) => (s.suppliers ?? []).length === 0);
  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 hasUnsetStorageLocation = (spools ?? []).some((s) => !s.location_id && !s.storage_location?.trim());

  // Check if any filters are non-default
  const hasActiveFilters = archiveFilter !== 'active' || usageFilter !== 'all' || !!materialFilter || !!brandFilter || !!categoryFilter || !!materialNumberFilter || !!supplierFilter || !!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, locationReadingsMap);
      const vb = extractor(b, assignmentMap, locationReadingsMap);
      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, locationReadingsMap]);

  // 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('');
    setMaterialNumberFilter('');
    setSupplierFilter('');
    setSpoolFilter('');
    setStockFilter('all');
    setSearch('');
    setSearchParams((prev) => {
      prev.delete('location_id');
      return prev;
    }, { replace: true });
    resetPage();
  };

  return (
    <div className="p-4 md:p-8 space-y-6">
      {/* Header. Stacks below sm and the actions wrap (#2813): five buttons
          side by side are ~600px, and nothing in that row can shrink, so on a
          phone the header pushed past the viewport and took the whole page
          with it -- <main> is the scroll container, so everything inside it
          panned sideways. Same pattern the Statistics, Settings and Archives
          headers use, and the filter bar further down this page. */}
      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm: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 flex-wrap 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" onClick={() => setLocationsModalOpen(true)}>
            <MapPin className="w-4 h-4" />
            {t('locations.manage')}
          </Button>
          {/* Suppliers (#2988): inventory master data like Locations, so the
              modal opens from the same toolbar — in both inventory modes. */}
          <Button variant="secondary" onClick={() => setSuppliersModalOpen(true)}>
            <Store className="w-4 h-4" />
            {t('inventory.suppliers.title')}
          </Button>
          <Button
            variant="secondary"
            disabled={filteredSpools.length === 0}
            // Pre-select the spools ticked in the list; with none ticked,
            // every visible spool, so the user refines downward in the modal
            // (#2980). Per-card icon pre-selects only that spool — all flows
            // share the same picker.
            onClick={() =>
              setLabelPickerSpoolIds(selectedIds.size > 0 ? [...selectedIds] : filteredSpools.map((s) => s.id))
            }
            title={
              filteredSpools.length === 0
                ? t('inventory.labels.noSpoolsTitle', 'No spools to label')
                : selectedIds.size > 0
                  ? t('inventory.labels.selectedTitle', 'Print labels for the {{count}} selected spools', { count: selectedIds.size })
                  : 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-600 dark: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-600 dark: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-600 dark: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-600 dark: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-600 dark: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-700 dark: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-100 dark:bg-yellow-500/20 text-yellow-700 dark: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-100 dark:bg-amber-500/20 text-amber-700 dark: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>
        )}

        {/* Material number dropdown chip (#2870) — same render rule as the
            category chip: hidden until at least one spool carries a number. */}
        {(uniqueMaterialNumbers.length > 0 || materialNumberFilter) && (
          <select
            value={materialNumberFilter}
            onChange={(e) => { setMaterialNumberFilter(e.target.value); resetPage(); }}
            className={`px-3 py-1.5 rounded-lg border text-xs font-medium transition-colors cursor-pointer focus:outline-none ${
              materialNumberFilter
                ? '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.materialNumber')}</option>
            {uniqueMaterialNumbers.map((n) => (
              <option key={n} value={n}>{n}</option>
            ))}
            {hasUnnumbered && (
              <option value={MATERIAL_NUMBER_NONE}>{t('inventory.materialNumberNone')}</option>
            )}
          </select>
        )}

        {/* Supplier dropdown chip (#2988) — same render rule as the category
            chip: hidden until at least one spool carries an assignment. */}
        {(uniqueSuppliers.length > 0 || supplierFilter) && (
          <select
            value={supplierFilter}
            onChange={(e) => { setSupplierFilter(e.target.value); resetPage(); }}
            className={`px-3 py-1.5 rounded-lg border text-xs font-medium transition-colors cursor-pointer focus:outline-none ${
              supplierFilter
                ? '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.suppliers.label')}</option>
            {uniqueSuppliers.map((supplier) => (
              <option key={supplier.id} value={String(supplier.id)}>{supplier.name}</option>
            ))}
            {hasUnsupplied && (
              <option value="__none__">{t('inventory.suppliers.none')}</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). */}
        {(storageLocations.length > 0 || storageLocationFilter) && (
          <select
            value={storageLocationFilter}
            onChange={(e) => { setStorageLocationFilter(e.target.value); }}
            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>
            {storageLocations.map((loc) => (
              <option key={loc.id} value={String(loc.id)}>{loc.name}</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>

      {/* Bulk action toolbar (#1795). Appears as soon as at least one
          spool is selected; sticky so it stays visible while the user
          scrolls a long list. */}
      {selectedIds.size > 0 && viewMode !== 'forecast' && (
        <div className="sticky top-2 z-10 mb-4 flex items-center gap-2 px-3 py-2 bg-bambu-green/10 border border-bambu-green/30 rounded-lg backdrop-blur-sm">
          <span className="text-sm text-bambu-green font-medium">
            {t('inventory.bulk.selectionCount', { count: selectedIds.size })}
          </span>
          <div className="ml-auto flex flex-wrap items-center gap-2">
            <Button size="sm" variant="secondary" onClick={() => setBulkEditOpen(true)}>
              <Edit2 className="w-3.5 h-3.5 mr-1.5" />
              {t('inventory.bulk.edit')}
            </Button>
            <Button size="sm" variant="secondary" onClick={() => setLabelPickerSpoolIds([...selectedIds])}>
              <Printer className="w-3.5 h-3.5 mr-1.5" />
              {t('inventory.bulk.printLabels')}
            </Button>
            <Button size="sm" variant="secondary" onClick={() => setBulkConfirmAction('reset-consumed-counter')}>
              <Eraser className="w-3.5 h-3.5 mr-1.5" />
              {t('inventory.bulk.resetUsage')}
            </Button>
            {archiveFilter === 'archived' ? (
              <Button size="sm" variant="secondary" onClick={() => setBulkConfirmAction('restore')}>
                <RotateCcw className="w-3.5 h-3.5 mr-1.5" />
                {t('inventory.bulk.restore')}
              </Button>
            ) : (
              <Button size="sm" variant="secondary" onClick={() => setBulkConfirmAction('archive')}>
                <Archive className="w-3.5 h-3.5 mr-1.5" />
                {t('inventory.bulk.archive')}
              </Button>
            )}
            <Button size="sm" variant="danger" onClick={() => setBulkConfirmAction('delete')}>
              <Trash2 className="w-3.5 h-3.5 mr-1.5" />
              {t('inventory.bulk.delete')}
            </Button>
            <button
              className="p-1.5 text-bambu-gray hover:text-white rounded transition-colors"
              onClick={clearSelection}
              title={t('inventory.bulk.clearSelection')}
              aria-label={t('inventory.bulk.clearSelection')}
            >
              <X className="w-4 h-4" />
            </button>
          </div>
        </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, rep.color_name_is_synthesized) || '-'}
                          </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}
                                colorizeLocationSensors={colorizeLocationSensors}
                                locationSensorAboveColor={locationSensorAboveColor}
                                locationSensorBelowColor={locationSensorBelowColor}
                                locationSensorOptimalColor={locationSensorOptimalColor}
                                dateFormat={dateFormat}
                              />
                            );
                          })}
                        </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}
                    colorizeLocationSensors={colorizeLocationSensors}
                    locationSensorAboveColor={locationSensorAboveColor}
                    locationSensorBelowColor={locationSensorBelowColor}
                    locationSensorOptimalColor={locationSensorOptimalColor}
                    dateFormat={dateFormat}
                  />
                );
              })}
            </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">
                    <th className="w-10 px-3 py-3">
                      <input
                        type="checkbox"
                        className="h-4 w-4 cursor-pointer"
                        aria-label={t('inventory.bulk.selectAllVisible')}
                        checked={pagedItems.length > 0 && pagedItems.every((item) => {
                          const ids = item.type === 'group' ? item.spools.map((s) => s.id) : [item.spool.id];
                          return ids.every((id) => selectedIds.has(id));
                        })}
                        onChange={(e) => {
                          if (e.target.checked) {
                            const next = new Set(selectedIds);
                            for (const item of pagedItems) {
                              const ids = item.type === 'group' ? item.spools.map((s) => s.id) : [item.spool.id];
                              for (const id of ids) next.add(id);
                            }
                            setSelectedIds(next);
                          } else {
                            const next = new Set(selectedIds);
                            for (const item of pagedItems) {
                              const ids = item.type === 'group' ? item.spools.map((s) => s.id) : [item.spool.id];
                              for (const id of ids) next.delete(id);
                            }
                            setSelectedIds(next);
                          }
                        }}
                      />
                    </th>
                    {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)}
                          selectedIds={selectedIds}
                          onToggleSelected={toggleSelected}
                          onToggleGroupSelected={(ids, select) => {
                            setSelectedIds((prev) => {
                              const next = new Set(prev);
                              for (const id of ids) {
                                if (select) next.add(id);
                                else next.delete(id);
                              }
                              return next;
                            });
                          }}
                          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}
                          locationReadingsMap={locationReadingsMap}
                          currencySymbol={currencySymbol}
                          dateFormat={dateFormat}
                          t={t}
                          onSyncWeight={handleSyncWeight}
                          colorizeLocationSensors={colorizeLocationSensors}
                          locationSensorAboveColor={locationSensorAboveColor}
                          locationSensorBelowColor={locationSensorBelowColor}
                          locationSensorOptimalColor={locationSensorOptimalColor}
                        />
                      );
                    }
                    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}
                        isSelected={selectedIds.has(spool.id)}
                        onToggleSelected={() => toggleSelected(spool.id)}
                        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}
                        locationReadingsMap={locationReadingsMap}
                        currencySymbol={currencySymbol}
                        dateFormat={dateFormat}
                        t={t}
                        onSyncWeight={handleSyncWeight}
                        colorizeLocationSensors={colorizeLocationSensors}
                        locationSensorAboveColor={locationSensorAboveColor}
                        locationSensorBelowColor={locationSensorBelowColor}
                        locationSensorOptimalColor={locationSensorOptimalColor}
                      />
                    );
                  })}
                </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}
      />

      <BulkEditSpoolsModal
        isOpen={bulkEditOpen}
        selectedCount={selectedIds.size}
        isPending={bulkUpdateMutation.isPending}
        availableLocations={storageLocations.map((l) => ({ id: l.id, name: l.name }))}
        availableMaterials={dedupeAndSort((spools ?? []).map((s) => s.material))}
        availableSubtypes={dedupeAndSort((spools ?? []).map((s) => s.subtype))}
        availableBrands={dedupeAndSort((spools ?? []).map((s) => s.brand))}
        availableCategories={dedupeAndSort((spools ?? []).map((s) => s.category))}
        availableMaterialNumbers={dedupeAndSort((spools ?? []).map((s) => s.material_number))}
        availableSlicerFilaments={dedupeAndSort((spools ?? []).map((s) => s.slicer_filament))}
        availableSlicerFilamentNames={dedupeAndSort((spools ?? []).map((s) => s.slicer_filament_name))}
        spoolmanMode={spoolmanMode}
        onClose={() => setBulkEditOpen(false)}
        onApply={(patch) => bulkUpdateMutation.mutate({ ids: [...selectedIds], update: patch })}
      />

      {bulkConfirmAction && (
        <ConfirmModal
          title={
            bulkConfirmAction === 'delete' ? t('inventory.bulk.deleteTitle') :
            bulkConfirmAction === 'archive' ? t('inventory.bulk.archiveTitle') :
            bulkConfirmAction === 'restore' ? t('inventory.bulk.restoreTitle') :
            t('inventory.bulk.resetUsageTitle')
          }
          message={
            bulkConfirmAction === 'delete' ? t('inventory.bulk.deleteMessage', { count: selectedIds.size }) :
            bulkConfirmAction === 'archive' ? t('inventory.bulk.archiveMessage', { count: selectedIds.size }) :
            bulkConfirmAction === 'restore' ? t('inventory.bulk.restoreMessage', { count: selectedIds.size }) :
            t('inventory.bulk.resetUsageMessage', { count: selectedIds.size })
          }
          confirmText={
            bulkConfirmAction === 'delete' ? t('common.delete') :
            bulkConfirmAction === 'archive' ? t('inventory.archive') :
            bulkConfirmAction === 'restore' ? t('inventory.restore') :
            t('inventory.resetConsumedCounter')
          }
          variant={bulkConfirmAction === 'delete' ? 'danger' : 'warning'}
          isLoading={
            bulkDeleteMutation.isPending ||
            bulkArchiveMutation.isPending ||
            bulkRestoreMutation.isPending ||
            bulkResetConsumedCounterMutation.isPending
          }
          onConfirm={() => {
            const ids = [...selectedIds];
            if (bulkConfirmAction === 'delete') bulkDeleteMutation.mutate(ids);
            else if (bulkConfirmAction === 'archive') bulkArchiveMutation.mutate(ids);
            else if (bulkConfirmAction === 'restore') bulkRestoreMutation.mutate(ids);
            else bulkResetConsumedCounterMutation.mutate(ids);
          }}
          onCancel={() => setBulkConfirmAction(null)}
        />
      )}

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

      <LocationsModal
        open={locationsModalOpen}
        onClose={() => setLocationsModalOpen(false)}
        onPickLocation={(id) => setStorageLocationFilter(String(id))}
      />

      <SuppliersModal open={suppliersModalOpen} onClose={() => setSuppliersModalOpen(false)} />
    </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,
  colorizeLocationSensors, locationSensorAboveColor, locationSensorBelowColor, locationSensorOptimalColor,
  dateFormat,
}: {
  spool: InventorySpool;
  remaining: number;
  pct: number;
  onClick: () => void;
  onPrintLabel?: () => void;
  onCopy?: () => void;
  t: (key: string, opts?: Record<string, unknown>) => string;
  colorizeLocationSensors: boolean;
  locationSensorAboveColor: LocationSensorAlertColor;
  locationSensorBelowColor: LocationSensorAlertColor;
  locationSensorOptimalColor: LocationSensorAlertColor;
  dateFormat: DateFormat;
}) {
  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, spool.color_name_is_synthesized) || '-'}
        </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">
          {spool.last_dried_at && (
            <div className="col-span-2">
              <span className="text-bambu-gray/60">{t('inventory.lastDried')}: </span>
              <span className="text-bambu-gray">
                {[formatInventoryDate(spool.last_dried_at, dateFormat), formatLastDriedDetails(spool)].filter(Boolean).join(' · ')}
              </span>
            </div>
          )}
          <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.location_id && (
          <SpoolLocationFooter
            locationId={spool.location_id}
            locationName={spool.storage_location ?? null}
            isLast={!spool.note}
            colorize={colorizeLocationSensors}
            aboveColor={locationSensorAboveColor}
            belowColor={locationSensorBelowColor}
            optimalColor={locationSensorOptimalColor}
          />
        )}
        {spool.note && (
          <div
            className="text-xs text-bambu-gray/60 pt-3 border-t border-bambu-dark-tertiary truncate"
            title={spool.note}
          >
            {spool.note}
          </div>
        )}
      </div>
    </div>
  );
}

const LOCATION_SENSOR_CATEGORY_ORDER: Record<string, number> = {
  temperature: 0,
  humidity: 1,
  battery: 2,
};

function locationSensorIconGapClass(deviceClass: string | null): string {
  if (deviceClass === 'humidity') return 'mr-[2px]';
  if (deviceClass === 'battery') return 'mr-[3px]';
  return '';
}

// Two decimal places, unlike the printer row's raw value: keeps
// temperature/humidity/battery cells at a consistent width in the table and
// card grid (see describeHASensorReading's doc comment).
function describeLocationSensor(
  reading: LocationHASensorReading,
  t: (key: string, opts?: Record<string, unknown>) => string
): string {
  return describeHASensorReading(reading, t, { decimals: 2 });
}

function locationSensorCellColor(
  reading: LocationHASensorReading,
  colorize: boolean,
  aboveColor: LocationSensorAlertColor,
  belowColor: LocationSensorAlertColor,
  optimalColor: LocationSensorAlertColor
): string {
  if (!colorize) return 'text-bambu-gray';
  const status = locationSensorReadingAlertStatus(reading);
  return locationSensorValueColorClass(status, aboveColor, belowColor, optimalColor) || 'text-bambu-gray';
}

function SpoolLocationFooter({
  locationId, locationName, isLast, colorize, aboveColor, belowColor, optimalColor,
}: {
  locationId: number;
  locationName: string | null;
  isLast: boolean;
  colorize: boolean;
  aboveColor: LocationSensorAlertColor;
  belowColor: LocationSensorAlertColor;
  optimalColor: LocationSensorAlertColor;
}) {
  const { t } = useTranslation();

  const { data: settings } = useQuery({ queryKey: ['settings'], queryFn: api.getSettings });
  const pollIntervalMs = (settings?.location_sensor_poll_interval || 120) * 1000;

  // Same query key as the list fetch in InventoryPage's body, so this is a
  // cache read (no extra request) whenever that has already run — which it
  // has, since card view and this footer only render after spools/locations
  // are loaded.
  const { data: sensorsList } = useQuery({
    queryKey: ['locationHaSensors'],
    queryFn: () => api.getLocationHASensors(),
  });
  const hasSensor = (sensorsList ?? []).some((s) => s.location_id === locationId);

  // Same query key as the table-view columns' fetch in InventoryPage's body
  // (unfiltered, show_on_card=false) — this is a cache read whenever that
  // has already run, and the two views never need two different requests
  // for one location. Filtering to card-visible sensors happens here
  // instead of on the server.
  const { data: allReadings } = useQuery({
    queryKey: ['locationHaSensorReadings', locationId],
    queryFn: () => api.getLocationHASensorReadings(locationId, false),
    refetchInterval: pollIntervalMs,
    enabled: hasSensor,
  });
  const readings = allReadings?.filter((r) => r.show_on_card);

  if (!readings?.length) return null;

  const batteryReading = readings.find((r) => r.device_class === 'battery');
  const otherReadings = readings
    .filter((r) => r.device_class !== 'battery')
    .sort(
      (a, b) =>
        (LOCATION_SENSOR_CATEGORY_ORDER[a.device_class ?? ''] ?? 99) -
        (LOCATION_SENSOR_CATEGORY_ORDER[b.device_class ?? ''] ?? 99)
    );

  return (
    <div
      className={`flex items-center gap-2 pt-3 border-t border-bambu-dark-tertiary text-xs text-bambu-gray ${isLast ? '-mb-1' : ''}`}
    >
      {locationName && <span className="truncate">{locationName}</span>}
      <span className="text-bambu-gray/40">|</span>
      <div className="flex items-center gap-3">
        {otherReadings.map((reading, index) => {
          const Icon = iconForHASensor(reading);
          const firstIconOffsetClass = index === 0 ? 'ml-[-3.6px]' : '';
          return (
            <span key={reading.id} title={reading.name} className="flex items-center gap-[3px]">
              <Icon className={`w-3 h-3 ${locationSensorIconGapClass(reading.device_class)} ${firstIconOffsetClass}`} />
              <span className={locationSensorCellColor(reading, colorize, aboveColor, belowColor, optimalColor)}>
                {describeLocationSensor(reading, t)}
              </span>
            </span>
          );
        })}
      </div>
      {batteryReading &&
        (() => {
          const Icon = iconForHASensor(batteryReading);
          return (
            <span key={batteryReading.id} title={batteryReading.name} className="flex items-center gap-[3px] ml-auto">
              <Icon className={`w-3 h-3 ${locationSensorIconGapClass(batteryReading.device_class)}`} />
              <span className={locationSensorCellColor(batteryReading, colorize, aboveColor, belowColor, optimalColor)}>
                {describeLocationSensor(batteryReading, t)}
              </span>
            </span>
          );
        })()}
    </div>
  );
}

/* Single spool row for table view */
function SpoolTableRow({
  spool, remaining, pct, isSelected, onToggleSelected,
  onEdit, onCopy, onRestore, onArchive, onDelete, onPrintLabel, onResetConsumedCounter,
  visibleColumns, assignmentMap, catalogMap, locationReadingsMap, currencySymbol, dateFormat, t, onSyncWeight,
  colorizeLocationSensors, locationSensorAboveColor, locationSensorBelowColor, locationSensorOptimalColor,
}: {
  spool: InventorySpool;
  remaining: number;
  pct: number;
  isSelected?: boolean;
  onToggleSelected?: () => void;
  onEdit: () => void;
  onCopy?: () => void;
  onRestore: () => void;
  onArchive: () => void;
  onDelete: () => void;
  onPrintLabel?: () => void;
  onResetConsumedCounter?: () => void;
  visibleColumns: string[];
  assignmentMap: Record<number, LocationDisplay>;
  catalogMap: Record<number, SpoolCatalogEntry>;
  locationReadingsMap: Record<number, LocationHASensorReading[]>;
  currencySymbol: string;
  dateFormat: DateFormat;
  t: TFn;
  onSyncWeight?: (spool: InventorySpool) => void;
  colorizeLocationSensors: boolean;
  locationSensorAboveColor: LocationSensorAlertColor;
  locationSensorBelowColor: LocationSensorAlertColor;
  locationSensorOptimalColor: LocationSensorAlertColor;
}) {
  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' : ''
      } ${isSelected ? 'bg-bambu-green/10' : ''}`}
      onClick={onEdit}
    >
      <td className="w-10 px-3 py-3" onClick={(e) => e.stopPropagation()}>
        {onToggleSelected && (
          <input
            type="checkbox"
            className="h-4 w-4 cursor-pointer"
            aria-label={t('inventory.bulk.selectRow')}
            checked={!!isSelected}
            onChange={onToggleSelected}
          />
        )}
      </td>
      {visibleColumns.map((colId) => (
        <td key={colId} className="py-3 px-4">
          {columnCells[colId]?.({ spool, remaining, pct, assignmentMap, catalogMap, locationReadingsMap, currencySymbol, dateFormat, t, onSyncWeight, colorizeLocationSensors, locationSensorAboveColor, locationSensorBelowColor, locationSensorOptimalColor })}
        </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-600 dark: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-600 dark: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-600 dark: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, locationReadingsMap, currencySymbol, dateFormat, t, onSyncWeight,
  colorizeLocationSensors, locationSensorAboveColor, locationSensorBelowColor, locationSensorOptimalColor,
  selectedIds, onToggleSelected, onToggleGroupSelected,
}: {
  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>;
  locationReadingsMap: Record<number, LocationHASensorReading[]>;
  currencySymbol: string;
  dateFormat: DateFormat;
  t: TFn;
  onSyncWeight?: (spool: InventorySpool) => void;
  colorizeLocationSensors: boolean;
  locationSensorAboveColor: LocationSensorAlertColor;
  locationSensorBelowColor: LocationSensorAlertColor;
  locationSensorOptimalColor: LocationSensorAlertColor;
  selectedIds?: Set<number>;
  onToggleSelected?: (id: number) => void;
  onToggleGroupSelected?: (ids: number[], select: boolean) => void;
}) {
  const allMembersSelected = !!selectedIds && spools.every((s) => selectedIds.has(s.id));
  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}
      >
        <td className="w-10 px-3 py-3" onClick={(e) => e.stopPropagation()}>
          {onToggleGroupSelected && (
            <input
              type="checkbox"
              className="h-4 w-4 cursor-pointer"
              aria-label={t('inventory.bulk.selectGroup')}
              checked={allMembersSelected}
              onChange={(e) => onToggleGroupSelected(spools.map((s) => s.id), e.target.checked)}
            />
          )}
        </td>
        {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, locationReadingsMap, currencySymbol, dateFormat, t, onSyncWeight, colorizeLocationSensors, locationSensorAboveColor, locationSensorBelowColor, locationSensorOptimalColor })}
              </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, locationReadingsMap, currencySymbol, dateFormat, t, onSyncWeight, colorizeLocationSensors, locationSensorAboveColor, locationSensorBelowColor, locationSensorOptimalColor })
            )}
          </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}
            isSelected={selectedIds?.has(spool.id)}
            onToggleSelected={onToggleSelected ? () => onToggleSelected(spool.id) : undefined}
            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}
            locationReadingsMap={locationReadingsMap}
            currencySymbol={currencySymbol}
            dateFormat={dateFormat}
            t={t}
            onSyncWeight={onSyncWeight}
            colorizeLocationSensors={colorizeLocationSensors}
            locationSensorAboveColor={locationSensorAboveColor}
            locationSensorBelowColor={locationSensorBelowColor}
            locationSensorOptimalColor={locationSensorOptimalColor}
          />
        );
      })}
    </>
  );
}

/* 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>
  );
}