@let meta = normalizedMeta();

<!-- Hero Section with Backdrop -->
<app-content-hero
    [title]="meta.title"
    [description]="meta.description"
    [posterUrl]="meta.posterUrl"
    [backdropUrl]="meta.backdropUrl"
    (backClicked)="goBack()"
>
    <!-- Tags: Year, Genre, Duration, Rating -->
    <ng-container hero-tags>
        @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-container>

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

    <!-- Action Buttons -->
    <ng-container hero-actions>
        <!-- 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 (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-container>

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

    <!-- YouTube Trailer (Xtream only) -->
    @if (meta.youtubeTrailer) {
        <div class="youtube-trailer">
            <h3>{{ 'XTREAM.YOUTUBE_TRAILER' | translate }}</h3>
            <div class="trailer-wrapper">
                <iframe
                    [src]="'https://www.youtube.com/embed/' + meta.youtubeTrailer | 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>
    }
</app-content-hero>