@using BackOffice.Services.Content
@using Microsoft.AspNetCore.Components.Forms
@using BackOffice.Common.BaseComponents

<MudDialog>
    <DialogContent>
        <MudForm @ref="_form" @bind-IsValid="@_isValid">
            <MudStack Spacing="2">

                <MudSelect T="string" @bind-Value="Model.ImageGroup"
                           Label="گروه تصویر"
                           Required="true"
                           Variant="Variant.Outlined">
                    @foreach (var group in GetAvailableGroups())
                    {
                        <MudSelectItem T="string" Value="@group.Key">@group.Value</MudSelectItem>
                    }
                </MudSelect>

                <MudTextField @bind-Value="Model.Title"
                              Label="عنوان"
                              Variant="Variant.Outlined" />

                <MudTextField @bind-Value="Model.Subtitle"
                              Label="زیرعنوان"
                              Variant="Variant.Outlined" />

                <MudTextField @bind-Value="Model.Description"
                              Label="توضیحات"
                              Variant="Variant.Outlined"
                              Lines="3" />

                <MudTextField @bind-Value="Model.LinkUrl"
                              Label="لینک"
                              Variant="Variant.Outlined"
                              Placeholder="https://..." />

                <MudTextField @bind-Value="Model.IconName"
                              Label="نام آیکون"
                              Variant="Variant.Outlined"
                              HelperText="نام آیکون Material Design — مثلاً: Verified, Star, Group" />

                <MudNumericField @bind-Value="Model.SortOrder"
                                 Label="ترتیب نمایش"
                                 Variant="Variant.Outlined"
                                 Min="0" />

                <MudText Typo="Typo.subtitle2">تصویر</MudText>
                <MudStack Justify="Justify.Center" AlignItems="AlignItems.Center">
                    @if (!string.IsNullOrWhiteSpace(_imagePreview))
                    {
                        <Image Src="@_imagePreview" Width="200" Height="150" ObjectPosition="ObjectPosition.Center" ObjectFit="ObjectFit.Cover" />
                    }
                    else if (!string.IsNullOrEmpty(ExistingImagePath))
                    {
                        <Image Src="@ExistingImagePath" Width="200" Height="150" ObjectPosition="ObjectPosition.Center" ObjectFit="ObjectFit.Cover" />
                    }
                    else
                    {
                        <MudPaper Class="d-flex align-center justify-center" Style="width:200px;height:150px;">
                            <MudText Typo="Typo.caption">تصویری انتخاب نشده است</MudText>
                        </MudPaper>
                    }

                    <MudFileUpload T="IBrowserFile" Accept="image/*" FilesChanged="OnImageSelected">
                        <ActivatorContent>
                            <MudButton HtmlTag="label"
                                       Variant="Variant.Filled"
                                       Color="Color.Primary"
                                       ButtonType="ButtonType.Button"
                                       StartIcon="@Icons.Material.Filled.Image">
                                انتخاب تصویر
                            </MudButton>
                        </ActivatorContent>
                        <SelectedTemplate>
                            @if (context != null)
                            {
                                <MudText Class="mt-1" Typo="Typo.caption">@context.Name</MudText>
                            }
                        </SelectedTemplate>
                    </MudFileUpload>
                </MudStack>

                <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1">
                    <MudSwitch T="bool" @bind-Value="Model.IsActive" Color="Color.Primary" />
                    <MudText Typo="Typo.body2">فعال</MudText>
                </MudStack>
            </MudStack>
        </MudForm>
    </DialogContent>
    <DialogActions>
        <MudButton Color="Color.Primary" Variant="Variant.Filled" OnClick="SubmitAsync"
                   Disabled="@(!_isValid || _loading)">
            @(IsNew ? "افزودن" : "ذخیره تغییرات")
        </MudButton>
        <MudButton Color="Color.Default" Variant="Variant.Text" OnClick="Cancel">
            انصراف
        </MudButton>
    </DialogActions>
</MudDialog>
