@page "/sessions/{Id:long}"
@using DeepDrftPublic.Client.Controls
@inherits ReleaseDetailBase

<PageTitle>@(ViewModel.Release?.Title ?? "Session") - DeepDrft</PageTitle>

@if (ViewModel.IsLoading)
{
    <div class="deepdrft-track-detail-container">
        <div class="deepdrft-track-detail-cover">
            <MudSkeleton SkeletonType="SkeletonType.Rectangle" Width="100%" Height="320px" />
        </div>
        <div class="deepdrft-track-detail-masthead">
            <MudSkeleton SkeletonType="SkeletonType.Text" Width="70%" Height="56px" />
            <MudSkeleton SkeletonType="SkeletonType.Text" Width="40%" Height="32px" />
        </div>
    </div>
}
else if (ViewModel.NotFound || ViewModel.Release is null)
{
    <div class="deepdrft-track-detail-container">
        <div class="deepdrft-track-detail-masthead">
            <MudText Typo="Typo.h4" Align="Align.Center">Session not found.</MudText>
            <div class="d-flex justify-center mt-4">
                <MudButton Href="/sessions"
                           Variant="Variant.Text"
                           StartIcon="@Icons.Material.Filled.ArrowBack">
                    All sessions
                </MudButton>
            </div>
        </div>
    </div>
}
else
{
    var release = ViewModel.Release;
    var heroKey = release.SessionMetadata?.HeroImageEntryKey;
    // Hero image precedence: the session's dedicated hero, then the release cover, then a placeholder.
    var heroImage = !string.IsNullOrEmpty(heroKey) ? heroKey : release.ImagePath;
    var hasGenre = release.Genre is not null;
    var hasDate = release.ReleaseDate is not null;

    <ReleaseDetailScaffold Title="@release.Title"
                           Artist="@release.Artist"
                           Track="@ViewModel.Track"
                           BackHref="/sessions"
                           BackLabel="All sessions"
                           ShowMeta="@(hasGenre || hasDate)">
        <Hero>
            <div class="session-detail-hero">
                @if (!string.IsNullOrEmpty(heroImage))
                {
                    <MudPaper Elevation="2" Class="session-detail-hero-img"
                              Style="@($"background-image: url('api/image/{Uri.EscapeDataString(heroImage)}');")" />
                }
                else
                {
                    <MudPaper Elevation="2" Class="deepdrft-track-detail-cover-placeholder deepdrft-gradient-soft-secondary">
                        <MudIcon Icon="@Icons.Material.Filled.Piano" Color="Color.Primary" />
                    </MudPaper>
                }
            </div>
        </Hero>
        <MetaContent>
            @if (hasGenre)
            {
                <div>
                    <MudChip T="string" Variant="Variant.Outlined" Color="Color.Tertiary" Class="deepdrft-genre-chip">
                        @release.Genre
                    </MudChip>
                </div>
            }
            @if (hasDate)
            {
                <div>
                    <MudText Typo="Typo.overline">Released</MudText>
                    <MudText Typo="Typo.body1">@release.ReleaseDate!.Value.ToString("MMMM yyyy")</MudText>
                </div>
            }
        </MetaContent>
    </ReleaseDetailScaffold>
}

@code {
    protected override string PersistKey => "session-detail";
}