<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>arcros Dashboard</title>
    <link rel="stylesheet" href="/static/style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>🚀 arcros Dashboard</h1>
            <p>Real-time ZMQ Publisher/Subscriber Monitor</p>
        </header>

        <div class="tabs">
            <button class="tab active" data-tab="overview">Overview</button>
            <button class="tab" data-tab="graph">Pub/Sub Graph</button>
            <button class="tab" data-tab="publishers">Publishers</button>
            <button class="tab" data-tab="subscriptions">Subscriptions</button>
            <button class="tab" data-tab="config">Configuration</button>
        </div>

        <!-- Overview Tab -->
        <div class="tab-content active" id="overview">
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-value" id="total-publishers">0</div>
                    <div class="stat-label">Total Publishers</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value" id="active-publishers">0</div>
                    <div class="stat-label">Active Publishers</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value" id="total-subscriptions">0</div>
                    <div class="stat-label">Total Subscriptions</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value" id="port-usage">0%</div>
                    <div class="stat-label">Port Usage</div>
                </div>
            </div>

            <h2>Publisher Status</h2>
            <div id="status-list" class="status-list"></div>
        </div>

        <!-- Graph Tab -->
        <div class="tab-content" id="graph">
            <h2>Publisher → Subscriber Relationships</h2>
            <div id="graph-container" class="graph-container"></div>
        </div>

        <!-- Publishers Tab -->
        <div class="tab-content" id="publishers">
            <div class="action-bar">
                <h2>Publishers</h2>
                <button class="btn btn-primary" onclick="showCreatePublisher()">➕ Create Publisher</button>
            </div>

            <div id="create-publisher-form" class="modal">
                <div class="modal-content">
                    <span class="close" onclick="hideCreatePublisher()">&times;</span>
                    <h3>Create New Publisher</h3>
                    <form onsubmit="createPublisher(event)">
                        <div class="form-group">
                            <label>Name:</label>
                            <input type="text" id="pub-name" required>
                        </div>
                        <div class="form-group">
                            <label>Port (optional):</label>
                            <input type="number" id="pub-port" placeholder="Auto-assign">
                        </div>
                        <div class="form-group">
                            <label>Description:</label>
                            <input type="text" id="pub-desc">
                        </div>
                        <button type="submit" class="btn btn-primary">Create</button>
                    </form>
                </div>
            </div>

            <table class="data-table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Port</th>
                        <th>Host</th>
                        <th>Status</th>
                        <th>Description</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody id="publishers-table">
                </tbody>
            </table>
        </div>

        <!-- Subscriptions Tab -->
        <div class="tab-content" id="subscriptions">
            <h2>Active Subscriptions</h2>
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Publisher</th>
                        <th>Subscriber</th>
                        <th>Host</th>
                        <th>Created</th>
                        <th>Last Active</th>
                    </tr>
                </thead>
                <tbody id="subscriptions-table">
                </tbody>
            </table>
        </div>

        <!-- Config Tab -->
        <div class="tab-content" id="config">
            <h2>Port Range Configuration</h2>
            <div class="config-section">
                <div class="config-info">
                    <div class="config-item">
                        <label>Start Port:</label>
                        <span id="config-start">5555</span>
                    </div>
                    <div class="config-item">
                        <label>End Port:</label>
                        <span id="config-end">5654</span>
                    </div>
                    <div class="config-item">
                        <label>Total Ports:</label>
                        <span id="config-count">100</span>
                    </div>
                    <div class="config-item">
                        <label>Used Ports:</label>
                        <span id="config-used">0</span>
                    </div>
                    <div class="config-item">
                        <label>Available:</label>
                        <span id="config-available">100</span>
                    </div>
                </div>

                <form class="config-form" onsubmit="updateConfig(event)">
                    <h3>Update Configuration</h3>
                    <div class="form-group">
                        <label>Start Port:</label>
                        <input type="number" id="new-start" value="5555" required>
                    </div>
                    <div class="form-group">
                        <label>Port Count:</label>
                        <input type="number" id="new-count" value="100" required min="10" max="10000">
                    </div>
                    <button type="submit" class="btn btn-primary">Update Configuration</button>
                </form>
            </div>
        </div>
    </div>

    <div class="status-indicator" id="connection-status">
        <span class="dot"></span> Connected
    </div>

    <script src="/static/app.js"></script>
</body>
</html>
