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

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

<MudContainer MaxWidth="MaxWidth.Large" Class="py-6">
    <MudGrid Spacing="4">
        <!-- Header -->
        <MudItem xs="12">
            <MudPaper Elevation="4" Class="pa-6 rounded-2xl mud-theme-surface">
                <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" Class="fw-600">تکمیل خرید</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="4" Class="pa-6 rounded-2xl mud-theme-surface">
                    <MudText Typo="Typo.h5" Class="mb-4 fw-600">جزئیات پکیج</MudText>

                    @if (_selectedPackage != null)
                    {
                        <MudCard>
                            <MudCardContent>
                                <MudGrid Spacing="3" AlignItems="AlignItems.Start">
                                    <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);">
                                            <MudImage Src="@_selectedPackage.Image"
                                                      Alt="@_selectedPackage.Title"
                                                      Height="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="4" Class="pa-6 rounded-2xl mud-theme-surface">
                    <MudText Typo="Typo.h5" Class="mb-4 fw-600">انتخاب آدرس</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="() => SelectAddress(address)">
                                    <MudStack Spacing="1">
                                        <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2">
                                            <MudRadio T="long" Value="address.Id" Checked="@(_selectedAddress?.Id == address.Id)" />
                                            <MudText Typo="Typo.subtitle2" Class="fw-600">@address.Title</MudText>
                                                @if (address.IsDefault)
                                            {
                                                <MudChip T="string" Color="Color.Success" Variant="Variant.Filled" Size="Size.Small">پیش‌فرض</MudChip>
                                            }
                                        </MudStack>
                                        <MudText Typo="Typo.body2" Class="mud-text-secondary">@address.Address</MudText>
                                            <MudText Typo="Typo.caption" Class="mud-text-secondary">کد پستی: @address.PostalCode</MudText>
                                        </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="4" Class="pa-6 rounded-2xl mud-theme-surface">
                    <MudText Typo="Typo.h5" Class="mb-4 fw-600">کد تخفیف</MudText>
                    <MudStack Spacing="3">
                        <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Stretch">
                            <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>
                        </MudStack>
                        @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="4" Class="pa-6 rounded-2xl mud-theme-surface">
                        <MudText Typo="Typo.h5" Class="mb-4 fw-600">خلاصه سفارش</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" Class="fw-600">مجموع</MudText>
                                <MudText Typo="Typo.h6" Class="fw-600" 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)"
                                           Class="mt-2">
                                    @(_isProcessingPayment ? "در حال پردازش..." : "پرداخت آنلاین")
                                </MudButton>

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