@implements IAsyncDisposable

<div class="org-chart-wrapper">
    @* Toolbar *@
    <div class="org-chart-toolbar">
        
        
        <MudSelect T="int" @bind-Value="_selectedDepth" Label="عمق" Variant="Variant.Outlined" 
                   Dense="true" Margin="Margin.Dense" Style="width: 90px; min-width: 90px;">
            <MudSelectItem T="int" Value="2">2 سطح</MudSelectItem>
            <MudSelectItem T="int" Value="3">3 سطح</MudSelectItem>
            <MudSelectItem T="int" Value="4">4 سطح</MudSelectItem>
            <MudSelectItem T="int" Value="5">5 سطح</MudSelectItem>
            <MudSelectItem T="int" Value="6">6 سطح</MudSelectItem>
            <MudSelectItem T="int" Value="15">همه</MudSelectItem>
        </MudSelect>
        
        <MudButtonGroup Variant="Variant.Outlined" Size="Size.Small" OverrideStyles="false">
            <MudIconButton Icon="@Icons.Material.Filled.UnfoldMore" OnClick="ExpandAll" Title="باز کردن همه" Size="Size.Small" />
            <MudIconButton Icon="@Icons.Material.Filled.UnfoldLess" OnClick="CollapseAll" Title="بستن همه" Size="Size.Small" />
            <MudIconButton Icon="@Icons.Material.Filled.CenterFocusStrong" OnClick="CenterChart" Title="مرکز" Size="Size.Small" />
            <MudIconButton Icon="@Icons.Material.Filled.ZoomOutMap" OnClick="FitToScreen" Title="نمایش کامل" Size="Size.Small" />
            <MudIconButton Icon="@Icons.Material.Filled.Refresh" OnClick="RefreshData" Color="Color.Primary" Title="بروزرسانی" Size="Size.Small" />
        </MudButtonGroup>
        @if (_currentViewUserId.HasValue)
        {
            <MudButtonGroup Variant="Variant.Outlined" Size="Size.Small" OverrideStyles="false">
                <MudIconButton Icon="@Icons.Material.Filled.ArrowForward" OnClick="GoBack" Title="بازگشت" Size="Size.Small" Color="Color.Secondary" />
                <MudIconButton Icon="@Icons.Material.Filled.Home" OnClick="GoToMyTree" Title="نمودار من" Size="Size.Small" Color="Color.Secondary" />
            </MudButtonGroup>
        }
    </div>

    @* Chart Container *@
    @if (_isLoading)
    {
        <div class="chart-loading">
            <MudProgressCircular Color="Color.Primary" Indeterminate="true" />
            <MudText Typo="Typo.body2" Class="mt-2">در حال بارگذاری...</MudText>
        </div>
    }
    else if (_hasError)
    {
        <div class="error-message">
            <MudIcon Icon="@Icons.Material.Filled.Error" Color="Color.Error" Size="Size.Large" />
            <MudText Typo="Typo.body1" Class="mt-2">خطا در بارگذاری داده‌ها</MudText>
            <MudButton Variant="Variant.Text" Color="Color.Primary" OnClick="RefreshData">تلاش مجدد</MudButton>
        </div>
    }
    else
    {
        <div id="org-chart-container" class="org-chart-container"></div>
    }

    @* Stats Bar *@
    @if (_statistics != null && !_isLoading)
    {
        <div class="org-chart-stats">
            <div class="stat-item">
                <span class="stat-label">کل اعضا:</span>
                <span class="stat-value">@_statistics.TotalMembers</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">پای چپ:</span>
                <span class="stat-value left">@_statistics.LeftLegCount</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">پای راست:</span>
                <span class="stat-value right">@_statistics.RightLegCount</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">عمق:</span>
                <span class="stat-value">@_statistics.TreeDepth</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">پای ضعیف:</span>
                <span class="stat-value">@(_statistics.WeakerLeg == "Left" ? "چپ" : "راست")</span>
            </div>
        </div>
    }
</div>