<app-admin-layout>
<section class="admin-page">
    <div class="admin-container">

        <!-- Page Header -->
        <header class="admin-page-header">
            <div class="header__info">
                <h1 class="admin-page-title">Newsletter-Abonnenten</h1>
                <p class="admin-page-subtitle">Verwalte E-Mail-Abonnenten und registrierte User</p>
            </div>
            <div class="admin-header-actions">
                <button class="admin-btn admin-btn--ghost" (click)="copyAllCombined()" title="Alle E-Mails kombiniert kopieren">
                    <span class="material-symbols-outlined">copy_all</span>
                    <span class="btn-label">Alle kopieren</span>
                </button>
                <button class="admin-btn admin-btn--ghost" (click)="loadAll()" [disabled]="loading" title="Aktualisieren">
                    <span class="material-symbols-outlined" [class.spinning]="loading">refresh</span>
                    <span class="btn-label">Aktualisieren</span>
                </button>
            </div>
        </header>

        <!-- Tab Navigation -->
        <div class="tab-navigation">
            <button 
                class="tab-btn" 
                [class.active]="activeTab === 'emails'" 
                (click)="setTab('emails')">
                <span class="material-symbols-outlined">mail</span>
                <span class="tab-label">E-Mail Abonnenten</span>
                <span class="tab-count">{{ stats.active }}</span>
            </button>
            <button 
                class="tab-btn" 
                [class.active]="activeTab === 'users'" 
                (click)="setTab('users')">
                <span class="material-symbols-outlined">person</span>
                <span class="tab-label">Registrierte User</span>
                <span class="tab-count">{{ userSubscribers.length }}</span>
            </button>
        </div>

        <!-- Toast Notification -->
        <div class="toast" *ngIf="toast.show" [class]="'toast--' + toast.type" @fadeSlide>
            <span class="material-symbols-outlined">{{ toast.type === 'success' ? 'check_circle' : toast.type === 'error' ? 'error' : 'info' }}</span>
            <span>{{ toast.message }}</span>
        </div>

        <!-- Loading State -->
        <div *ngIf="loading" class="loading-state">
            <div class="spinner"></div>
            <p>Lade Abonnenten…</p>
        </div>

        <!-- ==================== EMAILS TAB ==================== -->
        <div *ngIf="!loading && activeTab === 'emails'" class="tab-content">
            
            <!-- Stats Row for Emails -->
            <div class="admin-stats-row">
                <div class="admin-stat-chip admin-stat-chip--primary">
                    <span class="material-symbols-outlined">people</span>
                    <div class="stat-content">
                        <span class="stat-value">{{ stats.total }}</span>
                        <span class="stat-label">Gesamt</span>
                    </div>
                </div>
                <div class="admin-stat-chip admin-stat-chip--success">
                    <span class="material-symbols-outlined">check_circle</span>
                    <div class="stat-content">
                        <span class="stat-value">{{ stats.active }}</span>
                        <span class="stat-label">Aktiv</span>
                    </div>
                </div>
                <div class="admin-stat-chip admin-stat-chip--muted">
                    <span class="material-symbols-outlined">cancel</span>
                    <div class="stat-content">
                        <span class="stat-value">{{ stats.inactive }}</span>
                        <span class="stat-label">Inaktiv</span>
                    </div>
                </div>
            </div>

            <!-- Filter & Actions Bar -->
            <div class="filter-bar">
                <div class="filter-bar__left">
                    <!-- Search -->
                    <div class="search-input">
                        <span class="material-symbols-outlined">search</span>
                        <input type="text" placeholder="E-Mail suchen..." [(ngModel)]="searchTerm" (input)="filterSubscribers()">
                        <button *ngIf="searchTerm" class="clear-btn" (click)="searchTerm = ''; filterSubscribers()">
                            <span class="material-symbols-outlined">close</span>
                        </button>
                    </div>

                    <!-- Status Filter -->
                    <div class="filter-chips">
                        <button class="filter-chip" [class.active]="filterStatus === 'all'" (click)="setFilter('all')">
                            Alle
                        </button>
                        <button class="filter-chip" [class.active]="filterStatus === 'active'" (click)="setFilter('active')">
                            <span class="dot dot--success"></span>
                            Aktiv
                        </button>
                        <button class="filter-chip" [class.active]="filterStatus === 'inactive'" (click)="setFilter('inactive')">
                            <span class="dot dot--muted"></span>
                            Inaktiv
                        </button>
                    </div>
                </div>

                <div class="filter-bar__right">
                    <button class="admin-btn admin-btn--secondary" (click)="copyAllEmails()" [disabled]="filteredSubscribers.length === 0">
                        <span class="material-symbols-outlined">content_copy</span>
                        <span class="btn-label">E-Mails kopieren</span>
                    </button>
                    <button class="admin-btn admin-btn--secondary" (click)="exportToCSV()" [disabled]="filteredSubscribers.length === 0">
                        <span class="material-symbols-outlined">download</span>
                        <span class="btn-label">CSV Export</span>
                    </button>
                </div>
            </div>

            <!-- Error State -->
            <div *ngIf="error" class="error-state">
                <span class="material-symbols-outlined">error</span>
                <h3>Fehler beim Laden</h3>
                <p>{{ error }}</p>
                <button class="admin-btn admin-btn--primary" (click)="loadAll()">Erneut versuchen</button>
            </div>

            <!-- Empty State -->
            <div *ngIf="!error && subscribers.length === 0" class="empty-state">
                <span class="material-symbols-outlined">mail</span>
                <h3>Noch keine E-Mail Abonnenten</h3>
                <p>Öffentliche Newsletter-Anmeldungen erscheinen hier.</p>
            </div>

            <!-- No Results -->
            <div *ngIf="!error && subscribers.length > 0 && filteredSubscribers.length === 0" class="empty-state">
                <span class="material-symbols-outlined">search_off</span>
                <h3>Keine Treffer</h3>
                <p>Keine Abonnenten für "{{ searchTerm }}" gefunden.</p>
                <button class="admin-btn admin-btn--secondary" (click)="searchTerm = ''; filterStatus = 'all'; filterSubscribers()">
                    Filter zurücksetzen
                </button>
            </div>

            <!-- Subscriber List -->
            <div *ngIf="!error && filteredSubscribers.length > 0" class="subscribers-grid">
                <article *ngFor="let s of filteredSubscribers; trackBy: trackById" class="subscriber-card" [class.inactive]="!s.isActive">
                    
                    <div class="card__main">
                        <div class="card__email-row">
                            <span class="email" [title]="s.email">{{ s.email }}</span>
                            <span class="status-badge" [class.status--active]="s.isActive" [class.status--inactive]="!s.isActive">
                                {{ s.isActive ? 'Aktiv' : 'Inaktiv' }}
                            </span>
                        </div>
                        <div class="card__meta">
                            <span class="meta-item">
                                <span class="material-symbols-outlined">schedule</span>
                                {{ formatDate(s.subscribedAt) }}
                            </span>
                        </div>
                    </div>

                    <div class="card__actions">
                        <button class="action-btn" (click)="copyEmail(s.email)" title="E-Mail kopieren">
                            <span class="material-symbols-outlined">{{ copiedEmail === s.email ? 'check' : 'content_copy' }}</span>
                        </button>
                        <a class="action-btn" [href]="'mailto:' + s.email" title="E-Mail schreiben">
                            <span class="material-symbols-outlined">mail</span>
                        </a>
                        <button class="action-btn" [class.active]="s.isActive" (click)="toggleStatus(s)" [title]="s.isActive ? 'Deaktivieren' : 'Aktivieren'">
                            <span class="material-symbols-outlined">{{ s.isActive ? 'toggle_on' : 'toggle_off' }}</span>
                        </button>
                        <button class="action-btn action-btn--danger" (click)="confirmDelete(s)" title="Löschen">
                            <span class="material-symbols-outlined">delete</span>
                        </button>
                    </div>

                </article>
            </div>

            <!-- Result Count -->
            <div *ngIf="filteredSubscribers.length > 0" class="result-count">
                {{ filteredSubscribers.length }} von {{ subscribers.length }} Abonnenten
            </div>
        </div>

        <!-- ==================== USERS TAB ==================== -->
        <div *ngIf="!loading && activeTab === 'users'" class="tab-content">
            
            <!-- Stats Row for Users -->
            <div class="admin-stats-row">
                <div class="admin-stat-chip admin-stat-chip--primary">
                    <span class="material-symbols-outlined">person</span>
                    <div class="stat-content">
                        <span class="stat-value">{{ userSubscribers.length }}</span>
                        <span class="stat-label">Registrierte User</span>
                    </div>
                </div>
                <div class="admin-stat-chip admin-stat-chip--info">
                    <span class="material-symbols-outlined">verified</span>
                    <div class="stat-content">
                        <span class="stat-value">100%</span>
                        <span class="stat-label">Newsletter aktiv</span>
                    </div>
                </div>
            </div>

            <!-- Filter Bar for Users -->
            <div class="filter-bar">
                <div class="filter-bar__left">
                    <div class="search-input">
                        <span class="material-symbols-outlined">search</span>
                        <input type="text" placeholder="User suchen..." [(ngModel)]="userSearchTerm" (input)="filterUserSubscribers()">
                        <button *ngIf="userSearchTerm" class="clear-btn" (click)="userSearchTerm = ''; filterUserSubscribers()">
                            <span class="material-symbols-outlined">close</span>
                        </button>
                    </div>
                </div>

                <div class="filter-bar__right">
                    <button class="admin-btn admin-btn--secondary" (click)="copyAllEmails()" [disabled]="filteredUserSubscribers.length === 0">
                        <span class="material-symbols-outlined">content_copy</span>
                        <span class="btn-label">E-Mails kopieren</span>
                    </button>
                    <button class="admin-btn admin-btn--secondary" (click)="exportToCSV()" [disabled]="filteredUserSubscribers.length === 0">
                        <span class="material-symbols-outlined">download</span>
                        <span class="btn-label">CSV Export</span>
                    </button>
                </div>
            </div>

            <!-- Empty State -->
            <div *ngIf="userSubscribers.length === 0" class="empty-state">
                <span class="material-symbols-outlined">person_off</span>
                <h3>Keine User mit Newsletter</h3>
                <p>Registrierte User mit aktivem Newsletter erscheinen hier.</p>
            </div>

            <!-- No Results -->
            <div *ngIf="userSubscribers.length > 0 && filteredUserSubscribers.length === 0" class="empty-state">
                <span class="material-symbols-outlined">search_off</span>
                <h3>Keine Treffer</h3>
                <p>Keine User für "{{ userSearchTerm }}" gefunden.</p>
                <button class="admin-btn admin-btn--secondary" (click)="userSearchTerm = ''; filterUserSubscribers()">
                    Filter zurücksetzen
                </button>
            </div>

            <!-- User List -->
            <div *ngIf="filteredUserSubscribers.length > 0" class="subscribers-grid">
                <article *ngFor="let u of filteredUserSubscribers; trackBy: trackByUserId" class="subscriber-card user-card">
                    
                    <div class="card__main">
                        <div class="card__email-row">
                            <span class="email" [title]="u.email">{{ u.email }}</span>
                            <span class="status-badge status--user">
                                <span class="material-symbols-outlined">verified_user</span>
                                Registriert
                            </span>
                        </div>
                        <div class="card__meta">
                            <span class="meta-item" *ngIf="u.name">
                                <span class="material-symbols-outlined">person</span>
                                {{ u.name }}
                            </span>
                            <span class="meta-item">
                                <span class="material-symbols-outlined">schedule</span>
                                {{ formatDate(u.createdAt) }}
                            </span>
                        </div>
                    </div>

                    <div class="card__actions">
                        <button class="action-btn" (click)="copyEmail(u.email)" title="E-Mail kopieren">
                            <span class="material-symbols-outlined">{{ copiedEmail === u.email ? 'check' : 'content_copy' }}</span>
                        </button>
                        <a class="action-btn" [href]="'mailto:' + u.email" title="E-Mail schreiben">
                            <span class="material-symbols-outlined">mail</span>
                        </a>
                        <a class="action-btn" [routerLink]="['/admin/users']" [queryParams]="{search: u.email}" title="User ansehen">
                            <span class="material-symbols-outlined">open_in_new</span>
                        </a>
                    </div>

                </article>
            </div>

            <!-- Result Count -->
            <div *ngIf="filteredUserSubscribers.length > 0" class="result-count">
                {{ filteredUserSubscribers.length }} von {{ userSubscribers.length }} User
            </div>

            <!-- Info Box -->
            <div class="info-box">
                <span class="material-symbols-outlined">info</span>
                <p>Diese Liste zeigt alle <strong>registrierten User</strong>, die Newsletter in ihrem Profil aktiviert haben. 
                   Die Einstellung kann nur vom User selbst geändert werden.</p>
            </div>
        </div>

    </div>
</section>

<!-- Delete Confirmation Modal -->
<app-confirmation
    [isOpen]="deleteModal.isOpen"
    [config]="deleteModal.config"
    [loading]="deleteModal.loading"
    (confirmed)="executeDelete()"
    (cancelled)="deleteModal.isOpen = false">
</app-confirmation>
</app-admin-layout>