@attribute [Route(RouteConstants.Checkout.Index + "/{PackageId:long}")]
@inject NavigationManager Navigation
@inject ISnackbar Snackbar

<PageTitle>تکمیل خرید</PageTitle>

<MudContainer MaxWidth="MaxWidth.Large" Class="py-6">
    <PageHeader Title="تکمیل خرید" BackHref="@RouteConstants.Package.List" />
    <MudGrid Spacing="4">
        <!-- Header -->
        <MudItem xs="12">
            <MudPaper Elevation="2" Class="pa-4 rounded-lg">
                <MudStack Spacing="3">
                    <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="3">
                        <MudIcon Icon="@Icons.Material.Filled.ShoppingCart" Size="Size.Large" Color="Color.Primary" />
                        <div>
                            <MudText Typo="Typo.h4">تکمیل خرید</MudText>
                            <MudText Typo="Typo.body2" Class="mud-text-secondary">مرحله نهایی خرید پکیج</MudText>
                        </div>
                    </MudStack>
                </MudStack>
            </MudPaper>
        </MudItem>
        <MudItem xs="12" md="8">
            <MudStack>
                <!-- Package Details -->
                <MudPaper Elevation="2" Class="pa-4 rounded-lg">
                    <MudText Typo="Typo.h5" Class="mb-4">جزئیات پکیج</MudText>

                    @* ── G2: توضیح خرید پکیج (Q28) ── *@
                    <MudAlert Severity="Severity.Info" Variant="Variant.Text" Dense="true" Class="mb-3">
                        با خرید این پکیج، سقف پاداش هفتگی، ضریب کیف‌پول جادویی و دسترسی به فیچرهای اختصاصی برای شما فعال می‌شود.
                    </MudAlert>

                    @if (_selectedPackage != null)
                    {
                        <MudCard>
                            <MudCardContent>
                                <MudGrid Spacing="3">
                                    <MudItem xs="12" md="4">
                                        <MudPaper Class="pa-2 rounded-xl" Style="background: radial-gradient(600px 280px at 120% 0, #daccff 0, transparent 60%), radial-gradient(600px 280px at -10% 100%, #ffe2f2 0, transparent 60%), linear-gradient(180deg, #fff, #fbfaff);">
                                            <AppImage Path="@_selectedPackage.Image"
                                                      Alt="@_selectedPackage.Title"
                                                      ImgHeight="150"
                                                      ObjectFit="ObjectFit.Cover"
                                                      ObjectPosition="ObjectPosition.Center"
                                                      Style="width:100%"
                                                      Class="rounded-xl" />
                                        </MudPaper>
                                    </MudItem>
                                    <MudItem xs="12" md="8">
                                        <MudText Typo="Typo.h5" Class="mb-2">@_selectedPackage.Title</MudText>
                                            @((MarkupString)_selectedPackage.Body)
                                        </MudItem>
                                    </MudGrid>
                                </MudCardContent>
                            </MudCard>
                    }
                    else
                    {
                        <MudStack AlignItems="AlignItems.Center" Class="py-8">
                            <MudIcon Icon="@Icons.Material.Filled.Warning" Size="Size.Large" Color="Color.Warning" />
                            <MudText Typo="Typo.body1" Class="mud-text-secondary mt-2">پکیجی انتخاب نشده است.</MudText>
                            <MudButton Variant="Variant.Outlined"
                                       Color="Color.Primary"
                                       StartIcon="@Icons.Material.Filled.ArrowBack"
                                       OnClick="() => Navigation.NavigateTo(RouteConstants.Main.MainPage)"
                                       Class="mt-2">
                                بازگشت به صفحه اصلی
                            </MudButton>
                        </MudStack>
                    }
                </MudPaper>

                <!-- Address Selection -->
                <MudPaper Elevation="2" Class="pa-4 rounded-lg">
                    <MudText Typo="Typo.h5" Class="mb-4">انتخاب آدرس</MudText>

                    @if (_isLoadingAddresses)
                    {
                        <MudStack AlignItems="AlignItems.Center" Class="py-4">
                            <MudProgressCircular Color="Color.Primary" Indeterminate="true" Size="Size.Medium" />
                            <MudText Typo="Typo.body2" Class="mud-text-secondary mt-2">بارگذاری آدرس‌ها...</MudText>
                        </MudStack>
                    }
                    else if (_addresses.Any())
                    {
                        <MudStack Spacing="2">
                            @foreach (var address in _addresses)
                            {
                                <MudPaper Outlined="@(_selectedAddress?.Id != address.Id)"
                                          Elevation="@(_selectedAddress?.Id == address.Id ? 4 : 0)"
                                          Class="pa-3 rounded-xl cursor-pointer"
                                          Style="@(_selectedAddress?.Id == address.Id ? "border: 2px solid var(--mud-palette-primary);" : "")"
                                          @onclick="() => SetAddressAsDefault(address.Id)">
                                    <MudStack Spacing="1">
                                        <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2">
                                            <MudCheckBox @bind-Value="address.IsDefault"
                                                         Disabled="true"
                                                         Color="Color.Primary" />
                                            <MudText Typo="Typo.subtitle2">@(address.Title)</MudText>
                                            @if (address.IsDefault)
                                            {
                                                <MudChip T="string" Color="Color.Success" Variant="Variant.Filled" Size="Size.Small">پیش‌فرض</MudChip>
                                            }
                                            @if (!address.IsDefault)
                                            {
                                                @if (_isSettingDefaultAddress && _settingDefaultAddressId == address.Id)
                                                {
                                                    <MudProgressCircular Size="Size.Small" Color="Color.Primary" Indeterminate="true" />
                                                }
                                                else
                                                {
                                                    <MudButton Variant="Variant.Text"
                                                               Color="Color.Primary"
                                                               Size="Size.Small"
                                                               OnClick="() => SetAddressAsDefault(address.Id)">
                                                        تنظیم به عنوان پیش‌فرض
                                                    </MudButton>
                                                }
                                            }
                                        </MudStack>
                                        <MudStack Row="true">
                                            <MudText Typo="Typo.body2" Class="mud-text-secondary">@(address.Address)</MudText>
                                            <MudSpacer />
                                            <MudText Typo="Typo.caption" Class="mud-text-secondary">کد پستی: @(address.PostalCode)</MudText>
                                        </MudStack>
                                    </MudStack>
                                </MudPaper>
                            }
                        </MudStack>
                    }
                    else
                    {
                        <MudStack AlignItems="AlignItems.Center" Class="py-4">
                            <MudIcon Icon="@Icons.Material.Filled.LocationOff" Size="Size.Large" Color="Color.Default" />
                            <MudText Typo="Typo.body2" Class="mud-text-secondary mt-2">آدرسی ثبت نشده است.</MudText>
                            <MudButton Variant="Variant.Outlined"
                                       Color="Color.Primary"
                                       StartIcon="@Icons.Material.Filled.Add"
                                       OnClick="() => Navigation.NavigateTo(RouteConstants.Profile.Index)"
                                       Class="mt-2">
                                افزودن آدرس
                            </MudButton>
                        </MudStack>
                    }
                </MudPaper>
            </MudStack>
        </MudItem>




        <!-- Order Summary -->
        <MudItem xs="12" md="4">
            <MudStack Spacing="4">
                <!-- Discount Code Section -->
                <MudPaper Elevation="2" Class="pa-4 rounded-lg">
                    <MudText Typo="Typo.h5" Class="mb-4">کد تخفیف</MudText>
                    <MudStack Spacing="3">
                        <MudTextField @bind-Value="_discountCode"
                                      Label="کد تخفیف"
                                      Variant="Variant.Outlined"
                                      Class="flex-grow-1"
                                      Placeholder="کد تخفیف خود را وارد کنید" />

                        <MudButton Variant="Variant.Filled"
                                   Color="Color.Secondary"
                                   OnClick="ApplyDiscountCode"
                                   Disabled="_isApplyingDiscount">
                            اعمال
                        </MudButton>
                        @if (!string.IsNullOrWhiteSpace(_discountMessage))
                        {
                            <MudText Typo="Typo.caption" Color="@(_discountApplied ? Color.Success : Color.Error)" Class="mt-2">
                                @(_discountMessage)
                            </MudText>
                        }
                    </MudStack>
                </MudPaper>

                <!-- Order Summary -->
                @if (_selectedPackage != null)
                {
                    <MudPaper Elevation="2" Class="pa-4 rounded-lg">
                        <MudText Typo="Typo.h5" Class="mb-4">خلاصه سفارش</MudText>

                        <MudStack Spacing="3">
                            <MudStack Row="true" Justify="Justify.SpaceBetween">
                                <MudText Typo="Typo.body1">@(_selectedPackage.Title)</MudText>
                                <MudText Typo="Typo.body1">@(_selectedPackage.Price.ToThousands().ToCurrencyUnitIRT())</MudText>
                            </MudStack>

                            @if (_discountApplied && _discountAmount > 0)
                            {
                                <MudStack Row="true" Justify="Justify.SpaceBetween">
                                    <MudText Typo="Typo.body2" Color="Color.Success">تخفیف (@(_discountCode))</MudText>
                                    <MudText Typo="Typo.body2" Color="Color.Success">-@(_discountAmount.ToThousands().ToCurrencyUnitIRT())</MudText>
                                </MudStack>
                            }

                            <MudDivider />

                            <MudStack Row="true" Justify="Justify.SpaceBetween">
                                <MudText Typo="Typo.h6">مجموع</MudText>
                                <MudText Typo="Typo.h6" Color="Color.Primary">@(_finalPrice.ToThousands().ToCurrencyUnitIRT())</MudText>
                            </MudStack>

                            <MudButton Variant="Variant.Filled"
                                       Color="Color.Success"
                                       Size="Size.Large"
                                       FullWidth="true"
                                       StartIcon="@Icons.Material.Filled.Payment"
                                       OnClick="ProcessPayment"
                                       Disabled="@(!CanProceedToPayment || _isProcessingPayment || !_selectedPackage.SupportsDirectPurchase)"
                                       Class="mt-2">
                                @(_isProcessingPayment ? "در حال پردازش..." : "پرداخت آنلاین")
                            </MudButton>

                            @if (_selectedPackage.SupportsDayaPurchase)
                            {
                                <MudButton Variant="Variant.Filled"
                                           Color="Color.Tertiary"
                                           Size="Size.Large"
                                           FullWidth="true"
                                           StartIcon="@Icons.Material.Filled.Diamond"
                                           OnClick="DayaLoanPayment"
                                           Disabled="@(!CanProceedToPayment)"
                                           Class="mt-2">
                                    تأمین اعتبار الماسی دایا
                                </MudButton>
                            }

                            @if (!_selectedPackage.SupportsDirectPurchase && !_selectedPackage.SupportsDayaPurchase)
                            {
                                <MudAlert Severity="Severity.Warning" Dense="true" Class="mt-2">
                                    این پکیج در حال حاضر قابل خرید نیست.
                                </MudAlert>
                            }

                            @if (!CanProceedToPayment)
                            {
                                <MudText Typo="Typo.caption" Color="Color.Error" Align="Align.Center">
                                    لطفاً پکیج و آدرس را انتخاب کنید.
                                </MudText>
                            }
                        </MudStack>
                    </MudPaper>
                }
            </MudStack>
        </MudItem>
    </MudGrid>
</MudContainer>