{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Playground</title>
    <link rel="stylesheet" href="{% static 'playground/css/websocket.css' %}">
    <style>
        .real-url-display {
            font-style: italic;
            color: #666;
            margin-top: 5px;
            font-size: 0.9em;
            display: none; /* Initially hidden */
        }
    </style>
</head>
<body>
<div class="container">
    <h1>WebSocket Playground</h1>

    <div class="card">
        <h2>Connection</h2>
        <div class="form-group">
            <label for="wsEndpoint">Select WebSocket Endpoint:</label>
            <select id="wsEndpoint">
                <option value="">-- Select an endpoint --</option>
                <!-- Endpoints will be loaded dynamically -->
            </select>
            <div id="endpointsLoading" class="endpoints-loading" style="display: none;">
                <div class="loading"></div>
                <span>Loading available endpoints...</span>
            </div>
            <button id="refreshEndpoints" class="refresh-button">Refresh Endpoints</button>
            <div id="endpointDescription" class="endpoint-description"></div>
        </div>
        <div class="form-group">
            <label for="wsUrl">WebSocket URL:</label>
            <input type="text" id="wsUrl" placeholder="ws://example.com/ws/">
            <div id="realUrlDisplay" class="real-url-display">Real URL:</div>
        </div>

        <div class="connection-tabs">
            <div class="form-group">
                <button id="connectBtn">Connect</button>
                <button id="disconnectBtn" disabled>Disconnect</button>
                <span id="connectionStatus" class="status disconnected">Disconnected</span>
            </div>

            <div class="tab-buttons">
                <button class="tab-button active" data-tab="connection-path-params" id="pathParamsTabButton">Path
                    Params
                </button>
                <button class="tab-button" data-tab="connection-params">Query Params</button>
            </div>

            <!-- Path Params tab -->
            <div class="connection-tab-content active" id="connection-path-params">
                <div class="params-container">
                    <div class="params-headers">
                        <div class="param-key">Parameter</div>
                        <div class="param-value">Value</div>
                        <div class="param-desc">Description</div>
                        <div class="param-actions"></div>
                    </div>
                    <div id="pathParamsList">
                        <!-- Path parameters will be added here -->
                    </div>
                    <button id="addPathParamBtn" class="add-param-btn">Add Path Parameter</button>
                </div>
            </div>

            <!-- Query Params tab -->
            <div class="connection-tab-content" id="connection-params">
                <div class="params-container">
                    <div class="params-headers">
                        <div class="param-key">Key</div>
                        <div class="param-value">Value</div>
                        <div class="param-desc">Description</div>
                        <div class="param-actions"></div>
                    </div>
                    <div id="queryParamsList">
                        <!-- Query parameters will be added here -->
                    </div>
                    <button id="addQueryParamBtn" class="add-param-btn">Add Query Parameter</button>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <h2>Message</h2>

        <div class="tabs">
            <div class="tab active" data-tab="json">JSON</div>
            <div class="tab" data-tab="raw">Raw Text</div>
            <div class="tab" data-tab="file">File</div>
        </div>

        <!-- JSON Tab -->
        <div class="tab-content active" id="tab-json">
            <div class="form-group">
                <label for="messageExampleSelect">Select Message Type:</label>
                <select id="messageExampleSelect" disabled>
                    <option value="">-- Select a message type --</option>
                    <!-- Message examples will be loaded dynamically -->
                </select>
                <div id="messageExamplesLoading" class="endpoints-loading" style="display: none;">
                    <div class="loading"></div>
                    <span>Loading message examples...</span>
                </div>
                <div id="messageExampleDescription" class="endpoint-description"></div>
            </div>
            <div class="form-group">
                <label for="jsonInput">JSON Message:</label>
                <textarea id="jsonInput" class="json-editor" rows="6" placeholder='{"key": "value"}'
                          disabled></textarea>
                <div id="jsonError" class="json-error"></div>
            </div>
            <div class="form-group">
                <button id="formatJsonBtn" disabled>Format JSON</button>
                <button id="sendJsonBtn" disabled>Send JSON</button>
            </div>
        </div>

        <!-- Raw Text Tab -->
        <div class="tab-content" id="tab-raw">
            <div class="form-group">
                <label for="messageInput">Message:</label>
                <textarea id="messageInput" rows="3" placeholder="Type your message here..." disabled></textarea>
            </div>
            <div class="form-group">
                <button id="sendRawBtn" disabled>Send Message</button>
            </div>
        </div>

        <!-- File Tab -->
        <div class="tab-content" id="tab-file">
            <div class="form-group">
                <label for="fileInput">Select File:</label>
                <input type="file" id="fileInput" disabled>
                <div id="fileInfo" class="file-info"></div>
            </div>
            <div class="form-group">
                <button id="sendFileBtn" disabled>Send File</button>
            </div>
        </div>
    </div>

    <div class="card">
        <h2>Message History</h2>
        <div id="messageLog" class="message-log"></div>
    </div>
</div>

<!-- Load the JavaScript file and initialize the playground -->
<script type="module" src="{% static 'playground/js/websocket.js' %}"></script>
<script>
    // Initialize the WebSocket playground with the Django template variable
    document.addEventListener('DOMContentLoaded', function () {
        window.initWebSocketPlayground("{{ websocket_info_url|safe }}");
    });
</script>
</body>
</html>
