@using CMSMicroservice.Protobuf.Protos.Products
@using BackOffice.Common.BaseComponents
@using Microsoft.AspNetCore.Components.Forms

<MudDialog>
    <DialogContent>
        <MudStack Spacing="3">
            <MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
                <MudText Typo="Typo.h6">گالری تصاویر - @ProductTitle</MudText>
                <MudChip T="string" Color="Color.Primary" Variant="Variant.Outlined" Size="Size.Small">
                    تعداد تصاویر: @(Items?.Count ?? 0)
                </MudChip>
            </MudStack>

            <MudGrid>
                <MudItem xs="12" md="4">
                    <MudPaper Class="pa-3">
                        <MudStack Spacing="2">
                            <MudText Typo="Typo.subtitle2">افزودن تصویر جدید</MudText>

                            <MudTextField @bind-Value="_title"
                                          Label="عنوان تصویر"
                                          Variant="Variant.Outlined"
                                          Margin="Margin.Dense" />

                            <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>
                                    }
                                    else
                                    {
                                        <MudText Class="mt-1" Typo="Typo.caption">فایلی انتخاب نشده</MudText>
                                    }
                                </SelectedTemplate>
                            </MudFileUpload>

                            @if (!string.IsNullOrWhiteSpace(_previewImage))
                            {
                                <MudPaper Class="pa-1">
                                    <img src="@_previewImage" alt="پیش‌نمایش" style="width:100%; height:180px; object-fit:cover;" />
                                </MudPaper>
                            }

                            @if (_isUploading)
                            {
                                <MudProgressLinear Indeterminate="true" Color="Color.Primary" />
                            }

                            <MudButton Color="Color.Primary"
                                       OnClick="AddImage"
                                       Disabled="_isUploading || _file is null">
                                افزودن به گالری
                            </MudButton>
                        </MudStack>
                    </MudPaper>
                </MudItem>

                <MudItem xs="12" md="8">
                    <MudPaper Class="pa-3">
                        <MudText Typo="Typo.subtitle2" Class="mb-2">لیست تصاویر</MudText>
                        @if (Items?.Count > 0)
                        {
                            <MudGrid GutterSize="2">
                                @foreach (var item in Items)
                                {
                                    <MudItem xs="6" sm="4" md="3">
                                        <MudPaper Class="pa-2">
                                            <div style="position:relative;"
                                                 @onclick="@(() => OpenPreview(item))">
                                                @if (!string.IsNullOrWhiteSpace(item.ImageThumbnailPath))
                                                {
                                                    <img src="@GetFullImageUrl(item.ImageThumbnailPath)"
                                                         alt="@item.Title"
                                                         style="width:100%; height:120px; object-fit:cover; border-radius:4px;" />
                                                }
                                                else if (!string.IsNullOrWhiteSpace(item.ImagePath))
                                                {
                                                    <img src="@GetFullImageUrl(item.ImagePath)"
                                                         alt="@item.Title"
                                                         style="width:100%; height:120px; object-fit:cover; border-radius:4px;" />
                                                }
                                                else
                                                {
                                                    <MudSkeleton SkeletonType="SkeletonType.Rectangle" Height="120px" Width="100%" />
                                                }
                                                <MudIconButton Icon="@Icons.Material.Filled.DeleteOutline"
                                                               Color="Color.Error"
                                                               Size="Size.Small"
                                                               Class="mt-1"
                                                               Style="position:absolute; top:4px; left:4px; background-color:rgba(255,255,255,0.8);"
                                                               OnClick="@((MouseEventArgs _) => RemoveImage(item))" />
                                            </div>
                                            <MudTooltip Text="@item.Title">
                                                <MudText Typo="Typo.caption" Class="mt-1 text-truncate">
                                                    @(!string.IsNullOrWhiteSpace(item.Title) ? item.Title : "بدون عنوان")
                                                </MudText>
                                            </MudTooltip>
                                        </MudPaper>
                                    </MudItem>
                                }
                            </MudGrid>
                        }
                        else
                        {
                            <MudText Typo="Typo.caption">هنوز تصویری برای این محصول ثبت نشده است.</MudText>
                        }
                    </MudPaper>
                </MudItem>
            </MudGrid>
        </MudStack>
    </DialogContent>
    <DialogActions>
        <MudButton OnClick="Close">بستن</MudButton>
    </DialogActions>
</MudDialog>
