<div class="range-toolbar">
    <div class="range-toolbar__controls">
        <div class="inline-flex items-center gap-1 rounded-lg border border-surface-200 bg-surface-100 p-1 dark:border-surface-700 dark:bg-surface-800" [attr.aria-label]="'common.timeRangeSelectorAria' | transloco" role="group">
            @for (option of presetRanges(); track option.value) {
            <button
                type="button"
                class="active:scale-95 cursor-pointer rounded-md px-3 py-1.5 text-sm font-medium transition-all duration-200 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
                [class]="isPresetActive(option.value) ? 'bg-surface-0 dark:bg-surface-900 shadow-sm text-[var(--p-text-color)]' : 'text-muted-color hover:bg-surface-200/50 hover:text-[var(--p-text-color)] dark:hover:bg-surface-700/50'"
                [attr.aria-pressed]="isPresetActive(option.value)"
                [attr.aria-label]="option.label"
                [pTooltip]="option.label"
                tooltipPosition="bottom"
                (click)="selectPreset(option)"
            >
                {{ option.shortLabel }}
            </button>
            }
            <button
                type="button"
                class="active:scale-95 flex cursor-pointer items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-all duration-200 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
                [class]="isCustomActive() ? 'bg-surface-0 dark:bg-surface-900 shadow-sm text-[var(--p-text-color)]' : 'text-muted-color hover:bg-surface-200/50 hover:text-[var(--p-text-color)] dark:hover:bg-surface-700/50'"
                [attr.aria-pressed]="isCustomActive()"
                [attr.aria-label]="'common.timeRanges.openCustomRangeAria' | transloco"
                [pTooltip]="customRangeSummary() ?? undefined"
                tooltipPosition="bottom"
                (click)="toggleCustomRange($event, customPopover)"
            >
                <i class="pi pi-calendar text-xs" aria-hidden="true"></i>
                {{ customButtonLabel() }}
            </button>
        </div>

        @if (customRangeSummary(); as summary) {
        <div class="range-toolbar__summary" [attr.aria-label]="'common.timeRanges.customRange' | transloco">{{ summary }}</div>
        }

        <p-popover #customPopover>
            <div class="range-toolbar__popover">
                <div class="range-toolbar__popover-header">
                    <h3 class="range-toolbar__popover-title">{{ "common.selectDateRange" | transloco }}</h3>
                    <p class="range-toolbar__popover-copy">{{ "common.timeRanges.customRangeHint" | transloco }}</p>
                </div>

                <div class="range-toolbar__fields">
                    <div class="range-toolbar__field">
                        <label for="range-custom-start" class="range-toolbar__field-label">{{ "common.timeRanges.customStart" | transloco }}</label>
                        <p-datepicker
                            inputId="range-custom-start"
                            [formControl]="rangeForm.customStart().control()"
                            [showTime]="true"
                            [hourFormat]="datePickerHourFormat()"
                            [dateFormat]="datePickerDateFormat()"
                            [hideOnDateTimeSelect]="false"
                            [showIcon]="true"
                            iconDisplay="input"
                            appendTo="body"
                        />
                    </div>

                    <div class="range-toolbar__field">
                        <label for="range-custom-end" class="range-toolbar__field-label">{{ "common.timeRanges.customEnd" | transloco }}</label>
                        <p-datepicker
                            inputId="range-custom-end"
                            [formControl]="rangeForm.customEnd().control()"
                            [showTime]="true"
                            [hourFormat]="datePickerHourFormat()"
                            [dateFormat]="datePickerDateFormat()"
                            [hideOnDateTimeSelect]="false"
                            [showIcon]="true"
                            iconDisplay="input"
                            appendTo="body"
                        />
                    </div>
                </div>

                <div class="range-toolbar__actions">
                    <p-button [label]="'common.actions.cancel' | transloco" severity="secondary" styleClass="cursor-pointer p-button-text" size="small" (onClick)="cancelCustomRange(customPopover)" />
                    <p-button [label]="'common.actions.apply' | transloco" styleClass="cursor-pointer" size="small" [disabled]="!canApplyCustomRange()" (onClick)="applyCustomRange(customPopover)" />
                </div>
            </div>
        </p-popover>

        <p-button
            icon="pi pi-refresh"
            (onClick)="refresh.emit()"
            [loading]="loading()"
            class="ml-1"
            [pTooltip]="'common.actions.refresh' | transloco"
            tooltipPosition="bottom"
            [outlined]="true"
            severity="secondary"
            styleClass="flex h-9 w-9 cursor-pointer items-center justify-center p-0"
        />
    </div>

    <ng-content select="[toolbar-right]"></ng-content>
</div>
