<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PlanAI Dispatcher Dashboard</title>
    <link rel="stylesheet" href="/static/styles.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mermaid@11.4.1/dist/mermaid.min.js"></script>
</head>

<body>
    <nav class="navbar">
        <h1>PlanAI Dispatcher Dashboard</h1>
        <div class="navbar-buttons">
            <div class="memory-stats">
                <span title="Current Memory Usage">Mem: <span id="current-memory">0</span> MB</span> |
                <span title="5-minute Average Memory Usage">Avg: <span id="avg-memory">0</span> MB</span> |
                <span title="Peak Memory Usage">Peak: <span id="peak-memory">0</span> MB</span>
            </div>
            <div class="graph-selector">
                <select id="graph-select" title="Select Graph">
                    <option value="0">Loading graphs...</option>
                </select>
            </div>
            <button id="quit-button">Quit</button>
            <button id="theme-toggle">Toggle Dark Mode</button>
        </div>
    </nav>

    <h2>User Input Requests</h2>
    <div id="user-input-requests" class="user-input-section">
        <!-- User request tiles will be dynamically inserted here -->
    </div>

    <div class="tab-container">
        <div class="tab-header">
            <button class="tab-button" data-target="#worker-status">Worker Status</button>
            <button class="tab-button" data-target="#worker-stats">Worker Statistics</button>
            <button class="tab-button" data-target="#worker-graph">Worker Graph</button>
            <button class="tab-button" data-target="#trace-visualization">Provenance Trace</button>
        </div>

        <div id="worker-status" class="tab-content">
            <!-- Worker status content -->
        </div>

        <div id="worker-stats" class="tab-content">
            <!-- Worker statistics content -->
        </div>
        <div id="worker-graph" class="tab-content">
            <div class="mermaid" id="mermaid-graph">
                loading...
            </div>
        </div>
        <div id="trace-visualization" class="tab-content">
            <!-- Provenance trace content -->
        </div>
    </div>

    <h2>Queued Tasks</h2>
    <div id="queued-tasks" class="task-list"></div>

    <h2>Active Tasks</h2>
    <div id="active-tasks" class="task-list"></div>

    <h2>Failed Tasks</h2>
    <div id="failed-tasks" class="task-list"></div>

    <h2>Completed Tasks</h2>
    <div id="completed-tasks" class="task-list"></div>

    <script type="module" src="/static/js/index.js"></script>
</body>

</html>