<div class="query-builder-panel" ...attributes>
    <div class="query-builder-panel-header">
        <div class="query-builder-panel-title">
            <FaIcon @icon="hashtag" @size="sm" class="mr-2" />
            Limit Results
        </div>
        <div class="text-xs text-gray-500">
            {{if this.limit (concat "Max " this.limit " rows") "No limit"}}
        </div>
    </div>

    <div class="query-builder-panel-content">
        <div class="space-y-3">
            <div>
                <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Maximum rows:</label>
                <Input
                    @value={{this.limit}}
                    @type="number"
                    min="1"
                    max="10000"
                    step="1"
                    {{on "input" (fn this.setLimit (pick "target.value"))}}
                    placeholder="Enter limit (e.g., 100)"
                    class="form-input w-full"
                />
            </div>

            <div class="flex flex-wrap gap-2">
                <div class="text-xs font-medium text-gray-700 dark:text-gray-300 w-full mb-1">Quick options:</div>
                {{#each this.quickLimits as |quickLimit|}}
                    <button
                        type="button"
                        class="px-3 py-1 text-xs rounded-md border transition-colors duration-200
                            {{if
                                (eq this.limit quickLimit.value)
                                'border-indigo-300 bg-indigo-50 text-indigo-700 dark:border-indigo-600 dark:bg-indigo-900/20 dark:text-indigo-300'
                                'border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:border-indigo-300 dark:hover:border-indigo-600 hover:bg-indigo-50 dark:hover:bg-indigo-900/20'
                            }}"
                        {{on "click" (fn this.setQuickLimit quickLimit.value)}}
                    >
                        {{quickLimit.label}}
                    </button>
                {{/each}}
            </div>

            {{#if this.limit}}

                <button
                    type="button"
                    class="w-full flex items-center justify-center px-3 py-2 text-xs text-gray-600 dark:text-gray-400 hover:text-red-600 dark:hover:text-red-400 border border-gray-300 dark:border-gray-600 rounded-lg hover:border-red-300 dark:hover:border-red-600 transition-colors duration-200"
                    {{on "click" this.clearLimit}}
                >
                    <FaIcon @icon="times" @size="sm" class="mr-2" />
                    Remove Limit
                </button>
            {{/if}}

            {{#if this.limit}}

                {{#if (gte this.limit 1000)}}
                    <div class="p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border border-yellow-200 dark:border-yellow-700">
                        <div class="flex items-center space-x-2 mb-1">
                            <FaIcon @icon="exclamation-triangle" @size="sm" class="text-yellow-600 dark:text-yellow-400" />
                            <span class="text-xs font-medium text-yellow-900 dark:text-yellow-100">Performance Notice</span>
                        </div>
                        <div class="text-xs text-yellow-700 dark:text-yellow-300">
                            Large result sets may take longer to process and display.
                        </div>
                    </div>
                {{/if}}
            {{/if}}
        </div>
    </div>
</div>