FrontOffice/src/FrontOffice.Main/Pages/Club/FeaturesPage.razor

@attribute [Route(RouteConstants.Club.Features)]
@using FrontOffice.Main.Utilities
@using MudBlazor
@inject ClubConfigurationService ClubConfigService
@inject IDialogService DialogService

<PageTitle>ویژگی‌های باشگاه مشتریان</PageTitle>

<MudContainer MaxWidth="MaxWidth.Large" Class="py-6">
    <MudStack Spacing="3">
        <MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
            <MudText Typo="Typo.h5">ویژگی‌های باشگاه مشتریان</MudText>
            <MudButton Variant="Variant.Text" StartIcon="@Icons.Material.Filled.ArrowBack" Href="@RouteConstants.Club.Membership">بازگشت</MudButton>
        </MudStack>

        <!-- توضیحات کلی باشگاه -->
        <MudPaper Elevation="2" Class="pa-4 rounded-lg">
            <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2" Class="mb-3">
                <MudIcon Icon="@Icons.Material.Filled.Stars" Color="Color.Primary" Size="Size.Large" />
                <MudText Typo="Typo.h6" Color="Color.Primary">ویژگی‌های اختصاصی شما</MudText>
            </MudStack>
            <MudText Typo="Typo.body1" Class="mb-2">
                علاوه بر مزایای پایه عضویت در باشگاه مشتریان، شما به مجموعه‌ای از ویژگی‌های اختصاصی دسترسی دارید. برخی از این ویژگی‌ها ممکن است نیاز به زمان برای فعال‌سازی داشته باشند.
                با کلیک روی دکمه «جزئیات» هر ویژگی، می‌توانید اطلاعات بیشتری درباره نحوه استفاده از آن امکان را مشاهده کنید.
            </MudText>
        </MudPaper>

        <!-- لیست فیچرها -->
        <MudText Typo="Typo.h6" Class="mt-4">ویژگی‌های شما</MudText>
        
        @if (_isLoading)
        {
            <MudProgressLinear Color="Color.Primary" Indeterminate="true" />
        }
        else if (_features == null || !_features.Any())
        {
            <MudAlert Severity="Severity.Info">
                هنوز ویژگی‌ای برای شما فعال نشده است.
            </MudAlert>
        }
        else
        {
            <MudPaper Elevation="2" Class="pa-2 rounded-lg">
                <MudList T="ClubFeatureDto" Dense="true">
                    @foreach (var feature in _features)
                    {
                        <MudListItem>
                            <MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center" Style="width: 100%;">
                                <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2">
                                    <MudIcon Icon="@Icons.Material.Filled.CheckCircle" 
                                             Color="@(feature.IsEnabled ? Color.Success : Color.Default)" />
                                    <MudText>@feature.Title</MudText>
                                </MudStack>
                                <MudButton Variant="Variant.Text" 
                                           Color="Color.Primary" 
                                           Size="Size.Small"
                                           OnClick="@(() => ShowFeatureDetails(feature))">
                                    جزئیات
                                </MudButton>
                            </MudStack>
                        </MudListItem>
                        @if (feature != _features.Last())
                        {
                            <MudDivider />
                        }
                    }
                </MudList>
            </MudPaper>
        }

        <MudButton Variant="Variant.Filled" 
                   Color="Color.Primary" 
                   FullWidth="true" 
                   Size="Size.Large"
                   StartIcon="@Icons.Material.Filled.ArrowBack"
                   Href="@RouteConstants.Club.Membership">
            بازگشت به صفحه باشگاه
        </MudButton>
    </MudStack>
</MudContainer>

<!-- مدال جزئیات فیچر -->
<MudDialog @bind-Visible="_showDetailDialog" Options="@_dialogOptions">
    <TitleContent>
        <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2">
            <MudIcon Icon="@Icons.Material.Filled.Star" Color="Color.Primary" />
            <MudText Typo="Typo.h6">@_selectedFeature?.Title</MudText>
        </MudStack>
    </TitleContent>
    <DialogContent>
        @if (_selectedFeature != null)
        {
            <MudStack Spacing="3">
                <!-- وضعیت -->
                <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2">
                    <MudText Typo="Typo.subtitle2">وضعیت:</MudText>
                    @if (_selectedFeature.IsEnabled)
                    {
                        <MudChip T="string" Color="Color.Success" Size="Size.Small">فعال</MudChip>
                    }
                    else
                    {
                        <MudChip T="string" Color="Color.Default" Size="Size.Small">غیرفعال</MudChip>
                    }
                </MudStack>
                
                <!-- توضیحات کوتاه -->
                @if (!string.IsNullOrEmpty(_selectedFeature.Description))
                {
                    <MudText Typo="Typo.body1">@_selectedFeature.Description</MudText>
                }
                
                <!-- تاریخ‌ها -->
                <MudDivider />
                <MudGrid>
                    <MudItem xs="6">
                        <MudText Typo="Typo.caption" Color="Color.Default">تاریخ ایجاد:</MudText>
                        <MudText Typo="Typo.body2">
                            @(_selectedFeature.CreatedAt?.ToLocalTime().ToString("yyyy/MM/dd HH:mm") ?? "-")
                        </MudText>
                    </MudItem>
                    <MudItem xs="6">
                        <MudText Typo="Typo.caption" Color="Color.Default">تاریخ فعال‌سازی:</MudText>
                        <MudText Typo="Typo.body2">
                            @(_selectedFeature.GrantedAt.HasValue && _selectedFeature.GrantedAt.Value > DateTime.MinValue 
                                ? _selectedFeature.GrantedAt.Value.ToLocalTime().ToString("yyyy/MM/dd HH:mm") 
                                : "-")
                        </MudText>
                    </MudItem>
                </MudGrid>
                
                <!-- یادداشت (Notes) - محتوای اصلی مدال -->
                @if (!string.IsNullOrEmpty(_selectedFeature.Notes))
                {
                    <MudDivider />
                    <MudText Typo="Typo.subtitle2" Class="mb-2">توضیحات تکمیلی:</MudText>
                    <MudPaper Elevation="0" Class="pa-3 rounded" Style="background-color: var(--mud-palette-background-grey);">
                        @((MarkupString)_selectedFeature.Notes)
                    </MudPaper>
                }
            </MudStack>
        }
    </DialogContent>
    <DialogActions>
        <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@(() => _showDetailDialog = false)">
            بستن
        </MudButton>
    </DialogActions>
</MudDialog>

@code {
    private List<ClubFeatureDto>? _features;
    private bool _isLoading = true;
    private bool _showDetailDialog;
    private ClubFeatureDto? _selectedFeature;
    
    private DialogOptions _dialogOptions = new()
    {
        MaxWidth = MaxWidth.Small,
        FullWidth = true,
        CloseButton = true,
        CloseOnEscapeKey = true
    };

    protected override async Task OnInitializedAsync()
    {
        await LoadFeatures();
    }

    private async Task LoadFeatures()
    {
        _isLoading = true;
        try
        {
            _features = await ClubConfigService.GetClubFeaturesAsync();
        }
        catch (Exception ex)
        {
            Console.WriteLine($"Error loading features: {ex.Message}");
            _features = new List<ClubFeatureDto>();
        }
        finally
        {
            _isLoading = false;
        }
    }

    private void ShowFeatureDetails(ClubFeatureDto feature)
    {
        _selectedFeature = feature;
        _showDetailDialog = true;
    }
}