<div class="query-builder-panel" ...attributes>
    <div class="query-builder-panel-header">
        <div class="query-builder-panel-title">
            <FaIcon @icon="layer-group" @size="sm" class="mr-2" />
            Group By
        </div>
        <div class="text-xs text-gray-500">
            {{if this.groupByItems.length (concat this.groupByItems.length " group" (if (gt this.groupByItems.length 1) "s")) "No grouping"}}
        </div>
    </div>

    <div class="query-builder-panel-content">
        {{#if this.canGroup}}
            <div class="space-y-4">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                    <div>
                        <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
                            Group By Column
                        </label>
                        <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                            <PowerSelect
                                @options={{this.availableGroupByColumns}}
                                @selected={{this.selectedGroupBy}}
                                @onChange={{this.selectGroupBy}}
                                @placeholder="Select column..."
                                @triggerClass="form-select form-input"
                                @searchEnabled={{true}}
                                @searchField="label"
                                as |option|
                            >
                                <div class="flex items-center space-x-2">
                                    <span class="font-medium">{{option.label}}</span>
                                    <span class="text-xs text-gray-500 font-mono">{{option.type}}</span>
                                </div>
                            </PowerSelect>
                        </div>
                    </div>

                    <div>
                        <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
                            Calculate
                        </label>
                        <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                            <PowerSelect
                                @options={{this.aggregateFunctions}}
                                @selected={{this.selectedAggregateFn}}
                                @onChange={{this.selectAggregateFn}}
                                @placeholder="Select function..."
                                @triggerClass="form-select form-input"
                                as |option|
                            >
                                <div class="flex items-center space-x-2">
                                    <FaIcon @icon={{option.icon}} @size="sm" class="text-gray-500" />
                                    <span>{{option.label}}</span>
                                </div>
                            </PowerSelect>
                        </div>
                    </div>

                    <div>
                        <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
                            Of Column
                        </label>
                        <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                            <PowerSelect
                                @options={{this.availableAggregateColumns}}
                                @selected={{this.selectedAggregateBy}}
                                @onChange={{this.selectAggregateBy}}
                                @placeholder="Select column..."
                                @triggerClass="form-select form-input"
                                @disabled={{not this.selectedAggregateFn}}
                                @searchEnabled={{true}}
                                @searchField="label"
                                as |option|
                            >
                                <div class="flex items-center space-x-2">
                                    <span class="font-medium">{{option.label}}</span>
                                    {{#if option.type}}
                                        <span class="text-xs text-gray-500 font-mono">{{option.type}}</span>
                                    {{/if}}
                                </div>
                            </PowerSelect>
                        </div>
                    </div>
                </div>

                <Button
                    @text="Add Grouping"
                    @type="primary"
                    @icon="save"
                    @size="xs"
                    @onClick={{this.addGroupBy}}
                    @disabled={{this.isAddGroupingDisabled}}
                />
            </div>

            {{#if this.groupByItems.length}}
                <div class="mt-6 space-y-3">
                    <div class="text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Active Groupings
                    </div>

                    <DragSortList @items={{this.groupByItems}} @dragEndAction={{this.reorderGroupBy}} class="drag-sort-list" as |item index|>
                        <div class="group-sort-item">
                            <div class="drag-handle">
                                <FaIcon @icon="grip-vertical" @size="sm" />
                            </div>

                            <div class="flex-1 min-w-0">
                                <div class="flex items-center space-x-2 text-sm">
                                    <span class="font-medium text-gray-900 dark:text-gray-100">
                                        Group by
                                        {{item.groupBy.label}}
                                    </span>
                                    <span class="text-gray-500">→</span>
                                    <span class="text-indigo-600 dark:text-indigo-400 font-medium">
                                        {{item.aggregateFn.label}}
                                    </span>
                                    <span class="text-gray-500">of</span>
                                    <span class="font-medium text-gray-900 dark:text-gray-100">
                                        {{item.aggregateBy.label}}
                                    </span>
                                </div>
                            </div>

                            <button
                                type="button"
                                class="text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors duration-200 p-1"
                                {{on "click" (fn this.removeGroupBy index)}}
                            >
                                <FaIcon @icon="trash" @size="sm" />
                            </button>
                        </div>
                    </DragSortList>
                </div>
            {{/if}}
        {{else}}

            <div class="min-h-24 p-4">
                <div class="flex items-center justify-center border border-dashed border-gray-300 dark:border-gray-600 p-6 rounded-xl bg-gray-50 dark:bg-gray-800">
                    <div class="text-center">
                        <FaIcon @icon="layer-group" @size="2x" class="text-gray-400 mb-2" />
                        <div class="text-sm text-gray-600 dark:text-gray-400 font-medium">
                            {{this.groupingMessage}}
                        </div>
                        {{#unless @selectedColumns.length}}
                            <div class="text-xs text-gray-500 dark:text-gray-500 mt-1">
                                Select columns in the "Select Fields" section first
                            </div>
                        {{/unless}}
                    </div>
                </div>
            </div>
        {{/if}}

        {{#if this.canGroup}}
            <div class="mt-4 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-700">
                <div class="flex items-start space-x-2">
                    <FaIcon @icon="info-circle" @size="sm" class="text-blue-600 dark:text-blue-400 mt-0.5" />
                    <div class="text-xs text-blue-800 dark:text-blue-200">
                        <div class="font-medium mb-1">Grouping Rules:</div>
                        <ul class="space-y-1 text-blue-700 dark:text-blue-300">
                            <li>• You can only group by columns that are selected</li>
                            <li>• Aggregate functions calculate values for each group</li>
                            <li>• Use COUNT(*) to count records in each group</li>
                        </ul>
                    </div>
                </div>
            </div>
        {{/if}}
    </div>
</div>