@attribute [Route(RouteConstants.Store.Products)]
@* Injection is handled in code-behind *@

<PageTitle>محصولات</PageTitle>

<MudContainer MaxWidth="MaxWidth.Large" Class="py-6">
    <!-- Hero Banner -->
    <MudPaper Class="store-hero pa-6 pa-md-8 mb-4 rounded-xl" Elevation="0">
        <MudStack AlignItems="AlignItems.Center" Spacing="2">
            <MudIcon Icon="@Icons.Material.Filled.Storefront" 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>

    <MudPaper Elevation="1" Class="pa-3 pa-md-4 mb-4 rounded-lg">
        <MudGrid Spacing="2" AlignItems="AlignItems.Center">
            @* ردیف اول: جستجو و دکمه‌ها *@
            <MudItem xs="12" md="6">
                <MudTextField @bind-Value="_query"
                              Placeholder="جستجو در محصولات..."
                              AdornmentIcon="@Icons.Material.Filled.Search"
                              Adornment="Adornment.Start"
                              Immediate="true"
                              OnKeyUp="OnQueryChanged"
                              Variant="Variant.Outlined"
                              Margin="Margin.Dense"/>
            </MudItem>
            <MudItem xs="12" md="6" Class="d-flex justify-start justify-md-end gap-2">
                <MudButton Size="Size.Small" Variant="Variant.Outlined" Color="Color.Primary"
                           StartIcon="@Icons.Material.Filled.Category" Href="@RouteConstants.Store.Categories">
                    دسته‌بندی‌ها
                </MudButton>
                <MudButton Size="Size.Small" Variant="Variant.Filled" Color="Color.Primary"
                           StartIcon="@Icons.Material.Filled.ShoppingCart" Href="@RouteConstants.Store.Cart">
                    سبد خرید
                    @if (Cart.Count > 0)
                    {
                        <MudBadge Content="@Cart.Count" Color="Color.Error" Overlap="true" Class="ms-2"/>
                    }
                </MudButton>
            </MudItem>
            
            @* ردیف دوم: فیلترها و مرتب‌سازی *@
            <MudItem xs="12">
                <MudDivider Class="my-2"/>
            </MudItem>
            <MudItem xs="6" sm="4" md="3">
                <MudSelect T="ProductSortOption" @bind-Value="_sortOption" 
                           @bind-Value:after="OnSortChanged"
                           Label="مرتب‌سازی" 
                           Variant="Variant.Outlined"
                           Margin="Margin.Dense"
                           AnchorOrigin="Origin.BottomCenter"
                           AdornmentIcon="@Icons.Material.Filled.Sort">
                    <MudSelectItem T="ProductSortOption" Value="ProductSortOption.PriceDesc">
                        <div class="d-flex align-center gap-2">
                            <MudIcon Icon="@Icons.Material.Filled.ArrowDownward" Size="Size.Small"/>
                            گران‌ترین
                        </div>
                    </MudSelectItem>
                    <MudSelectItem T="ProductSortOption" Value="ProductSortOption.PriceAsc">
                        <div class="d-flex align-center gap-2">
                            <MudIcon Icon="@Icons.Material.Filled.ArrowUpward" Size="Size.Small"/>
                            ارزان‌ترین
                        </div>
                    </MudSelectItem>
                    <MudSelectItem T="ProductSortOption" Value="ProductSortOption.Newest">
                        <div class="d-flex align-center gap-2">
                            <MudIcon Icon="@Icons.Material.Filled.NewReleases" Size="Size.Small"/>
                            جدیدترین
                        </div>
                    </MudSelectItem>
                    <MudSelectItem T="ProductSortOption" Value="ProductSortOption.Title">
                        <div class="d-flex align-center gap-2">
                            <MudIcon Icon="@Icons.Material.Filled.SortByAlpha" Size="Size.Small"/>
                            الفبایی
                        </div>
                    </MudSelectItem>
                </MudSelect>
            </MudItem>
            <MudItem xs="6" sm="8" md="9" Class="d-flex align-center">
                @if (_activeCategoryId.HasValue)
                {
                    <MudChip T="string" Color="Color.Info" Variant="Variant.Filled" Size="Size.Small"
                             Icon="@Icons.Material.Filled.FilterAlt"
                             Closeable="true" OnClose="ClearCategoryFilter">
                        @(_activeCategoryTitle ?? $"دسته‌بندی #{_activeCategoryId}")
                    </MudChip>
                }
                else
                {
                    <MudText Typo="Typo.body2" Class="mud-text-secondary">
                        <MudIcon Icon="@Icons.Material.Filled.Inventory2" Size="Size.Small" Class="me-1"/>
                        @(_totalCount) محصول
                    </MudText>
                }
            </MudItem>
        </MudGrid>
    </MudPaper>

    @if (_loading)
    {
        <MudStack AlignItems="AlignItems.Center" Class="py-6">
            <MudProgressCircular Color="Color.Primary" Indeterminate="true"/>
            <MudText Class="mt-2 mud-text-secondary">در حال بارگذاری...</MudText>
        </MudStack>
    }
    else if (_products.Count == 0)
    {
        <MudAlert Severity="Severity.Info">محصولی یافت نشد.</MudAlert>
    }
    else
    {
        <MudGrid Spacing="1">
            @foreach (var p in _products)
            {
                <MudItem xs="6" sm="6" md="3"
                         onclick="@(() => Navigation.NavigateTo($"{RouteConstants.Store.ProductDetail}{p.Id}"))">
                    <MudCard Class="rounded-lg h-100 d-flex flex-column overflow-hidden"
                             Style="cursor:pointer;">


                        <MudCardContent Class="d-flex flex-column pa-1 h-100">
                            <div style="aspect-ratio:1/1;width:100%;background-image: url('@p.ImageUrl');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>
                                }
                            </div>
                            <div class="pa-1 flex-grow-1 d-flex flex-column justify-space-between">
                                <MudText Typo="Typo.subtitle1">@p.Title</MudText>
                                @if (_isAuthenticated)
                                {
                                    <MudText Typo="Typo.subtitle2" Color="Color.Primary">@FormatPrice(p.Price)</MudText>
                                }
                                else
                                {
                                    <MudText Typo="Typo.caption" Class="mud-text-secondary">
                                        <MudIcon Icon="@Icons.Material.Filled.Lock" Size="Size.Small" Class="me-1"/>برای مشاهده قیمت وارد شوید
                                    </MudText>
                                }
                            </div>
                        </MudCardContent>
                        <MudCardActions Class="mt-auto d-flex justify-space-between pa-2">
                            @* <MudButton Variant="Variant.Text" Color="Color.Secondary" *@
                            @*            Href="@($"{RouteConstants.Store.ProductDetail}{p.Id}")">جزئیات *@
                            @* </MudButton> *@
                            <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>

        @* Lazy Load — بارگذاری بیشتر *@
        @if (_loadingMore)
        {
            <MudStack AlignItems="AlignItems.Center" Class="py-4">
                <MudProgressCircular Color="Color.Primary" Size="Size.Small" Indeterminate="true"/>
                <MudText Typo="Typo.caption" Class="mud-text-secondary">بارگذاری بیشتر...</MudText>
            </MudStack>
        }
        else if (_hasMore)
        {
            <div class="d-flex justify-center py-4">
                <MudButton Variant="Variant.Outlined" Color="Color.Primary"
                           StartIcon="@Icons.Material.Filled.ExpandMore"
                           OnClick="LoadMore">
                    نمایش محصولات بیشتر
                </MudButton>
            </div>
        }
        else if (_products.Count > 0)
        {
            <MudText Typo="Typo.caption" Align="Align.Center" Class="py-4 mud-text-secondary">
                همه @(_products.Count) محصول نمایش داده شد
            </MudText>
        }
    }
</MudContainer>
