import { useMemo, useState } from 'react';
import IconPin from './Icon/IconPin';
import IconFilter from './Icon/IconFilter';
import IconPlus from './Icon/IconPlus';
import IconTrash from './Icon/IconTrash';
import IconX from './Icon/IconX';
import IconBookmark from './Icon/IconBookmark';
import {
    Combinator,
    OPERATOR_LABELS,
    QueryFieldDef,
    QueryFilterState,
    QueryGroup,
    QueryOperator,
    QueryRule,
    SavedQueryPreset,
    UNARY_OPERATORS,
    countRunnableRules,
    createEmptyGroup,
    createEmptyRule,
    createInitialQueryState,
    discoverDynamicFields,
    formatQueryExpression,
    getOperatorsForField,
    isQueryActive,
} from '../utils/queryFilter';

type Props = {
    records: any[];
    baseFields: QueryFieldDef[];
    value: QueryFilterState;
    onChange: (next: QueryFilterState) => void;
    pinnedCount: number;
    showPinnedOnly: boolean;
    onTogglePinnedOnly: () => void;
    onClearAllPins?: () => void;
    presetStorageKey: string;
    totalCount: number;
    filteredCount: number;
    entityLabel?: string;
};

const QueryBuilderBar = ({
    records,
    baseFields,
    value,
    onChange,
    pinnedCount,
    showPinnedOnly,
    onTogglePinnedOnly,
    onClearAllPins,
    presetStorageKey,
    totalCount,
    filteredCount,
    entityLabel = 'records',
}: Props) => {
    const [isOpen, setIsOpen] = useState(false);
    const [savingView, setSavingView] = useState(false);
    const [viewName, setViewName] = useState('');
    const [activePresetId, setActivePresetId] = useState<string | null>(null);

    const [savedPresets, setSavedPresets] = useState<SavedQueryPreset[]>(() => {
        try {
            const raw = localStorage.getItem(presetStorageKey);
            return raw ? JSON.parse(raw) : [];
        } catch {
            return [];
        }
    });

    const persistPresets = (next: SavedQueryPreset[]) => {
        setSavedPresets(next);
        try {
            localStorage.setItem(presetStorageKey, JSON.stringify(next));
        } catch (err) {
            console.error('Failed to save query presets:', err);
        }
    };

    const allFields = useMemo(() => {
        const discovered = discoverDynamicFields(records, baseFields);
        const hasPinField = discovered.some((f) => f.key === '__is_pinned');
        return hasPinField
            ? discovered
            : [
                  ...discovered,
                  {
                      key: '__is_pinned',
                      label: 'Pinned in List',
                      type: 'boolean' as const,
                      group: 'Pin & Meta',
                  },
              ];
    }, [records, baseFields]);

    const fieldsByGroup = useMemo(() => {
        const grouped = new Map<string, QueryFieldDef[]>();
        for (const f of allFields) {
            const g = f.group || 'Core Fields';
            const list = grouped.get(g) || [];
            list.push(f);
            grouped.set(g, list);
        }
        return Array.from(grouped.entries());
    }, [allFields]);

    const activeRuleCount = useMemo(() => countRunnableRules(value), [value]);
    const hasActiveQuery = useMemo(() => isQueryActive(value), [value]);
    const queryPreview = useMemo(() => formatQueryExpression(value, allFields), [value, allFields]);

    const updateGroups = (nextGroups: QueryGroup[], rootCombinator: Combinator = value.rootCombinator) => {
        setActivePresetId(null);
        onChange({ rootCombinator, groups: nextGroups });
    };

    const handleRootCombinatorToggle = (combinator: Combinator) => {
        setActivePresetId(null);
        onChange({ ...value, rootCombinator: combinator });
    };

    const handleAddGroup = (combinator: Combinator = 'AND') => {
        updateGroups([...value.groups, createEmptyGroup(allFields[0], combinator)]);
        setIsOpen(true);
    };

    const handleRemoveGroup = (groupId: string) => {
        if (value.groups.length <= 1) {
            onChange(createInitialQueryState(allFields));
            setActivePresetId(null);
            return;
        }
        updateGroups(value.groups.filter((g) => g.id !== groupId));
    };

    const handleGroupCombinatorChange = (groupId: string, combinator: Combinator) => {
        updateGroups(
            value.groups.map((g) => (g.id === groupId ? { ...g, combinator } : g))
        );
    };

    const handleAddRule = (groupId: string) => {
        updateGroups(
            value.groups.map((g) =>
                g.id === groupId ? { ...g, rules: [...g.rules, createEmptyRule(allFields[0])] } : g
            )
        );
    };

    const handleRemoveRule = (groupId: string, ruleId: string) => {
        const next = value.groups.map((g) => {
            if (g.id !== groupId) return g;
            const remaining = g.rules.filter((r) => r.id !== ruleId);
            return { ...g, rules: remaining.length > 0 ? remaining : [createEmptyRule(allFields[0])] };
        });
        updateGroups(next);
    };

    const handleRuleChange = (groupId: string, ruleId: string, patch: Partial<QueryRule>) => {
        updateGroups(
            value.groups.map((g) => {
                if (g.id !== groupId) return g;
                return {
                    ...g,
                    rules: g.rules.map((r) => {
                        if (r.id !== ruleId) return r;
                        const updated: QueryRule = { ...r, ...patch };
                        if (patch.field && patch.field !== r.field) {
                            const nextField = allFields.find((f) => f.key === patch.field);
                            const validOps = getOperatorsForField(nextField);
                            if (!validOps.includes(updated.operator)) {
                                updated.operator = validOps[0];
                            }
                            updated.value = '';
                            updated.valueTo = '';
                        }
                        return updated;
                    }),
                };
            })
        );
    };

    const handleClearAll = () => {
        setActivePresetId(null);
        onChange(createInitialQueryState(allFields));
        if (showPinnedOnly) {
            onTogglePinnedOnly();
        }
    };

    const handleSavePreset = () => {
        const trimmed = viewName.trim();
        if (!trimmed || !hasActiveQuery) return;
        const preset: SavedQueryPreset = {
            id: `preset_${Date.now().toString(36)}`,
            name: trimmed,
            state: JSON.parse(JSON.stringify(value)),
            createdAt: new Date().toISOString(),
        };
        persistPresets([preset, ...savedPresets]);
        setActivePresetId(preset.id);
        setViewName('');
        setSavingView(false);
    };

    const handleApplyPreset = (preset: SavedQueryPreset) => {
        if (activePresetId === preset.id) {
            setActivePresetId(null);
            onChange(createInitialQueryState(allFields));
            return;
        }
        setActivePresetId(preset.id);
        onChange(JSON.parse(JSON.stringify(preset.state)));
    };

    const handleDeletePreset = (id: string, e: React.MouseEvent) => {
        e.stopPropagation();
        persistPresets(savedPresets.filter((p) => p.id !== id));
        if (activePresetId === id) {
            setActivePresetId(null);
        }
    };

    return (
        <div className="bg-white rounded-2xl border border-[#ECE2D2] shadow-xs overflow-hidden transition-all">
            {/* ── Compact Bar Strip (Matches Slot Between Stats Cards & Toolbar) ── */}
            <div className="px-4 py-2.5 flex flex-wrap items-center justify-between gap-2 bg-gradient-to-r from-[#FBF6ED] via-white to-[#FBF6ED]">
                <div className="flex flex-wrap items-center gap-2">
                    {/* List Pin Filter Pill */}
                    <div className="inline-flex items-center">
                        <button
                            type="button"
                            onClick={onTogglePinnedOnly}
                            className={`inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-extrabold border transition cursor-pointer ${
                                pinnedCount > 0 && onClearAllPins ? 'rounded-l-xl border-r-0' : 'rounded-xl'
                            } ${
                                showPinnedOnly
                                    ? 'bg-amber-600 text-white border-amber-600 shadow-xs'
                                    : 'bg-white text-[#461901] border-[#ECE2D2] hover:border-amber-400 hover:bg-amber-50'
                            }`}
                            title={
                                showPinnedOnly
                                    ? 'Click to show all rows again'
                                    : 'Filter list to show only pinned items'
                            }
                        >
                            <IconPin
                                className={`w-3.5 h-3.5 ${showPinnedOnly ? 'text-white' : 'text-amber-600'}`}
                                fill={showPinnedOnly || pinnedCount > 0}
                            />
                            <span>Pinned Only</span>
                            <span
                                className={`px-1.5 py-0.5 rounded-full text-[10px] leading-none font-extrabold ${
                                    showPinnedOnly
                                        ? 'bg-white/25 text-white'
                                        : pinnedCount > 0
                                        ? 'bg-amber-100 text-amber-800'
                                        : 'bg-slate-100 text-slate-500'
                                }`}
                            >
                                {pinnedCount}
                            </span>
                        </button>
                        {pinnedCount > 0 && onClearAllPins && (
                            <button
                                type="button"
                                onClick={onClearAllPins}
                                title="Clear all pinned rows in this list"
                                className={`px-2 py-1.5 rounded-r-xl border text-[11px] font-bold transition cursor-pointer ${
                                    showPinnedOnly
                                        ? 'bg-amber-700 text-amber-100 border-amber-600 hover:bg-amber-800'
                                        : 'bg-white text-slate-400 border-[#ECE2D2] hover:text-rose-600 hover:bg-rose-50'
                                }`}
                            >
                                <IconX className="w-3.5 h-3.5" />
                            </button>
                        )}
                    </div>

                    {/* Query Filter Toggle Button */}
                    <button
                        type="button"
                        onClick={() => setIsOpen((prev) => !prev)}
                        className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-extrabold border transition cursor-pointer ${
                            isOpen || hasActiveQuery
                                ? 'bg-[#461901] text-white border-[#461901] shadow-xs'
                                : 'bg-white text-[#461901] border-[#ECE2D2] hover:border-amber-400 hover:bg-amber-50'
                        }`}
                    >
                        <IconFilter className="w-3.5 h-3.5" />
                        <span>Query Filter (AND / OR)</span>
                        {activeRuleCount > 0 && (
                            <span className="px-1.5 py-0.5 rounded-full text-[10px] leading-none font-extrabold bg-amber-400 text-[#461901]">
                                {activeRuleCount}
                            </span>
                        )}
                        <span className="text-[10px] opacity-80 ml-0.5">{isOpen ? '▲' : '▼'}</span>
                    </button>

                    {/* Pinned / Saved Query Presets */}
                    {savedPresets.length > 0 && (
                        <div className="flex flex-wrap items-center gap-1.5 pl-1 border-l border-[#ECE2D2]">
                            <span className="text-[10px] font-bold uppercase tracking-wider text-[#9C8C7C] flex items-center gap-1 mr-0.5">
                                <IconBookmark className="w-3 h-3 text-amber-600" />
                                Views:
                            </span>
                            {savedPresets.map((preset) => {
                                const isActive = activePresetId === preset.id;
                                return (
                                    <button
                                        key={preset.id}
                                        type="button"
                                        onClick={() => handleApplyPreset(preset)}
                                        className={`inline-flex items-center gap-1.5 pl-2.5 pr-1.5 py-1 rounded-lg text-[11px] font-bold border transition cursor-pointer ${
                                            isActive
                                                ? 'bg-amber-100 text-amber-900 border-amber-400 shadow-xs'
                                                : 'bg-white text-slate-700 border-slate-200 hover:border-amber-300 hover:bg-amber-50/50'
                                        }`}
                                    >
                                        <span>{preset.name}</span>
                                        <span
                                            onClick={(e) => handleDeletePreset(preset.id, e)}
                                            title="Remove saved view"
                                            className="p-0.5 rounded hover:bg-rose-100 hover:text-rose-700 text-slate-400 transition"
                                        >
                                            <IconX className="w-3 h-3" />
                                        </span>
                                    </button>
                                );
                            })}
                        </div>
                    )}
                </div>

                {/* Live Summary + Active Reset */}
                <div className="flex items-center gap-2">
                    {hasActiveQuery && !isOpen && (
                        <span
                            className="hidden lg:inline-block max-w-[360px] truncate px-2.5 py-1 rounded-lg bg-amber-50 border border-amber-200 text-[11px] font-mono text-amber-900"
                            title={queryPreview}
                        >
                            {queryPreview}
                        </span>
                    )}

                    <span className="px-2.5 py-1 rounded-lg bg-[#FBF6ED] border border-[#ECE2D2] text-[11px] font-bold text-[#3B2F28]">
                        {filteredCount === totalCount
                            ? `${totalCount.toLocaleString('en-IN')} ${entityLabel}`
                            : `${filteredCount.toLocaleString('en-IN')} / ${totalCount.toLocaleString('en-IN')} matched`}
                    </span>

                    {(hasActiveQuery || showPinnedOnly) && (
                        <button
                            type="button"
                            onClick={handleClearAll}
                            className="px-2.5 py-1 rounded-lg border border-rose-200 bg-rose-50 hover:bg-rose-100 text-rose-700 text-[11px] font-extrabold transition cursor-pointer"
                        >
                            Reset
                        </button>
                    )}
                </div>
            </div>

            {/* ── Expandable Visual AND / OR Query Builder Panel ── */}
            {isOpen && (
                <div className="p-4 border-t border-[#ECE2D2] bg-[#FCF9F3] space-y-3">
                    {/* Top Builder Controls */}
                    <div className="flex flex-wrap items-center justify-between gap-3">
                        <div className="flex flex-wrap items-center gap-2">
                            <span className="text-[11px] font-extrabold uppercase tracking-wider text-[#5B1F00]">
                                Combine Groups With:
                            </span>
                            <div className="inline-flex rounded-lg border border-[#ECE2D2] bg-white p-0.5">
                                {(['AND', 'OR'] as Combinator[]).map((comb) => (
                                    <button
                                        key={comb}
                                        type="button"
                                        onClick={() => handleRootCombinatorToggle(comb)}
                                        className={`px-2.5 py-1 rounded-md text-[11px] font-extrabold transition cursor-pointer ${
                                            value.rootCombinator === comb
                                                ? comb === 'AND'
                                                    ? 'bg-[#461901] text-white'
                                                    : 'bg-amber-600 text-white'
                                                : 'text-slate-600 hover:bg-amber-50'
                                        }`}
                                    >
                                        {comb === 'AND' ? 'AND (All Groups)' : 'OR (Any Group)'}
                                    </button>
                                ))}
                            </div>

                            <button
                                type="button"
                                onClick={() => handleAddGroup(value.rootCombinator === 'OR' ? 'AND' : 'OR')}
                                className="inline-flex items-center gap-1 px-2.5 py-1.5 rounded-lg border border-dashed border-amber-400 bg-amber-50/70 hover:bg-amber-100 text-amber-900 text-xs font-extrabold transition cursor-pointer"
                            >
                                <IconPlus className="w-3.5 h-3.5" />
                                <span>Add {value.rootCombinator} Group</span>
                            </button>
                        </div>

                        <div className="flex flex-wrap items-center gap-2">
                            {hasActiveQuery && !savingView && (
                                <button
                                    type="button"
                                    onClick={() => setSavingView(true)}
                                    className="inline-flex items-center gap-1 px-2.5 py-1.5 rounded-lg border border-amber-300 bg-white hover:bg-amber-50 text-amber-900 text-xs font-bold transition cursor-pointer"
                                >
                                    <IconBookmark className="w-3.5 h-3.5 text-amber-600" />
                                    <span>Pin Query as View</span>
                                </button>
                            )}
                            {savingView && (
                                <div className="flex items-center gap-1.5">
                                    <input
                                        type="text"
                                        value={viewName}
                                        onChange={(e) => setViewName(e.target.value)}
                                        onKeyDown={(e) => {
                                            if (e.key === 'Enter') handleSavePreset();
                                            if (e.key === 'Escape') setSavingView(false);
                                        }}
                                        placeholder="e.g. VIP Repeat Buyers"
                                        className="px-2.5 py-1 text-xs rounded-lg border border-amber-300 bg-white focus:outline-none focus:ring-2 focus:ring-amber-400/30 w-44"
                                        autoFocus
                                    />
                                    <button
                                        type="button"
                                        onClick={handleSavePreset}
                                        className="px-2.5 py-1 rounded-lg bg-[#461901] text-white text-xs font-bold cursor-pointer"
                                    >
                                        Save
                                    </button>
                                    <button
                                        type="button"
                                        onClick={() => setSavingView(false)}
                                        className="px-2 py-1 rounded-lg border border-slate-200 bg-white text-xs text-slate-600 cursor-pointer"
                                    >
                                        Cancel
                                    </button>
                                </div>
                            )}

                            {hasActiveQuery && (
                                <button
                                    type="button"
                                    onClick={() => {
                                        setActivePresetId(null);
                                        onChange(createInitialQueryState(allFields));
                                    }}
                                    className="px-2.5 py-1.5 rounded-lg border border-rose-200 bg-white hover:bg-rose-50 text-rose-700 text-xs font-bold transition cursor-pointer"
                                >
                                    Clear Rules
                                </button>
                            )}
                        </div>
                    </div>

                    {/* Groups & Rules */}
                    <div className="space-y-2.5">
                        {value.groups.map((group, groupIdx) => (
                            <div key={group.id} className="space-y-2">
                                {groupIdx > 0 && (
                                    <div className="flex items-center justify-center">
                                        <button
                                            type="button"
                                            onClick={() =>
                                                handleRootCombinatorToggle(value.rootCombinator === 'AND' ? 'OR' : 'AND')
                                            }
                                            title="Click to switch between AND / OR between groups"
                                            className={`px-3 py-0.5 rounded-full text-[10px] font-extrabold tracking-widest border shadow-xs cursor-pointer transition ${
                                                value.rootCombinator === 'AND'
                                                    ? 'bg-[#461901] text-white border-[#461901]'
                                                    : 'bg-amber-600 text-white border-amber-600'
                                            }`}
                                        >
                                            {value.rootCombinator}
                                        </button>
                                    </div>
                                )}

                                <div className="rounded-xl border border-[#ECE2D2] bg-white p-3 space-y-2.5 shadow-2xs">
                                    {/* Group Header */}
                                    <div className="flex flex-wrap items-center justify-between gap-2 pb-2 border-b border-[#F3ECE0]">
                                        <div className="flex items-center gap-2">
                                            <span className="text-[11px] font-extrabold text-[#461901] bg-[#FBF6ED] px-2 py-0.5 rounded-md border border-[#ECE2D2]">
                                                Group {groupIdx + 1}
                                            </span>
                                            <div className="inline-flex rounded-lg border border-[#ECE2D2] bg-[#FBF6ED] p-0.5">
                                                {(['AND', 'OR'] as Combinator[]).map((comb) => (
                                                    <button
                                                        key={comb}
                                                        type="button"
                                                        onClick={() => handleGroupCombinatorChange(group.id, comb)}
                                                        className={`px-2 py-0.5 rounded text-[10.5px] font-extrabold transition cursor-pointer ${
                                                            group.combinator === comb
                                                                ? comb === 'AND'
                                                                    ? 'bg-[#461901] text-white'
                                                                    : 'bg-amber-600 text-white'
                                                                : 'text-slate-600 hover:text-[#461901]'
                                                        }`}
                                                    >
                                                        {comb === 'AND' ? 'AND (Match All)' : 'OR (Match Any)'}
                                                    </button>
                                                ))}
                                            </div>
                                        </div>

                                        <div className="flex items-center gap-1.5">
                                            <button
                                                type="button"
                                                onClick={() => handleAddRule(group.id)}
                                                className="inline-flex items-center gap-1 px-2.5 py-1 rounded-lg bg-[#FBF6ED] hover:bg-amber-100 border border-[#ECE2D2] text-[#461901] text-[11px] font-bold transition cursor-pointer"
                                            >
                                                <IconPlus className="w-3 h-3" />
                                                <span>Add Rule</span>
                                            </button>
                                            {value.groups.length > 1 && (
                                                <button
                                                    type="button"
                                                    onClick={() => handleRemoveGroup(group.id)}
                                                    title="Remove group"
                                                    className="p-1 rounded-lg text-slate-400 hover:text-rose-600 hover:bg-rose-50 transition cursor-pointer"
                                                >
                                                    <IconTrash className="w-3.5 h-3.5" />
                                                </button>
                                            )}
                                        </div>
                                    </div>

                                    {/* Rules inside Group */}
                                    <div className="space-y-2">
                                        {group.rules.map((rule, ruleIdx) => {
                                            const fieldDef = allFields.find((f) => f.key === rule.field) || allFields[0];
                                            const availableOps = getOperatorsForField(fieldDef);
                                            const isUnary = UNARY_OPERATORS.has(rule.operator);
                                            const isBetween = rule.operator === 'between';
                                            const inputType =
                                                fieldDef?.type === 'number'
                                                    ? 'number'
                                                    : fieldDef?.type === 'date' && rule.operator !== 'contains'
                                                    ? 'date'
                                                    : 'text';
                                            const listId = `qf-opts-${rule.id}`;

                                            return (
                                                <div
                                                    key={rule.id}
                                                    className="grid grid-cols-1 md:grid-cols-12 gap-2 items-center"
                                                >
                                                    {/* Logical Connector / Index */}
                                                    <div className="md:col-span-1 flex items-center justify-start md:justify-center">
                                                        {ruleIdx === 0 ? (
                                                            <span className="text-[10.5px] font-extrabold uppercase tracking-wider text-[#9C8C7C]">
                                                                Where
                                                            </span>
                                                        ) : (
                                                            <button
                                                                type="button"
                                                                onClick={() =>
                                                                    handleGroupCombinatorChange(
                                                                        group.id,
                                                                        group.combinator === 'AND' ? 'OR' : 'AND'
                                                                    )
                                                                }
                                                                title="Click to toggle group logic AND / OR"
                                                                className={`px-2 py-0.5 rounded text-[10px] font-extrabold tracking-wider cursor-pointer ${
                                                                    group.combinator === 'AND'
                                                                        ? 'bg-slate-800 text-white'
                                                                        : 'bg-amber-600 text-white'
                                                                }`}
                                                            >
                                                                {group.combinator}
                                                            </button>
                                                        )}
                                                    </div>

                                                    {/* Field Selector */}
                                                    <div className="md:col-span-3">
                                                        <select
                                                            value={rule.field}
                                                            onChange={(e) =>
                                                                handleRuleChange(group.id, rule.id, {
                                                                    field: e.target.value,
                                                                })
                                                            }
                                                            className="w-full px-2.5 py-2 text-xs font-semibold rounded-lg border border-[#ECE2D2] bg-[#FBF6ED] text-[#3B2F28] focus:outline-none focus:border-[#CF8F42]"
                                                        >
                                                            {fieldsByGroup.map(([grpName, grpFields]) => (
                                                                <optgroup key={grpName} label={grpName}>
                                                                    {grpFields.map((f) => (
                                                                        <option key={f.key} value={f.key}>
                                                                            {f.label}
                                                                        </option>
                                                                    ))}
                                                                </optgroup>
                                                            ))}
                                                        </select>
                                                    </div>

                                                    {/* Operator Selector */}
                                                    <div className="md:col-span-3">
                                                        <select
                                                            value={rule.operator}
                                                            onChange={(e) =>
                                                                handleRuleChange(group.id, rule.id, {
                                                                    operator: e.target.value as QueryOperator,
                                                                })
                                                            }
                                                            className="w-full px-2.5 py-2 text-xs font-semibold rounded-lg border border-[#ECE2D2] bg-[#FBF6ED] text-[#3B2F28] focus:outline-none focus:border-[#CF8F42]"
                                                        >
                                                            {availableOps.map((op) => (
                                                                <option key={op} value={op}>
                                                                    {OPERATOR_LABELS[op]}
                                                                </option>
                                                            ))}
                                                        </select>
                                                    </div>

                                                    {/* Value Input */}
                                                    <div className="md:col-span-4">
                                                        {isUnary ? (
                                                            <div className="px-3 py-2 text-[11px] font-semibold text-[#9C8C7C] bg-slate-50 border border-dashed border-slate-200 rounded-lg">
                                                                No value required
                                                            </div>
                                                        ) : isBetween ? (
                                                            <div className="grid grid-cols-2 gap-1.5">
                                                                <input
                                                                    type={inputType}
                                                                    value={rule.value}
                                                                    onChange={(e) =>
                                                                        handleRuleChange(group.id, rule.id, {
                                                                            value: e.target.value,
                                                                        })
                                                                    }
                                                                    placeholder="From / Min"
                                                                    className="w-full px-2.5 py-2 text-xs rounded-lg border border-[#ECE2D2] bg-white text-[#3B2F28] focus:outline-none focus:border-[#CF8F42]"
                                                                />
                                                                <input
                                                                    type={inputType}
                                                                    value={rule.valueTo || ''}
                                                                    onChange={(e) =>
                                                                        handleRuleChange(group.id, rule.id, {
                                                                            valueTo: e.target.value,
                                                                        })
                                                                    }
                                                                    placeholder="To / Max"
                                                                    className="w-full px-2.5 py-2 text-xs rounded-lg border border-[#ECE2D2] bg-white text-[#3B2F28] focus:outline-none focus:border-[#CF8F42]"
                                                                />
                                                            </div>
                                                        ) : (
                                                            <>
                                                                <input
                                                                    type={inputType}
                                                                    list={fieldDef?.options ? listId : undefined}
                                                                    value={rule.value}
                                                                    onChange={(e) =>
                                                                        handleRuleChange(group.id, rule.id, {
                                                                            value: e.target.value,
                                                                        })
                                                                    }
                                                                    placeholder={
                                                                        rule.operator === 'in_list'
                                                                            ? 'e.g. value1, value2'
                                                                            : rule.operator === 'regex'
                                                                            ? 'e.g. ^600|625'
                                                                            : fieldDef?.placeholder || 'Type any value...'
                                                                    }
                                                                    className="w-full px-3 py-2 text-xs rounded-lg border border-[#ECE2D2] bg-white text-[#3B2F28] focus:outline-none focus:border-[#CF8F42]"
                                                                />
                                                                {fieldDef?.options && (
                                                                    <datalist id={listId}>
                                                                        {fieldDef.options.map((opt) => (
                                                                            <option key={opt} value={opt} />
                                                                        ))}
                                                                    </datalist>
                                                                )}
                                                            </>
                                                        )}
                                                    </div>

                                                    {/* Remove Rule */}
                                                    <div className="md:col-span-1 flex items-center justify-end">
                                                        <button
                                                            type="button"
                                                            onClick={() => handleRemoveRule(group.id, rule.id)}
                                                            title="Remove rule"
                                                            className="p-1.5 rounded-lg text-slate-400 hover:text-rose-600 hover:bg-rose-50 transition cursor-pointer"
                                                        >
                                                            <IconX className="w-4 h-4" />
                                                        </button>
                                                    </div>
                                                </div>
                                            );
                                        })}
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>

                    {/* Live Query Expression Preview */}
                    <div className="flex flex-wrap items-center justify-between gap-2 pt-1 text-[11px]">
                        <div className="flex items-center gap-2 min-w-0">
                            <span className="font-extrabold uppercase tracking-wider text-[#9C8C7C] shrink-0">
                                Query:
                            </span>
                            {hasActiveQuery ? (
                                <code className="px-2.5 py-1 rounded-lg bg-white border border-amber-200 text-[#461901] font-mono text-[11px] truncate max-w-[780px]">
                                    {queryPreview}
                                </code>
                            ) : (
                                <span className="text-slate-400 italic">
                                    Select a field, operator, and enter a value to filter rows in real time (all fields auto-detected).
                                </span>
                            )}
                        </div>
                        <span className="font-bold text-[#461901] shrink-0">
                            Matched {filteredCount.toLocaleString('en-IN')} of {totalCount.toLocaleString('en-IN')}
                        </span>
                    </div>
                </div>
            )}
        </div>
    );
};

export default QueryBuilderBar;