export const DASHBOARD_PRIMARY_NAV_PAGES = [
    { id: "overview", label: "Overview", permission: "inspect" },
    { id: "chat", label: "Chat", permission: "sessions.read" },
    { id: "workflows", label: "Workflows", permission: "workflows.read" },
    { id: "sessions", label: "Sessions", permission: "sessions.read" },
    { id: "queue", label: "Queue", permission: "queue.read" },
    { id: "monitor", label: "Monitor", permission: "inspect" },
];
export const DASHBOARD_NAV_SECTIONS = [
    {
        id: "operations",
        label: "Operations",
        pages: [
            { id: "adapters", label: "Adapters", permission: "inspect" },
            { id: "version", label: "Version", permission: "inspect" },
            { id: "logs", label: "Logs", permission: "logs.read" },
            { id: "metrics", label: "Metrics", permission: "inspect" },
            { id: "diagnostics", label: "Diagnostics", permission: "diagnostics.read" },
        ],
    },
    {
        id: "administration",
        label: "Administration",
        pages: [
            { id: "access", label: "Users", permission: "users.read" },
            { id: "settings", label: "Settings", permission: "settings.read" },
            { id: "peers", label: "Peers", permission: "peers.read" },
        ],
    },
    {
        id: "plugins",
        label: "Plugins",
        pages: [
            { id: "plugins", label: "Plugins", permission: "plugins.read" },
        ],
    },
];
export const DASHBOARD_PAGES = [
    ...DASHBOARD_PRIMARY_NAV_PAGES,
    ...DASHBOARD_NAV_SECTIONS.flatMap((section) => section.pages),
];
function renderDashboardPageButton(page, activePage) {
    const label = page.id === "overview"
        ? `<span class="nav-label">${page.label}</span><span id="overviewActiveBadge" class="nav-badge" aria-hidden="true" hidden>0</span>`
        : page.id === "queue"
            ? `<span class="nav-label">${page.label}</span><span id="queueNavBadge" class="nav-badge" aria-hidden="true" hidden>0</span>`
            : `<span class="nav-label">${page.label}</span>`;
    return `<button type="button" data-page="${page.id}" data-permission="${page.permission}"${page.id === activePage ? ' class="active"' : ""}>${label}</button>`;
}
function renderDashboardNavSection(section, activePage) {
    const isOpen = section.defaultOpen === true || section.pages.some((page) => page.id === activePage);
    const itemsId = `nav-section-${section.id}`;
    return `<div class="nav-section" data-nav-section="${section.id}" data-nav-open="${isOpen ? "true" : "false"}" data-nav-default-open="${section.defaultOpen === true ? "true" : "false"}">
          <button type="button" class="nav-section-toggle" data-nav-toggle="${section.id}" aria-expanded="${isOpen ? "true" : "false"}" aria-controls="${itemsId}">${section.label}</button>
          <div class="nav-section-items" id="${itemsId}"${isOpen ? "" : " hidden"}>
            ${section.pages.map((page) => renderDashboardPageButton(page, activePage)).join("\n            ")}
            ${section.id === "plugins" ? '<div id="pluginPanelNavItems" class="plugin-panel-nav-items" aria-label="Plugin panels"></div>' : ""}
          </div>
        </div>`;
}
export function renderDashboardNav(activePage = "overview") {
    const primary = `<div class="nav-primary">
            ${DASHBOARD_PRIMARY_NAV_PAGES.map((page) => renderDashboardPageButton(page, activePage)).join("\n            ")}
          </div>`;
    const sections = DASHBOARD_NAV_SECTIONS.map((section) => renderDashboardNavSection(section, activePage)).join("\n        ");
    return `${primary}\n        ${sections}`;
}
