@page "/dashboard"
@page "/dashboards/{DashboardId?}"
@inject Microsoft.Extensions.Configuration.IConfiguration Configuration
@inject NavigationManager Navigation

<style>
    .dashboard-shell {
        display: flex;
        gap: 0;
        min-height: 800px;
        border: 1px solid #e6e6e6;
        border-radius: 6px;
        overflow: hidden;
        background: #fff;
    }
    .dashboard-nav {
        width: 220px;
        border-right: 1px solid #e6e6e6;
        background: #fafafa;
    }
    .dashboard-nav-title {
        padding: 0.75rem 1rem 0.5rem;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #6c757d;
        font-weight: 600;
    }
    .dashboard-nav-link {
        display: block;
        padding: 0.55rem 1rem;
        color: inherit;
        text-decoration: none;
    }
    .dashboard-nav-link.active {
        background: #e9ecef;
        font-weight: 600;
    }
    .dashboard-content {
        flex: 1;
        min-width: 0;
        padding: 1rem;
    }
</style>

<PageTitle>Dashboards</PageTitle>

<div class="dashboard-shell">
    <aside class="dashboard-nav">
        <div class="dashboard-nav-title">Dashboards</div>
        <NavLink class="dashboard-nav-link" href="dashboards/default">Default Dashboard</NavLink>
    </aside>
    <section class="dashboard-content">
        <div class="mb-3">
            <DxButton RenderStyle="ButtonRenderStyle.Primary" Click="@ToggleMode">
                @(IsDesigner ? "Zum Viewer wechseln" : "Zum Designer wechseln")
            </DxButton>
        </div>
        <DxDashboard @key="DashboardKey" Endpoint="@DashboardEndpoint" InitialDashboardId="DefaultDashboard" WorkingMode="@CurrentMode" style="width: 100%; height: 800px;">
        </DxDashboard>
    </section>
</div>

@code {
    [Parameter] public string? DashboardId { get; set; }
    [SupplyParameterFromQuery] public string? Mode { get; set; }

    private bool IsDesigner => !string.Equals(Mode, "viewer", StringComparison.OrdinalIgnoreCase);
    private WorkingMode CurrentMode => IsDesigner ? WorkingMode.Designer : WorkingMode.ViewerOnly;
    private string DashboardKey => $"DefaultDashboard-{(IsDesigner ? "designer" : "viewer")}";


    private string DashboardEndpoint => $"{Configuration["ApiBaseUrl"]?.TrimEnd('/')}/api/dashboard";

    protected override void OnParametersSet()
    {
        if (!string.Equals(DashboardId, "default", StringComparison.OrdinalIgnoreCase))
        {
            Navigation.NavigateTo("dashboards/default", replace: true);
        }
    }

    private void ToggleMode()
    {
        var targetMode = IsDesigner ? "viewer" : "designer";
        Navigation.NavigateTo($"dashboards/default?mode={targetMode}", replace: true);
    }
}