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

        <!-- Header mit Stats -->
        <div class="admin-page-header">
            <div class="header-top">
                <div class="header-content">
                    <h1 class="admin-page-title">Terminverwaltung</h1>
                    <p class="admin-page-subtitle">{{ stats.total }} Slots · {{ stats.booked }} gebucht</p>
                </div>
                <div class="admin-header-actions">
                    <button class="admin-btn admin-btn--primary" (click)="openCreateModal()">
                        <app-icon icon="add"></app-icon>
                        Slots erstellen
                    </button>
                    <button class="admin-btn admin-btn--icon admin-btn--secondary" (click)="loadSlots()" [disabled]="loading" title="Aktualisieren">
                        <app-icon icon="cached" [class.spin]="loading"></app-icon>
                    </button>
                </div>
            </div>

            <!-- Kompakte Stats -->
            <div class="admin-stats-row">
                <div class="admin-stat-chip">
                    <app-icon icon="calendar_month"></app-icon>
                    <span class="stat-value">{{ stats.total }}</span>
                    <span class="stat-label">Gesamt</span>
                </div>
                <div class="admin-stat-chip admin-stat-chip--success">
                    <app-icon icon="event_available"></app-icon>
                    <span class="stat-value">{{ stats.available }}</span>
                    <span class="stat-label">Frei</span>
                </div>
                <div class="admin-stat-chip admin-stat-chip--warning">
                    <app-icon icon="event_busy"></app-icon>
                    <span class="stat-value">{{ stats.booked }}</span>
                    <span class="stat-label">Gebucht</span>
                </div>
                <div class="admin-stat-chip admin-stat-chip--primary">
                    <app-icon icon="upcoming"></app-icon>
                    <span class="stat-value">{{ stats.upcoming }}</span>
                    <span class="stat-label">Bevorstehend</span>
                </div>
            </div>
        </div>

        <!-- Kalender Navigation -->
        <div class="calendar-nav">
            <button class="admin-btn admin-btn--icon admin-btn--ghost" (click)="previousMonth()">
                <app-icon icon="chevron_left"></app-icon>
            </button>
            <div class="nav-center">
                <h2>{{ getCurrentMonthYear() }}</h2>
                <button class="admin-btn admin-btn--ghost admin-btn--sm" (click)="goToToday()">Heute</button>
            </div>
            <button class="admin-btn admin-btn--icon admin-btn--ghost" (click)="nextMonth()">
                <app-icon icon="chevron_right"></app-icon>
            </button>
        </div>

        <!-- Filter Bar -->
        <div class="admin-filter-bar">
            <div class="admin-filter-chips">
                <button class="admin-chip" [class.active]="filters.status === 'all'" (click)="filters.status = 'all'; onFilterChange()">
                    Alle
                </button>
                <button class="admin-chip" [class.active]="filters.status === 'available'" (click)="filters.status = 'available'; onFilterChange()">
                    <app-icon icon="event_available"></app-icon>
                    Frei
                </button>
                <button class="admin-chip" [class.active]="filters.status === 'booked'" (click)="filters.status = 'booked'; onFilterChange()">
                    <app-icon icon="event_busy"></app-icon>
                    Gebucht
                </button>
                <button class="admin-chip" [class.active]="filters.status === 'unavailable'" (click)="filters.status = 'unavailable'; onFilterChange()">
                    <app-icon icon="lock"></app-icon>
                    Gesperrt
                </button>
            </div>

            <div class="admin-search-box">
                <app-icon icon="search" class="search-icon"></app-icon>
                <input 
                    type="text" 
                    [(ngModel)]="filters.searchText" 
                    (input)="onFilterChange()" 
                    placeholder="Suchen..."
                    class="search-input"
                >
                <button *ngIf="filters.searchText" class="clear-btn" (click)="filters.searchText = ''; onFilterChange()">
                    <app-icon icon="close"></app-icon>
                </button>
            </div>
        </div>

        <!-- Kalender Grid -->
        <div class="calendar-container">
            <div class="calendar-header">
                <div class="weekday" *ngFor="let day of weekDays">{{ day }}</div>
            </div>

            <div class="calendar-grid">
                <div *ngFor="let day of calendarDays" class="calendar-day" 
                    [class.other-month]="!day.isCurrentMonth"
                    [class.today]="isToday(day.date)" 
                    [class.has-slots]="day.slots.length > 0">

                    <div class="day-header">
                        <span class="day-number">{{ day.date.getDate() }}</span>
                        <span class="slot-count" *ngIf="day.slots.length > 0">
                            {{ day.slots.length }}
                        </span>
                    </div>

                    <div class="day-slots" *ngIf="day.slots.length > 0">
                        <div *ngFor="let slot of day.slots.slice(0, 3)" class="slot-preview"
                            [class.available]="slot.isAvailable && (slot.currentBookings || 0) === 0"
                            [class.booked]="(slot.currentBookings || 0) > 0" 
                            [class.unavailable]="!slot.isAvailable"
                            (click)="openSlotModal(slot)">
                            <span class="slot-time">{{ formatTime(slot.timeFrom) }}</span>
                            <app-icon [icon]="getSlotStatusIcon(slot)" class="slot-status-icon"></app-icon>
                        </div>
                        <button *ngIf="day.slots.length > 3" class="more-slots" (click)="openDayModal(day)">
                            +{{ day.slots.length - 3 }}
                        </button>
                    </div>

                    <button *ngIf="day.isCurrentMonth && day.slots.length === 0" class="btn-add-slot"
                        (click)="openQuickCreateForDay(day.date)" title="Slot hinzufügen">
                        <app-icon icon="add"></app-icon>
                    </button>
                </div>
            </div>
        </div>

        <!-- Loading State -->
        <div *ngIf="loading" class="admin-loading-state">
            <div class="admin-spinner"></div>
            <p>Lade Kalender...</p>
        </div>

    </div>

    <!-- Mobile List View -->
    <div class="mobile-list-view" *ngIf="!loading">
        <div class="admin-tabs">
            <button class="admin-tab" [class.active]="mobileView === 'upcoming'" (click)="mobileView = 'upcoming'">
                <app-icon icon="upcoming"></app-icon>
                Anstehend
            </button>
            <button class="admin-tab" [class.active]="mobileView === 'all'" (click)="mobileView = 'all'">
                <app-icon icon="list"></app-icon>
                Alle
            </button>
        </div>

        <!-- Upcoming Slots -->
        <div class="admin-list" *ngIf="mobileView === 'upcoming'">
            <div *ngFor="let slot of getUpcomingSlots()" class="admin-card mobile-slot-card"
                [class.available]="slot.isAvailable && (slot.currentBookings || 0) === 0"
                [class.booked]="(slot.currentBookings || 0) > 0" 
                [class.unavailable]="!slot.isAvailable"
                (click)="openSlotModal(slot)">

                <div class="admin-card__header">
                    <div class="mobile-slot-date">
                        <strong>{{ formatDateLong(slot.date) }}</strong>
                        <span>{{ formatTime(slot.timeFrom) }} - {{ formatTime(slot.timeTo) }}</span>
                    </div>
                    <span class="admin-badge"
                        [class.admin-badge--success]="slot.isAvailable && (slot.currentBookings || 0) === 0"
                        [class.admin-badge--warning]="(slot.currentBookings || 0) > 0" 
                        [class.admin-badge--error]="!slot.isAvailable">
                        <app-icon [icon]="getSlotStatusIcon(slot)"></app-icon>
                    </span>
                </div>

                <div class="admin-card__body">
                    <div class="admin-badge">
                        <app-icon icon="group"></app-icon>
                        {{ slot.currentBookings || 0 }}/{{ slot.maxBookings }}
                    </div>
                    <div class="admin-badge" *ngIf="getSlotBookings(slot).length > 0">
                        <app-icon icon="person"></app-icon>
                        {{ getSlotBookings(slot).length }} Buchung(en)
                    </div>
                </div>

                <div class="mobile-slot-bookings" *ngIf="getSlotBookings(slot).length > 0">
                    <div *ngFor="let booking of getSlotBookings(slot).slice(0, 2)" class="booking-preview">
                        <strong>{{ booking.name }}</strong>
                        <span [style.color]="getStatusColor(booking.status)">
                            {{ getStatusLabel(booking.status) }}
                        </span>
                    </div>
                </div>
            </div>

            <div class="admin-empty-state" *ngIf="getUpcomingSlots().length === 0">
                <app-icon icon="event_available" class="state-icon"></app-icon>
                <h3>Keine anstehenden Termine</h3>
                <p>Erstelle neue Slots im Kalender</p>
            </div>
        </div>

        <!-- All Slots -->
        <div class="admin-list" *ngIf="mobileView === 'all'">
            <div *ngFor="let slot of slots.slice(0, 50)" class="admin-card mobile-slot-card"
                [class.available]="slot.isAvailable && (slot.currentBookings || 0) === 0"
                [class.booked]="(slot.currentBookings || 0) > 0" 
                [class.unavailable]="!slot.isAvailable"
                (click)="openSlotModal(slot)">

                <div class="admin-card__header">
                    <div class="mobile-slot-date">
                        <strong>{{ formatDateLong(slot.date) }}</strong>
                        <span>{{ formatTime(slot.timeFrom) }} - {{ formatTime(slot.timeTo) }}</span>
                    </div>
                    <app-icon [icon]="getSlotStatusIcon(slot)" class="admin-badge"
                        [class.admin-badge--success]="slot.isAvailable && (slot.currentBookings || 0) === 0"
                        [class.admin-badge--warning]="(slot.currentBookings || 0) > 0" 
                        [class.admin-badge--error]="!slot.isAvailable">
                    </app-icon>
                </div>

                <div class="admin-card__body">
                    <div class="admin-badge">
                        <app-icon icon="group"></app-icon>
                        {{ slot.currentBookings || 0 }}/{{ slot.maxBookings }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal: Slot erstellen -->
<div class="admin-modal-overlay" *ngIf="showCreateModal" (click)="closeCreateModal()">
    <div class="admin-modal admin-modal--lg" (click)="$event.stopPropagation()">
        <div class="admin-modal-header">
            <h2>
                <app-icon icon="add_circle"></app-icon>
                Slot-Serie erstellen
            </h2>
            <button class="close-btn" (click)="closeCreateModal()">
                <app-icon icon="close"></app-icon>
            </button>
        </div>

        <div class="admin-modal-body">
            <!-- Pattern Selection -->
            <div class="admin-form-group">
                <label>Muster</label>
                <div class="pattern-grid">
                    <button *ngFor="let pattern of seriesPatterns" class="admin-chip"
                        [class.active]="quickCreate.pattern === pattern.id" (click)="quickCreate.pattern = pattern.id">
                        <app-icon [icon]="pattern.icon"></app-icon>
                        <small>{{ pattern.name }}</small>
                    </button>
                </div>
            </div>

            <!-- Custom Days -->
            <div class="admin-form-group" *ngIf="quickCreate.pattern === 'custom'">
                <label>Wochentage</label>
                <div class="admin-filter-chips">
                    <button *ngFor="let day of [
                        {num: 1, name: 'Mo'}, {num: 2, name: 'Di'}, {num: 3, name: 'Mi'},
                        {num: 4, name: 'Do'}, {num: 5, name: 'Fr'}, {num: 6, name: 'Sa'}, {num: 0, name: 'So'}
                    ]" class="admin-chip" [class.active]="isCustomDaySelected(day.num)"
                        (click)="toggleCustomDay(day.num)">
                        {{ day.name }}
                    </button>
                </div>
            </div>

            <!-- Date & Time -->
            <div class="form-row">
                <div class="admin-form-group">
                    <label>Von</label>
                    <input type="date" [(ngModel)]="quickCreate.startDate" class="admin-input" />
                </div>
                <div class="admin-form-group">
                    <label>Bis</label>
                    <input type="date" [(ngModel)]="quickCreate.endDate" class="admin-input" />
                </div>
            </div>

            <div class="form-row">
                <div class="admin-form-group">
                    <label>Start</label>
                    <input type="time" [(ngModel)]="quickCreate.startTime" class="admin-input" />
                </div>
                <div class="admin-form-group">
                    <label>Ende</label>
                    <input type="time" [(ngModel)]="quickCreate.endTime" class="admin-input" />
                </div>
            </div>

            <!-- Slot Configuration -->
            <div class="form-row">
                <div class="admin-form-group">
                    <label>Dauer (Min)</label>
                    <input type="number" min="15" step="15" [(ngModel)]="quickCreate.slotDuration" class="admin-input" />
                </div>
                <div class="admin-form-group">
                    <label>Pause nach</label>
                    <input type="number" min="0" [(ngModel)]="quickCreate.breakAfter" class="admin-input" />
                </div>
                <div class="admin-form-group" *ngIf="quickCreate.breakAfter > 0">
                    <label>Pausendauer</label>
                    <input type="number" min="0" step="5" [(ngModel)]="quickCreate.breakDuration" class="admin-input" />
                </div>
            </div>

            <div class="preview-box">
                <app-icon icon="event"></app-icon>
                <strong>{{ getPreviewCount() }}</strong> Slots werden erstellt
            </div>
        </div>

        <div class="admin-modal-footer">
            <button class="admin-btn admin-btn--ghost" (click)="closeCreateModal()">Abbrechen</button>
            <button class="admin-btn admin-btn--primary" (click)="handleCreateSeries()" [disabled]="loadingCreate">
                <app-icon [icon]="loadingCreate ? 'hourglass_empty' : 'add'"></app-icon>
                {{ loadingCreate ? 'Erstelle...' : 'Slots erstellen' }}
            </button>
        </div>
    </div>
