<div class="flex flex-col h-full w-full bg-[var(--p-surface-ground)] transition-colors duration-200">
    <app-page-header>
        <ng-template appPageHeaderLeft>
            <div>
                <app-page-breadcrumb [items]="breadcrumbItems()" />
            </div>
        </ng-template>
    </app-page-header>

    <app-range-toolbar
        [timeRanges]="timeRanges()"
        [selectedRange]="selectedRange()"
        [customRangeDates]="customRangeDates()"
        [loading]="isLoading()"
        (selectedRangeChange)="selectedRange.set($event)"
        (customRangeDatesChange)="customRangeDates.set($event)"
    >
        <a
            toolbar-right
            pButton
            [href]="addEventsDocsUrl"
            target="_blank"
            rel="noreferrer"
            size="small"
            icon="pi pi-external-link"
            iconPos="right"
            [label]="'events.docsAction' | transloco"
            [attr.aria-label]="'events.docsAction' | transloco"
            class="p-button-rounded p-button-secondary"
        ></a>
    </app-range-toolbar>

    @if (noSite()) {
    <div class="flex flex-col items-center justify-center h-[50vh] gap-4">
        <i class="pi pi-globe text-6xl text-primary opacity-20"></i>
        <h2 class="text-2xl font-semibold text-muted-color">{{ "common.noSiteSelected" | transloco }}</h2>
        <p class="text-muted-color">{{ "events.noSiteDescription" | transloco }}</p>
    </div>
    } @else {
    <!-- Selectors — placed first so the user picks context before the chart renders -->
    <p-card class="shadow-sm border border-surface-200 dark:border-surface-700 surface-card mb-6">
        <div class="events-filter-panel">
            <div class="events-filter-grid">
                <div class="events-filter-field">
                    <label for="event-name-select" class="events-filter-field__label">{{ 'events.eventNameLabel' | transloco }}</label>
                    <p-select
                        inputId="event-name-select"
                        [options]="eventOptions()"
                        [ngModel]="selectedEvent()"
                        (ngModelChange)="selectedEvent.set($event)"
                        optionLabel="label"
                        optionValue="value"
                        [placeholder]="'events.eventNamePlaceholder' | transloco"
                        [loading]="isLoadingNames()"
                        [disabled]="isLoadingNames()"
                        class="w-full"
                    >
                        <ng-template #selectedItem let-option>
                            <span class="events-event-option">
                                @if (option.isAutomatic) {
                                <i class="pi pi-bolt events-event-option__auto-icon" aria-hidden="true"></i>
                                }
                                <span class="events-event-option__name">{{ option.label }}</span>
                                @if (option.isAutomatic) {
                                <span class="events-event-option__badge">{{ 'events.automatic.badge' | transloco }}</span>
                                }
                            </span>
                        </ng-template>
                        <ng-template #item let-option>
                            <span class="events-event-option">
                                @if (option.isAutomatic) {
                                <i class="pi pi-bolt events-event-option__auto-icon" aria-hidden="true"></i>
                                }
                                <span class="events-event-option__name">{{ option.label }}</span>
                                @if (option.isAutomatic) {
                                <span class="events-event-option__badge">{{ 'events.automatic.badge' | transloco }}</span>
                                }
                            </span>
                        </ng-template>
                    </p-select>
                </div>
                <div class="events-filter-field">
                    <label for="property-key-select" class="events-filter-field__label">{{ 'events.propertyKeyLabel' | transloco }}</label>
                    <p-select
                        inputId="property-key-select"
                        [options]="propertyOptions()"
                        [ngModel]="selectedPropertyKey()"
                        (ngModelChange)="selectedPropertyKey.set($event)"
                        optionLabel="label"
                        optionValue="value"
                        [placeholder]="'events.propertyKeyPlaceholder' | transloco"
                        [loading]="isLoadingKeys()"
                        [disabled]="isLoadingKeys() || !selectedEvent()"
                        class="w-full"
                    />
                </div>
            </div>
        </div>
    </p-card>

    <!-- Event timeseries chart — inline KPI stat replaces the separate card row -->
    <div class="mb-6">
        <p-card class="shadow-sm border border-surface-200 dark:border-surface-700 surface-card">
            <div class="flex items-start justify-between gap-4 mb-4">
                <div>
                    <div class="flex items-center gap-2">
                        <h3 class="text-lg font-semibold">{{ "events.series.title" | transloco }}</h3>
                        @if (hasActiveFilters()) {
                        <span class="inline-flex items-center px-2 py-0.5 rounded-full border border-[var(--p-primary-color)] text-xs font-medium">{{ "dashboard.filteredBadge" | transloco }}</span>
                        }
                    </div>
                    <p class="text-sm text-[var(--p-text-muted-color)] mt-1">{{ "events.series.description" | transloco }}</p>
                </div>
                @if (selectedEvent()) {
                <div class="text-right shrink-0">
                    @if (isLoadingEventSeries()) {
                    <p-skeleton width="80px" height="2rem" />
                    } @else {
                    <div class="text-2xl xl:text-3xl font-bold tabular-nums leading-none">{{ totalEventCountDisplay() }}</div>
                    @if (totalEventDelta() !== null) {
                    <span [class]="totalEventDeltaClass()">{{ totalEventDeltaLabel() }}</span>
                    }
                    <div class="text-xs text-[var(--p-text-muted-color)] mt-1">{{ 'events.kpis.totalEvents' | transloco }}</div>
                    }
                </div>
                }
            </div>
            <app-series-chart
                [data]="eventSeriesChart()"
                [series]="eventSeriesConfig()"
                [comparisonData]="comparisonEventSeriesChart()"
                [isLoading]="isLoadingEventSeries()"
                [isShortRange]="isShortRange()"
                [emptyTitle]="(selectedEvent() ? 'events.series.emptySelectedTitle' : 'events.series.emptyTitle') | transloco"
                [emptyDescription]="(selectedEvent() ? 'events.series.emptySelectedDescription' : 'events.series.emptyDescription') | transloco"
                [comparisonLabel]="comparisonLabel()"
            />
        </p-card>
    </div>

    <!-- Active filter chips — matches dashboard / goals / funnels / UTM pattern -->
    <div class="flex flex-wrap items-center gap-2 mb-6">
        @if (hasActiveFilters()) { @for (chip of filterChips(); track chip.key) {
        <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-[var(--p-primary-color)] text-sm">
            <span class="font-medium text-[var(--p-text-color)]">{{ chip.label }}</span>
            <button type="button" class="text-muted-color hover:text-[var(--p-text-color)]" (click)="chip.remove()" [attr.aria-label]="'common.removeFilterAria' | transloco">
                <i class="pi pi-times" aria-hidden="true"></i>
            </button>
        </span>
        }
        <button type="button" class="text-xs text-muted-color hover:text-[var(--p-text-color)] underline" (click)="clearAllFilters()">{{ "common.actions.clearAll" | transloco }}</button>
        } @else {
        <span class="text-sm text-[var(--p-text-muted-color)]">{{ "common.noActiveFilter" | transloco }}</span>
        }
    </div>

    <!-- Metric cards — property breakdown and audience panels share one card system -->
    @if (!selectedEvent()) {
    <div class="flex flex-col items-center justify-center h-32 gap-2">
        <p class="text-sm text-[var(--p-text-muted-color)]">{{ 'events.breakdown.selectEventFirst' | transloco }}</p>
    </div>
    } @else { @if ((audience()?.imported_excluded?.length ?? 0) > 0) {
    <p-message severity="info" styleClass="w-full mt-6">
        <strong>{{ "events.importedLimitations.title" | transloco }}</strong>
        @for (reason of audience()?.imported_excluded ?? []; track reason.reason + reason.detail) {
        <span class="block">{{ reason.detail || reason.reason }}</span>
        }
    </p-message>
    }
    <app-metric-card-group class="mt-6 block" [tabs]="metricCardTabs()" (rowClicked)="onMetricCardClick($event)" />
    } }
</div>
