@attribute [Route(RouteConstants.Profile.ChargeCreditWallet)]
@attribute [Authorize]

<PageTitle>شارژ کیف‌پول اصلی</PageTitle>

<MudContainer MaxWidth="MaxWidth.Medium" Class="py-6">
    <MudStack Spacing="3">
        <PageHeader Title="💳 شارژ کیف‌پول اصلی" BackHref="@RouteConstants.Profile.Wallet" />

        @if (_paymentResult != null)
        {
            <MudAlert Severity="@(_paymentResult == "success" ? MudBlazor.Severity.Success : MudBlazor.Severity.Error)"
                      Class="rounded-lg" Variant="Variant.Filled">
                @if (_paymentResult == "success")
                {
                    <MudStack Spacing="2">
                        <span>شارژ کیف پول اصلی با موفقیت انجام شد! ✅</span>
                        <MudButton Variant="Variant.Filled"
                                   Color="Color.Primary"
                                   Size="Size.Small"
                                   StartIcon="@Icons.Material.Filled.ShoppingCart"
                                   OnClick="ContinueShoppingAsync">
                            ادامه خرید
                        </MudButton>
                    </MudStack>
                }
                else if (_paymentResult == "cancelled")
                {
                    <span>پرداخت توسط شما لغو شد.</span>
                }
                else
                {
                    <span>پرداخت ناموفق بود. لطفاً دوباره تلاش کنید.</span>
                }
            </MudAlert>
        }

        @if (_authLoaded && _redirectingToMagic)
        {
            <MudAlert Severity="MudBlazor.Severity.Info" Class="rounded-lg" Variant="Variant.Outlined">
                <MudStack Spacing="2" AlignItems="AlignItems.Center">
                    <MudProgressCircular Size="Size.Small" Indeterminate="true" Color="Color.Primary" />
                    <MudText>
                        کیف پول شما در حالت جادویی است. در حال انتقال به صفحه شارژ کیف پول جادویی...
                    </MudText>
                    <MudButton Size="Size.Small" Variant="Variant.Filled" Color="Color.Primary"
                               Href="@RouteConstants.Profile.MagicWallet"
                               StartIcon="@Icons.Material.Filled.AutoAwesome">
                        رفتن به شارژ کیف جادویی
                    </MudButton>
                </MudStack>
            </MudAlert>
        }
        else if (_authLoaded && !_isClubMemberActive)
        {
            <MudAlert Severity="MudBlazor.Severity.Warning" Class="rounded-lg" Variant="Variant.Outlined">
                <MudStack Spacing="2">
                    <MudText>
                        برای شارژ کیف پول اصلی ابتدا باید پکیج را خریداری کرده و قرارداد باشگاه مشتریان را امضا کنید.
                    </MudText>
                    <MudStack Row="true" Spacing="1" Class="flex-wrap">
                        @if (!_hasPurchasedPackage)
                        {
                            <MudButton Size="Size.Small" Variant="Variant.Filled" Color="Color.Primary"
                                       Href="@RouteConstants.Package.List"
                                       StartIcon="@Icons.Material.Filled.CardGiftcard">
                                مشاهده پکیج‌ها
                            </MudButton>
                        }
                        else
                        {
                            <MudButton Size="Size.Small" Variant="Variant.Filled" Color="Color.Primary"
                                       Href="@RouteConstants.Club.Membership"
                                       StartIcon="@Icons.Material.Filled.Handshake">
                                امضای قرارداد باشگاه
                            </MudButton>
                        }
                        <MudButton Size="Size.Small" Variant="Variant.Text"
                                   Href="@RouteConstants.Profile.Wallet">
                            بازگشت به کیف پول
                        </MudButton>
                    </MudStack>
                </MudStack>
            </MudAlert>
        }
        else if (_authLoaded && _needsMagicCeilingConsent && !_allowNormalDespiteMagic && !_redirectingToMagic)
        {
            <MudAlert Severity="MudBlazor.Severity.Warning" Class="rounded-lg" Variant="Variant.Outlined">
                <MudStack Spacing="2" AlignItems="AlignItems.Center">
                    <MudProgressCircular Size="Size.Small" Indeterminate="true" Color="Color.Warning" />
                    <MudText>
                        سقف شارژ جادویی پر است. برای شارژ بدون ضریب باید تأیید کنید...
                    </MudText>
                </MudStack>
            </MudAlert>
        }
        else if (ShowChargeForm)
        {
        <MudPaper Elevation="2" Class="pa-5 rounded-lg">
            <MudText Typo="Typo.h6" Class="mb-3">
                <MudIcon Icon="@Icons.Material.Filled.AccountBalanceWallet" Class="ml-1" />
                شارژ موجودی اصلی
            </MudText>

            @if (_allowNormalDespiteMagic)
            {
                <MudAlert Severity="MudBlazor.Severity.Warning" Dense="true" Class="mb-3" Icon="@Icons.Material.Filled.Warning">
                    این شارژ بدون ضریب جادویی است (۱:۱). سقف واریز جادویی شما در این دور پر شده است.
                </MudAlert>
            }

            <MudAlert Severity="MudBlazor.Severity.Info" Dense="true" Class="mb-3" Icon="@Icons.Material.Filled.Info">
                مبلغ وارد شده (به تومان) از طریق درگاه پرداخت به موجودی اصلی شما اضافه می‌شود.
                از موجودی اصلی برای خرید از فروشگاه عادی و پرداخت سفارش استفاده می‌شود.
            </MudAlert>

            <MudStack Spacing="2">
                <MudNumericField @bind-Value="_chargeAmount"
                                 Label="مبلغ (تومان)"
                                 Variant="Variant.Outlined"
                                 Min="10_000"
                                 Max="1_000_000_000"
                                 Format="N0"
                                 Adornment="Adornment.Start"
                                 AdornmentIcon="@Icons.Material.Filled.Payments"
                                 HelperText="حداقل ۱۰,۰۰۰ و حداکثر ۱,۰۰۰,۰۰۰,۰۰۰ تومان" />

                <MudStack Row="true" Spacing="1" Class="flex-wrap">
                    @foreach (var preset in _presetAmounts)
                    {
                        <MudButton Variant="Variant.Outlined" Size="Size.Small"
                                   Color="@(_chargeAmount == preset ? Color.Primary : Color.Default)"
                                   OnClick="() => _chargeAmount = preset"
                                   Class="rounded-pill">
                            @FormatToman(preset)
                        </MudButton>
                    }
                </MudStack>

                @if (_chargeAmount > 0)
                {
                    <MudPaper Outlined="true" Class="pa-3 rounded-lg" Style="background: #eff6ff;">
                        <MudStack Row="true" Justify="Justify.SpaceBetween">
                            <MudText Typo="Typo.body2">مبلغ پرداخت:</MudText>
                            <MudText Typo="Typo.body2"><strong>@FormatToman(_chargeAmount)</strong></MudText>
                        </MudStack>
                        <MudStack Row="true" Justify="Justify.SpaceBetween">
                            <MudText Typo="Typo.body2">موجودی دریافتی:</MudText>
                            <MudText Typo="Typo.body2" Color="Color.Primary"><strong>@FormatToman(_chargeAmount)</strong></MudText>
                        </MudStack>
                    </MudPaper>
                }

                <MudButton Variant="Variant.Filled"
                           Color="Color.Primary"
                           Size="Size.Large"
                           FullWidth="true"
                           Disabled="@(_isProcessing || _chargeAmount < 10_000)"
                           OnClick="StartCreditCharge"
                           StartIcon="@Icons.Material.Filled.Payment"
                           Class="rounded-lg mt-2">
                    @if (_isProcessing)
                    {
                        <MudProgressCircular Size="Size.Small" Indeterminate="true" Class="me-2" />
                        <span>در حال انتقال به درگاه...</span>
                    }
                    else
                    {
                        <span>پرداخت با کارت بانکی</span>
                    }
                </MudButton>
            </MudStack>
        </MudPaper>

        <MudExpansionPanels Elevation="1" Class="rounded-lg">
            <MudExpansionPanel Text="قوانین شارژ کیف پول اصلی" MaxHeight="500" IsInitiallyExpanded="false">
                <MudList T="string" Dense="true">
                    <MudListItem T="string" Icon="@Icons.Material.Filled.CheckCircle" IconColor="Color.Success">
                        موجودی اصلی برای خرید از فروشگاه عادی و پرداخت سفارش قابل استفاده است
                    </MudListItem>
                    <MudListItem T="string" Icon="@Icons.Material.Filled.CheckCircle" IconColor="Color.Success">
                        حداقل مبلغ شارژ: ۱۰,۰۰۰ تومان
                    </MudListItem>
                    <MudListItem T="string" Icon="@Icons.Material.Filled.CheckCircle" IconColor="Color.Success">
                        مبلغ واریزی بدون ضریب به موجودی اضافه می‌شود (۱:۱)
                    </MudListItem>
                    <MudListItem T="string" Icon="@Icons.Material.Filled.Info" IconColor="Color.Info">
                        پرداخت از طریق درگاه بانکی انجام می‌شود
                    </MudListItem>
                </MudList>
            </MudExpansionPanel>
        </MudExpansionPanels>
        }
    </MudStack>
</MudContainer>