@page "/categories"
@using MudBlazor
@* Project-level imports provide Navigation, services, and MudBlazor *@

<PageTitle>دسته‌بندی‌ها</PageTitle>

<MudContainer MaxWidth="MaxWidth.Large" Class="py-6">
    <PageHeader Title="دسته‌بندی محصولات" BackHref="@RouteConstants.Store.Products" />
    <MudPaper Elevation="1" Class="pa-4 mb-4 rounded-lg">
        <MudStack Spacing="1">
            <MudText Typo="Typo.body2" Class="mud-text-secondary">
                از بین درخت دسته‌بندی‌ها انتخاب کنید تا محصولات آن دسته را مشاهده نمایید.
            </MudText>
        </MudStack>
        <MudStack Row="true" Class="mt-4" AlignItems="AlignItems.Center" Spacing="1">
            <MudButton Variant="Variant.Text" Color="Color.Secondary" StartIcon="@Icons.Material.Filled.ArrowBack"
                       OnClick="() => Navigation.NavigateTo(RouteConstants.Store.Products)">
                بازگشت به محصولات
            </MudButton>
            <MudButton Variant="Variant.Outlined" Color="Color.Primary" Href="@RouteConstants.Store.Products">
                مشاهده محصولات بدون فیلتر
            </MudButton>
        </MudStack>
    </MudPaper>

    <MudPaper Elevation="1" Class="pa-4 rounded-lg">
        @if (_loading)
        {
            <MudStack AlignItems="AlignItems.Center">
                <MudProgressCircular Indeterminate="true" Color="Color.Primary" />
                <MudText Class="mt-2 mud-text-secondary">در حال بارگذاری دسته‌بندی‌ها...</MudText>
            </MudStack>
        }
        else if (_treeItems.Count == 0)
        {
            <MudAlert Severity="Severity.Info">هنوز دسته‌بندی‌ای ثبت نشده است.</MudAlert>
        }
        else
        {
            <MudPaper Elevation="0" Class="pa-0" Style="max-width:600px;margin:auto;">
                <MudStack AlignItems="AlignItems.Stretch" Spacing="2">
                    <MudTextField T="string"
                                  Label="جستجو در دسته‌ها"
                                  Adornment="Adornment.Start"
                                  AdornmentIcon="@Icons.Material.Filled.Search"
                                  TextChanged="OnSearchChanged"
                                  Immediate="true"
                                  Clearable="true" />
                    <MudTreeView Items="@_treeItems"
                                 @ref="_treeView"
                                 FilterFunc="MatchesName"
                                 SelectedValueChanged="@((long id) => OnSelectedValueChanged(id))"
                                 Style="max-height:420px;overflow:auto;border:1px solid var(--mud-palette-lines-default);border-radius:var(--mud-default-borderradius);padding:0.5rem;">
                        <ItemTemplate>
                            <MudTreeViewItem @bind-Expanded="@context.Expanded"
                                             Items="@context.Children"
                                             Value="@context.Value"
                                             Icon="@context.Icon"
                                             Text="@context.Text"
                                             Visible="@context.Visible" />
                        </ItemTemplate>
                    </MudTreeView>
                    <MudStack AlignItems="AlignItems.Center" Spacing="1">
                        <MudText Typo="Typo.subtitle2">
                            @(_selectedNode is null ? "یک دسته را انتخاب کنید" : $"دسته انتخابی: {_selectedNode.Text}")
                        </MudText>
                        <MudButton Variant="Variant.Filled"
                                   Color="Color.Primary"
                                   Disabled="@(_selectedNode is null)"
                                   OnClick="NavigateToSelectedCategory">
                            مشاهده محصولات این دسته
                        </MudButton>
                    </MudStack>
                </MudStack>
            </MudPaper>
        }
    </MudPaper>
</MudContainer>
