@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 (Designer)</NavLink>
        <NavLink class="dashboard-nav-link" href="dashboards/catalog-grid">Catalogs (Dashboard Grid)</NavLink>
        <NavLink class="dashboard-nav-link" href="dashboards/custom-grid">Catalogs (Custom Grid)</NavLink>
    </aside>
    <section class="dashboard-content">
        @if (SelectedDashboardId == "default")
        {
            <DxDashboard Endpoint="@DashboardEndpoint" InitialDashboardId="DefaultDashboard" WorkingMode="WorkingMode.Designer" style="width: 100%; height: 800px;">
            </DxDashboard>
        }
        else if (SelectedDashboardId == "catalog-grid")
        {
            <DxDashboard Endpoint="@DashboardEndpoint" InitialDashboardId="CatalogsGrid" WorkingMode="WorkingMode.ViewerOnly" style="width: 100%; height: 800px;">
            </DxDashboard>
        }
        else if (SelectedDashboardId == "custom-grid")
        {
            <h3>Catalogs (Custom Grid)</h3>
            <CatalogsGrid />
        }
    </section>
</div>

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

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

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