<div class="flex flex-col w-full">
    <app-page-header>
        <ng-template appPageHeaderLeft>
            <div>
                <app-page-breadcrumb [items]="breadcrumbItems()" />
                <p class="text-sm text-[var(--p-text-muted-color)]">{{ "settings.reports.subtitle" | transloco }}</p>
            </div>
        </ng-template>
    </app-page-header>

    <div class="settings-content max-w-3xl mx-auto w-full">
        <div class="settings-grid">
            <!-- Consolidated Digest -->
            <app-settings-card [title]="'settings.reports.digest.title' | transloco" [subtitle]="'settings.reports.digest.description' | transloco" icon="pi pi-envelope">
                <div settings-card-body class="flex flex-col gap-4">
                    @if (digestSaveState() === "saved") {
                    <div class="settings-status settings-status--success">{{ "common.saved" | transloco }}</div>
                    } @if (digestSaveState() === "error") {
                    <div class="settings-status settings-status--error">{{ "common.saveFailed" | transloco }}</div>
                    } @if (isLoading()) {
                    <div class="text-sm text-[var(--p-text-muted-color)]">{{ "common.loading" | transloco }}</div>
                    } @else {
                    <div class="frequency-list">
                        <div class="frequency-row">
                            <div class="frequency-copy">
                                <div class="font-medium">{{ "settings.reports.frequency.daily.label" | transloco }}</div>
                                <div class="text-sm text-[var(--p-text-muted-color)]">{{ "settings.reports.frequency.daily.hint" | transloco }}</div>
                            </div>
                            <p-toggleswitch [ngModel]="digestPrefs().daily" (ngModelChange)="setDigestFreq('daily', $event)" [disabled]="isDigestSaving()" />
                        </div>
                        <div class="frequency-row">
                            <div class="frequency-copy">
                                <div class="font-medium">{{ "settings.reports.frequency.weekly.label" | transloco }}</div>
                                <div class="text-sm text-[var(--p-text-muted-color)]">{{ "settings.reports.frequency.weekly.hint" | transloco }}</div>
                            </div>
                            <p-toggleswitch [ngModel]="digestPrefs().weekly" (ngModelChange)="setDigestFreq('weekly', $event)" [disabled]="isDigestSaving()" />
                        </div>
                        <div class="frequency-row">
                            <div class="frequency-copy">
                                <div class="font-medium">{{ "settings.reports.frequency.monthly.label" | transloco }}</div>
                                <div class="text-sm text-[var(--p-text-muted-color)]">{{ "settings.reports.frequency.monthly.hint" | transloco }}</div>
                            </div>
                            <p-toggleswitch [ngModel]="digestPrefs().monthly" (ngModelChange)="setDigestFreq('monthly', $event)" [disabled]="isDigestSaving()" />
                        </div>
                    </div>
                    }
                </div>
                <div settings-card-footer>
                    <div class="settings-card-action">
                        <p-button [label]="'common.actions.save' | transloco" icon="pi pi-save" [loading]="isDigestSaving()" [disabled]="isLoading() || isDigestSaving()" styleClass="settings-action-btn" (onClick)="saveDigest()" />
                    </div>
                </div>
            </app-settings-card>

            <!-- Per-site Reports -->
            <app-settings-card [title]="'settings.reports.perSite.title' | transloco" [subtitle]="'settings.reports.perSite.description' | transloco" icon="pi pi-chart-bar">
                <div settings-card-body class="flex flex-col gap-4">
                    @if (sitesSaveState() === "saved") {
                    <div class="settings-status settings-status--success">{{ "common.saved" | transloco }}</div>
                    } @if (sitesSaveState() === "error") {
                    <div class="settings-status settings-status--error">{{ "common.saveFailed" | transloco }}</div>
                    } @if (isLoading()) {
                    <div class="text-sm text-[var(--p-text-muted-color)]">{{ "common.loading" | transloco }}</div>
                    } @else if (sitePrefs().length === 0) {
                    <div class="text-sm text-[var(--p-text-muted-color)]">{{ "settings.reports.perSite.empty" | transloco }}</div>
                    } @else {
                    <div>
                        @for (site of sitePrefs(); track site.site_id; let i = $index; let last = $last) {
                        <div class="site-row">
                            <div class="site-domain">
                                <i class="pi pi-globe"></i>
                                <span>{{ site.domain }}</span>
                            </div>
                            <div class="site-toggles">
                                <div class="site-toggle-item">
                                    <span class="site-toggle-label">{{ "settings.reports.frequency.daily.label" | transloco }}</span>
                                    <p-toggleswitch [ngModel]="site.daily" (ngModelChange)="setSiteFreq(i, 'daily', $event)" [disabled]="isSitesSaving()" />
                                </div>
                                <div class="site-toggle-item">
                                    <span class="site-toggle-label">{{ "settings.reports.frequency.weekly.label" | transloco }}</span>
                                    <p-toggleswitch [ngModel]="site.weekly" (ngModelChange)="setSiteFreq(i, 'weekly', $event)" [disabled]="isSitesSaving()" />
                                </div>
                                <div class="site-toggle-item">
                                    <span class="site-toggle-label">{{ "settings.reports.frequency.monthly.label" | transloco }}</span>
                                    <p-toggleswitch [ngModel]="site.monthly" (ngModelChange)="setSiteFreq(i, 'monthly', $event)" [disabled]="isSitesSaving()" />
                                </div>
                            </div>
                        </div>
                        @if (!last) {
                        <p-divider />
                        } }
                    </div>
                    }
                </div>
                <div settings-card-footer>
                    <div class="settings-card-action">
                        <p-button
                            [label]="'common.actions.save' | transloco"
                            icon="pi pi-save"
                            [loading]="isSitesSaving()"
                            [disabled]="isLoading() || isSitesSaving() || sitePrefs().length === 0"
                            styleClass="settings-action-btn"
                            (onClick)="saveSites()"
                        />
                    </div>
                </div>
            </app-settings-card>
        </div>
    </div>
</div>
