@attribute [Route(RouteConstants.DiscountStore.Products)]

<PageTitle>فروشگاه تخفیفی</PageTitle>

<MudContainer MaxWidth="MaxWidth.Large" Class="py-6">
    <!-- Hero -->
    <MudPaper Class="discount-hero pa-6 pa-md-8 mb-4 rounded-xl" Elevation="0">
        <MudStack AlignItems="AlignItems.Center" Spacing="2">
            <MudIcon Icon="@Icons.Material.Filled.Loyalty" Size="Size.Large" Class="dash-hero-name" />
            <MudText Typo="Typo.h5" Align="Align.Center" Class="dash-hero-name">فروشگاه تخفیفی</MudText>
            <MudText Typo="Typo.body2" Align="Align.Center" Class="dash-hero-sub">
                خرید با استفاده از موجودی کیف پول تخفیفی
            </MudText>
        </MudStack>
    </MudPaper>

    <!-- Filters -->
    <MudPaper Elevation="1" Class="pa-3 pa-md-4 mb-4 rounded-lg">
        <MudGrid Spacing="2" AlignItems="AlignItems.Center">
            <MudItem xs="12" sm="5">
                <MudTextField @bind-Value="_search"
                              Placeholder="جستجو در محصولات..."
                              AdornmentIcon="@Icons.Material.Filled.Search"
                              Adornment="Adornment.Start"
                              Immediate="true"
                              OnKeyUp="OnSearchKeyUp"
                              Variant="Variant.Outlined"
                              Margin="Margin.Dense" />
            </MudItem>
            <MudItem xs="8" sm="5">
                <MudSelect T="long?" Value="_selectedCategoryId" ValueChanged="OnCategoryChanged"
                           Label="دسته‌بندی" Variant="Variant.Outlined" Margin="Margin.Dense"
                           Clearable="true" AnchorOrigin="Origin.BottomCenter">
                    @foreach (var cat in _categories)
                    {
                        <MudSelectItem T="long?" Value="@((long?)cat.Id)">@cat.Title (@cat.ProductCount)</MudSelectItem>
                    }
                </MudSelect>
            </MudItem>
            <MudItem xs="4" sm="2" Class="d-flex gap-2">
                <MudButton Variant="Variant.Filled" Color="Color.Primary" FullWidth="true"
                           StartIcon="@Icons.Material.Filled.Search" OnClick="SearchProducts"
                           Style="height:40px;">جستجو</MudButton>
            </MudItem>
            <MudItem xs="12" Class="d-flex justify-start justify-md-end gap-2">
                <MudButton Size="Size.Small" Variant="Variant.Filled" Color="Color.Primary"
                           StartIcon="@Icons.Material.Filled.ShoppingCart"
                           Href="@RouteConstants.DiscountStore.Cart">
                    سبد خرید
                    @if (DiscountCart.Count > 0)
                    {
                        <MudBadge Content="@DiscountCart.Count" Color="Color.Error" Overlap="true" Class="ms-2" />
                    }
                </MudButton>
            </MudItem>
        </MudGrid>
    </MudPaper>

    <!-- Loading -->
    @if (_loading)
    {
        <MudStack AlignItems="AlignItems.Center" Class="py-8">
            <MudProgressCircular Color="Color.Primary" Indeterminate="true" />
            <MudText Class="mt-2 mud-text-secondary">در حال بارگذاری...</MudText>
        </MudStack>
    }
    else if (_result.Products.Count == 0)
    {
        <MudAlert Severity="Severity.Info" Class="my-4">محصولی یافت نشد.</MudAlert>
    }
    else
    {
        <!-- Products Grid -->
        <MudGrid Spacing="1">
            @foreach (var p in _result.Products)
            {
                <MudItem xs="6" sm="6" md="3"
                         onclick="@(() => NavigateToProduct(p.Id))">
                    <MudCard Class="rounded-lg h-100 d-flex flex-column overflow-hidden"
                             Style="cursor:pointer;height: 300px">
                        <MudCardContent Class="d-flex flex-column pa-1 h-100">
                            <div style="height: 60%;background-image: url('@(string.IsNullOrWhiteSpace(p.ThumbnailUrl) ? "/images/product-placeholder.svg" : p.ThumbnailUrl)');background-size: cover; background-position: center;border-radius: 0.5rem; position: relative;">
                                @if (p.RemainingCount <= 0)
                                {
                                    <div style="position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;border-radius:0.5rem;">
                                        <MudChip T="string" Color="Color.Error" Variant="Variant.Filled" Size="Size.Small">ناموجود</MudChip>
                                    </div>
                                }
                                else if (p.RemainingCount <= 5)
                                {
                                    <MudChip T="string" Color="Color.Warning" Variant="Variant.Filled" Size="Size.Small"
                                             Style="position:absolute;top:8px;right:8px;">
                                        فقط @p.RemainingCount عدد
                                    </MudChip>
                                }
                                @if (p.MaxDiscountPercent > 0)
                                {
                                    <MudChip T="string" Color="Color.Error" Variant="Variant.Filled" Size="Size.Small"
                                             Style="position:absolute;top:8px;left:8px;">
                                        @p.MaxDiscountPercent% تخفیف
                                    </MudChip>
                                }
                            </div>
                            <div class="pa-1 flex-grow-1 d-flex flex-column justify-space-between">
                                <MudText Typo="Typo.subtitle1">@p.Title</MudText>
                                <MudText Typo="Typo.subtitle2" Color="Color.Primary">@FormatPrice(p.Price)</MudText>
                            </div>
                        </MudCardContent>
                        <MudCardActions Class="mt-auto d-flex justify-space-between pa-2">
                            <MudButton Variant="Variant.Filled" Color="Color.Primary"
                                       OnClick="@(() => AddToCart(p))"
                                       StartIcon="@Icons.Material.Filled.AddShoppingCart"
                                       Disabled="@(p.RemainingCount <= 0)">
                                @(p.RemainingCount <= 0 ? "ناموجود" : "افزودن")
                            </MudButton>
                        </MudCardActions>
                    </MudCard>
                </MudItem>
            }
        </MudGrid>

        <!-- Pagination -->
        @if (_result.TotalPages > 1)
        {
            <div class="d-flex justify-center mt-4">
                <MudPagination Count="@_result.TotalPages" Selected="@_currentPage"
                               SelectedChanged="OnPageChanged"
                               Color="Color.Primary" Variant="Variant.Filled"
                               BoundaryCount="1" MiddleCount="3" />
            </div>
        }
    }
</MudContainer>
