@attribute [Route(RouteConstants.Profile.Index)]
@inject ISnackbar Snackbar

<PageTitle>پروفایل کاربری</PageTitle>

<MudContainer MaxWidth="MaxWidth.Large" Class="py-6">
    <MudGrid Spacing="4">
        <!-- Profile Header -->
        <MudItem xs="12">
            <MudPaper Elevation="4" Class="pa-6">
                <MudStack Spacing="4">
                    <MudStack Row="true" Spacing="3" AlignItems="AlignItems.Center">
                        <MudStack Row="true" Spacing="3" AlignItems="AlignItems.Center">
                            <MudAvatar Size="Size.Large" Color="Color.Primary">
                                <MudIcon Icon="@Icons.Material.Filled.Person" Size="Size.Large" />
                            </MudAvatar>
                            <div>
                                <MudText Typo="Typo.h5">@($"{_userProfile.FirstName} {_userProfile.LastName}")</MudText>
                                <MudText Typo="Typo.body2" Class="mud-text-secondary">@(_userProfile.Mobile)</MudText>
                                <MudText Typo="Typo.caption" Class="mud-text-secondary">عضو از @(_userProfile.MobileVerifiedAt?.ToDateTime().MiladiToJalali())</MudText>
                            </div>
                        </MudStack>
                        <MudSpacer/>
                        <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="Financing">تامین اعتبار خرید</MudButton>
                    </MudStack>
                    

                    <!-- Referral Code Section -->
                    <MudDivider />
                    <MudStack Spacing="3">
                        <MudStack Row="true" AlignItems="AlignItems.Center">
                            <MudText Typo="Typo.subtitle1">کد دعوت شما</MudText>
                            <MudSpacer />
                            <MudButton Variant="Variant.Outlined"
                                       Color="Color.Primary"
                                       StartIcon="@Icons.Material.Filled.Share"
                                       OnClick="ShareReferralCode">
                                اشتراک‌گذاری
                            </MudButton>
                        </MudStack>
                        <MudText Typo="Typo.body2" Class="mud-text-secondary">
                            این کد را با دوستان خود به اشتراک بگذارید تا از خریدهای آنها پاداش دریافت کنید.
                        </MudText>

                        <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
                            <MudTextField @bind-Value="_userProfile.ReferralCode"
                                          Label="کد دعوت"
                                          Variant="Variant.Outlined"
                                          ReadOnly="true"
                                          Class="flex-grow-1"
                                          Adornment="Adornment.End"
                                          AdornmentIcon="@Icons.Material.Filled.ContentCopy"
                                          OnAdornmentClick="CopyReferralCode" />
                        </MudStack>

                        @if (!string.IsNullOrWhiteSpace(_copyMessage))
                        {
                            <MudText Typo="Typo.caption" Color="Color.Success">@(_copyMessage)</MudText>
                        }
                    </MudStack>
                </MudStack>
            </MudPaper>
        </MudItem>

        <!-- Wallet Highlight Row -->
        <MudItem xs="12">
            <MudPaper Elevation="3" Class="pa-4 rounded-lg gradient-border">
                <MudGrid Spacing="2" AlignItems="AlignItems.Center">
                    <MudItem xs="12" sm="6" md="4">
                        <MudStack>
                            <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">موجودی اعتباری</MudText>
                            <MudText Typo="Typo.h5" Color="Color.Primary">@_walletCredit</MudText>
                        </MudStack>
                    </MudItem>
                    <MudItem xs="12" sm="6" md="4">
                        <MudStack>
                            <MudText Typo="Typo.subtitle2" Class="mud-text-secondary">موجودی شبکه</MudText>
                            <MudText Typo="Typo.h5" Color="Color.Primary">@_walletNetwork</MudText>
                        </MudStack>
                    </MudItem>
                    <MudItem xs="12" md="4" Class="d-flex justify-end">
                        <MudButton Variant="Variant.Filled" Color="Color.Primary" StartIcon="@Icons.Material.Filled.AccountBalanceWallet" Href="@RouteConstants.Profile.Wallet">جزئیات کیف پول</MudButton>
                    </MudItem>
                </MudGrid>
            </MudPaper>
        </MudItem>

        <!-- Profile Content as tiles -->
        <MudItem xs="12">
            <MudPaper Elevation="4" Class="pa-4">
                <MudGrid Spacing="3">
                    <MudItem xs="6" sm="6" md="3">
                        <MudLink Href="@RouteConstants.Profile.Personal" Underline="Underline.None" Class="tile-link">
                            <MudCard Elevation="1" Class="rounded-lg profile-tile">
                                <MudCardContent Class="d-flex flex-column align-center pa-4">
                                    <MudIcon Icon="@Icons.Material.Filled.Person" Size="Size.Large" Color="Color.Primary" />
                                    <MudText Typo="Typo.subtitle1" Class="mt-2">اطلاعات شخصی</MudText>
                                    <MudText Typo="Typo.caption" Class="mud-text-secondary">نمایش و ویرایش اطلاعات</MudText>
                                </MudCardContent>
                            </MudCard>
                        </MudLink>
                    </MudItem>
                    <MudItem xs="6" sm="6" md="3">
                        <MudLink Href="@RouteConstants.Profile.Addresses" Underline="Underline.None" Class="tile-link">
                            <MudCard Elevation="1" Class="rounded-lg profile-tile">
                                <MudCardContent Class="d-flex flex-column align-center pa-4">
                                    <MudIcon Icon="@Icons.Material.Filled.LocationOn" Size="Size.Large" Color="Color.Primary" />
                                    <MudText Typo="Typo.subtitle1" Class="mt-2">آدرس‌ها</MudText>
                                    <MudText Typo="Typo.caption" Class="mud-text-secondary">مدیریت آدرس‌های شما</MudText>
                                </MudCardContent>
                            </MudCard>
                        </MudLink>
                    </MudItem>
                    <MudItem xs="6" sm="6" md="3">
                        <MudLink Href="@RouteConstants.Profile.Tree" Underline="Underline.None" Class="tile-link">
                            <MudCard Elevation="1" Class="rounded-lg profile-tile">
                                <MudCardContent Class="d-flex flex-column align-center pa-4">
                                    <MudIcon Icon="@Icons.Material.Filled.AccountTree" Size="Size.Large" Color="Color.Primary" />
                                    <MudText Typo="Typo.subtitle1" Class="mt-2">شجره‌نامه</MudText>
                                    <MudText Typo="Typo.caption" Class="mud-text-secondary">ساختار شبکه</MudText>
                                </MudCardContent>
                            </MudCard>
                        </MudLink>
                    </MudItem>
                    <MudItem xs="6" sm="6" md="3">
                        <MudLink Href="@RouteConstants.Profile.Settings" Underline="Underline.None" Class="tile-link">
                            <MudCard Elevation="1" Class="rounded-lg profile-tile">
                                <MudCardContent Class="d-flex flex-column align-center pa-4">
                                    <MudIcon Icon="@Icons.Material.Filled.Settings" Size="Size.Large" Color="Color.Primary" />
                                    <MudText Typo="Typo.subtitle1" Class="mt-2">تنظیمات حساب</MudText>
                                    <MudText Typo="Typo.caption" Class="mud-text-secondary">اعلان‌ها و تنظیمات</MudText>
                                </MudCardContent>
                            </MudCard>
                        </MudLink>
                    </MudItem>
                    <MudItem xs="6" sm="6" md="3">
                        <MudLink Href="@RouteConstants.Store.Products" Underline="Underline.None" Class="tile-link">
                            <MudCard Elevation="1" Class="rounded-lg profile-tile">
                                <MudCardContent Class="d-flex flex-column align-center pa-4">
                                    <MudIcon Icon="@Icons.Material.Filled.Storefront" Size="Size.Large" Color="Color.Primary" />
                                    <MudText Typo="Typo.subtitle1" Class="mt-2">فروشگاه</MudText>
                                    <MudText Typo="Typo.caption" Class="mud-text-secondary">مشاهده و خرید محصولات</MudText>
                                </MudCardContent>
                            </MudCard>
                        </MudLink>
                    </MudItem>
                    <MudItem xs="6" sm="6" md="3">
                        <MudLink Href="@RouteConstants.Profile.Wallet" Underline="Underline.None" Class="tile-link">
                            <MudCard Elevation="1" Class="rounded-lg profile-tile">
                                <MudCardContent Class="d-flex flex-column align-center pa-4">
                                    <MudIcon Icon="@Icons.Material.Filled.AccountBalanceWallet" Size="Size.Large" Color="Color.Primary" />
                                    <MudText Typo="Typo.subtitle1" Class="mt-2">کیف پول</MudText>
                                    <MudText Typo="Typo.caption" Class="mud-text-secondary">مدیریت و تاریخچه</MudText>
                                </MudCardContent>
                            </MudCard>
                        </MudLink>
                    </MudItem>
                </MudGrid>
            </MudPaper>
        </MudItem>
    </MudGrid>
</MudContainer>