Craze-Data-check/src/components/PricingView.tsx

import React, { useState, useMemo, useRef, useCallback } from 'react';
import { ExcelRow, COLUMNS } from '../types';
import {
  AlertTriangle,
  AlertCircle,
  CheckCircle2,
  DollarSign,
  Package,
  Save,
  X,
  ChevronDown,
  Edit2,
  Filter,
  Check,
  Search,
} from 'lucide-react';
import { cn } from '../lib/utils';
import { ColumnFilterPopover } from './ColumnFilterPopover';

interface PricingViewProps {
  data: ExcelRow[];
  headers: string[];
  onSaveRow: (index: number, updatedRow: ExcelRow) => void;
  onCaptureState: (message: string) => void;
  onEdit: (index: number) => void;
  rowStatuses: Record<string, string>;
}

interface DetectedCol {
  index: number;
  name: string;
}

type FilterMode = 'all' | 'all_errors' | 'pricing_errors' | 'units_errors';

interface EditingCell {
  rowIndex: number;
  colIndex: number;
  value: string;
}

// Flexible multi-keyword column finder
function findCol(headers: string[], ...keywords: string[]): number {
  return headers.findIndex(h =>
    keywords.every(kw => (h || '').toLowerCase().includes(kw.toLowerCase()))
  );
}

