<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)"
        (refresh)="refreshData()"
    >
        <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]="'aiVisibility.docsAction' | transloco"
                [attr.aria-label]="'aiVisibility.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-sparkles 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">{{ "aiVisibility.noSiteDescription" | transloco }}</p>
    </div>
    } @else {
    <div data-testid="ai-visibility-headline-kpis" class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
        @for (card of primaryKpiCards(); track card.label) {
        <app-kpi-card [label]="card.label" [value]="card.value" [loading]="card.loading" />
        }
    </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-3 gap-4">
            <div class="flex flex-col gap-1">
                <label for="assistant-filter-select" class="text-sm font-medium">{{ "aiVisibility.filters.assistant" | transloco }}</label>
                <p-select
                    inputId="assistant-filter-select"
                    [options]="assistantOptions()"
                    [ngModel]="filterValue('assistantName')"
                    (ngModelChange)="setFilter('assistantName', $event)"
                    optionLabel="label"
                    optionValue="value"
                    [placeholder]="'aiVisibility.filters.allAssistants' | transloco"
                    [showClear]="true"
                    class="w-full"
                />
            </div>
            <div class="flex flex-col gap-1">
                <label for="family-filter-select" class="text-sm font-medium">{{ "aiVisibility.filters.family" | transloco }}</label>
                <p-select
                    inputId="family-filter-select"
                    [options]="familyOptions()"
                    [ngModel]="filterValue('assistantFamily')"
                    (ngModelChange)="setFilter('assistantFamily', $event)"
                    optionLabel="label"
                    optionValue="value"
                    [placeholder]="'aiVisibility.filters.allFamilies' | transloco"
                    [showClear]="true"
                    class="w-full"
                />
            </div>
            <div class="flex flex-col gap-1">
                <label for="resource-type-filter-select" class="text-sm font-medium">{{ "aiVisibility.filters.resourceType" | transloco }}</label>
                <p-select
                    inputId="resource-type-filter-select"
                    [options]="resourceTypeOptions()"
                    [ngModel]="filterValue('resourceType')"
                    (ngModelChange)="setFilter('resourceType', $event)"
                    optionLabel="label"
                    optionValue="value"
                    [placeholder]="'aiVisibility.filters.allResourceTypes' | transloco"
                    [showClear]="true"
                    class="w-full"
                />
            </div>
        </div>
    </p-card>

    <p-card class="shadow-sm border border-surface-200 dark:border-surface-700 surface-card mb-6">
        <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between mb-4">
            <div>
                <div class="flex items-center gap-2">
                    <h3 class="text-lg font-semibold">{{ "aiVisibility.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">{{ "aiVisibility.chart.description" | transloco }}</p>
            </div>
            <dl data-testid="ai-visibility-health-strip" class="ai-visibility__stat-strip">
                @for (stat of healthStats(); track stat.label) {
                <div class="ai-visibility__stat">
                    <dt>{{ stat.label }}</dt>
                    <dd>
                        @if (stat.loading) {
                        <span class="ai-visibility__stat-skeleton" aria-hidden="true"></span>
                        } @else { {{ stat.value }} }
                    </dd>
                </div>
                }
            </dl>
        </div>
        <app-series-chart
            [data]="series()"
            [series]="chartConfig()"
            [isLoading]="isLoadingSeries()"
            [isShortRange]="isShortRange()"
            [emptyTitle]="'aiVisibility.chart.emptyTitle' | transloco"
            [emptyDescription]="'aiVisibility.chart.emptyDescription' | transloco"
        />
    </p-card>

    <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)="clearFilter(chip.key)" [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">{{ "aiVisibility.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">{{ "aiVisibility.exportStatus.error" | transloco }}</div>
    }

    <dl data-testid="ai-visibility-correlation-summary" class="ai-visibility__stat-strip ai-visibility__stat-strip--wide mb-4">
        @for (stat of correlationSummaryStats(); track stat.label) {
        <div class="ai-visibility__stat">
            <dt>{{ stat.label }}</dt>
            <dd>
                @if (stat.loading) {
                <span class="ai-visibility__stat-skeleton" aria-hidden="true"></span>
                } @else { {{ stat.value }} }
            </dd>
        </div>
        }
    </dl>

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