@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="2" Class="pa-4 rounded-2xl">
                <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" Class="fw-700">@_userProfile.FirstName @_userProfile.LastName</MudText>
                        <MudText Typo="Typo.body2" Class="muted">@_userProfile.Email</MudText>
                        <MudText Typo="Typo.caption" Class="muted">عضو از @_userProfile.JoinDate</MudText>
                    </div>
                </MudStack>
            </MudPaper>
        </MudItem>

        <!-- Profile Content -->
        <MudItem xs="12">
            <MudPaper Elevation="2" Class="rounded-2xl">
                <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">
                            <MudText Typo="Typo.h6" Class="mb-4 fw-700">اطلاعات شخصی</MudText>

                            <MudForm @ref="_personalForm" Model="_userProfile" Validation="@((Func<object, IEnumerable<FluentValidation.Results.ValidationFailure>>)((model) => _personalValidator.Validate((UserProfile)model).Errors))">
                                <MudGrid Spacing="3">
                                    <MudItem xs="12" md="6">
                                        <MudTextField @bind-Value="_userProfile.FirstName"
                                                      For="@(() => _userProfile.FirstName)"
                                                      Label="نام"
                                                      Variant="Variant.Outlined"
                                                      Required="true"
                                                      RequiredError="وارد کردن نام الزامی است." />
                                    </MudItem>

                                    <MudItem xs="12" md="6">
                                        <MudTextField @bind-Value="_userProfile.LastName"
                                                      For="@(() => _userProfile.LastName)"
                                                      Label="نام خانوادگی"
                                                      Variant="Variant.Outlined"
                                                      Required="true"
                                                      RequiredError="وارد کردن نام خانوادگی الزامی است." />
                                    </MudItem>

                                    <MudItem xs="12" md="6">
                                        <MudTextField @bind-Value="_userProfile.Email"
                                                      For="@(() => _userProfile.Email)"
                                                      Label="ایمیل"
                                                      Variant="Variant.Outlined"
                                                      InputType="InputType.Email"
                                                      Required="true"
                                                      RequiredError="وارد کردن ایمیل الزامی است." />
                                    </MudItem>

                                    <MudItem xs="12" md="6">
                                        <MudTextField @bind-Value="_userProfile.PhoneNumber"
                                                      For="@(() => _userProfile.PhoneNumber)"
                                                      Label="شماره موبایل"
                                                      Variant="Variant.Outlined"
                                                      InputType="InputType.Text"
                                                      Required="true"
                                                      RequiredError="وارد کردن شماره موبایل الزامی است." />
                                    </MudItem>

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

                                    <MudItem xs="12" md="6">
                                        <MudTextField @bind-Value="_userProfile.BirthDate"
                                                      For="@(() => _userProfile.BirthDate)"
                                                      Label="تاریخ تولد"
                                                      Variant="Variant.Outlined"
                                                      InputType="InputType.Date" />
                                    </MudItem>

                                    <MudItem xs="12">
                                        <MudTextField @bind-Value="_userProfile.Address"
                                                      For="@(() => _userProfile.Address)"
                                                      Label="آدرس"
                                                      Variant="Variant.Outlined"
                                                      Lines="3"
                                                      InputType="InputType.Text" />
                                    </MudItem>
                                </MudGrid>

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

                    <!-- Password Change Tab -->
                    <MudTabPanel Text="تغییر رمز عبور" Icon="@Icons.Material.Filled.Lock">
                        <div class="pa-4">
                            <MudText Typo="Typo.h6" Class="mb-4 fw-700">تغییر رمز عبور</MudText>

                            <MudForm @ref="_passwordForm" Model="_passwordModel" Validation="@((Func<object, IEnumerable<FluentValidation.Results.ValidationFailure>>)((model) => _passwordValidator.Validate((PasswordChangeModel)model).Errors))">
                                <MudGrid Spacing="3">
                                    <MudItem xs="12">
                                        <MudTextField @bind-Value="_passwordModel.CurrentPassword"
                                                      For="@(() => _passwordModel.CurrentPassword)"
                                                      Label="رمز عبور فعلی"
                                                      Variant="Variant.Outlined"
                                                      InputType="InputType.Password"
                                                      Required="true"
                                                      RequiredError="وارد کردن رمز عبور فعلی الزامی است." />
                                    </MudItem>

                                    <MudItem xs="12" md="6">
                                        <MudTextField @bind-Value="_passwordModel.NewPassword"
                                                      For="@(() => _passwordModel.NewPassword)"
                                                      Label="رمز عبور جدید"
                                                      Variant="Variant.Outlined"
                                                      InputType="InputType.Password"
                                                      Required="true"
                                                      RequiredError="وارد کردن رمز عبور جدید الزامی است." />
                                    </MudItem>

                                    <MudItem xs="12" md="6">
                                        <MudTextField @bind-Value="_passwordModel.ConfirmPassword"
                                                      For="@(() => _passwordModel.ConfirmPassword)"
                                                      Label="تکرار رمز عبور جدید"
                                                      Variant="Variant.Outlined"
                                                      InputType="InputType.Password"
                                                      Required="true"
                                                      RequiredError="تکرار رمز عبور جدید الزامی است." />
                                    </MudItem>
                                </MudGrid>

                                <MudStack Row="true" Spacing="2" Justify="Justify.FlexEnd" Class="mt-4">
                                    <MudButton Variant="Variant.Outlined" Color="Color.Secondary" OnClick="CancelPasswordChange">
                                        لغو
                                    </MudButton>
                                    <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="ChangePassword" Disabled="_isPasswordChanging">
                                        تغییر رمز عبور
                                    </MudButton>
                                </MudStack>
                            </MudForm>
                        </div>
                    </MudTabPanel>

                    <!-- Account Settings Tab -->
                    <MudTabPanel Text="تنظیمات حساب" Icon="@Icons.Material.Filled.Settings">
                        <div class="pa-4">
                            <MudText Typo="Typo.h6" Class="mb-4 fw-700">تنظیمات حساب</MudText>

                            <MudStack Spacing="4">
                                <!-- Notification Settings -->
                                <MudPaper Outlined="true" Class="pa-4 rounded-lg">
                                    <MudText Typo="Typo.subtitle1" Class="mb-3 fw-600">اعلان‌ها</MudText>
                                    <MudStack Spacing="2">
                                        <MudSwitch T="bool" @bind-Checked="_settings.EmailNotifications" Label="اعلان‌های ایمیلی" />
                                        <MudSwitch T="bool" @bind-Checked="_settings.SmsNotifications" Label="اعلان‌های پیامکی" />
                                        <MudSwitch T="bool" @bind-Checked="_settings.PushNotifications" Label="اعلان‌های پوش" />
                                    </MudStack>
                                </MudPaper>

                                <!-- Privacy Settings -->
                                <MudPaper Outlined="true" Class="pa-4 rounded-lg">
                                    <MudText Typo="Typo.subtitle1" Class="mb-3 fw-600">حریم خصوصی</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 fw-600">زبان و تم</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.Outlined" Color="Color.Secondary" OnClick="CancelSettingsChanges">
                                        لغو
                                    </MudButton>
                                    <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 fw-700">آمار حساب کاربری</MudText>

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

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

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

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

                            <!-- Account Status -->
                            <MudPaper Outlined="true" Class="pa-4 mt-4 rounded-lg">
                                <MudText Typo="Typo.subtitle1" Class="mb-3 fw-600">وضعیت حساب</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>