@using FrontOffice.Main.Utilities
@using MudBlazor

<MudPaper Elevation="2" Class="pa-4 rounded-lg">
    <MudText Typo="Typo.h6" Class="mb-3">فعال‌سازی یا تمدید عضویت</MudText>

    @* ── G7: راهنمای هزینه فعال‌سازی (Q28) ── *@
    <MudAlert Severity="Severity.Info" Variant="Variant.Text" Dense="true" Class="mb-3" Icon="@Icons.Material.Filled.Info">
        هزینه تخمینی بر اساس پکیج انتخابی محاسبه می‌شود. هر پکیج قیمت و شرایط فعال‌سازی متفاوتی دارد.
    </MudAlert>

    <MudForm @ref="_form" @bind-IsValid="_formIsValid">
        <MudGrid Spacing="2">
            <MudItem xs="12" sm="6">
                <MudNumericField @bind-Value="_packageId"
                                 Label="شناسه بسته"
                                 Variant="Variant.Outlined"
                                 Required="true"
                                 RequiredError="شناسه بسته الزامی است"
                                 Min="1"
                                 HelperText="شناسه بسته باشگاه را وارد کنید" />
            </MudItem>
            <MudItem xs="12" sm="6">
                <MudNumericField @bind-Value="_durationMonths"
                                 Label="مدت زمان (ماه)"
                                 Variant="Variant.Outlined"
                                 Required="true"
                                 RequiredError="مدت زمان الزامی است"
                                 Min="1"
                                 Max="12"
                                 HelperText="از 1 تا 12 ماه" />
            </MudItem>
            <MudItem xs="12">
                <MudTextField @bind-Value="_activationCode"
                              Label="کد فعال‌سازی (اختیاری)"
                              Variant="Variant.Outlined"
                              HelperText="در صورت داشتن کد تخفیف یا کد فعال‌سازی، وارد کنید" />
            </MudItem>

            <!-- پیش‌نمایش هزینه -->
            <MudItem xs="12">
                <MudAlert Severity="Severity.Info" Variant="Variant.Outlined">
                    <MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
                        <MudText Typo="Typo.body1">هزینه تقریبی:</MudText>
                        <MudText Typo="Typo.h6" Color="Color.Primary">@GetEstimatedCost()</MudText>
                    </MudStack>
                </MudAlert>
            </MudItem>

            <MudItem xs="12">
                <MudButton Variant="Variant.Filled"
                           Color="Color.Primary"
                           FullWidth="true"
                           Disabled="@(!_formIsValid || _isSubmitting)"
                           OnClick="HandleActivateAsync"
                           StartIcon="@Icons.Material.Filled.CheckCircle">
                    @if (_isSubmitting)
                    {
                        <MudProgressCircular Size="Size.Small" Indeterminate="true" />
                        <span class="ms-2">در حال پردازش...</span>
                    }
                    else
                    {
                        <span>پرداخت و فعال‌سازی</span>
                    }
                </MudButton>
            </MudItem>
        </MudGrid>
    </MudForm>

    @if (!string.IsNullOrEmpty(_errorMessage))
    {
        <MudAlert Severity="Severity.Error" Class="mt-3" Variant="Variant.Filled">
            @_errorMessage
        </MudAlert>
    }
</MudPaper>