@let seasons = regularSeasons();

@if (displayItem(); as serial) {
    <app-content-hero
        [title]="serial.info.name"
        [description]="serial.info.description"
        [posterUrl]="serial.info.movie_image"
        (backClicked)="goBack()"
    >
        <!-- Tags: Year, Genre, Rating -->
        <ng-container hero-tags>
            @if (serial.info.releasedate || serial.info.year) {
                <span class="details__tag">{{
                    serial.info.releasedate || serial.info.year
                }}</span>
            }
            @if (serial.info.genre || serial.info.genres_str) {
                <span class="details__tag">{{
                    serial.info.genre || serial.info.genres_str
                }}</span>
            }
            @if (serial.info.rating_imdb) {
                <span class="details__tag details__tag--rating">
                    ⭐ {{ serial.info.rating_imdb }}
                </span>
            }
            @if (serial.info.rating_kinopoisk) {
                <span class="details__tag">
                    KP {{ serial.info.rating_kinopoisk }}
                </span>
            }
        </ng-container>

        <!-- Metadata Grid -->
        <ng-container hero-meta>
            @if (serial.info.actors) {
                <div class="details__meta-item">
                    <span class="label">{{
                        'XTREAM.ACTORS' | translate
                    }}</span>
                    <span class="value">{{ serial.info.actors }}</span>
                </div>
            }
            @if (serial.info.director) {
                <div class="details__meta-item">
                    <span class="label">{{
                        'XTREAM.DIRECTOR' | translate
                    }}</span>
                    <span class="value">{{ serial.info.director }}</span>
                </div>
            }
        </ng-container>

        <!-- Action Buttons -->
        <ng-container hero-actions>
            <app-favorites-button
                [itemId]="serial.id"
                (addToFavoritesClicked)="addToFavorites(serial)"
                (removeFromFavoritesClicked)="removeFromFavorites(serial.id)"
            />
        </ng-container>

        <!-- Loading state for VOD series seasons -->
        @if (isVodSeries() && isVodSeriesSeasonsLoading()) {
            <div class="seasons-loading">
                <mat-spinner diameter="40"></mat-spinner>
                <span>{{ 'PORTALS.LOADING_SEASONS' | translate }}</span>
            </div>
        }

        <!-- Loading state for regular series seasons -->
        @if (!isVodSeries() && isSerialSeasonsLoading()) {
            <div class="seasons-loading">
                <mat-spinner diameter="40"></mat-spinner>
                <span>{{ 'PORTALS.LOADING_SEASONS' | translate }}</span>
            </div>
        }

        <div class="seasons">
            @if (isVodSeries()) {
                <!-- VOD series mode: expandable seasons with dynamic episode loading -->
                @for (item of vodSeriesSeasons(); track item.id) {
                    <mat-divider />
                    <div
                        class="season-header"
                        (click)="toggleSeasonExpanded(item)"
                    >
                        <h4>{{ item.name }}</h4>
                        <span class="expand-icon">{{
                            item.isExpanded ? '▼' : '►'
                        }}</span>
                    </div>

                    @if (item.isExpanded) {
                        @if (item.isLoading) {
                            <div class="episodes-loading">
                                <mat-spinner diameter="24"></mat-spinner>
                            </div>
                        } @else {
                            <div class="episodes">
                                @for (
                                    episode of item.episodes;
                                    track episode.id ?? $index
                                ) {
                                    <button
                                        mat-stroked-button
                                        (click)="
                                            playVodSeriesEpisode(episode);
                                            $event.stopPropagation()
                                        "
                                    >
                                        {{
                                            episode.name ||
                                                ('XTREAM.EPISODE' | translate) +
                                                    ' ' +
                                                    episode.series_number
                                        }}
                                    </button>
                                }
                                @if (
                                    !item.episodes || item.episodes.length === 0
                                ) {
                                    <span class="no-episodes">{{
                                        'PORTALS.NO_EPISODES' | translate
                                    }}</span>
                                }
                            </div>
                        }
                    }
                }
            } @else {
                <!-- Regular series mode: pre-loaded episodes -->
                @for (item of seasons; track item.id ?? $index) {
                    <mat-divider />
                    <div class="season-header">
                        <h4>{{ item.name }}</h4>
                    </div>
                    <div class="episodes">
                        @for (episode of item.series; track $index) {
                            <button
                                mat-stroked-button
                                (click)="playEpisodeClicked(episode, item.cmd)"
                            >
                                {{ 'XTREAM.EPISODE' | translate }}
                                {{ episode }}
                            </button>
                        }
                    </div>
                }
            }
        </div>
    </app-content-hero>
}