@attribute [Route(RouteConstants.Club.Membership)]
@using FrontOffice.Main.Pages.Club.Components
@using FrontOffice.Main.Utilities
@using MudBlazor

<PageTitle>عضویت باشگاه مشتریان</PageTitle>

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

        @if (_isLoading)
        {
            <LoadingState Message="در حال دریافت اطلاعات عضویت..." />
        }
        else if (_membership is not null)
        {
            <!-- وضعیت عضویت -->
            <MudPaper Elevation="2" Class="pa-4 rounded-lg">
                <MudStack Spacing="2">
                    <MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
                        <MudText Typo="Typo.h6">وضعیت عضویت شما</MudText>
                        <MudChip T="string" Color="@GetStatusColor()" Variant="Variant.Filled" Size="Size.Medium">
                            @GetStatusText()
                        </MudChip>
                    </MudStack>

                    @if (_membership.IsActive)
                    {
                        <MudAlert Severity="Severity.Success" Variant="Variant.Outlined">
                            <MudText>عضویت شما در باشگاه مشتریان فعال است و هم اکنون میتوانید از مزایای باشگاه مشتریان استفاده کنید.</MudText>
                        </MudAlert>

                        @if (_membership.DaysRemaining.HasValue)
                        {
                            <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2">
                                <MudIcon Icon="@Icons.Material.Filled.Schedule" Color="Color.Info" />
                                <MudText Typo="Typo.body1">
                                    @if (_membership.DaysRemaining.Value > 0)
                                    {
                                        <strong>@_membership.DaysRemaining.Value روز</strong> <text>تا پایان اعتبار عضویت</text>
                                    }
                                    else
                                    {
                                        <text>عضویت شما منقضی شده است. لطفا تمدید کنید.</text>
                                    }
                                </MudText>
                            </MudStack>
                        }
                    }
                    else
                    {
                        <MudAlert Severity="Severity.Warning" Variant="Variant.Outlined">
                            <MudText>شما هنوز عضو باشگاه مشتریان نیستید. برای استفاده از مزایای ویژه، اکنون فعال کنید!</MudText>
                        </MudAlert>
                    }
                </MudStack>
            </MudPaper>

            <!-- مزایای باشگاه -->
            <MudPaper Elevation="2" Class="pa-4 rounded-lg">
                <MudText Typo="Typo.h6" Class="mb-3">مزایای عضویت باشگاه</MudText>
                <MudStack Spacing="2">
                    <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2" Class="pa-2">
                        <MudIcon Icon="@Icons.Material.Filled.AccountBalanceWallet" Color="Color.Success" Size="Size.Large" />
                        <MudStack Spacing="0">
                            <MudText Typo="Typo.subtitle1">شارژ کیف پول فروشگاه اعتباری</MudText>
                            <MudText Typo="Typo.caption" Color="Color.Default">شارژ ۵۶ میلیون تومان کیف پول فروشگاه اعتباری</MudText>
                        </MudStack>
                    </MudStack>
                    <MudDivider />
                    <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2" Class="pa-2">
                        <MudIcon Icon="@Icons.Material.Filled.TrendingUp" Color="Color.Primary" Size="Size.Large" />
                        <MudStack Spacing="0">
                            <MudText Typo="Typo.subtitle1">عضویت در باشگاه مشتریان</MudText>
                            <MudText Typo="Typo.caption" Color="Color.Default"> دریافت پاداش وفاداری</MudText>
                        </MudStack>
                    </MudStack>
                    <MudDivider />
                    <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2" Class="pa-2">
                        <MudIcon Icon="@Icons.Material.Filled.GroupAdd" Color="Color.Secondary" Size="Size.Large" />
                        <MudStack Spacing="0">
                            <MudText Typo="Typo.subtitle1">معرفی مشتریان جدید</MudText>
                            <MudText Typo="Typo.caption" Color="Color.Default">توسعه باشگاه مشتریان</MudText>
                        </MudStack>
                    </MudStack>
                </MudStack>
            </MudPaper>


            <!-- دکمه مشاهده ویژگی‌های بیشتر -->
            <MudButton Variant="Variant.Outlined" 
                       Color="Color.Primary" 
                       FullWidth="true" 
                       StartIcon="@Icons.Material.Filled.Info"
                       Href="@RouteConstants.Club.Features">
                مشاهده تمام ویژگی‌های باشگاه
            </MudButton>
        }
        else if (_hasError)
        {
            <MudAlert Severity="Severity.Error" Variant="Variant.Filled">
                خطا در دریافت اطلاعات عضویت. لطفا دوباره تلاش کنید.
            </MudAlert>
            <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="LoadDataAsync">تلاش مجدد</MudButton>
        }
    </MudStack>
</MudContainer>