@let meta = normalizedMeta();

<app-portal-detail-shell
    [title]="meta.title"
    [description]="meta.description"
    [posterUrl]="meta.posterUrl"
    [backdropUrl]="meta.backdropUrl"
    [playbackActive]="!!inlinePlayback()"
    (backClicked)="goBack()"
    (closePlayerRequested)="closeInlinePlayback()"
>
    <!-- Tags: Year, Genre, Duration, Rating -->
    <ng-template appDetailTags>
        @if (meta.year) {
            <span class="details__tag">{{ meta.year }}</span>
        }
        @if (meta.genre) {
            <span class="details__tag">{{ meta.genre }}</span>
        }
        @if (meta.duration) {
            <span class="details__tag">{{ meta.duration }}</span>
        }
        @if (meta.ratingImdb) {
            <span class="details__tag details__tag--rating">
                ⭐ {{ meta.ratingImdb }}
            </span>
        }
        @if (meta.country) {
            <span class="details__tag">{{ meta.country }}</span>
        }
    </ng-template>

    <!-- Metadata Grid -->
    <ng-template appDetailMeta>
        @if (meta.actors || meta.tmdbCast?.length) {
            <div class="details__meta-item">
                <span class="label">{{ 'XTREAM.ACTORS' | translate }}</span>
                @if (meta.tmdbCast?.length) {
                    <div class="details__cast-strip">
                        @for (member of meta.tmdbCast; track member.tmdbPersonId ? 'p' + member.tmdbPersonId : 'i' + $index) {
                            <span
                                class="details__cast-chip"
                                [class.details__cast-chip--clickable]="
                                    !!member.tmdbPersonId
                                "
                                (click)="openActor(member)"
                                [title]="
                                    member.character
                                        ? member.name + ' — ' + member.character
                                        : member.name
                                "
                            >
                                @if (member.profileUrl) {
                                    <img
                                        class="details__cast-avatar"
                                        [src]="member.profileUrl"
                                        [alt]="member.name"
                                        loading="lazy"
                                    />
                                } @else {
                                    <span
                                        class="details__cast-avatar details__cast-avatar--fallback"
                                    >
                                        {{ member.name.charAt(0) }}
                                    </span>
                                }
                                <span class="details__cast-name">{{
                                    member.name
                                }}</span>
                            </span>
                        }
                    </div>
                } @else {
                    <span class="value">{{ meta.actors }}</span>
                }
            </div>
        }
        @if (meta.director || meta.tmdbDirectors?.length) {
            <div class="details__meta-item">
                <span class="label">{{ 'XTREAM.DIRECTOR' | translate }}</span>
                @if (meta.tmdbDirectors?.length) {
                    <div class="details__cast-strip">
                        @for (member of meta.tmdbDirectors; track member.tmdbPersonId ? 'p' + member.tmdbPersonId : 'i' + $index) {
                            <span
                                class="details__cast-chip"
                                [class.details__cast-chip--clickable]="
                                    !!member.tmdbPersonId
                                "
                                (click)="openActor(member)"
                                [title]="member.name"
                            >
                                @if (member.profileUrl) {
                                    <img
                                        class="details__cast-avatar"
                                        [src]="member.profileUrl"
                                        [alt]="member.name"
                                        loading="lazy"
                                    />
                                } @else {
                                    <span
                                        class="details__cast-avatar details__cast-avatar--fallback"
                                    >
                                        {{ member.name.charAt(0) }}
                                    </span>
                                }
                                <span class="details__cast-name">{{
                                    member.name
                                }}</span>
                            </span>
                        }
                    </div>
                } @else {
                    <span class="value">{{ meta.director }}</span>
                }
            </div>
        }
        @if (meta.ratingKinopoisk) {
            <div class="details__meta-item">
                <span class="label">{{ 'XTREAM.KINOPOISK_RATING' | translate }}</span>
                <span class="value">{{ meta.ratingKinopoisk }}</span>
            </div>
        }
    </ng-template>

    <!-- Action Buttons -->
    <ng-template appDetailActions>
        <!-- Resume/Play buttons -->
        @if (hasPlaybackPosition()) {
            <button
                class="play-btn play-btn--resume"
                (click)="onPrimaryAction()"
                [disabled]="isExternalLaunchPending()"
                [class.play-btn--state-launching]="externalPrimaryButtonState() === 'launching'"
                [class.play-btn--state-stop]="externalPrimaryButtonState() === 'stop'"
            >
                <span class="play-btn__icon-shell" aria-hidden="true">
                    <mat-icon class="play-btn__icon">{{ externalPrimaryIcon() }}</mat-icon>
                </span>
                <span class="play-btn__label">
                    @if (externalPrimaryLabel(); as label) {
                        {{ label }}
                    } @else {
                        {{ 'XTREAM.RESUME' | translate }} {{ formattedPosition() }}
                    }
                </span>
            </button>
            @if (!isExternalStopAction()) {
                <button class="play-btn play-btn--restart" (click)="onPlay()">
                    <mat-icon>replay</mat-icon>
                    {{ 'XTREAM.RESTART' | translate }}
                </button>
            }
        } @else {
            <button
                class="play-btn"
                (click)="onPrimaryAction()"
                [disabled]="isExternalLaunchPending()"
                [class.play-btn--state-launching]="externalPrimaryButtonState() === 'launching'"
                [class.play-btn--state-stop]="externalPrimaryButtonState() === 'stop'"
            >
                <span class="play-btn__icon-shell" aria-hidden="true">
                    <mat-icon class="play-btn__icon">{{ externalPrimaryIcon() }}</mat-icon>
                </span>
                <span class="play-btn__label">
                    @if (externalPrimaryLabel(); as label) {
                        {{ label }}
                    } @else {
                        {{ 'XTREAM.PLAY' | translate }}
                    }
                </span>
            </button>
        }

        <!-- Favorites button -->
        @if (!isFavorite()) {
            <button class="favorite-btn" (click)="toggleFavorite()">
                <mat-icon>add</mat-icon>
                {{ 'PORTALS.ADD_TO_FAVORITES' | translate }}
            </button>
        } @else {
            <button
                class="favorite-btn favorite-btn--active"
                (click)="toggleFavorite()"
            >
                <mat-icon>check</mat-icon>
                {{ 'PORTALS.REMOVE_FROM_FAVORITES' | translate }}
            </button>
        }

        <!-- Download buttons (Electron only) -->
        @if (isElectron()) {
            @if (isDownloaded()) {
                <button class="download-btn download-btn--completed" (click)="playFromLocal()">
                    <mat-icon>play_circle</mat-icon>
                    {{ 'DOWNLOADS.PLAY_LOCAL' | translate }}
                </button>
            } @else if (isPausedDownload()) {
                <button
                    class="download-btn download-btn--paused"
                    (click)="resumePausedDownload()"
                >
                    <mat-icon>play_arrow</mat-icon>
                    {{ 'DOWNLOADS.RESUME' | translate }}
                </button>
            } @else if (isDownloading()) {
                <button class="download-btn download-btn--downloading" disabled>
                    <mat-icon>downloading</mat-icon>
                    {{ 'DOWNLOADS.STATUS.DOWNLOADING' | translate }}
                </button>
            } @else {
                <button class="download-btn" (click)="onDownload()">
                    <mat-icon>download</mat-icon>
                    {{ 'DOWNLOADS.DOWNLOAD' | translate }}
                </button>
            }
        }
    </ng-template>

    @if (inlinePlayback(); as playback) {
        <app-portal-inline-player
            detail-player
            [playback]="playback"
            (timeUpdate)="onInlineTimeUpdate($event)"
            (closed)="closeInlinePlayback()"
            (backClicked)="goBack()"
            (streamUrlCopied)="onStreamUrlCopied()"
            (externalFallbackRequested)="
                onInlineExternalFallbackRequested($event)
            "
        />
    }

    <div detail-extras>
        @if (similarInPortals().length) {
            <section class="details__similar" data-test-id="tmdb-similar">
                <h3>{{ 'XTREAM.SIMILAR' | translate }}</h3>
                <div class="details__similar-strip">
                    @for (item of similarInPortals(); track item.match.xtreamId) {
                        <button
                            type="button"
                            class="details__similar-card"
                            [title]="item.title + ' — ' + item.match.playlistName"
                            (click)="openSimilarInPortals(item)"
                        >
                            @if (item.posterUrl) {
                                <img
                                    class="details__similar-poster"
                                    [src]="item.posterUrl"
                                    [alt]="item.title"
                                    loading="lazy"
                                />
                            } @else {
                                <span
                                    class="details__similar-poster details__similar-poster--fallback"
                                >
                                    {{ item.title.charAt(0) }}
                                </span>
                            }
                            <span class="details__similar-title">
                                {{ item.title }}
                            </span>
                            <span class="details__similar-source">
                                {{ item.match.playlistName }}
                            </span>
                        </button>
                    }
                </div>
            </section>
        }

        <!-- YouTube Trailer (provider or TMDB enrichment) -->
        @if (trailerEmbedUrl(); as trailerUrl) {
            <div class="youtube-trailer">
                <h3>{{ 'XTREAM.YOUTUBE_TRAILER' | translate }}</h3>
                <div class="trailer-wrapper">
                    <iframe
                        [src]="trailerUrl | safe"
                        title="YouTube video player"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                        referrerpolicy="strict-origin-when-cross-origin"
                        allowfullscreen
                    ></iframe>
                </div>
            </div>
        }
    </div>
</app-portal-detail-shell>