deepdrft/DeepDrftManager/Components/Pages/Tracks/AlbumHeaderFields.razor

@using DeepDrftModels.Enums
@using Microsoft.AspNetCore.Components.Forms

<MudPaper Class="pa-6 mb-4" Elevation="2">
    <MudGrid>
        <MudItem xs="12" sm="6">
            <MudTextField Value="AlbumName" ValueChanged="@((string v) => AlbumNameChanged.InvokeAsync(v))"
                          T="string" Label="Album Name" Required="true" RequiredError="Album Name is required"
                          Variant="Variant.Outlined" Disabled="Disabled" />
        </MudItem>
        <MudItem xs="12" sm="6">
            <MudTextField Value="Artist" ValueChanged="@((string v) => ArtistChanged.InvokeAsync(v))"
                          T="string" Label="Artist" Required="true" RequiredError="Artist is required"
                          Variant="Variant.Outlined" Disabled="Disabled" />
        </MudItem>
        <MudItem xs="12" sm="6">
            <MudTextField Value="Genre" ValueChanged="@((string v) => GenreChanged.InvokeAsync(v))"
                          T="string" Label="Genre" Variant="Variant.Outlined" Disabled="Disabled" />
        </MudItem>
        <MudItem xs="12" sm="6">
            <MudTextField Value="ReleaseDate" ValueChanged="@((string v) => ReleaseDateChanged.InvokeAsync(v))"
                          T="string" Label="Release Date (YYYY-MM-DD)" Placeholder="2024-01-15"
                          Variant="Variant.Outlined" Disabled="Disabled" />
        </MudItem>
        <MudItem xs="12" sm="6">
            <MudField Label="Cover Art" Variant="Variant.Outlined" InnerPadding="false">
                <MudStack Spacing="3">
                    @if (SelectedImageFile is { } selectedImage)
                    {
                        <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2">
                            <MudText Typo="Typo.body2" Color="Color.Default">Selected: @selectedImage.Name</MudText>
                            <MudIconButton Icon="@Icons.Material.Filled.Clear"
                                           Color="Color.Error"
                                           Size="Size.Small"
                                           Disabled="Disabled"
                                           OnClick="ClearSelectedFile"
                                           aria-label="Cancel image selection" />
                        </MudStack>
                    }
                    else if (ExistingImagePreviewUrl is { } previewUrl)
                    {
                        <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2">
                            <MudImage Src="@previewUrl"
                                      Alt="Current cover art"
                                      Elevation="1"
                                      Style="max-width: 120px; height: auto; border-radius: 4px;" />
                            <MudText Typo="Typo.body2" Color="Color.Default">Current cover art.</MudText>
                        </MudStack>
                    }
                    else
                    {
                        <MudText Typo="Typo.body2" Color="Color.Default">No cover art — optional.</MudText>
                    }

                    <InputFile OnChange="HandleImageFileSelected" accept="image/*" disabled="@Disabled" />
                    @if (SelectedImageFile is not null)
                    {
                        <MudText Typo="Typo.caption">Will upload on submit.</MudText>
                    }
                </MudStack>
            </MudField>
        </MudItem>
    </MudGrid>

    <MudDivider Class="my-4" />

    <MediumFields @bind-Medium="MediumBinding"
                  @bind-ReleaseType="ReleaseTypeBinding"
                  Disabled="Disabled" />
</MudPaper>

@code {
    [Parameter] public string AlbumName { get; set; } = string.Empty;
    [Parameter] public EventCallback<string> AlbumNameChanged { get; set; }
    [Parameter] public string Artist { get; set; } = string.Empty;
    [Parameter] public EventCallback<string> ArtistChanged { get; set; }
    [Parameter] public string Genre { get; set; } = string.Empty;
    [Parameter] public EventCallback<string> GenreChanged { get; set; }
    [Parameter] public string ReleaseDate { get; set; } = string.Empty;
    [Parameter] public EventCallback<string> ReleaseDateChanged { get; set; }
    [Parameter] public ReleaseType ReleaseType { get; set; } = ReleaseType.Single;
    [Parameter] public EventCallback<ReleaseType> ReleaseTypeChanged { get; set; }
    [Parameter] public ReleaseMedium Medium { get; set; } = ReleaseMedium.Cut;
    [Parameter] public EventCallback<ReleaseMedium> MediumChanged { get; set; }
    [Parameter] public IBrowserFile? SelectedImageFile { get; set; }
    [Parameter] public EventCallback<IBrowserFile?> SelectedImageFileChanged { get; set; }

    // BatchEdit only: when set (and no new file picked), preview the release's current cover.
    // The parent nulls this to drop the preview when the admin clears the existing cover.
    [Parameter] public string? ExistingImagePath { get; set; }

    [Parameter] public bool Disabled { get; set; }

    // Relative path — resolves against the Manager's own origin, proxied by ImageProxyController.
    private string? ExistingImagePreviewUrl =>
        string.IsNullOrEmpty(ExistingImagePath)
            ? null
            : $"/api/image/{Uri.EscapeDataString(ExistingImagePath)}";

    // MediumFields uses two-way @bind; bridge its bindings to this component's own
    // parameter/EventCallback pairs so the parent form stays the single owner of the values.
    private ReleaseMedium MediumBinding
    {
        get => Medium;
        set => MediumChanged.InvokeAsync(value);
    }

    private ReleaseType ReleaseTypeBinding
    {
        get => ReleaseType;
        set => ReleaseTypeChanged.InvokeAsync(value);
    }

    private Task HandleImageFileSelected(InputFileChangeEventArgs e) =>
        SelectedImageFileChanged.InvokeAsync(e.File);

    private Task ClearSelectedFile() =>
        SelectedImageFileChanged.InvokeAsync(null);
}