</div>

<!-- Modal: Slot Details -->
<div class="admin-modal-overlay" *ngIf="selectedSlot" (click)="closeSlotModal()">
    <div class="admin-modal" (click)="$event.stopPropagation()">
        <div class="admin-modal-header">
            <h2>
                <app-icon icon="event"></app-icon>
                Slot Details
            </h2>
            <button class="close-btn" (click)="closeSlotModal()">
                <app-icon icon="close"></app-icon>
            </button>
        </div>

        <div class="admin-modal-body">
            <div class="slot-detail-header">
                <div class="detail-date">
                    <strong>{{ formatDateLong(selectedSlot.date) }}</strong>
                    <span>{{ formatTime(selectedSlot.timeFrom) }} - {{ formatTime(selectedSlot.timeTo) }}</span>
                </div>
                <div class="detail-status">
                    <span class="admin-badge"
                        [class.admin-badge--success]="selectedSlot.isAvailable && (selectedSlot.currentBookings || 0) === 0"
                        [class.admin-badge--warning]="(selectedSlot.currentBookings || 0) > 0"
                        [class.admin-badge--error]="!selectedSlot.isAvailable">
                        <app-icon [icon]="getSlotStatusIcon(selectedSlot)"></app-icon>
                        {{ getSlotStatusText(selectedSlot) }}
                    </span>
                </div>
            </div>

            <div class="slot-info-grid">
                <div class="info-item">
                    <label>Max. Buchungen</label>
                    <strong>{{ selectedSlot.maxBookings }}</strong>
                </div>
                <div class="info-item">
                    <label>Aktuelle</label>
                    <strong>{{ selectedSlot.currentBookings || 0 }}</strong>
                </div>
                <div class="info-item" *ngIf="selectedSlot.meetLink">
                    <label>Meet Link</label>
                    <a [href]="selectedSlot.meetLink" target="_blank" class="meet-link">
                        <app-icon icon="video_call"></app-icon>
                        Öffnen
                    </a>
                </div>
            </div>

            <!-- Buchungen -->
            <div class="bookings-section" *ngIf="selectedSlotBookings && selectedSlotBookings.length > 0">
                <h3>
                    <app-icon icon="people"></app-icon>
                    Buchungen ({{ selectedSlotBookings.length }})
                </h3>

                <div class="admin-list">
                    <div *ngFor="let booking of selectedSlotBookings" class="admin-card">
                        <div class="admin-card__header">
                            <strong>{{ booking.name }}</strong>
                            <span class="admin-badge" [style.background]="getStatusColor(booking.status) + '20'" [style.color]="getStatusColor(booking.status)">
                                {{ getStatusLabel(booking.status) }}
                            </span>
                        </div>

                        <div class="admin-card__body">
                            <div class="booking-detail">
                                <app-icon icon="email"></app-icon>
                                {{ booking.email }}
                            </div>
                            <div class="booking-detail" *ngIf="booking.phone">
                                <app-icon icon="phone"></app-icon>
                                {{ booking.phone }}
                            </div>
                            <div class="booking-detail booking-message" *ngIf="booking.message">
                                <app-icon icon="chat"></app-icon>
                                {{ booking.message }}
                            </div>
                        </div>

                        <div class="admin-card__footer">
                            <button class="admin-btn admin-btn--sm admin-btn--success"
                                (click)="updateBookingStatus(booking.id, BookingStatus.CONFIRMED)"
                                *ngIf="booking.status === BookingStatus.PENDING">
                                <app-icon icon="check"></app-icon>
                                Bestätigen
                            </button>
                            <button class="admin-btn admin-btn--sm admin-btn--danger"
                                (click)="updateBookingStatus(booking.id, BookingStatus.CANCELLED)"
                                *ngIf="booking.status !== BookingStatus.CANCELLED">
                                <app-icon icon="close"></app-icon>
                                Absagen
                            </button>
                            <button class="admin-btn admin-btn--sm admin-btn--primary"
                                (click)="updateBookingStatus(booking.id, BookingStatus.COMPLETED)"
                                *ngIf="booking.status === BookingStatus.CONFIRMED">
                                <app-icon icon="done_all"></app-icon>
                                Abschließen
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="admin-empty-state" *ngIf="!selectedSlotBookings || selectedSlotBookings.length === 0">
                <app-icon icon="event_available" class="state-icon"></app-icon>
                <p>Keine Buchungen vorhanden</p>
            </div>
        </div>

        <div class="admin-modal-footer">
            <button class="admin-btn admin-btn--danger" (click)="handleDeleteSlot(selectedSlot.id)">
                <app-icon icon="delete"></app-icon>
                Löschen
            </button>
            <button class="admin-btn admin-btn--ghost" (click)="closeSlotModal()">Schließen</button>
        </div>
    </div>
