<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)"
    >
        <div toolbar-right class="flex items-center gap-2">
            <a
                pButton
                [href]="docsUrl"
                target="_blank"
                rel="noreferrer"
                size="small"
                icon="pi pi-external-link"
                iconPos="right"
                [label]="'aiChatbots.docsAction' | transloco"
                [attr.aria-label]="'aiChatbots.docsAction' | transloco"
                class="p-button-rounded p-button-secondary"
            ></a>
        </div>
    </app-range-toolbar>

    @if (noSite()) {
    <div class="flex flex-col items-center justify-center h-[50vh] gap-4">
        <i class="pi pi-comments 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">{{ "aiChatbots.noSiteDescription" | transloco }}</p>
    </div>
    } @else {
    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 mb-6">
        @for (card of kpiCards(); track card.label) {
        <app-kpi-card [label]="card.label" [value]="card.value" [delta]="card.delta" [loading]="isLoadingSeries() || isLoadingComparison()" />
        }
    </div>

    <p-card class="shadow-sm border border-surface-200 dark:border-surface-700 surface-card mb-6">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="flex flex-col gap-1">
                <label for="scope-key-select" class="text-sm font-medium">{{ "aiChatbots.filters.groupBy" | transloco }}</label>
                <p-select inputId="scope-key-select" [options]="scopeKeyOptions()" [ngModel]="selectedScopeKey()" (ngModelChange)="selectedScopeKey.set($event)" optionLabel="label" optionValue="value" class="w-full" />
            </div>
            <div class="flex flex-col gap-1">
                <label for="scope-value-select" class="text-sm font-medium">{{ "aiChatbots.filters.value" | transloco }}</label>
                <p-select
                    inputId="scope-value-select"
                    [options]="scopeValueOptions()"
                    [ngModel]="selectedScopeValue()"
                    (ngModelChange)="selectedScopeValue.set($event)"
                    optionLabel="label"
                    optionValue="value"
                    [placeholder]="'aiChatbots.filters.allValues' | transloco"
                    [loading]="isLoadingBreakdowns()"
                    [showClear]="true"
                    class="w-full"
                />
            </div>
        </div>
    </p-card>

    <div class="mb-6">
        <p-card class="shadow-sm border border-surface-200 dark:border-surface-700 surface-card">
            <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between mb-4">
                <div>
                    <div class="flex items-center gap-2">
                        <h3 class="text-lg font-semibold">{{ "aiChatbots.chart.title" | transloco }}</h3>
                        @if (filterChips().length > 0) {
                        <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">{{ "aiChatbots.chart.description" | transloco }}</p>
                </div>
            </div>
            <app-series-chart
                [data]="chartSeries()"
                [series]="chartConfig()"
                [comparisonData]="comparisonChartSeries()"
                [isLoading]="isLoadingSeries()"
                [isShortRange]="isShortRange()"
                [comparisonLabel]="comparisonLabel()"
                [emptyTitle]="'aiChatbots.chart.emptyTitle' | transloco"
                [emptyDescription]="'aiChatbots.chart.emptyDescription' | transloco"
            />
        </p-card>
    </div>

    <div class="flex flex-wrap items-center justify-between gap-3 mb-6">
        <div class="flex flex-wrap items-center gap-2">
            @if (filterChips().length > 0) { @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)="clearFilters()">{{ "common.actions.clearAll" | transloco }}</button>
            } @else {
            <span class="text-sm text-[var(--p-text-muted-color)]">{{ "common.noActiveFilter" | transloco }}</span>
            }
        </div>
        <div class="flex items-center gap-2">
            <p-splitButton
                icon="pi pi-download"
                [label]="isExporting() ? ('common.preparing' | transloco) : ('common.actions.exportCsv' | transloco)"
                [model]="exportMenuItems()"
                [disabled]="!exportUrl() || isExporting()"
                styleClass="p-button-outlined p-button-sm"
                (onClick)="exportFiltered('csv')"
            />
        </div>
    </div>
    @if (exportState() === "success") {
    <div class="mb-6 rounded-md border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-700">{{ "aiChatbots.exportStatus.success" | transloco }}</div>
    } @if (exportState() === "error") {
    <div class="mb-6 rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{{ "aiChatbots.exportStatus.error" | transloco }}</div>
    }

    <app-metric-card-group [tabs]="metricCardTabs()" (rowClicked)="onMetricCardClick($event)" />
    }
</div>