export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit, rowStatuses }: PricingViewProps) {
  const [filterMode, setFilterMode] = useState<FilterMode>('all_errors');
  const [search, setSearch] = useState('');
  const [editingCell, setEditingCell] = useState<EditingCell | null>(null);
  const [savingCell, setSavingCell] = useState<{ rowIndex: number; colIndex: number } | null>(null);
  const inputRef = useRef<HTMLInputElement>(null);
  const [lineMultiFilter, setLineMultiFilter] = useState<string[]>([]);
  const [classificationFilter, setClassificationFilter] = useState<string[]>([]);
  const [nameColFilter, setNameColFilter] = useState('');
  const [openFilter, setOpenFilter] = useState<string | null>(null);
  const [unitsOuterFilter, setUnitsOuterFilter] = useState<string[]>([]);
  const [outerWFilter, setOuterWFilter] = useState<string[]>([]);
  const [outerLFilter, setOuterLFilter] = useState<string[]>([]);
  const [outerHFilter, setOuterHFilter] = useState<string[]>([]);
  const [dynamicColFilters, setDynamicColFilters] = useState<Record<number, string[]>>({});

  // ── Dynamic column detection ──────────────────────────────────────────────
  const { uvpIdx, srpCols, containerCols } = useMemo(() => {
    const uvpIdx = findCol(headers, 'uvp');

    // All SRP columns, sorted: INT first, UK second, then alphabetically
    const srp: DetectedCol[] = headers
      .map((h, i) => ({ index: i, name: h || '' }))
      .filter(({ name }) => /srp/i.test(name))
      .sort((a, b) => {
        const order = (n: string) => {
          if (/int/i.test(n)) return 0;
          if (/uk/i.test(n)) return 1;
          return 2;
        };
        return order(a.name) - order(b.name);
      });

    // All 40' container columns (HC, HQ, etc.)
    const container: DetectedCol[] = headers
      .map((h, i) => ({ index: i, name: h || '' }))
      .filter(({ name }) => /40/i.test(name) && /h[cq]/i.test(name));

    return { uvpIdx, srpCols: srp, containerCols: container };
  }, [headers]);

  // ── Error analysis per row ────────────────────────────────────────────────
  const analyzedRows = useMemo(() => {
    return data.map((row, dataIndex) => {
      const pricingErrors: string[] = [];
      const unitErrors: string[] = [];

      // UVP check
      if (uvpIdx >= 0) {
        const v = row[uvpIdx];
        if (v === undefined || v === null || v === '' || Number(v) === 0) {
          pricingErrors.push('UVP missing');
        }
      }

      // SRP checks
      srpCols.forEach(({ index, name }) => {
        const v = row[index];
        if (v === undefined || v === null || v === '' || Number(v) === 0) {
          pricingErrors.push(`${name} missing`);
        }
      });

      // Units per Outer check
      const unitsOuter = Number(row[COLUMNS.UNITS_OUTER]);
      if (!unitsOuter || unitsOuter === 0) {
        unitErrors.push('Units/Outer: missing');
      }

      // 40' container checks
      containerCols.forEach(({ index, name }) => {
        const v = Number(row[index]);
        if (!v || v === 0) unitErrors.push(`${name}: empty`);
        else if (v === 1) unitErrors.push(`${name}: value is 1`);
      });

      return {
        row,
        dataIndex,
        pricingErrors,
        unitErrors,
        hasErrors: pricingErrors.length > 0 || unitErrors.length > 0,
        isCritical: unitErrors.length > 0,
      };
    });
  }, [data, uvpIdx, srpCols, containerCols]);

  // ── Stats ─────────────────────────────────────────────────────────────────
  const stats = useMemo(() => {
    const withPricing = analyzedRows.filter(r => r.pricingErrors.length > 0).length;
    const withUnits = analyzedRows.filter(r => r.unitErrors.length > 0).length;
    const withAny = analyzedRows.filter(r => r.hasErrors).length;
    const allOk = analyzedRows.length - withAny;
    return { total: analyzedRows.length, withPricing, withUnits, withAny, allOk };
  }, [analyzedRows]);

  // ── Unique values for column filters ─────────────────────────────────────
  const uniqueLines = useMemo(() =>
    Array.from(new Set(data.map(r => String(r[COLUMNS.LINE] || '')))).sort(),
  [data]);

  const uniqueClassifications = useMemo(() =>
    Array.from(new Set(data.map(r => String(r[COLUMNS.CLASSIFICATION] || '')))).sort(),
  [data]);

  const uniqueUnitsOuter = useMemo(() =>
    Array.from(new Set(data.map(r => String(r[COLUMNS.UNITS_OUTER] || '')))).filter(v => v).sort(),
  [data]);

  const uniqueOuterW = useMemo(() =>
    Array.from(new Set(data.map(r => String(r[COLUMNS.OUTER_W] || '')))).filter(v => v).sort((a, b) => Number(a) - Number(b)),
  [data]);

  const uniqueOuterL = useMemo(() =>
    Array.from(new Set(data.map(r => String(r[COLUMNS.OUTER_L] || '')))).filter(v => v).sort((a, b) => Number(a) - Number(b)),
  [data]);

  const uniqueOuterH = useMemo(() =>
    Array.from(new Set(data.map(r => String(r[COLUMNS.OUTER_H] || '')))).filter(v => v).sort((a, b) => Number(a) - Number(b)),
  [data]);

  // ── Filtered rows ─────────────────────────────────────────────────────────
  const filteredRows = useMemo(() => {
    let result = analyzedRows;

    // Mode filter
    switch (filterMode) {
      case 'all_errors':   result = analyzedRows.filter(r => r.hasErrors); break;
      case 'pricing_errors': result = analyzedRows.filter(r => r.pricingErrors.length > 0); break;
      case 'units_errors': result = analyzedRows.filter(r => r.unitErrors.length > 0); break;
    }

    // Global search (SKU + Name)
    if (search) {
      const s = search.toLowerCase();
      result = result.filter(r =>
        String(r.row[COLUMNS.ARTICLE_NO] || '').toLowerCase().includes(s) ||
        String(r.row[COLUMNS.ARTICLE_NAME] || '').toLowerCase().includes(s)
      );
    }

    // Column filters
    if (nameColFilter) {
      const s = nameColFilter.toLowerCase();
      result = result.filter(r => String(r.row[COLUMNS.ARTICLE_NAME] || '').toLowerCase().includes(s));
    }
    if (lineMultiFilter.length > 0) {
      result = result.filter(r => lineMultiFilter.includes(String(r.row[COLUMNS.LINE] || '')));
    }
    if (classificationFilter.length > 0) {
      result = result.filter(r => classificationFilter.includes(String(r.row[COLUMNS.CLASSIFICATION] || '')));
    }
    if (unitsOuterFilter.length > 0) {
      result = result.filter(r => unitsOuterFilter.includes(String(r.row[COLUMNS.UNITS_OUTER] || '')));
    }
    if (outerWFilter.length > 0) {
      result = result.filter(r => outerWFilter.includes(String(r.row[COLUMNS.OUTER_W] || '')));
    }
    if (outerLFilter.length > 0) {
      result = result.filter(r => outerLFilter.includes(String(r.row[COLUMNS.OUTER_L] || '')));
    }
    if (outerHFilter.length > 0) {
      result = result.filter(r => outerHFilter.includes(String(r.row[COLUMNS.OUTER_H] || '')));
    }

    // Dynamic column filters (SRP, container)
    (Object.keys(dynamicColFilters) as string[]).forEach(colIdx => {
      const filterVals = dynamicColFilters[Number(colIdx)];
      if (filterVals && filterVals.length > 0) {
        const col = Number(colIdx);
        result = result.filter(r => filterVals.includes(String(r.row[col] || '')));
      }
    });

    return result;
  }, [analyzedRows, filterMode, search, nameColFilter, lineMultiFilter, classificationFilter, unitsOuterFilter, outerWFilter, outerLFilter, outerHFilter, dynamicColFilters]);

  // ── Inline edit helpers ───────────────────────────────────────────────────
  const startEdit = (rowIndex: number, colIndex: number, currentValue: string) => {
    setEditingCell({ rowIndex, colIndex, value: currentValue });
    setTimeout(() => inputRef.current?.focus(), 0);
  };

  const commitEdit = useCallback(async () => {
    if (!editingCell) return;
    const { rowIndex, colIndex, value } = editingCell;
    const original = data[rowIndex];
    const newRow = [...original];
    newRow[colIndex] = value;
    setSavingCell({ rowIndex, colIndex });
    setEditingCell(null);
    onCaptureState(`Updated pricing for ${original[COLUMNS.ARTICLE_NO]}`);
    await onSaveRow(rowIndex, newRow);
    setSavingCell(null);
  }, [editingCell, data, onSaveRow, onCaptureState]);

  const cancelEdit = () => setEditingCell(null);

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') commitEdit();
    if (e.key === 'Escape') cancelEdit();
  };

  // ── Column helpers ────────────────────────────────────────────────────────
  const pricingEditableCols: DetectedCol[] = [
    ...(uvpIdx >= 0 ? [{ index: uvpIdx, name: headers[uvpIdx] || 'UVP' }] : []),
    ...srpCols,
  ];

  // ═ Unique values for dynamic pricing columns ═════════════════════════════
  const dynamicColUniqueValues = useMemo(() => {
    const result: Record<number, string[]> = {};
    pricingEditableCols.forEach(col => {
      result[col.index] = Array.from(new Set(data.map(r => String(r[col.index] || '')))).filter(v => v).sort();
    });
    containerCols.forEach(col => {
      result[col.index] = Array.from(new Set(data.map(r => String(r[col.index] || '')))).filter(v => v).sort();
    });
    return result;
  }, [data, uvpIdx, srpCols, containerCols, headers]);

  const formatPrice = (val: any) => {
    if (val === undefined || val === null || val === '') return '';
    const n = parseFloat(String(val).replace(',', '.'));
    return isNaN(n) ? String(val) : n.toFixed(2);
  };

  const formatUnits = (val: any) => {
    if (val === undefined || val === null || val === '') return '—';
    return String(val);
  };

  const unitBadge = (val: any, label: string) => {
    const n = Number(val);
    if (!val || n === 0) return (
      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-bold bg-red-500/20 text-red-400 border border-red-500/40">
        <AlertCircle className="w-3 h-3" /> 0
      </span>
    );
    if (n === 1) return (
      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-bold bg-amber-500/20 text-amber-400 border border-amber-500/40">
        <AlertTriangle className="w-3 h-3" /> 1
      </span>
    );
    return (
      <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-emerald-500/10 text-emerald-400 border border-emerald-500/30">
        {n.toLocaleString()}
      </span>
    );
  };

  const unitOuterBadge = (val: any) => {
    const n = Number(val);
    if (!val || n === 0) return (
      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-bold bg-red-500/20 text-red-400 border border-red-500/40">
        <AlertCircle className="w-3 h-3" /> Missing
      </span>
    );
    return (
      <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-slate-500/20 text-slate-300 border border-slate-600/50">
        {n}
      </span>
    );
  };

  // ── Column detection notice ───────────────────────────────────────────────
  const missingCols: string[] = [];
  if (uvpIdx < 0) missingCols.push('UVP');
  if (srpCols.length === 0) missingCols.push('SRP');
  if (containerCols.length === 0) missingCols.push('Units/40\'');

  const FILTERS: { id: FilterMode; label: string; count: number; color: string }[] = [
    { id: 'all',          label: 'All Products',    count: stats.total,      color: 'text-slate-300' },
    { id: 'all_errors',   label: 'All Issues',      count: stats.withAny,    color: 'text-red-400' },
    { id: 'pricing_errors', label: 'Pricing Issues', count: stats.withPricing, color: 'text-amber-400' },
    { id: 'units_errors', label: 'Units Issues',    count: stats.withUnits,  color: 'text-orange-400' },
  ];

  return (
    <div className="flex flex-col h-full gap-4">
      <div className="flex items-center justify-between gap-4">
        {/* ── Search bar ── */}
        <div className="flex-1 max-w-md relative">
          <input
            type="text"
            placeholder="Search SKU or Name..."
            value={search}
            onChange={e => setSearch(e.target.value)}
            className="w-full pl-4 pr-10 py-2 bg-slate-800 border border-slate-700 rounded-lg text-sm text-white focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all"
          />
          {search ? (
            <button
              onClick={() => setSearch('')}
              className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-white"
            >
              <X className="w-4 h-4" />
            </button>
          ) : (
            <div className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-500">
              <Package className="w-4 h-4" />
            </div>
          )}
        </div>

        {/* ── Filter tabs ── */}
        <div className="flex items-center gap-1 bg-slate-800/60 rounded-lg p-1 border border-slate-700/50 w-fit">
          {FILTERS.map(f => (
            <button
              key={f.id}
              onClick={() => setFilterMode(f.id)}
              className={cn(
                'flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium transition-colors',
                filterMode === f.id
                  ? 'bg-slate-700 text-white shadow-sm'
                  : 'text-slate-400 hover:text-slate-200 hover:bg-slate-700/40'
              )}
            >
              {f.label}
              <span className={cn(
                'text-xs font-bold px-1.5 py-0.5 rounded-full min-w-[22px] text-center',
                filterMode === f.id
                  ? 'bg-slate-600 text-white'
                  : f.count > 0 ? `${f.color} bg-current/10` : 'text-slate-500'
              )}>
                {f.count}
              </span>
            </button>
          ))}
        </div>
      </div>

      {/* ── Column detection warning ── */}
      {missingCols.length > 0 && (
        <div className="flex items-center gap-3 px-4 py-2.5 bg-amber-500/10 border border-amber-500/30 rounded-lg text-amber-300 text-sm">
          <AlertTriangle className="w-4 h-4 shrink-0" />
          <span>
            Could not auto-detect columns for: <strong>{missingCols.join(', ')}</strong>.
            Check that the Excel headers contain "UVP", "SRP", or "40HC"/"40HQ".
          </span>
        </div>
      )}

      {/* ── Stat cards ── */}
      <div className="grid grid-cols-4 gap-3">
        <StatCard label="Total Products" value={stats.total} icon={<Package className="w-4 h-4" />} color="slate" />
        <StatCard label="Pricing Issues" value={stats.withPricing} icon={<DollarSign className="w-4 h-4" />} color="amber" />
        <StatCard label="Units Issues" value={stats.withUnits} icon={<AlertCircle className="w-4 h-4" />} color="red" />
        <StatCard label="All OK" value={stats.allOk} icon={<CheckCircle2 className="w-4 h-4" />} color="emerald" />
      </div>

      {/* ── Table ── */}
      <div className="flex-1 overflow-auto bg-slate-800 rounded-xl border border-slate-700 shadow-xl">
        {filteredRows.length === 0 ? (
          <div className="flex flex-col items-center justify-center h-64 text-slate-400">
            <CheckCircle2 className="w-12 h-12 text-emerald-500 mb-3" />
            <p className="text-lg font-medium text-emerald-400">No issues found</p>
            <p className="text-sm mt-1">All products are correctly configured.</p>
          </div>
        ) : (
          <table className="w-full text-sm border-collapse">
            <thead className="sticky top-0 z-10 bg-slate-900">
              <tr>
                <th className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap">
                  Art. No.
                </th>
                {/* Article Name with text filter */}
                <th className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700 group relative">
                  <div className="flex items-center gap-1">
                    <span>Article Name</span>
                    <button
                      onClick={() => setOpenFilter(openFilter === 'name' ? null : 'name')}
                      className={cn(
                        'p-0.5 rounded hover:bg-slate-700 transition-colors',
                        nameColFilter ? 'text-blue-400 bg-blue-400/10' : 'text-slate-500 opacity-0 group-hover:opacity-100'
                      )}
                    >
                      <Filter className="w-3 h-3" />
                    </button>
                  </div>
                  {openFilter === 'name' && (
                    <TextFilterPopover
                      value={nameColFilter}
                      onChange={setNameColFilter}
                      onClose={() => setOpenFilter(null)}
                    />
                  )}
                </th>
                {/* Line with multi-select filter */}
                <th className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap group relative">
                  <div className="flex items-center gap-1">
                    <span>Line</span>
                    <button
                      onClick={() => setOpenFilter(openFilter === 'line' ? null : 'line')}
                      className={cn(
                        'p-0.5 rounded hover:bg-slate-700 transition-colors',
                        lineMultiFilter.length > 0 ? 'text-blue-400 bg-blue-400/10' : 'text-slate-500 opacity-0 group-hover:opacity-100'
                      )}
                    >
                      <Filter className="w-3 h-3" />
                    </button>
                  </div>
                  {openFilter === 'line' && (
                    <ColumnFilterPopover
                      uniqueValues={uniqueLines}
                      selectedValues={lineMultiFilter}
                      onToggle={val => setLineMultiFilter(prev => prev.includes(val) ? prev.filter(v => v !== val) : [...prev, val])}
                      onSelectAll={vals => setLineMultiFilter(vals)}
                      onClear={() => { setLineMultiFilter([]); setOpenFilter(null); }}
                      onClose={() => setOpenFilter(null)}
                    />
                  )}
                </th>
                {/* Classification with multi-select filter */}
                <th className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap group relative">
                  <div className="flex items-center gap-1">
                    <span>Classification</span>
                    <button
                      onClick={() => setOpenFilter(openFilter === 'classification' ? null : 'classification')}
                      className={cn(
                        'p-0.5 rounded hover:bg-slate-700 transition-colors',
                        classificationFilter.length > 0 ? 'text-blue-400 bg-blue-400/10' : 'text-slate-500 opacity-0 group-hover:opacity-100'
                      )}
                    >
                      <Filter className="w-3 h-3" />
                    </button>
                  </div>
                  {openFilter === 'classification' && (
                    <ColumnFilterPopover
                      uniqueValues={uniqueClassifications}
                      selectedValues={classificationFilter}
                      onToggle={val => setClassificationFilter(prev => prev.includes(val) ? prev.filter(v => v !== val) : [...prev, val])}
                      onSelectAll={vals => setClassificationFilter(vals)}
                      onClear={() => { setClassificationFilter([]); setOpenFilter(null); }}
                      onClose={() => setOpenFilter(null)}
                    />
                  )}
                </th>

                {/* Editable pricing columns */}
                {pricingEditableCols.map(col => (
                  <th key={col.index} className="text-left px-3 py-3 text-xs font-semibold text-blue-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap group relative">
                    <div className="flex items-center gap-1">
                      <span>{col.name}</span>
                      <button
                        onClick={(e) => {
                          e.stopPropagation();
                          setOpenFilter(openFilter === `prc_${col.index}` ? null : `prc_${col.index}`);
                        }}
                        className={cn(
                          'p-0.5 rounded hover:bg-slate-700 transition-colors',
                          dynamicColFilters[col.index]?.length > 0 ? 'text-blue-400 bg-blue-400/10' : 'text-slate-500 opacity-0 group-hover:opacity-100'
                        )}
                      >
                        <Filter className="w-3 h-3" />
                      </button>
                    </div>
                    {openFilter === `prc_${col.index}` && (
                      <ColumnFilterPopover
                        uniqueValues={dynamicColUniqueValues[col.index] || []}
                        selectedValues={dynamicColFilters[col.index] || []}
                        onToggle={val => setDynamicColFilters(prev => {
                          const current = prev[col.index] || [];
                          return current.includes(val) 
                            ? { ...prev, [col.index]: current.filter(v => v !== val) }
                            : { ...prev, [col.index]: [...current, val] };
                        })}
                        onSelectAll={vals => setDynamicColFilters(prev => ({ ...prev, [col.index]: vals }))}
                        onClear={() => { setDynamicColFilters(prev => { const next = { ...prev }; delete next[col.index]; return next; }); setOpenFilter(null); }}
                        onClose={() => setOpenFilter(null)}
                      />
                    )}
                  </th>
                ))}

                {/* Units/Outer */}
                <th className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap group relative">
                  <div className="flex items-center gap-1">
                    <span>Units/Outer</span>
                    <button
                      onClick={() => setOpenFilter(openFilter === 'unitsOuter' ? null : 'unitsOuter')}
                      className={cn(
                        'p-0.5 rounded hover:bg-slate-700 transition-colors',
                        unitsOuterFilter.length > 0 ? 'text-blue-400 bg-blue-400/10' : 'text-slate-500 opacity-0 group-hover:opacity-100'
                      )}
                    >
                      <Filter className="w-3 h-3" />
                    </button>
                  </div>
                  {openFilter === 'unitsOuter' && (
                    <ColumnFilterPopover
                      uniqueValues={uniqueUnitsOuter}
                      selectedValues={unitsOuterFilter}
                      onToggle={val => setUnitsOuterFilter(prev => prev.includes(val) ? prev.filter(v => v !== val) : [...prev, val])}
                      onSelectAll={vals => setUnitsOuterFilter(vals)}
                      onClear={() => { setUnitsOuterFilter([]); setOpenFilter(null); }}
                      onClose={() => setOpenFilter(null)}
                    />
                  )}
                </th>

                {/* Outer W */}
                <th className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap group relative">
                  <div className="flex items-center gap-1">
                    <span>Outer W</span>
                    <button
                      onClick={() => setOpenFilter(openFilter === 'outerW' ? null : 'outerW')}
                      className={cn(
                        'p-0.5 rounded hover:bg-slate-700 transition-colors',
                        outerWFilter.length > 0 ? 'text-blue-400 bg-blue-400/10' : 'text-slate-500 opacity-0 group-hover:opacity-100'
                      )}
                    >
                      <Filter className="w-3 h-3" />
                    </button>
                  </div>
                  {openFilter === 'outerW' && (
                    <ColumnFilterPopover
                      uniqueValues={uniqueOuterW}
                      selectedValues={outerWFilter}
                      onToggle={val => setOuterWFilter(prev => prev.includes(val) ? prev.filter(v => v !== val) : [...prev, val])}
                      onSelectAll={vals => setOuterWFilter(vals)}
                      onClear={() => { setOuterWFilter([]); setOpenFilter(null); }}
                      onClose={() => setOpenFilter(null)}
                    />
                  )}
                </th>

                {/* Outer L */}
                <th className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap group relative">
                  <div className="flex items-center gap-1">
                    <span>Outer L</span>
                    <button
                      onClick={() => setOpenFilter(openFilter === 'outerL' ? null : 'outerL')}
                      className={cn(
                        'p-0.5 rounded hover:bg-slate-700 transition-colors',
                        outerLFilter.length > 0 ? 'text-blue-400 bg-blue-400/10' : 'text-slate-500 opacity-0 group-hover:opacity-100'
                      )}
                    >
                      <Filter className="w-3 h-3" />
                    </button>
                  </div>
                  {openFilter === 'outerL' && (
                    <ColumnFilterPopover
                      uniqueValues={uniqueOuterL}
                      selectedValues={outerLFilter}
                      onToggle={val => setOuterLFilter(prev => prev.includes(val) ? prev.filter(v => v !== val) : [...prev, val])}
                      onSelectAll={vals => setOuterLFilter(vals)}
                      onClear={() => { setOuterLFilter([]); setOpenFilter(null); }}
                      onClose={() => setOpenFilter(null)}
                    />
                  )}
                </th>

                {/* Outer H */}
                <th className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap group relative">
                  <div className="flex items-center gap-1">
                    <span>Outer H</span>
                    <button
                      onClick={() => setOpenFilter(openFilter === 'outerH' ? null : 'outerH')}
                      className={cn(
                        'p-0.5 rounded hover:bg-slate-700 transition-colors',
                        outerHFilter.length > 0 ? 'text-blue-400 bg-blue-400/10' : 'text-slate-500 opacity-0 group-hover:opacity-100'
                      )}
                    >
                      <Filter className="w-3 h-3" />
                    </button>
                  </div>
                  {openFilter === 'outerH' && (
                    <ColumnFilterPopover
                      uniqueValues={uniqueOuterH}
                      selectedValues={outerHFilter}
                      onToggle={val => setOuterHFilter(prev => prev.includes(val) ? prev.filter(v => v !== val) : [...prev, val])}
                      onSelectAll={vals => setOuterHFilter(vals)}
                      onClear={() => { setOuterHFilter([]); setOpenFilter(null); }}
                      onClose={() => setOpenFilter(null)}
                    />
                  )}
                </th>

                {/* Container columns */}
                {containerCols.map(col => (
                  <th key={col.index} className="text-left px-3 py-3 text-xs font-semibold text-orange-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap group relative">
                    <div className="flex items-center gap-1">
                      <span>{col.name}</span>
                      <button
                        onClick={(e) => {
                          e.stopPropagation();
                          setOpenFilter(openFilter === `con_${col.index}` ? null : `con_${col.index}`);
                        }}
                        className={cn(
                          'p-0.5 rounded hover:bg-slate-700 transition-colors',
                          dynamicColFilters[col.index]?.length > 0 ? 'text-blue-400 bg-blue-400/10' : 'text-slate-500 opacity-0 group-hover:opacity-100'
                        )}
                      >
                        <Filter className="w-3 h-3" />
                      </button>
                    </div>
                    {openFilter === `con_${col.index}` && (
                      <ColumnFilterPopover
                        uniqueValues={dynamicColUniqueValues[col.index] || []}
                        selectedValues={dynamicColFilters[col.index] || []}
                        onToggle={val => setDynamicColFilters(prev => {
                          const current = prev[col.index] || [];
                          return current.includes(val) 
                            ? { ...prev, [col.index]: current.filter(v => v !== val) }
                            : { ...prev, [col.index]: [...current, val] };
                        })}
                        onSelectAll={vals => setDynamicColFilters(prev => ({ ...prev, [col.index]: vals }))}
                        onClear={() => { setDynamicColFilters(prev => { const next = { ...prev }; delete next[col.index]; return next; }); setOpenFilter(null); }}
                        onClose={() => setOpenFilter(null)}
                      />
                    )}
                  </th>
                ))}

                {/* Status */}
                <th className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700">
                  Status
                </th>

                {/* Actions */}
                <th className="px-3 py-3 border-b border-slate-700 w-10" />
              </tr>
            </thead>
            <tbody>
              {filteredRows.map(({ row, dataIndex, pricingErrors, unitErrors, isCritical }) => {
                const hasAnyError = pricingErrors.length > 0 || unitErrors.length > 0;
                const saveStatus = rowStatuses[String(row[COLUMNS.ARTICLE_NO])];
                return (
                  <tr
                    key={dataIndex}
                    className={cn(
                      'border-b border-slate-700/50 transition-colors hover:bg-slate-700/20',
                      saveStatus === 'error'
                        ? 'bg-red-400/20 border-l-4 border-l-red-500'
                        : saveStatus === 'pending'
                          ? 'bg-yellow-400/20 border-l-4 border-l-yellow-400'
                          : isCritical
                            ? 'bg-red-950/20'
                            : pricingErrors.length > 0
                              ? 'bg-amber-950/10'
                              : ''
                    )}
                  >
                    {/* Article No */}
                    <td className="px-3 py-2.5 font-mono text-xs text-slate-300 whitespace-nowrap">
                      {row[COLUMNS.ARTICLE_NO]}
                    </td>

                    {/* Article Name */}
                    <td className="px-3 py-2.5 text-slate-200 max-w-[200px]">
                      <span className="line-clamp-1" title={row[COLUMNS.ARTICLE_NAME]}>
                        {row[COLUMNS.ARTICLE_NAME] || '—'}
                      </span>
                    </td>

                    {/* Line */}
                    <td className="px-3 py-2.5 text-slate-400 whitespace-nowrap text-xs">
                      {row[COLUMNS.LINE] || '—'}
                    </td>

                    {/* Classification */}
                    <td className="px-3 py-2.5">
                      <span className={cn(
                        'px-2 py-0.5 rounded text-[10px] font-bold border whitespace-nowrap',
                        String(row[COLUMNS.CLASSIFICATION] || '').toUpperCase().includes('CORE')
                          ? 'bg-blue-500/10 text-blue-400 border-blue-500/20'
                          : String(row[COLUMNS.CLASSIFICATION] || '').toUpperCase().includes('OOC')
                            ? 'bg-amber-500/10 text-amber-500 border-amber-500/20'
                            : 'bg-slate-700/50 text-slate-400 border-slate-600/50'
                      )}>
                        {row[COLUMNS.CLASSIFICATION] || '—'}
                      </span>
                    </td>

                    {/* Editable pricing cells */}
                    {pricingEditableCols.map(col => {
                      const isEditing = editingCell?.rowIndex === dataIndex && editingCell?.colIndex === col.index;
                      const isSaving = savingCell?.rowIndex === dataIndex && savingCell?.colIndex === col.index;
                      const val = formatPrice(row[col.index]);
                      const isEmpty = !row[col.index] || row[col.index] === '' || Number(row[col.index]) === 0;

                      return (
                        <td key={col.index} className="px-3 py-2">
                          {isEditing ? (
                            <div className="flex items-center gap-1">
                              <input
                                ref={inputRef}
                                type="text"
                                value={editingCell.value}
                                onChange={e => setEditingCell(prev => prev ? { ...prev, value: e.target.value } : null)}
                                onKeyDown={handleKeyDown}
                                onBlur={commitEdit}
                                className="w-24 bg-slate-900 border border-blue-500 rounded px-2 py-1 text-sm text-white focus:outline-none focus:ring-1 focus:ring-blue-500"
                              />
                              <button onClick={commitEdit} className="text-emerald-400 hover:text-emerald-300 p-0.5">
                                <Save className="w-3.5 h-3.5" />
                              </button>
                              <button onClick={cancelEdit} className="text-slate-500 hover:text-slate-300 p-0.5">
                                <X className="w-3.5 h-3.5" />
                              </button>
                            </div>
                          ) : (
                            <button
                              onClick={() => startEdit(dataIndex, col.index, val)}
                              className={cn(
                                'group flex items-center gap-1.5 px-2 py-1 rounded text-xs font-mono transition-colors hover:bg-slate-700/60 min-w-[72px]',
                                isEmpty
                                  ? 'text-amber-400 border border-amber-500/40 bg-amber-500/5'
                                  : 'text-slate-200 border border-transparent hover:border-slate-600'
                              )}
                              title={isSaving ? 'Saving…' : `Click to edit ${col.name}`}
                            >
                              {isSaving ? (
                                <span className="text-slate-500 italic">saving…</span>
                              ) : isEmpty ? (
                                <>
                                  <AlertTriangle className="w-3 h-3" />
                                  <span>Missing</span>
                                </>
                              ) : (
                                <>
                                  <span>{val}</span>
                                  <Edit2 className="w-2.5 h-2.5 opacity-0 group-hover:opacity-50" />
                                </>
                              )}
                            </button>
                          )}
                        </td>
                      );
                    })}

                    {/* Units/Outer */}
                    <td className="px-3 py-2.5">
                      {unitOuterBadge(row[COLUMNS.UNITS_OUTER])}
                    </td>

                    {/* Outer W */}
                    <td className="px-3 py-2.5 text-slate-400 font-mono text-xs">
                      {row[COLUMNS.OUTER_W] ?? '-'}
                    </td>

                    {/* Outer L */}
                    <td className="px-3 py-2.5 text-slate-400 font-mono text-xs">
                      {row[COLUMNS.OUTER_L] ?? '-'}
                    </td>

                    {/* Outer H */}
                    <td className="px-3 py-2.5 text-slate-400 font-mono text-xs">
                      {row[COLUMNS.OUTER_H] ?? '-'}
                    </td>

                    {/* Container unit columns */}
                    {containerCols.map(col => (
                      <td key={col.index} className="px-3 py-2.5">
                        {unitBadge(row[col.index], col.name)}
                      </td>
                    ))}

                    {/* Status badge */}
                    <td className="px-3 py-2.5">
                      {!hasAnyError ? (
                        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
                          <CheckCircle2 className="w-3 h-3" /> OK
                        </span>
                      ) : isCritical ? (
                        <div className="flex flex-col gap-1">
                          <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-bold bg-red-500/15 text-red-400 border border-red-500/30">
                            <AlertCircle className="w-3 h-3" /> Critical
                          </span>
                          {unitErrors.map((e, i) => (
                            <span key={i} className="text-[10px] text-red-400/70 pl-1">{e}</span>
                          ))}
                        </div>
                      ) : (
                        <div className="flex flex-col gap-1">
                          <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-amber-500/10 text-amber-400 border border-amber-500/20">
                            <AlertTriangle className="w-3 h-3" /> Incomplete
                          </span>
                          {pricingErrors.map((e, i) => (
                            <span key={i} className="text-[10px] text-amber-400/70 pl-1">{e}</span>
                          ))}
                        </div>
                      )}
                    </td>

                    {/* Edit button */}
                    <td className="px-2 py-2.5">
                      <button
                        onClick={() => onEdit(dataIndex)}
                        className="p-1.5 text-slate-500 hover:text-slate-200 hover:bg-slate-700 rounded transition-colors"
                        title="Open full editor"
                      >
                        <Edit2 className="w-3.5 h-3.5" />
                      </button>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        )}
      </div>

      {/* ── Footer count ── */}
      <p className="text-xs text-slate-500 pb-1">
        Showing {filteredRows.length} of {stats.total} products
        {pricingEditableCols.length > 0 && (
          <> · Click any <span className="text-blue-400">price cell</span> to edit inline</>
        )}
      </p>
    </div>
  );
}

// ── Text filter popover ───────────────────────────────────────────────────────
function TextFilterPopover({ value, onChange, onClose }: {
  value: string;
  onChange: (v: string) => void;
  onClose: () => void;
}) {
  return (
    <div className="absolute top-full left-0 mt-1 w-56 bg-slate-800 border border-slate-700 rounded-lg shadow-2xl z-50 p-3 flex flex-col gap-3 animate-in fade-in zoom-in-95 duration-100">
      <div className="relative">
        <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-500" />
        <input
          type="text"
          placeholder="Search article name…"
          value={value}
          onChange={e => onChange(e.target.value)}
          autoFocus
          className="w-full bg-slate-900 border border-slate-700 rounded p-1.5 pl-8 text-xs text-white focus:outline-none focus:border-blue-500"
        />
      </div>
      <div className="flex items-center justify-between pt-1 border-t border-slate-700">
        <button onClick={() => { onChange(''); onClose(); }} className="text-[10px] font-medium text-slate-400 hover:text-white transition-colors">Clear</button>
        <button onClick={onClose} className="px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white text-[10px] font-bold rounded transition-colors">OK</button>
      </div>
    </div>
  );
}

// ── Stat card ─────────────────────────────────────────────────────────────────
function StatCard({
  label,
  value,
  icon,
  color,
}: {
  label: string;
  value: number;
  icon: React.ReactNode;
  color: 'slate' | 'amber' | 'red' | 'emerald';
}) {
  const colors = {
    slate:   { bg: 'bg-slate-800',   border: 'border-slate-700',   text: 'text-slate-200',   icon: 'text-slate-400' },
    amber:   { bg: 'bg-amber-950/30', border: 'border-amber-700/40', text: 'text-amber-300',  icon: 'text-amber-500' },
    red:     { bg: 'bg-red-950/30',   border: 'border-red-700/40',   text: 'text-red-300',    icon: 'text-red-500' },
    emerald: { bg: 'bg-emerald-950/20', border: 'border-emerald-700/30', text: 'text-emerald-300', icon: 'text-emerald-500' },
  };
  const c = colors[color];
  return (
    <div className={cn('rounded-xl border p-4 flex items-center gap-4', c.bg, c.border)}>
      <span className={c.icon}>{icon}</span>
      <div>
        <p className={cn('text-2xl font-bold', c.text)}>{value}</p>
        <p className="text-xs text-slate-400">{label}</p>
      </div>
    </div>
  );
}