</div>

<!-- Modal: Tagesübersicht -->
<div class="admin-modal-overlay" *ngIf="selectedDay" (click)="closeDayModal()">
    <div class="admin-modal admin-modal--lg" (click)="$event.stopPropagation()">
        <div class="admin-modal-header">
            <h2>
                <app-icon icon="today"></app-icon>
                {{ formatDateLongFromDate(selectedDay.date) }}
            </h2>
            <button class="close-btn" (click)="closeDayModal()">
                <app-icon icon="close"></app-icon>
            </button>
        </div>

        <div class="admin-modal-body">
            <div class="admin-list">
                <div *ngFor="let slot of selectedDay.slots" class="admin-card admin-list-item--clickable"
                    (click)="openSlotModal(slot); closeDayModal()">

                    <div class="slot-time-range">
                        <strong>{{ formatTime(slot.timeFrom) }} - {{ formatTime(slot.timeTo) }}</strong>
                    </div>

                    <div class="slot-status-info">
                        <app-icon [icon]="getSlotStatusIcon(slot)" 
                            [class.admin-badge--success]="slot.isAvailable && (slot.currentBookings || 0) === 0"
                            [class.admin-badge--warning]="(slot.currentBookings || 0) > 0" 
                            [class.admin-badge--error]="!slot.isAvailable">
                        </app-icon>
                        <span>{{ slot.currentBookings || 0 }}/{{ slot.maxBookings }} gebucht</span>
                    </div>

                    <div class="slot-booking-preview" *ngIf="getSlotBookings(slot).length > 0">
                        <small>Buchungen:</small>
                        <div class="booking-names">{{ getBookingNames(slot) }}</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="admin-modal-footer">
            <button class="admin-btn admin-btn--primary" (click)="openQuickCreateForDay(selectedDay.date); closeDayModal()">
                <app-icon icon="add"></app-icon>
                Neue Slots hinzufügen
            </button>
            <button class="admin-btn admin-btn--ghost" (click)="closeDayModal()">Schließen</button>
        </div>
    </div>
</div>
</app-admin-layout>