@page "/payment/membership"
@using BackOffice.BFF.ManualPayment.Protobuf
@using BackOffice.Main.Pages.AutoComplete
@attribute [Authorize(Roles = "Admin,SuperAdmin")]

<PageTitle>پرداخت دستی عضویت</PageTitle>

<MudContainer MaxWidth="MaxWidth.Large" Class="mt-4">
    <MudCard>
        <MudCardHeader>
            <CardHeaderContent>
                <MudText Typo="Typo.h5">
                    <MudIcon Icon="@Icons.Material.Filled.Payment" Class="ml-2" />
                    پرداخت دستی عضویت
                </MudText>
            </CardHeaderContent>
        </MudCardHeader>
        
        <MudCardContent>
            <MudGrid>
                <!-- انتخاب کاربر -->
                <MudItem xs="12" md="6">
                    <UserAutoComplete 
                        Label="انتخاب کاربر *"
                        @bind-SelectedUserId="_userId"
                        HelperText="جستجو با نام، موبایل یا شناسه" />
                </MudItem>

                <!-- مبلغ -->
                <MudItem xs="12" md="6">
                    <MudNumericField 
                        @bind-Value="_amount"
                        Label="مبلغ (ریال) *"
                        Min="0"
                        Step="10000"
                        Format="N0"
                        Variant="Variant.Outlined"
                        HelperText="مبلغ پرداختی به ریال" />
                </MudItem>

                <!-- شماره مرجع -->
                <MudItem xs="12" md="6">
                    <MudTextField 
                        @bind-Value="_referenceNumber"
                        Label="شماره مرجع *"
                        Variant="Variant.Outlined"
                        MaxLength="50"
                        HelperText="شماره مرجع تراکنش یا فیش" />
                </MudItem>

                <!-- توضیحات -->
                <MudItem xs="12" md="6">
                    <MudTextField 
                        @bind-Value="_description"
                        Label="توضیحات"
                        Variant="Variant.Outlined"
                        Lines="3"
                        MaxLength="500"
                        HelperText="توضیحات اختیاری" />
                </MudItem>
            </MudGrid>

            @if (_showResult)
            {
                <MudAlert Severity="Severity.Success" Class="mt-4" ShowCloseIcon CloseIconClicked="@(() => _showResult = false)">
                    <MudText>@_resultMessage</MudText>
                    <MudText Typo="Typo.caption">شماره تراکنش: @_transactionId</MudText>
                    <MudText Typo="Typo.caption">شماره سفارش: @_orderId</MudText>
                    <MudText Typo="Typo.caption">موجودی جدید کیف پول: @_newWalletBalance.ToString("N0") ریال</MudText>
                </MudAlert>
            }
        </MudCardContent>

        <MudCardActions>
            <MudButton 
                Variant="Variant.Filled" 
                Color="Color.Primary"
                StartIcon="@Icons.Material.Filled.Check"
                OnClick="ProcessPayment"
                Disabled="@_isProcessing">
                @if (_isProcessing)
                {
                    <MudProgressCircular Class="ml-2" Size="Size.Small" Indeterminate="true" />
                    <MudText>در حال ثبت...</MudText>
                }
                else
                {
                    <MudText>ثبت پرداخت</MudText>
                }
            </MudButton>
            
            <MudButton 
                Variant="Variant.Outlined" 
                Color="Color.Default"
                StartIcon="@Icons.Material.Filled.Clear"
                OnClick="ResetForm"
                Disabled="@_isProcessing">
                پاک کردن فرم
            </MudButton>
        </MudCardActions>
    </MudCard>

    <!-- راهنما -->
    <MudCard Class="mt-4">
        <MudCardHeader>
            <CardHeaderContent>
                <MudText Typo="Typo.h6">
                    <MudIcon Icon="@Icons.Material.Filled.Info" Class="ml-2" />
                    راهنما
                </MudText>
            </CardHeaderContent>
        </MudCardHeader>
        <MudCardContent>
            <MudText Typo="Typo.body2" Class="mb-2">این صفحه برای ثبت پرداخت‌های دستی عضویت استفاده می‌شود. پس از ثبت:</MudText>
            <MudList Dense="true">
                <MudListItem Icon="@Icons.Material.Filled.AccountBalance">
                    <MudText Typo="Typo.body2">مبلغ به کیف پول کاربر (Balance و DiscountBalance) اضافه می‌شود</MudText>
                </MudListItem>
                <MudListItem Icon="@Icons.Material.Filled.History">
                    <MudText Typo="Typo.body2">لاگ تغییرات کیف پول ثبت می‌شود</MudText>
                </MudListItem>
                <MudListItem Icon="@Icons.Material.Filled.Receipt">
                    <MudText Typo="Typo.body2">تراکنش با وضعیت موفق ثبت می‌شود</MudText>
                </MudListItem>
                <MudListItem Icon="@Icons.Material.Filled.ShoppingCart">
                    <MudText Typo="Typo.body2">سفارش خرید پکیج عضویت ثبت می‌شود</MudText>
                </MudListItem>
            </MudList>
        </MudCardContent>
    </MudCard>
</MudContainer>