@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
    {
        @* ── G3: راهنمای پکیج‌های من (Q28) ── *@
        <MudAlert Severity="Severity.Info" Variant="Variant.Text" Dense="true" Class="mb-2" Icon="@Icons.Material.Filled.Info">
            بعد از تکمیل چرخه کیف‌پول جادویی، می‌توانید مجدداً پکیج خریداری کرده و دور جدیدی را آغاز کنید.
        </MudAlert>

        <MudGrid Spacing="4">

            @* Re-Purchase / Cycle Progress Section *@
            @if (_canRepurchase)
            {
                <MudItem xs="12">
                    <MudAlert Severity="Severity.Success" Icon="@Icons.Material.Filled.Celebration" Class="mb-0">
                        <MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween" Style="width:100%">
                            <MudText Typo="Typo.body1">
                                🎉 چرخه جادویی تکمیل شد! می‌توانید پکیج جدید بخرید.
                            </MudText>
                            <MudButton Variant="Variant.Filled"
                                       Color="Color.Primary"
                                       StartIcon="@Icons.Material.Filled.ShoppingCart"
                                       OnClick="@(() => Navigation.NavigateTo(RouteConstants.Package.List))">
                                خرید پکیج جدید
                            </MudButton>
                        </MudStack>
                    </MudAlert>
                </MudItem>
            }
            else if (_magicStatus != null && _magicStatus.WalletMode == 1)
            {
                <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.AutoAwesome" Color="Color.Warning" />
                                <MudText Typo="Typo.h6">پیشرفت چرخه جادویی</MudText>
                                @if (_magicStatus.PurchaseCycleCount > 0)
                                {
                                    <MudChip T="string" Size="Size.Small" Color="Color.Info">دور @(_magicStatus.PurchaseCycleCount + 1)</MudChip>
                                }
                            </MudStack>

                            <MudDivider />

                            <MudStack Spacing="2">
                                <MudStack Row="true" Justify="Justify.SpaceBetween">
                                    <MudText Typo="Typo.body2" Class="mud-text-secondary">واریز انجام‌شده:</MudText>
                                    <MudText Typo="Typo.body2">@FormatPrice(_magicStatus.MagicTotalDeposited)</MudText>
                                </MudStack>
                                <MudStack Row="true" Justify="Justify.SpaceBetween">
                                    <MudText Typo="Typo.body2" Class="mud-text-secondary">سقف واریز:</MudText>
                                    <MudText Typo="Typo.body2">@FormatPrice(_magicStatus.MagicMaxDeposit)</MudText>
                                </MudStack>
                                <MudStack Row="true" Justify="Justify.SpaceBetween">
                                    <MudText Typo="Typo.body2" Class="mud-text-secondary">باقیمانده:</MudText>
                                    <MudText Typo="Typo.body2" Color="Color.Warning">@FormatPrice(_magicStatus.MagicRemainingDeposit)</MudText>
                                </MudStack>

                                <MudProgressLinear Color="Color.Primary" Value="@GetDepositProgress()" Class="my-2" Rounded="true" Size="Size.Large">
                                    <MudText Typo="Typo.caption"><b>@GetDepositProgress()%</b></MudText>
                                </MudProgressLinear>

                                <MudStack Row="true" Justify="Justify.SpaceBetween">
                                    <MudText Typo="Typo.body2" Class="mud-text-secondary">اعتبار دریافتی:</MudText>
                                    <MudText Typo="Typo.body2" Color="Color.Success">@FormatPrice(_magicStatus.MagicTotalCredited)</MudText>
                                </MudStack>
                            </MudStack>
                        </MudStack>
                    </MudPaper>
                </MudItem>
            }

            <!-- 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">@_userStatus.PackageTitle</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>