@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">
                        <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>

                    <!-- Referral Code Section -->
                    <MudDivider />
                    <MudStack Spacing="3">
                        <MudStack Row="true" AlignItems="AlignItems.Center">
                            <MudText Typo="Typo.subtitle1">کد دعوت شما</MudText>
                            <MudSpacer />
                            <MudButton Variant="Variant.Filled"
                                       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>

        <!-- Profile Content -->
        <MudItem xs="12">
            <MudPaper Elevation="4" Class=" ">
                <MudTabs Elevation="0" Rounded="true" ApplyEffectsToContainer="true" Class="px-4 pt-4">
                    <!-- Personal Information Tab -->
                    <MudTabPanel Text="اطلاعات شخصی" Icon="@Icons.Material.Filled.Person">
                        <div class="pa-4">
                            <MudForm @ref="_personalForm" Model="_updateUserRequest" Validation="@(_personalValidator.ValidateValue)">
                                <MudGrid Spacing="3">
                                    <MudItem xs="12" md="6">
                                        <MudTextField @bind-Value="_updateUserRequest.FirstName"
                                                      For="@(() => _updateUserRequest.FirstName)"
                                                      Label="نام"
                                                      Variant="Variant.Outlined" />
                                    </MudItem>

                                    <MudItem xs="12" md="6">
                                        <MudTextField @bind-Value="_updateUserRequest.LastName"
                                                      For="@(() => _updateUserRequest.LastName)"
                                                      Label="نام خانوادگی"
                                                      Variant="Variant.Outlined" />
                                    </MudItem>

                                    <MudItem xs="12" md="6">
                                        <MudTextField @bind-Value="_updateUserRequest.NationalCode"
                                                      For="@(() => _updateUserRequest.NationalCode)"
                                                      Label="کد ملی"
                                                      Variant="Variant.Outlined"
                                                      InputType="InputType.Text" />
                                    </MudItem>

                                    <MudItem xs="12" md="6">
                                        <MudDatePicker Label="تاریخ تولد"
                                                       @bind-Date="_date"
                                                       OpenTo="OpenTo.Year"
                                                       Variant="Variant.Outlined"
                                                       Culture="@Extensions.GetPersianCulture()"
                                                       TitleDateFormat="dddd, dd MMMM" />
                                    </MudItem>
                                </MudGrid>

                                <MudStack Row="true" Spacing="2" Justify="Justify.FlexEnd" Class="mt-4">
                                    <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="SavePersonalInfo" Disabled="_isPersonalSaving">
                                        ذخیره تغییرات
                                    </MudButton>
                                </MudStack>
                            </MudForm>
                        </div>
                    </MudTabPanel>

                    <!-- Address Management Tab -->
                    <MudTabPanel Text="آدرس‌ها" Icon="@Icons.Material.Filled.LocationOn">
                        <div class="pa-4">
                            <MudStack Spacing="4">
                                <!-- Add New Address Button -->
                                <MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
                                    <MudText Typo="Typo.subtitle1" >آدرس‌های شما</MudText>
                                    <MudButton Variant="Variant.Filled"
                                               Color="Color.Primary"
                                               StartIcon="@Icons.Material.Filled.Add"
                                               OnClick="OpenAddAddressDialog">
                                        افزودن آدرس جدید
                                    </MudButton>
                                </MudStack>

                                <!-- Address List -->
                                @if (_isLoadingAddresses)
                                {
                                    <MudStack AlignItems="AlignItems.Center" Class="py-8">
                                        <MudProgressCircular Color="Color.Primary" Indeterminate="true" Size="Size.Large" />
                                        <MudText Typo="Typo.body1" Class="mud-text-secondary mt-2">در حال بارگذاری آدرس‌ها...</MudText>
                                    </MudStack>
                                }
                                else if (_addresses.Any())
                                {
                                    <MudStack Spacing="3">
                                        @foreach (var address in _addresses)
                                        {
                                            <MudPaper Elevation="2" Class="pa-4 rounded-xl " Outlined="true">
                                                <MudStack Spacing="3">
                                                    <MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Start">
                                                        <MudStack Spacing="1">
                                                            <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
                                                                <MudText Typo="Typo.h6" >@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>

                                                        <MudMenu Icon="@Icons.Material.Filled.MoreVert" Size="Size.Small" AnchorOrigin="Origin.TopRight">
                                                            <MudMenuItem OnClick="@(() => OpenEditAddressDialog(address))">ویرایش</MudMenuItem>
                                                            @if (!address.IsDefault)
                                                            {
                                                                <MudMenuItem OnClick="@(() => SetAsDefaultAddress(address.Id))">تنظیم به عنوان پیش‌فرض</MudMenuItem>
                                                            }
                                                            <MudDivider />
                                                            <MudMenuItem OnClick="@(() => DeleteAddress(address.Id))" Class="mud-text-error">حذف</MudMenuItem>
                                                        </MudMenu>
                                                    </MudStack>
                                                </MudStack>
                                            </MudPaper>
                                        }
                                    </MudStack>
                                }
                                else
                                {
                                    <MudStack AlignItems="AlignItems.Center" Class="py-8">
                                        <MudIcon Icon="@Icons.Material.Filled.LocationOff" Size="Size.Large" Color="Color.Default" />
                                        <MudText Typo="Typo.body1" Class="mud-text-secondary mt-2">هنوز آدرسی ثبت نکرده‌اید.</MudText>
                                        <MudButton Variant="Variant.Outlined"
                                                   Color="Color.Primary"
                                                   StartIcon="@Icons.Material.Filled.Add"
                                                   OnClick="OpenAddAddressDialog"
                                                   Class="mt-2">
                                            افزودن اولین آدرس
                                        </MudButton>
                                    </MudStack>
                                }
                            </MudStack>
                        </div>
                    </MudTabPanel>

                    <!-- Organization Chart Tab -->
                    <MudTabPanel Text="شجره‌نامه" Icon="@Icons.Material.Filled.AccountTree">
                        <div class="pa-4">
                            <OrganizationChart />
                        </div>
                    </MudTabPanel>

                    <!-- Account Settings Tab -->
                    <MudTabPanel Text="تنظیمات حساب" Icon="@Icons.Material.Filled.Settings">
                        <div class="pa-4">

                            <MudStack Spacing="4">
                                <!-- Notification Settings -->
                                <MudPaper Outlined="true" Class="pa-4 rounded-lg">
                                    <MudText Typo="Typo.subtitle1" Class="mb-3">اعلان‌ها</MudText>
                                    <MudStack Spacing="2">
                                        <MudSwitch T="bool"
                                                   @bind-Value="_updateUserRequest.EmailNotifications"
                                                   Color="Color.Primary"
                                                   Label="اعلان‌های ایمیلی" />
                                        <MudSwitch T="bool"
                                                   @bind-Value="_updateUserRequest.SmsNotifications"
                                                   Color="Color.Primary"
                                                   Label="اعلان‌های پیامکی" />
                                        <MudSwitch T="bool"
                                                   @bind-Value="_updateUserRequest.PushNotifications"
                                                   Color="Color.Primary"
                                                   Label="اعلان‌های پوش" />
                                    </MudStack>
                                </MudPaper>
                                @*
                                <!-- Privacy Settings -->
                                <MudPaper Outlined="true" Class="pa-4 rounded-lg">
                                <MudText Typo="Typo.subtitle1" Class="mb-3">حریم خصوصی</MudText>
                                <MudStack Spacing="2">
                                <MudSwitch T="bool" @bind-Checked="_settings.ProfileVisibility" Label="نمایش پروفایل عمومی" />
                                <MudSwitch T="bool" @bind-Checked="_settings.ShowOnlineStatus" Label="نمایش وضعیت آنلاین" />
                                </MudStack>
                                </MudPaper>

                                <!-- Language & Theme -->
                                <MudPaper Outlined="true" Class="pa-4 rounded-lg">
                                <MudText Typo="Typo.subtitle1" Class="mb-3">زبان و تم</MudText>
                                <MudGrid Spacing="3">
                                <MudItem xs="12" md="6">
                                <MudSelect @bind-Value="_settings.Language" Label="زبان" Variant="Variant.Outlined">
                                <MudSelectItem Value="@("fa")">فارسی</MudSelectItem>
                                <MudSelectItem Value="@("en")">English</MudSelectItem>
                                </MudSelect>
                                </MudItem>
                                <MudItem xs="12" md="6">
                                <MudSelect @bind-Value="_settings.Theme" Label="تم" Variant="Variant.Outlined">
                                <MudSelectItem Value="@("light")">روشن</MudSelectItem>
                                <MudSelectItem Value="@("dark")">تیره</MudSelectItem>
                                <MudSelectItem Value="@("auto")">خودکار</MudSelectItem>
                                </MudSelect>
                                </MudItem>
                                </MudGrid>
                                </MudPaper> *@

                                <MudStack Row="true" Spacing="2" Justify="Justify.FlexEnd">
                                    <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="SaveSettings" Disabled="_isSettingsSaving">
                                        ذخیره تنظیمات
                                    </MudButton>
                                </MudStack>
                            </MudStack>
                        </div>
                    </MudTabPanel>

                    <!-- Statistics Tab -->
                    @*                         <MudTabPanel Text="آمار و اطلاعات" Icon="@Icons.Material.Filled.BarChart">
                    <div class="pa-4">
                    <MudText Typo="Typo.h6" Class="mb-4">آمار حساب کاربری</MudText>

                    <MudGrid Spacing="3">
                    <MudItem xs="12" md="6" lg="3">
                    <MudPaper Elevation="3" Class="pa-4 text-center rounded-xl ">
                    <MudIcon Icon="@Icons.Material.Filled.DateRange" Size="Size.Large" Color="Color.Primary" Class="mb-2" />
                    <MudText Typo="Typo.h4">@_userProfile.JoinDate</MudText>
                    <MudText Typo="Typo.caption" Class="mud-text-secondary">تاریخ عضویت</MudText>
                    </MudPaper>
                    </MudItem>

                    <MudItem xs="12" md="6" lg="3">
                    <MudPaper Elevation="3" Class="pa-4 text-center rounded-xl ">
                    <MudIcon Icon="@Icons.Material.Filled.Login" Size="Size.Large" Color="Color.Success" Class="mb-2" />
                    <MudText Typo="Typo.h4">@_userProfile.LastLogin</MudText>
                    <MudText Typo="Typo.caption" Class="mud-text-secondary">آخرین ورود</MudText>
                    </MudPaper>
                    </MudItem>

                    <MudItem xs="12" md="6" lg="3">
                    <MudPaper Elevation="3" Class="pa-4 text-center rounded-xl ">
                    <MudIcon Icon="@Icons.Material.Filled.Group" Size="Size.Large" Color="Color.Info" Class="mb-2" />
                    <MudText Typo="Typo.h4">@_userProfile.TotalReferrals</MudText>
                    <MudText Typo="Typo.caption" Class="mud-text-secondary">معرف‌ها</MudText>
                    </MudPaper>
                    </MudItem>

                    <MudItem xs="12" md="6" lg="3">
                    <MudPaper Elevation="3" Class="pa-4 text-center rounded-xl ">
                    <MudIcon Icon="@Icons.Material.Filled.Star" Size="Size.Large" Color="Color.Warning" Class="mb-2" />
                    <MudText Typo="Typo.h4">@_userProfile.Level</MudText>
                    <MudText Typo="Typo.caption" Class="mud-text-secondary">سطح کاربری</MudText>
                    </MudPaper>
                    </MudItem>
                    </MudGrid>

                    <!-- Account Status -->
                    <MudPaper Elevation="2" Class="pa-4 mt-4 rounded-xl ">
                    <MudText Typo="Typo.subtitle1" Class="mb-3">وضعیت حساب</MudText>
                    <MudStack Spacing="2">
                    <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
                    <MudIcon Icon="@Icons.Material.Filled.CheckCircle" Size="Size.Small" Color="Color.Success" />
                    <MudText Typo="Typo.body2">حساب تأیید شده</MudText>
                    </MudStack>
                    <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
                    <MudIcon Icon="@Icons.Material.Filled.CheckCircle" Size="Size.Small" Color="Color.Success" />
                    <MudText Typo="Typo.body2">ایمیل تأیید شده</MudText>
                    </MudStack>
                    <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
                    <MudIcon Icon="@Icons.Material.Filled.CheckCircle" Size="Size.Small" Color="Color.Success" />
                    <MudText Typo="Typo.body2">شماره موبایل تأیید شده</MudText>
                    </MudStack>
                    </MudStack>
                    </MudPaper>
                    </div>
                    </MudTabPanel>
                    *@
                </MudTabs>
            </MudPaper>
        </MudItem>
    </MudGrid>
</MudContainer>