@page "/archive"
@using DeepDrftModels.Enums
@using DeepDrftPublic.Client.Controls
@inject SeoOptions Seo

<SeoHead Model="@SeoModel.ForBrowse(Seo, null, "/archive")" />

<div>
    <MudContainer MaxWidth="MaxWidth.Large" Class="archive-view-container">
        @* Search + filter affordances are interactive-only: the debounce timer and chip selection
           need WASM. During prerender/non-interactive they are hidden behind the interactive gate.
           The release grid still prerenders so the archive is meaningful before hydration. *@
        @if (RendererInfo.IsInteractive)
        {
            <div class="archive-controls-row">
                <div class="archive-controls-search">
                    <MudTextField T="string"
                                  Value="@SearchText"
                                  ValueChanged="@OnSearchInput"
                                  Immediate="true"
                                  DebounceInterval="400"
                                  Placeholder="Search releases or artists"
                                  Adornment="Adornment.Start"
                                  AdornmentIcon="@Icons.Material.Filled.Search"
                                  Variant="Variant.Outlined"
                                  Margin="Margin.Dense"
                                  Clearable="true"
                                  Class="archive-search-field"/>
                </div>

                <div class="archive-controls-medium">
                    <MudToggleGroup T="ReleaseMedium?"
                                    Value="@_selectedMedium"
                                    ValueChanged="@OnMediumSelected"
                                    SelectionMode="SelectionMode.SingleSelection"
                                    Color="Color.Primary"
                                    Size="Size.Small"
                                    Class="archive-medium-toggle">
                        <MudToggleItem T="ReleaseMedium?" Value="@(null)">All</MudToggleItem>
                        @foreach (var medium in _media)
                        {
                            <MudToggleItem T="ReleaseMedium?" Value="@medium">@MediumLabel(medium)</MudToggleItem>
                        }
                    </MudToggleGroup>
                </div>

                @if (_genres.Count > 0)
                {
                    <div class="archive-controls-genre">
                        <MudChipSet T="string"
                                    SelectedValue="@_selectedGenre"
                                    SelectedValueChanged="@OnGenreSelected"
                                    SelectionMode="SelectionMode.ToggleSelection"
                                    Class="archive-genre-chips">
                            @foreach (var genre in _genres)
                            {
                                <MudChip T="string" Value="@genre.Genre">@genre.Genre</MudChip>
                            }
                        </MudChipSet>
                    </div>
                }
            </div>
        }
    </MudContainer>

    @* The grid itself is the shared release-card component; each card routes by its own medium through
       the one ReleaseRoutes table. The Archive-specific search/filter chrome above stays here. *@
    <ReleaseGallery Releases="@_releases"
                    Loading="@_loading"
                    HrefResolver="@ReleaseRoutes.DetailHref"
                    EmptyMessage="No releases found" />
</div>