@attribute [Route(RouteConstants.Commission.WeeklyBalance)]
@using FrontOffice.Main.Utilities
@using FrontOffice.Main.Shared
@using MudBlazor

<PageTitle>گزارش هفتگی</PageTitle>

<MudContainer MaxWidth="MaxWidth.Large" Class="py-6">
    <MudStack Spacing="3">
        <PageHeader Title="گزارش هفتگی پاداش" BackHref="@RouteConstants.Commission.Dashboard" />

        <!-- انتخاب هفته -->
        <MudPaper Elevation="2" Class="pa-3 rounded-lg">
            <MudGrid Spacing="2">
                <MudItem xs="8" sm="6" md="6">
                    <WeekSelector @ref="_weekSelector"
                                  @bind-Value="_selectedWeekDefinition"
                                  Label="انتخاب هفته"
                                  Placeholder="هفته را جستجو یا انتخاب کنید"
                                  Variant="Variant.Outlined"
                                  Dense="false"
                                  OnlyActive="true" />
                </MudItem>
                @* <MudItem xs="4" sm="3" md="3"> *@
                @*     <MudButton Variant="Variant.Outlined"  *@
                @*                OnClick="LoadCurrentWeekAsync"  *@
                @*                StartIcon="@Icons.Material.Filled.Today" *@
                @*                FullWidth="true" *@
                @*                Style="height: 56px;"> *@
                @*         هفته جاری *@
                @*     </MudButton> *@
                @* </MudItem> *@
                <MudItem xs="4" sm="3" md="3" Class="pt-6">
                    <MudButton Variant="Variant.Filled" 
                               Color="Color.Primary" 
                               OnClick="LoadWeeklyBalanceAsync" 
                               StartIcon="@Icons.Material.Filled.Search"
                               Disabled="@(_selectedWeekDefinition == null)"
                               FullWidth="true"
                               Style="height: 50px;">
                        جستجو
                    </MudButton>
                </MudItem>
                
            </MudGrid>
        </MudPaper>

        @if (_isLoading)
        {
            <LoadingState Message="در حال دریافت گزارش..." />
        }
        else if (_weeklyBalance is not null)
        {
            <!-- اطلاعات هفته - کامپکت -->
            <MudPaper Elevation="2" Class="pa-3 rounded-lg">
                <MudGrid Spacing="1">
                    <MudItem xs="12" sm="4">
                        <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1">
                            <MudIcon Icon="@Icons.Material.Filled.DateRange" Size="Size.Small" Color="Color.Primary" />
                            <MudText Typo="Typo.body2"><strong>@_weeklyBalance.WeekDisplayName</strong></MudText>
                        </MudStack>
                    </MudItem>
                    <MudItem xs="6" sm="4">
                        <MudText Typo="Typo.caption" Class="mud-text-secondary">شروع: <strong>@_weeklyBalance.StartDatePersian</strong></MudText>
                    </MudItem>
                    <MudItem xs="6" sm="4">
                        <MudText Typo="Typo.caption" Class="mud-text-secondary">پایان: <strong>@_weeklyBalance.EndDatePersian</strong></MudText>
                    </MudItem>
                </MudGrid>
            </MudPaper>

            <!-- امتیاز فروش تیم اول و دوم - کارت‌های بزرگ -->
            <MudGrid Spacing="2">
                
                <MudItem xs="6">
                    <MudPaper Elevation="2" Class="pa-4 rounded-lg text-center bg-success-soft stat-card-ds">
                        <MudStack Spacing="1" AlignItems="AlignItems.Center">
                            <MudIcon Icon="@Icons.Material.Filled.ChevronRight" Color="Color.Success" Size="Size.Large" />
                            <MudText Typo="Typo.subtitle2" Color="Color.Success">تیم دوم</MudText>
                            <MudText Typo="Typo.h5" Color="Color.Success" Class="dash-stat-value">@_weeklyBalance.RightBalanceFormatted</MudText>
                            <MudProgressLinear Color="Color.Success" 
                                               Value="@GetRightPercentage()" 
                                               Size="Size.Medium" 
                                               Class="rounded-lg mt-2" 
                                               Style="width: 100%;" />
                            <MudText Typo="Typo.caption" Class="mud-text-secondary">
                                @GetRightPercentage().ToString("F1")% از کل
                            </MudText>
                        </MudStack>
                    </MudPaper>
                </MudItem>
                <MudItem xs="6">
                    <MudPaper Elevation="2" Class="pa-4 rounded-lg text-center bg-info-soft stat-card-ds">
                        <MudStack Spacing="1" AlignItems="AlignItems.Center">
                            <MudIcon Icon="@Icons.Material.Filled.ChevronLeft" Color="Color.Info" Size="Size.Large"/>
                            <MudText Typo="Typo.subtitle2" Color="Color.Info">تیم اول</MudText>
                            <MudText Typo="Typo.h5" Color="Color.Info" Class="dash-stat-value">@_weeklyBalance.LeftBalanceFormatted</MudText>
                            <MudProgressLinear Color="Color.Info"
                                               Value="@GetLeftPercentage()"
                                               Size="Size.Medium"
                                               Class="rounded-lg mt-2"
                                               Style="width: 100%;"/>
                            <MudText Typo="Typo.caption" Class="mud-text-secondary">
                                @GetLeftPercentage().ToString("F1")% از کل
                            </MudText>
                        </MudStack>
                    </MudPaper>
                </MudItem>

            </MudGrid>

            <!-- محاسبات پاداش - فشرده‌تر -->
            <MudPaper Elevation="2" Class="pa-4 rounded-lg">
                <MudText Typo="Typo.subtitle1" Class="mb-2 fw-bold">محاسبات پاداش</MudText>
                <MudSimpleTable Dense="true" Hover="true" Style="background: transparent;">
                    <tbody>
                        <tr>
                            <td><MudText Typo="Typo.body2">اعضای جدید تیم اول:</MudText></td>
                            <td class="text-end"><MudText Typo="Typo.body1" Color="Color.Info"><strong>@_weeklyBalance.LeftNewMembersFormatted</strong></MudText></td>
                        </tr>
                        <tr>
                            <td><MudText Typo="Typo.body2">اعضای جدید تیم دوم:</MudText></td>
                            <td class="text-end"><MudText Typo="Typo.body1" Color="Color.Success"><strong>@_weeklyBalance.RightNewMembersFormatted</strong></MudText></td>
                        </tr>
                        <tr>
                            <td><MudText Typo="Typo.body2">انتقال از هفته قبل (تیم اول):</MudText></td>
                            <td class="text-end"><MudText Typo="Typo.body1" Color="Color.Info"><strong>@_weeklyBalance.LeftCarryoverFormatted</strong></MudText></td>
                        </tr>
                        <tr>
                            <td><MudText Typo="Typo.body2">انتقال از هفته قبل (تیم دوم):</MudText></td>
                            <td class="text-end"><MudText Typo="Typo.body1" Color="Color.Success"><strong>@_weeklyBalance.RightCarryoverFormatted</strong></MudText></td>
                        </tr>
                        <tr>
                            <td><MudText Typo="Typo.body2" Color="Color.Error"> امتیاز فروش کل (پایه):</MudText></td>
                            <td class="text-end"><MudText Typo="Typo.body1" Color="Color.Error"><strong>@_weeklyBalance.MinBalanceFormatted</strong></MudText></td>
                        </tr>
                        @* <tr style="background-color: var(--mud-palette-primary-lighten);"> *@
                        @*     <td><MudText Typo="Typo.subtitle1"><strong>کمیسیون محاسبه شده:</strong></MudText></td> *@
                        @*     <td class="text-end"><MudText Typo="Typo.h6" Color="Color.Primary"><strong>@_weeklyBalance.CalculatedCommissionFormatted</strong></MudText></td> *@
                        @* </tr> *@
                    </tbody>
                </MudSimpleTable>
            </MudPaper>
        }
        else if (_hasError)
        {
            <MudAlert Severity="Severity.Error" Variant="Variant.Filled">
                خطا در دریافت اطلاعات. لطفا دوباره تلاش کنید.
            </MudAlert>
        }
    </MudStack>
</MudContainer>