@inherits LayoutComponentBase

<PageTitle>کارا بازار سلامت</PageTitle>

<MudRTLProvider RightToLeft="true">
    <MudThemeProvider @ref="_mudThemeProvider" Theme="CustomMudTheme.CustomMudBlazorTheme" @bind-IsDarkMode="_isDark"/>
    <MudPopoverProvider/>
    <MudDialogProvider/>
    <MudSnackbarProvider/>
    <MudLayout>
        <!-- AppBar -->
        <MudAppBar Elevation="0" Color="Color.Transparent" Dense="true" Class="py-2" id="top">
            <MudContainer MaxWidth="MaxWidth.Large" Class="d-flex align-center justify-space-between w-100">

                <MudHidden Breakpoint="Breakpoint.SmAndUp">
                    <MudIconButton Class="d-inline"
                                   Icon="@Icons.Material.Filled.Menu"
                                   OnClick="@ToggleDrawer"/>
                </MudHidden>

                <div class="d-flex align-center gap-2">
                    <MudLink Href="@(RouteConstants.Main.MainPage)" Underline="Underline.None">
                        <MudStack Row="true" Spacing="3" AlignItems="AlignItems.Center">
                            <MudHidden Breakpoint="Breakpoint.SmAndUp" Invert="true">
                                <MudImage ObjectFit="ObjectFit.Cover"
                                          ObjectPosition="ObjectPosition.Center"
                                          Width="32"
                                          Height="32"
                                          Class="rounded-circle"
                                          Src="favicon.png"/>
                            </MudHidden>
                            <MudText Typo="Typo.h6">کارا بازار سلامت</MudText>
                        </MudStack>
                    </MudLink>
                </div>

                <div class="d-none d-md-flex align-center gap-10">
                    @if (_isAuthenticated)
                    {
                        <MudLink Href="@(RouteConstants.Store.Products)" Typo="Typo.subtitle1" Class="mud-link">
                            محصولات
                        </MudLink>
                        <MudLink Href="@(RouteConstants.Store.Cart)" Typo="Typo.subtitle1" Class="mud-link">سبد خرید
                        </MudLink>
                        <MudLink Href="@(RouteConstants.Store.Orders)" Typo="Typo.subtitle1" Class="mud-link">سفارشات
                            من
                        </MudLink>
                    }
                    <MudLink Href="@(RouteConstants.FAQ.Index)" Typo="Typo.subtitle1" Class="mud-link">سوالات متداول
                    </MudLink>
                    <MudLink Href="@(RouteConstants.Contact.Index)" Typo="Typo.subtitle1" Class="mud-link">ارتباط با
                        ما
                    </MudLink>
                    <MudLink Href="@(RouteConstants.About.Index)" Typo="Typo.subtitle1" Class="mud-link">درباره ما
                    </MudLink>
                </div>

                <div class="d-flex align-center gap-2">
                    @if (_isAuthenticated)
                    {
                        @* <MudBadge Content="@_cartCount" Color="Color.Error" Overlap="true" Visible="@(_cartCount > 0)"> *@
                        @* *@
                        @* </MudBadge> *@
                        <MudIconButton Icon="@Icons.Material.Filled.ShoppingCart" Color="@(_cartCount > 0?Color.Success:Color.Inherit)"
                                       Href="@(RouteConstants.Store.Cart)" />
                        @* دکمه بروزرسانی *@
                        @if (_hasUpdate)
                        {
                            <MudBadge Dot="true" Color="Color.Error" Overlap="true" Bordered="true">
                                <MudIconButton Icon="@Icons.Material.Filled.SystemUpdateAlt" 
                                               Color="Color.Warning" 
                                               OnClick="OpenUpdateDialog"
                                               Title="بروزرسانی موجود است"/>
                            </MudBadge>
                        }
                        <MudMenu Icon="@Icons.Material.Filled.Person" Color="Color.Inherit" Size="Size.Medium">
                            <MudMenuItem OnClick="NavigateToProfile" Disabled="@(!AuthService.IsCompleteRegister())">
                                پروفایل
                            </MudMenuItem>
                            <MudDivider/>
                            @if (_hasUpdate)
                            {
                                <MudMenuItem OnClick="OpenUpdateDialog" IconColor="Color.Warning" Icon="@Icons.Material.Filled.SystemUpdateAlt">
                                    <MudText Color="Color.Warning">بروزرسانی (@_newVersion)</MudText>
                                </MudMenuItem>
                                <MudDivider/>
                            }
                            <MudMenuItem OnClick="ToggleTheme" Icon="@(_isDark ? Icons.Material.Filled.LightMode : Icons.Material.Filled.DarkMode)">
                                @(_isDark ? "حالت روشن" : "حالت تاریک")
                            </MudMenuItem>
                            <MudDivider/>
                            <MudMenuItem OnClick="Logout">خروج از حساب</MudMenuItem>
                        </MudMenu>
                    }
                    else
                    {
                        <MudIconButton Icon="@Icons.Material.Filled.Login" Color="Color.Inherit"
                                       OnClick="OpenAuthDialog"/>
                        <MudIconButton OnClick="@ToggleTheme"
                                       Icon="@(_isDark ? Icons.Material.Filled.LightMode : Icons.Material.Filled.DarkMode)"
                                       Title="@(_isDark ? "حالت روشن" : "حالت تاریک")"/>
                    }
                </div>
            </MudContainer>
        </MudAppBar>

        <!-- Mobile Drawer -->
        <MudDrawer @bind-Open="_drawerOpen" Anchor="Anchor.Right" Elevation="1" Variant="DrawerVariant.Temporary"
                   Class="pa-4">
            <MudStack Spacing="2">
                @if (_isAuthenticated)
                {
                    <MudLink Href="@(RouteConstants.Store.Products)" Typo="Typo.subtitle1"
                             OnClick="() => _drawerOpen=false">محصولات
                    </MudLink>
                    <MudLink Href="@(RouteConstants.Store.Cart)" Typo="Typo.subtitle1"
                             OnClick="() => _drawerOpen=false">سبد خرید
                    </MudLink>
                    <MudLink Href="@(RouteConstants.Store.Orders)" Typo="Typo.subtitle1"
                             OnClick="() => _drawerOpen=false">سفارشات من
                    </MudLink>
                }
                <MudLink Href="@(RouteConstants.FAQ.Index)" Typo="Typo.subtitle1" OnClick="() => _drawerOpen=false">
                    سوالات متداول
                </MudLink>
                <MudLink Href="@(RouteConstants.About.Index)" Typo="Typo.subtitle1" OnClick="() => _drawerOpen=false">
                    درباره ما
                </MudLink>
                <MudLink Href="@(RouteConstants.Contact.Index)" Typo="Typo.subtitle1" OnClick="() => _drawerOpen=false">
                    ارتباط با ما
                </MudLink>

                <MudDivider Class="my-2"/>
                @if (_isAuthenticated)
                {
                    <MudButton Href="/profile" Color="Color.Primary" OnClick="() => _drawerOpen=false">پروفایل
                    </MudButton>
                    @if (_hasUpdate)
                    {
                        <MudButton Variant="Variant.Filled" Color="Color.Warning" 
                                   StartIcon="@Icons.Material.Filled.SystemUpdateAlt"
                                   OnClick="() => { _drawerOpen=false; OpenUpdateDialog(); }">
                            بروزرسانی (@_newVersion)
                        </MudButton>
                    }
                    <MudButton Variant="Variant.Text" 
                               StartIcon="@(_isDark ? Icons.Material.Filled.LightMode : Icons.Material.Filled.DarkMode)"
                               OnClick="ToggleTheme">
                        @(_isDark ? "حالت روشن" : "حالت تاریک")
                    </MudButton>
                    <MudButton Variant="Variant.Text" Color="Color.Error"
                               OnClick="() => { _drawerOpen=false; Logout(); }">خروج از حساب
                    </MudButton>
                }
                else
                {
                    <MudButton Color="Color.Primary" OnClick="() => { _drawerOpen=false; OpenAuthDialog(); }">ورود
                    </MudButton>
                    <MudButton Variant="Variant.Text" 
                               StartIcon="@(_isDark ? Icons.Material.Filled.LightMode : Icons.Material.Filled.DarkMode)"
                               OnClick="ToggleTheme">
                        @(_isDark ? "حالت روشن" : "حالت تاریک")
                    </MudButton>
                }
            </MudStack>
        </MudDrawer>

        <MudMainContent>
            @Body
            @if (DeviceDetector.IsDesktop())
            {
                <Footer/>
            }
        </MudMainContent>

    </MudLayout>
</MudRTLProvider>