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

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

<MudContainer MaxWidth="MaxWidth.Large" Class="py-6">
    <MudStack Spacing="3">
        <PageHeader Title="ویژگی‌های باشگاه مشتریان" BackHref="@RouteConstants.Club.Membership" />

        <!-- توضیحات کلی باشگاه -->
        <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)
        {
            <LoadingState Message="در حال دریافت ویژگی‌ها..." />
        }
        else if (_features == null || !_features.Any())
        {
            <EmptyState Icon="@Icons.Material.Filled.Stars"
                        Title="هنوز ویژگی‌ای برای شما فعال نشده است"
                        Description="با خرید پکیج یا ارتقاء عضویت، ویژگی‌های اختصاصی فعال می‌شوند." />
        }
        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"
                   OnClick="GoBack">
            بازگشت به صفحه باشگاه
        </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;
    }

    private async Task GoBack() => await JS.InvokeVoidAsync("history.back");
}
