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

<PageTitle>کیف‌پول جادویی</PageTitle>

<MudContainer MaxWidth="MaxWidth.Medium" Class="py-6">
    <MudStack Spacing="3">
        <PageHeader Title="🪄 کیف‌پول جادویی" BackHref="@RouteConstants.Profile.Wallet" />

        @if (_isLoading)
        {
            <MudPaper Elevation="2" Class="pa-6 rounded-lg text-center">
                <MudProgressCircular Color="Color.Primary" Indeterminate="true" />
                <MudText Class="mt-3">در حال بارگذاری...</MudText>
            </MudPaper>
        }
        else if (_status.WalletMode != 1)
        {
            @* ═══ حالت عادی — Magic فعال نیست ═══ *@
            <MudPaper Elevation="2" Class="pa-6 rounded-lg text-center">
                <MudIcon Icon="@Icons.Material.Filled.Lock" Color="Color.Default" Size="Size.Large" Style="font-size: 64px;" />
                <MudText Typo="Typo.h5" Class="mt-4">کیف‌پول جادویی فعال نیست</MudText>
                <MudText Typo="Typo.body1" Class="mt-2 mud-text-secondary">
                    برای فعال شدن کیف‌پول جادویی، ابتدا پکیج پایه را خریداری کنید و سپس 
                    تمام موجودی عادی خود را از فروشگاه خرج کنید. وقتی موجودی عادی به صفر برسد، 
                    کیف‌پول جادویی فعال می‌شود.
                </MudText>
                <MudButton Variant="Variant.Filled" Color="Color.Primary" Class="mt-4 rounded-pill"
                           Href="@RouteConstants.Profile.Wallet"
                           StartIcon="@Icons.Material.Filled.AccountBalanceWallet">
                    بازگشت به کیف پول
                </MudButton>
            </MudPaper>
        }
        else
        {
            @* ═══ حالت جادویی فعال ═══ *@

            @* ─── وضعیت و پیشرفت ─── *@
            <MudPaper Elevation="2" Class="pa-5 rounded-xl" Style="background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%); color: white;">
                <MudStack Spacing="2">
                    <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2">
                        <MudIcon Icon="@Icons.Material.Filled.AutoAwesome" Size="Size.Large" />
                        <MudText Typo="Typo.h5">حالت جادویی فعال</MudText>
                    </MudStack>

                    <MudGrid Spacing="2">
                        <MudItem xs="6" sm="3">
                            <MudText Typo="Typo.caption" Style="opacity:0.8">موجودی فعلی</MudText>
                            <MudText Typo="Typo.h6">@FormatPrice(_status.Balance)</MudText>
                        </MudItem>
                        <MudItem xs="6" sm="3">
                            <MudText Typo="Typo.caption" Style="opacity:0.8">مجموع واریزی</MudText>
                            <MudText Typo="Typo.h6">@FormatPrice(_status.MagicTotalDeposited)</MudText>
                        </MudItem>
                        <MudItem xs="6" sm="3">
                            <MudText Typo="Typo.caption" Style="opacity:0.8">مجموع اعتبار</MudText>
                            <MudText Typo="Typo.h6">@FormatPrice(_status.MagicTotalCredited)</MudText>
                        </MudItem>
                        <MudItem xs="6" sm="3">
                            <MudText Typo="Typo.caption" Style="opacity:0.8">سقف باقیمانده</MudText>
                            <MudText Typo="Typo.h6">@FormatPrice(_status.MagicRemainingDeposit)</MudText>
                        </MudItem>
                    </MudGrid>

                    @* نوار پیشرفت *@
                    <MudStack Spacing="0" Class="mt-1">
                        <MudStack Row="true" Justify="Justify.SpaceBetween">
                            <MudText Typo="Typo.caption" Style="opacity:0.8">پیشرفت سقف واریز</MudText>
                            <MudText Typo="Typo.caption" Style="opacity:0.8">@(_progressPercent.ToString("0"))%</MudText>
                        </MudStack>
                        <MudProgressLinear Value="@_progressPercent" Color="Color.Warning" Size="Size.Medium" 
                                           Rounded="true" Class="mt-1" Style="background: rgba(255,255,255,0.3);" />
                    </MudStack>

                    @if (_status.MagicActivatedAt.HasValue)
                    {
                        <MudText Typo="Typo.caption" Style="opacity:0.7">
                            فعال از: @_status.MagicActivatedAt.Value.MiladiToJalaliWithTime()
                        </MudText>
                    }
                </MudStack>
            </MudPaper>

            @* ─── فرم شارژ ─── *@
            @if (_status.MagicRemainingDeposit > 0)
            {
                <MudPaper Elevation="2" Class="pa-5 rounded-lg">
                    <MudText Typo="Typo.h6" Class="mb-3">
                        <MudIcon Icon="@Icons.Material.Filled.CreditCard" Class="ml-1" />
                        شارژ کیف‌پول جادویی
                    </MudText>

                    <MudAlert Severity="MudBlazor.Severity.Info" Dense="true" Class="mb-3" Icon="@Icons.Material.Filled.Info">
                        مبلغ واریزی شما <strong>×۲.۵</strong> به موجودی اضافه می‌شود.
                        مثلاً ۱۰ میلیون واریز = ۲۵ میلیون اعتبار.
                    </MudAlert>

                    <MudStack Spacing="2">
                        <MudNumericField @bind-Value="_chargeAmount"
                                         Label="مبلغ واریز (تومان)"
                                         Variant="Variant.Outlined"
                                         Min="10_000"
                                         Max="@(_status.MagicRemainingDeposit / 10)"
                                         Format="N0"
                                         Adornment="Adornment.Start"
                                         AdornmentIcon="@Icons.Material.Filled.Payments"
                                         HelperText="@($"حداکثر: {FormatPrice(_status.MagicRemainingDeposit)} (ریال)")" />

                        @if (_chargeAmount > 0)
                        {
                            <MudPaper Outlined="true" Class="pa-3 rounded-lg" Style="background: #f0fdf4;">
                                <MudStack Row="true" Justify="Justify.SpaceBetween">
                                    <MudText Typo="Typo.body2">مبلغ واریز:</MudText>
                                    <MudText Typo="Typo.body2">@FormatToman(_chargeAmount)</MudText>
                                </MudStack>
                                <MudStack Row="true" Justify="Justify.SpaceBetween">
                                    <MudText Typo="Typo.body2" Color="Color.Success"><strong>اعتبار دریافتی (×۲.۵):</strong></MudText>
                                    <MudText Typo="Typo.body2" Color="Color.Success"><strong>@FormatToman((long)(_chargeAmount * 2.5m))</strong></MudText>
                                </MudStack>
                            </MudPaper>
                        }

                        @* دکمه‌های مبلغ سریع *@
                        <MudStack Row="true" Spacing="1" Class="flex-wrap">
                            @foreach (var preset in _presetAmounts)
                            {
                                if (preset * 10 <= _status.MagicRemainingDeposit)
                                {
                                    <MudButton Variant="Variant.Outlined" Size="Size.Small"
                                               Color="@(_chargeAmount == preset ? Color.Primary : Color.Default)"
                                               OnClick="() => _chargeAmount = preset"
                                               Class="rounded-pill">
                                        @FormatToman(preset)
                                    </MudButton>
                                }
                            }
                        </MudStack>

                        <MudButton Variant="Variant.Filled"
                                   Color="Color.Default"
                                   Size="Size.Large"
                                   FullWidth="true"
                                   Disabled="true"
                                   StartIcon="@Icons.Material.Filled.AccessTime"
                                   Class="rounded-lg mt-2">
                            <span>بزودی</span>
                        </MudButton>
                    </MudStack>
                </MudPaper>
            }
            else
            {
                <MudAlert Severity="MudBlazor.Severity.Warning" Class="rounded-lg">
                    سقف شارژ جادویی در این دور پر شده است.
                    با خرج کردن موجودی و خرید مجدد پکیج، سقف ریست می‌شود.
                </MudAlert>
            }

            @* ─── قوانین ─── *@
            <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.Warning" IconColor="Color.Warning">
                            در حالت جادویی، کمیسیون و پورسانت غیرفعال است
                        </MudListItem>
                        <MudListItem T="string" Icon="@Icons.Material.Filled.Info" IconColor="Color.Info">
                            بعد از اتمام سقف و خرج موجودی، با خرید مجدد پکیج دور جدید شروع می‌شود
                        </MudListItem>
                    </MudList>
                </MudExpansionPanel>
            </MudExpansionPanels>
        }

        @* ─── نتیجه پرداخت (اگه از callback برگشته) ─── *@
        @if (_paymentResult != null)
        {
            <MudAlert Severity="@(_paymentResult == "success" ? MudBlazor.Severity.Success : MudBlazor.Severity.Error)"
                      Class="rounded-lg" Variant="Variant.Filled">
                @if (_paymentResult == "success")
                {
                    <span>شارژ جادویی با موفقیت انجام شد! ✅</span>
                }
                else
                {
                    <span>پرداخت ناموفق بود. لطفاً دوباره تلاش کنید.</span>
                }
            </MudAlert>
        }
    </MudStack>
</MudContainer>