{% extends "base.html" %}

{% block title %}Add Account - KTVManager{% endblock %}

{% block head_content %}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.5/awesomplete.min.css" />
    <style>
        /* Hide the spinner by default */
        #loadingSpinner {
            display: none;
        }
    </style>
{% endblock %}

{% block sub_nav %}
    <!-- Sub-navigation for Accounts -->
    <div class="bg-light py-2">
        <div class="container">
            <ul class="nav nav-pills">
                <li class="nav-item">
                    <a class="nav-link" href="/accounts">List Accounts</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="/accounts/add">Add Account</a>
                </li>
            </ul>
        </div>
    </div>
{% endblock %}

{% block content %}
    <h1>Add Account</h1>
    <div>
    <form action="/accounts/add" method="POST" onsubmit="showLoading()">
        <div class="form-group">
            <label for="username">Username</label>
            <input type="text" class="form-control" id="username" name="username" value="{{ username }}" required>
        </div>
        <div class="form-group">
            <label for="password">Password</label>
            <input type="text" class="form-control" id="password" name="password" value="{{ password }}"  required>
        </div>
        <div class="form-group">
            <label for="stream">Stream Name</label>
            <input type="text" class="form-control" id="stream" name="stream" required>
        </div>
        <button type="submit" class="btn btn-primary" id="submitButton">
            <span class="spinner-border spinner-border-sm" id="loadingSpinner" role="status" aria-hidden="true"></span>
            <span id="buttonText">Add Account</span>
        </button>
    </form>
    {% if text_input_enabled %}
    <hr>
    <h2>Load Details Via Text</h2>
    <div class="form-group">
        <label for="accountDetails">Paste Account Details</label>
        <textarea class="form-control" id="accountDetails" rows="4" data-shared-text="{{ shared_text }}"></textarea>
    </div>
    {% endif %}
{% endblock %}

{% block scripts %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.5/awesomplete.min.js"></script>
    <script>
        function showLoading() {
            document.getElementById("submitButton").disabled = true;
            document.getElementById("loadingSpinner").style.display = "inline-block";
            document.getElementById("buttonText").textContent = "Working...";
        }

        document.addEventListener("DOMContentLoaded", function() {
            var streamInput = document.getElementById("stream");
            var awesomplete;
            fetch('/get_stream_names')
                .then(response => response.json())
                .then(data => {
                    awesomplete = new Awesomplete(streamInput, {
                        list: data
                    });

                    streamInput.addEventListener('awesomplete-selectcomplete', function(event) {
                        this.value = event.text.value;
                    });

                    const accountDetailsTextarea = document.getElementById('accountDetails');
                    if (accountDetailsTextarea) {
                        accountDetailsTextarea.addEventListener('input', function() {
                            const text = this.value;
                            const lines = text.split('\n');
                            
                            const streamName = lines[0] ? lines[0].trim() : '';
                            const usernameLine = lines.find(line => line.toUpperCase().startsWith('USER:'));
                            const passwordLine = lines.find(line => line.toUpperCase().startsWith('PASS:'));

                            if (usernameLine) {
                                document.getElementById('username').value = usernameLine.substring(5).trim();
                            }
                            if (passwordLine) {
                                document.getElementById('password').value = passwordLine.substring(5).trim();
                            }
                            
                            if (streamName) {
                                streamInput.value = streamName;
                                awesomplete.evaluate();
                                if (awesomplete.ul.children.length > 0) {
                                    awesomplete.goto(0);
                                    awesomplete.select();
                                }
                            }
                        });

                        const sharedText = accountDetailsTextarea.dataset.sharedText;

                        if (sharedText && sharedText !== 'None') {
                            accountDetailsTextarea.value = sharedText;
                            const event = new Event('input', {
                                bubbles: true,
                                cancelable: true,
                            });
                            accountDetailsTextarea.dispatchEvent(event);
                        }
                    }
                });
        });
    </script>
{% endblock %}