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

import React, { useState, useMemo } from 'react';
import { Search, Check, X } from 'lucide-react';
import { cn } from '../lib/utils';

interface ColumnFilterPopoverProps {
  uniqueValues: string[];
  selectedValues: string[];
  onToggle: (val: string) => void;
  onSelectAll: (vals: string[]) => void;
  onClear: () => void;
  onClose: () => void;
  title?: string;
  className?: string;
}

export function ColumnFilterPopover({
  uniqueValues,
  selectedValues,
  onToggle,
  onSelectAll,
  onClear,
  onClose,
  title,
  className
}: ColumnFilterPopoverProps) {
  const [search, setSearch] = useState('');
  const [isDragging, setIsDragging] = useState(false);
  const [dragStart, setDragStart] = useState<number | null>(null);
  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
  const [lastClickedIndex, setLastClickedIndex] = useState<number | null>(null);
  const listRef = React.useRef<HTMLDivElement>(null);
  
  const filteredValues = useMemo(() => {
    return uniqueValues.filter(v => 
      String(v || '').toLowerCase().includes(search.toLowerCase())
    );
  }, [uniqueValues, search]);

  const isAllSelected = selectedValues.length === uniqueValues.length && uniqueValues.length > 0;

  const isDraggingRef = React.useRef(false);
  const dragStartRef = React.useRef<number | null>(null);
  const hoveredIndexRef = React.useRef<number | null>(null);
  const selectedValuesRef = React.useRef<string[]>(selectedValues);
  const onSelectAllRef = React.useRef(onSelectAll);
  const filteredValuesRef = React.useRef(filteredValues);

  selectedValuesRef.current = selectedValues;
  onSelectAllRef.current = onSelectAll;
  filteredValuesRef.current = filteredValues;

  const handleMouseDown = (index: number) => {
    isDraggingRef.current = true;
    dragStartRef.current = index;
    hoveredIndexRef.current = index;
    setIsDragging(true);
    setDragStart(index);
    setHoveredIndex(index);
  };

  const handleMouseEnter = (index: number) => {
    if (isDraggingRef.current && dragStartRef.current !== null) {
      hoveredIndexRef.current = index;
      setHoveredIndex(index);
    }
  };

  React.useEffect(() => {
    const handleGlobalMouseUp = () => {
      if (isDraggingRef.current) {
        const start = dragStartRef.current;
        const end = hoveredIndexRef.current;
        if (start !== null && end !== null) {
          const s = Math.min(start, end);
          const e = Math.max(start, end);
          const itemsToSelect = filteredValuesRef.current.slice(s, e + 1).map(v => v);
          const newSelected = new Set([...selectedValuesRef.current]);
          itemsToSelect.forEach(v => newSelected.add(v));
          onSelectAllRef.current(Array.from(newSelected));
        }
        isDraggingRef.current = false;
        dragStartRef.current = null;
        hoveredIndexRef.current = null;
        setIsDragging(false);
        setDragStart(null);
        setHoveredIndex(null);
      }
    };
    document.addEventListener('mouseup', handleGlobalMouseUp);
    return () => document.removeEventListener('mouseup', handleGlobalMouseUp);
  }, []);

  return (
    <div
      className={cn(
        "absolute top-full left-0 mt-1 w-64 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",
        className
      )}
      onClick={(e) => e.stopPropagation()}
    >
      {title && <div className="text-[10px] font-bold text-slate-500 uppercase tracking-wider px-1">{title}</div>}
      
      <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="Filter values..."
          value={search}
          onChange={e => setSearch(e.target.value)}
          className="w-full bg-slate-900 border border-slate-700 rounded p-1.5 pl-8 pr-7 text-xs text-white focus:outline-none focus:border-blue-500"
          autoFocus
        />
        {search && (
          <button
            onClick={() => setSearch('')}
            className="absolute right-2 top-1/2 -translate-y-1/2 text-slate-400 hover:text-white"
          >
            <X className="w-3 h-3" />
          </button>
        )}
      </div>

      <div 
        ref={listRef}
        className="max-h-48 overflow-y-auto space-y-0.5 pr-1 custom-scrollbar"
      >
        {filteredValues.map((val, idx) => {
          const isDragSelected = isDragging && dragStart !== null && hoveredIndex !== null &&
            ((idx >= dragStart && idx <= hoveredIndex) || (idx <= dragStart && idx >= hoveredIndex));
          return (
            <div
              key={val}
              role="checkbox"
              aria-checked={selectedValues.includes(val)}
              tabIndex={0}
              onMouseDown={(e) => { e.preventDefault(); handleMouseDown(idx); }}
              onMouseEnter={() => handleMouseEnter(idx)}
              onClick={(e) => {
                if (isDragging) return;
                
                if (e.shiftKey && lastClickedIndex !== null) {
                  const start = Math.min(lastClickedIndex, idx);
                  const end = Math.max(lastClickedIndex, idx);
                  const itemsToSelect = filteredValues.slice(start, end + 1);
                  const newSelected = new Set([...selectedValues, ...itemsToSelect]);
                  onSelectAll(Array.from(newSelected));
                } else {
                  onToggle(val);
                }
                setLastClickedIndex(idx);
              }}
              onKeyDown={(e) => { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); onToggle(val); setLastClickedIndex(idx); } }}
              className={cn(
                "flex items-center gap-2 p-1.5 rounded cursor-pointer group transition-colors select-none",
                isDragSelected ? "bg-blue-600/40" : "hover:bg-slate-700/50"
              )}
            >
              <div className={cn(
                "w-4 h-4 rounded border flex items-center justify-center shrink-0 transition-colors",
                selectedValues.includes(val) ? "bg-blue-600 border-blue-600" : "border-slate-600 bg-slate-900 group-hover:border-slate-500"
              )}>
                {selectedValues.includes(val) && <Check className="w-3 h-3 text-white" />}
              </div>
              <span className="text-xs text-slate-300 truncate" title={val}>{val || '(Empty)'}</span>
            </div>
          );
        })}
        {filteredValues.length === 0 && (
          <div className="text-[10px] text-slate-500 text-center py-4 italic">No values found</div>
        )}
      </div>

      <div className="flex items-center justify-between pt-2 border-t border-slate-700 mt-1">
        <div className="flex items-center gap-3">
          <button
            onClick={() => {
              if (isAllSelected) {
                onSelectAll([]);
              } else {
                onSelectAll(uniqueValues);
              }
            }}
            className="text-[10px] font-black text-indigo-400 hover:text-indigo-300 transition-colors uppercase tracking-tight"
          >
            {isAllSelected ? 'Deselect All' : 'Select All'}
          </button>
          <span className="text-slate-600 font-bold">•</span>
          <button
            onClick={onClear}
            className="text-[10px] font-bold text-slate-400 hover:text-white transition-colors uppercase tracking-tight"
          >
            Clear Current
          </button>
        </div>
        <button
          onClick={onClose}
          className="px-4 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-[10px] font-black rounded transition-colors shadow-lg active:scale-95 uppercase"
        >
          OK
        </button>
      </div>
    </div>
  );
}