{{! Template Builder Variable Picker }}
{{#if @isOpen}}
    <div class="tb-variable-picker fixed inset-0 z-50 flex items-center justify-center" role="dialog" aria-modal="true">
        {{! Backdrop }}
        <div class="absolute inset-0 bg-black/40 dark:bg-black/60" {{on "click" this.close}}></div>

        {{! Modal }}
        <div class="relative z-10 w-full max-w-lg bg-white dark:bg-gray-900 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-700 flex flex-col max-h-[80vh]">

            {{! Header }}
            <div class="flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700">
                <div class="flex items-center space-x-2">
                    <FaIcon @icon="code" class="w-4 h-4 text-blue-500" />
                    <h3 class="text-sm font-semibold text-gray-900 dark:text-white">Insert Variable or Formula</h3>
                </div>
                <button type="button" class="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-400" {{on "click" this.close}}>
                    <FaIcon @icon="xmark" class="w-4 h-4" />
                </button>
            </div>

            {{! Tabs }}
            <div class="flex border-b border-gray-200 dark:border-gray-700">
                <button
                    type="button"
                    class="flex-1 px-4 py-2 text-xs font-medium border-b-2 transition-colors {{if (eq this.activeTab 'variables') 'border-blue-500 text-blue-600 dark:text-blue-400' 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'}}"
                    {{on "click" (fn this.switchTab "variables")}}
                >
                    <FaIcon @icon="brackets-curly" class="w-3 h-3 mr-1.5 inline" />
                    Variables
                </button>
                <button
                    type="button"
                    class="flex-1 px-4 py-2 text-xs font-medium border-b-2 transition-colors {{if (eq this.activeTab 'formula') 'border-blue-500 text-blue-600 dark:text-blue-400' 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'}}"
                    {{on "click" (fn this.switchTab "formula")}}
                >
                    <FaIcon @icon="calculator" class="w-3 h-3 mr-1.5 inline" />
                    Formula
                </button>
            </div>

            {{! VARIABLES TAB }}
            {{#if (eq this.activeTab "variables")}}
                {{! Search }}
                <div class="px-3 py-2 border-b border-gray-100 dark:border-gray-800">
                    <div class="relative">
                        <FaIcon @icon="magnifying-glass" class="absolute left-2.5 top-1/2 -translate-y-1/2 w-3 h-3 text-gray-400" />
                        <input
                            type="text"
                            class="w-full pl-7 pr-3 py-1.5 text-xs bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md outline-none focus:border-blue-400 dark:focus:border-blue-500"
                            placeholder="Search variables..."
                            value={{this.searchQuery}}
                            {{on "input" this.updateSearch}}
                        />
                    </div>
                </div>

                {{! Variable list }}
                <div class="flex-1 overflow-y-auto">
                    {{! Global variables section }}
                    <div class="border-b border-gray-100 dark:border-gray-800">
                        <button
                            type="button"
                            class="w-full flex items-center justify-between px-3 py-2 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
                            {{on "click" (fn this.toggleNamespace "__global__")}}
                        >
                            <div class="flex items-center space-x-2">
                                <FaIcon @icon="globe" class="w-3.5 h-3.5 text-purple-500" />
                                <span class="text-xs font-semibold text-gray-700 dark:text-gray-300">Global</span>
                                <span class="text-xs text-gray-400 dark:text-gray-500">Always available</span>
                            </div>
                            <FaIcon @icon={{if (this.isExpanded "__global__") "chevron-up" "chevron-down"}} class="w-3 h-3 text-gray-400" />
                        </button>
                        {{#if (this.isExpanded "__global__")}}
                            {{#each this.globalVariables as |variable|}}
                                <button
                                    type="button"
                                    class="w-full flex items-center px-4 py-1.5 hover:bg-blue-50 dark:hover:bg-blue-900/20 group transition-colors"
                                    {{on "click" (fn this.insertVariable variable)}}
                                >
                                    <FaIcon @icon={{this.typeIcon variable.type}} class="w-3 h-3 mr-2 text-gray-400 dark:text-gray-500 flex-shrink-0" />
                                    <div class="flex-1 min-w-0 text-left">
                                        <span class="block text-xs text-gray-700 dark:text-gray-300 font-mono">{{variable.path}}</span>
                                        <span class="block text-xs text-gray-400 dark:text-gray-500 truncate">{{variable.label}}</span>
                                    </div>
                                    <span class="text-xs text-gray-300 dark:text-gray-600 font-mono truncate max-w-24 ml-2 hidden group-hover:block">{{variable.example}}</span>
                                </button>
                            {{/each}}
                        {{/if}}
                    </div>

                    {{! Context schema sections }}
                    {{#if this.hasResults}}
                        {{#each this.filteredSchemas as |schema|}}
                            <div class="border-b border-gray-100 dark:border-gray-800">
                                <button
                                    type="button"
                                    class="w-full flex items-center justify-between px-3 py-2 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
                                    {{on "click" (fn this.toggleNamespace schema.namespace)}}
                                >
                                    <div class="flex items-center space-x-2">
                                        <FaIcon @icon={{schema.icon}} class="w-3.5 h-3.5 text-blue-500" />
                                        <span class="text-xs font-semibold text-gray-700 dark:text-gray-300 capitalize">{{schema.label}}</span>
                                        <span class="text-xs text-gray-400 dark:text-gray-500">{{schema.variables.length}} variables</span>
                                    </div>
                                    <FaIcon @icon={{if (this.isExpanded schema.namespace) "chevron-up" "chevron-down"}} class="w-3 h-3 text-gray-400" />
                                </button>
                                {{#if (this.isExpanded schema.namespace)}}
                                    {{#each schema.variables as |variable|}}
                                        <button
                                            type="button"
                                            class="w-full flex items-center px-4 py-1.5 hover:bg-blue-50 dark:hover:bg-blue-900/20 group transition-colors"
                                            {{on "click" (fn this.insertVariable variable)}}
                                        >
                                            <FaIcon @icon={{this.typeIcon variable.type}} class="w-3 h-3 mr-2 text-gray-400 dark:text-gray-500 flex-shrink-0" />
                                            <div class="flex-1 min-w-0 text-left">
                                                <span class="block text-xs text-gray-700 dark:text-gray-300 font-mono">{{variable.path}}</span>
                                                <span class="block text-xs text-gray-400 dark:text-gray-500 truncate">{{variable.label}}</span>
                                            </div>
                                            <span class="text-xs text-gray-300 dark:text-gray-600 font-mono truncate max-w-24 ml-2 hidden group-hover:block">{{variable.example}}</span>
                                        </button>
                                    {{/each}}
                                {{/if}}
                            </div>
                        {{/each}}
                    {{else}}
                        <div class="flex flex-col items-center justify-center py-10 text-center">
                            <FaIcon @icon="magnifying-glass" class="w-6 h-6 text-gray-300 dark:text-gray-600 mb-2" />
                            <p class="text-xs text-gray-400 dark:text-gray-500">No variables match "{{this.searchQuery}}"</p>
                        </div>
                    {{/if}}
                </div>
            {{/if}}

            {{! FORMULA TAB }}
            {{#if (eq this.activeTab "formula")}}
                <div class="flex-1 overflow-y-auto p-4 space-y-4">
                    {{! Syntax guide }}
                    <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-3">
                        <p class="text-xs font-semibold text-blue-700 dark:text-blue-300 mb-1">Formula Syntax</p>
                        <p class="text-xs text-blue-600 dark:text-blue-400 font-mono">[{ expression }]</p>
                        <p class="text-xs text-blue-500 dark:text-blue-400 mt-1">Use variables inside the expression:</p>
                        <p class="text-xs text-blue-600 dark:text-blue-400 font-mono mt-0.5">[{ {invoice.subtotal} * 1.1 }]</p>
                        <p class="text-xs text-blue-600 dark:text-blue-400 font-mono">[{ {order.quantity} * {order.unit_price} }]</p>
                        <p class="text-xs text-blue-500 dark:text-blue-400 mt-1">Supported: + − × ÷ ( ) round() abs() ceil() floor()</p>
                    </div>

                    {{! Formula input }}
                    <div>
                        <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Expression</label>
                        <textarea
                            class="w-full font-mono text-xs bg-gray-50 dark:bg-gray-800 border {{if this.formulaError 'border-red-400' 'border-gray-200 dark:border-gray-700'}} rounded-lg px-3 py-2 outline-none focus:border-blue-400 dark:focus:border-blue-500 resize-none min-h-20"
                            placeholder="{invoice.subtotal} * 1.1"
                            {{on "input" this.updateFormula}}
                        >{{this.formulaExpression}}</textarea>
                        {{#if this.formulaError}}
                            <p class="text-xs text-red-500 mt-1">{{this.formulaError}}</p>
                        {{/if}}
                    </div>

                    {{! Preview }}
                    {{#if this.formulaPreview}}
                        <div>
                            <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Preview</label>
                            <div class="font-mono text-xs bg-gray-900 dark:bg-gray-950 text-green-400 rounded-lg px-3 py-2 break-all">
                                {{this.formulaPreview}}
                            </div>
                        </div>
                    {{/if}}

                    {{! Quick-insert variables into formula }}
                    <div>
                        <p class="text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">Quick-insert variable</p>
                        <div class="space-y-1 max-h-40 overflow-y-auto">
                            {{#each this.contextSchemas as |schema|}}
                                {{#each schema.variables as |variable|}}
                                    {{#if (eq variable.type "number")}}
                                        <button
                                            type="button"
                                            class="w-full flex items-center px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 text-left transition-colors"
                                            {{on "click" (fn this.insertVariableIntoFormula variable)}}
                                        >
                                            <FaIcon @icon="hashtag" class="w-3 h-3 mr-2 text-gray-400 flex-shrink-0" />
                                            <span class="text-xs font-mono text-gray-700 dark:text-gray-300">{{variable.path}}</span>
                                            <span class="text-xs text-gray-400 dark:text-gray-500 ml-2 truncate">{{variable.label}}</span>
                                        </button>
                                    {{/if}}
                                {{/each}}
                            {{/each}}
                        </div>
                    </div>
                </div>

                {{! Footer }}
                <div class="flex items-center justify-end space-x-2 px-4 py-3 border-t border-gray-200 dark:border-gray-700">
                    <button type="button" class="px-3 py-1.5 text-xs text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors" {{on "click" this.close}}>
                        Cancel
                    </button>
                    <Button
                        @type="primary"
                        @text="Insert Formula"
                        @icon="calculator"
                        @size="xs"
                        @isDisabled={{not this.formulaExpression}}
                        @onClick={{this.insertFormula}}
                    />
                </div>
            {{/if}}
        </div>
    </div>
{{/if}}