@attribute [Route(RouteConstants.Package.MyPackages)]

<PageTitle>پکیج‌های من</PageTitle>

<MudContainer MaxWidth="MaxWidth.Large" Class="py-8">
    <PageHeader Title="پکیج‌های من" BackHref="@RouteConstants.Profile.Index" />

    @if (_isLoading)
    {
        <MudStack AlignItems="AlignItems.Center" Class="py-16">
            <MudProgressCircular Color="Color.Primary" Indeterminate="true" Size="Size.Large" />
            <MudText Typo="Typo.body1" Class="mud-text-secondary mt-2">در حال بارگذاری...</MudText>
        </MudStack>
    }
    else if (_userStatus == null || !_userStatus.HasPurchasedPackage)
    {
        <!-- No Package Purchased -->
        <MudPaper Elevation="2" Class="pa-8 text-center">
            <MudStack AlignItems="AlignItems.Center" Spacing="4">
                <MudIcon Icon="@Icons.Material.Filled.CardGiftcard" Size="Size.Large" Color="Color.Primary" Style="font-size: 80px;" />
                <MudText Typo="Typo.h5">شما هنوز پکیجی خریداری نکرده‌اید</MudText>
                <MudText Typo="Typo.body1" Class="mud-text-secondary" Style="max-width: 500px;">
                    با خرید پکیج طلایی، به باشگاه مشتریان بپیوندید و از مزایای ویژه مانند پاداش هفتگی و تیم‌سازی بهره‌مند شوید.
                </MudText>
                <MudButton Variant="Variant.Filled"
                           Color="Color.Primary"
                           Size="Size.Large"
                           StartIcon="@Icons.Material.Filled.ShoppingCart"
                           OnClick="@(() => Navigation.NavigateTo(RouteConstants.Package.List))">
                    مشاهده پکیج‌ها
                </MudButton>
            </MudStack>
        </MudPaper>
    }
    else
    {
        <MudGrid Spacing="4">
            <!-- Package Status Card -->
            <MudItem xs="12" md="6">
                <MudPaper Elevation="2" Class="pa-6 h-100">
                    <MudStack Spacing="3">
                        <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2">
                            <MudIcon Icon="@Icons.Material.Filled.Inventory2" Color="Color.Primary" />
                            <MudText Typo="Typo.h6">وضعیت پکیج</MudText>
                        </MudStack>

                        <MudDivider />

                        <MudStack Spacing="2">
                            <MudStack Row="true" Justify="Justify.SpaceBetween">
                                <MudText Typo="Typo.body2" Class="mud-text-secondary">نوع پکیج:</MudText>
                                <MudText Typo="Typo.body2">پکیج طلایی</MudText>
                            </MudStack>

                            <MudStack Row="true" Justify="Justify.SpaceBetween">
                                <MudText Typo="Typo.body2" Class="mud-text-secondary">روش خرید:</MudText>
                                <MudChip T="string" Size="Size.Small" Color="@GetPurchaseMethodColor(_userStatus.PurchaseMethod)">
                                    @GetPurchaseMethodText(_userStatus.PurchaseMethod)
                                </MudChip>
                            </MudStack>

                            @if (_userStatus.PurchaseDate.HasValue)
                            {
                                <MudStack Row="true" Justify="Justify.SpaceBetween">
                                    <MudText Typo="Typo.body2" Class="mud-text-secondary">تاریخ خرید:</MudText>
                                    <MudText Typo="Typo.body2">@_userStatus.PurchaseDate.Value.ToLocalTime().ToString("yyyy/MM/dd")</MudText>
                                </MudStack>
                            }

                            <MudStack Row="true" Justify="Justify.SpaceBetween">
                                <MudText Typo="Typo.body2" Class="mud-text-secondary">موجودی کیف پول:</MudText>
                                <MudText Typo="Typo.body2" Color="Color.Success">@FormatPrice(_userStatus.WalletBalance)</MudText>
                            </MudStack>
                        </MudStack>
                    </MudStack>
                </MudPaper>
            </MudItem>

            <!-- Club Membership Card -->
            <MudItem xs="12" md="6">
                <MudPaper Elevation="2" Class="pa-6 h-100">
                    <MudStack Spacing="3">
                        <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2">
                            <MudIcon Icon="@Icons.Material.Filled.CardMembership" Color="Color.Secondary" />
                            <MudText Typo="Typo.h6">عضویت باشگاه</MudText>
                        </MudStack>

                        <MudDivider />

                        @if (_userStatus.IsClubMemberActive)
                        {
                            <MudAlert Severity="Severity.Success" Dense="true" Icon="@Icons.Material.Filled.CheckCircle">
                                عضویت باشگاه مشتریان شما فعال است
                            </MudAlert>

                            <MudStack Spacing="2">
                                <MudButton Variant="Variant.Outlined"
                                           Color="Color.Primary"
                                           FullWidth="true"
                                           StartIcon="@Icons.Material.Filled.AccountTree"
                                           OnClick="@(() => Navigation.NavigateTo(RouteConstants.Network.Statistics))">
                                    مشاهده تیم
                                </MudButton>

                                <MudButton Variant="Variant.Outlined"
                                           Color="Color.Success"
                                           FullWidth="true"
                                           StartIcon="@Icons.Material.Filled.Payments"
                                           OnClick="@(() => Navigation.NavigateTo(RouteConstants.Commission.Dashboard))">
                                    پاداش‌های من
                                </MudButton>
                            </MudStack>
                        }
                        else if (_userStatus.CanActivateClubMembership)
                        {
                            <MudAlert Severity="Severity.Info" Dense="true" Icon="@Icons.Material.Filled.Info">
                                شما می‌توانید عضویت باشگاه را فعال کنید
                            </MudAlert>

                            <MudButton Variant="Variant.Filled"
                                       Color="Color.Primary"
                                       FullWidth="true"
                                       Size="Size.Large"
                                       StartIcon="@Icons.Material.Filled.CardMembership"
                                       OnClick="@(() => Navigation.NavigateTo(RouteConstants.Club.Membership))">
                                فعالسازی باشگاه مشتریان
                            </MudButton>
                        }
                        else
                        {
                            <MudAlert Severity="Severity.Warning" Dense="true" Icon="@Icons.Material.Filled.Warning">
                                موجودی کیف پول شما برای فعالسازی کافی نیست
                            </MudAlert>

                            <MudText Typo="Typo.body2" Class="mud-text-secondary">
                                برای فعالسازی باشگاه مشتریان، موجودی کیف پول شما باید حداقل ۵۶ میلیون تومان باشد.
                            </MudText>
                        }
                    </MudStack>
                </MudPaper>
            </MudItem>

            <!-- Benefits Card -->
            <MudItem xs="12">
                <MudPaper Elevation="2" Class="pa-6">
                    <MudStack Spacing="3">
                        <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2">
                            <MudIcon Icon="@Icons.Material.Filled.Stars" Color="Color.Warning" />
                            <MudText Typo="Typo.h6">مزایای پکیج طلایی</MudText>
                        </MudStack>

                        <MudDivider />

                        <MudGrid Spacing="3">
                            <MudItem xs="12" sm="6" md="3">
                                <MudPaper Outlined="true" Class="pa-4 text-center">
                                    <MudIcon Icon="@Icons.Material.Filled.Group" Color="Color.Primary" Size="Size.Large" />
                                    <MudText Typo="Typo.subtitle2" Class="mt-2">تیم‌سازی نامحدود</MudText>
                                    <MudText Typo="Typo.caption" Class="mud-text-secondary">دعوت دوستان و ساخت تیم</MudText>
                                </MudPaper>
                            </MudItem>

                            <MudItem xs="12" sm="6" md="3">
                                <MudPaper Outlined="true" Class="pa-4 text-center">
                                    <MudIcon Icon="@Icons.Material.Filled.Payments" Color="Color.Success" Size="Size.Large" />
                                    <MudText Typo="Typo.subtitle2" Class="mt-2">پاداش هفتگی</MudText>
                                    <MudText Typo="Typo.caption" Class="mud-text-secondary">دریافت سهم از فروش تیم</MudText>
                                </MudPaper>
                            </MudItem>

                            <MudItem xs="12" sm="6" md="3">
                                <MudPaper Outlined="true" Class="pa-4 text-center">
                                    <MudIcon Icon="@Icons.Material.Filled.ShoppingBag" Color="Color.Secondary" Size="Size.Large" />
                                    <MudText Typo="Typo.subtitle2" Class="mt-2">فروشگاه اعتباری</MudText>
                                    <MudText Typo="Typo.caption" Class="mud-text-secondary">خرید با تخفیف ویژه</MudText>
                                </MudPaper>
                            </MudItem>

                            <MudItem xs="12" sm="6" md="3">
                                <MudPaper Outlined="true" Class="pa-4 text-center">
                                    <MudIcon Icon="@Icons.Material.Filled.Support" Color="Color.Info" Size="Size.Large" />
                                    <MudText Typo="Typo.subtitle2" Class="mt-2">پشتیبانی ۲۴ ساعته</MudText>
                                    <MudText Typo="Typo.caption" Class="mud-text-secondary">پشتیبانی اولویت‌دار</MudText>
                                </MudPaper>
                            </MudItem>
                        </MudGrid>
                    </MudStack>
                </MudPaper>
            </MudItem>
        </MudGrid>
    }
</MudContainer>