{% extends "base.html" %}

{% block title %}Edit Go Links{% endblock %}

{% block max_width %}920px{% endblock %}

{% block extra_styles %}
    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .header-actions {
        display: flex;
        gap: 8px;
        margin-top: 4px;
    }

    .link-card {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 18px 20px;
        margin-bottom: 10px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

    .link-card:hover {
        border-color: #cbd5e1;
    }

    .link-card:focus-within {
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.08);
    }

    .link-row {
        display: flex;
        gap: 12px;
        align-items: flex-end;
    }

    .field-group {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .field-group label {
        font-size: 11px;
        font-weight: 600;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .field-group input {
        padding: 9px 12px;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        font-size: 14px;
        font-family: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
        color: #1e293b;
        background: #f8fafc;
        transition: all 0.15s ease;
    }

    .field-group input::placeholder {
        color: #cbd5e1;
    }

    .field-group input:focus {
        outline: none;
        border-color: #93c5fd;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.08);
    }

    .field-name { flex: 0 0 160px; }
    .field-url { flex: 1; }

    .template-toggle {
        display: flex;
        align-items: center;
        gap: 7px;
        padding-bottom: 2px;
    }

    .template-toggle input[type="checkbox"] {
        width: 16px;
        height: 16px;
        accent-color: #3b82f6;
        cursor: pointer;
    }

    .template-toggle label {
        font-size: 13px;
        color: #64748b;
        cursor: pointer;
        white-space: nowrap;
        user-select: none;
    }

    .defaults-section {
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid #f1f5f9;
    }

    .defaults-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }

    .defaults-header span {
        font-size: 11px;
        font-weight: 600;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .default-row {
        display: flex;
        gap: 8px;
        align-items: center;
        margin-bottom: 6px;
    }

    .default-row input {
        padding: 7px 10px;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        font-size: 13px;
        font-family: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
        color: #1e293b;
        background: #f8fafc;
        transition: all 0.15s ease;
    }

    .default-row input::placeholder {
        color: #cbd5e1;
    }

    .default-row input:focus {
        outline: none;
        border-color: #93c5fd;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.08);
    }

    .default-key { width: 130px; }
    .default-value { flex: 1; }

    .bottom-bar {
        display: flex;
        gap: 10px;
        align-items: center;
        margin-top: 24px;
    }

    .message {
        padding: 12px 18px;
        border-radius: 10px;
        margin-top: 16px;
        font-size: 14px;
        font-weight: 500;
        display: none;
        transition: opacity 0.2s ease;
    }

    .message-success {
        background: #f0fdf4;
        color: #166534;
        border: 1px solid #bbf7d0;
    }

    .message-error {
        background: #fef2f2;
        color: #991b1b;
        border: 1px solid #fecaca;
    }

    .message.visible { display: block; }

    .empty-state {
        text-align: center;
        color: #94a3b8;
        padding: 48px 24px;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
    }

    .empty-state p {
        font-size: 15px;
    }
{% endblock %}

{% block content %}
    <div class="page-header">
        <div>
            <h1>Edit Links</h1>
            <div class="subtitle">{{ config_path }}</div>
        </div>
        <div class="header-actions">
            <a href="/" class="btn btn-secondary">&larr; Back</a>
        </div>
    </div>

    <div id="links-container"></div>

    <div id="empty-state" class="empty-state" style="display:none;">
        <p>No links configured. Click "Add Link" to create one.</p>
    </div>

    <div class="bottom-bar">
        <button class="btn btn-secondary" id="add-link-btn" type="button">+ Add Link</button>
        <button class="btn btn-primary" id="save-btn" type="button">Save Changes</button>
    </div>

    <div id="message" class="message"></div>

    <script>
    (function() {
        var links = {{ links | tojson }};

        var container = document.getElementById('links-container');
        var emptyState = document.getElementById('empty-state');
        var messageEl = document.getElementById('message');

        function showMessage(text, isSuccess) {
            messageEl.textContent = text;
            messageEl.className = 'message visible ' + (isSuccess ? 'message-success' : 'message-error');
            setTimeout(function() { messageEl.className = 'message'; }, 4000);
        }

        function renderAll() {
            container.innerHTML = '';
            if (links.length === 0) {
                emptyState.style.display = '';
            } else {
                emptyState.style.display = 'none';
                for (var i = 0; i < links.length; i++) {
                    container.appendChild(createCard(i));
                }
            }
        }

        function createCard(index) {
            var link = links[index];
            var card = document.createElement('div');
            card.className = 'link-card';
            card.setAttribute('data-index', index);

            var row = document.createElement('div');
            row.className = 'link-row';

            // Name field
            var nameGroup = document.createElement('div');
            nameGroup.className = 'field-group field-name';
            var nameLabel = document.createElement('label');
            nameLabel.textContent = 'Shortcut';
            var nameInput = document.createElement('input');
            nameInput.type = 'text';
            nameInput.value = link.name;
            nameInput.placeholder = 'e.g. github';
            nameInput.setAttribute('data-field', 'name');
            nameInput.addEventListener('input', function(e) {
                links[index].name = e.target.value;
            });
            nameGroup.appendChild(nameLabel);
            nameGroup.appendChild(nameInput);

            // URL field
            var urlGroup = document.createElement('div');
            urlGroup.className = 'field-group field-url';
            var urlLabel = document.createElement('label');
            urlLabel.textContent = link.is_template ? 'Template URL' : 'URL';
            var urlInput = document.createElement('input');
            urlInput.type = 'text';
            urlInput.value = link.url;
            urlInput.placeholder = link.is_template ? 'e.g. https://example.com/{1}/page' : 'e.g. https://github.com';
            urlInput.setAttribute('data-field', 'url');
            urlInput.addEventListener('input', function(e) {
                links[index].url = e.target.value;
            });
            urlGroup.appendChild(urlLabel);
            urlGroup.appendChild(urlInput);

            // Template toggle
            var toggleWrap = document.createElement('div');
            toggleWrap.className = 'template-toggle';
            var checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            checkbox.checked = link.is_template;
            checkbox.id = 'tmpl-' + index;
            checkbox.addEventListener('change', function(e) {
                links[index].is_template = e.target.checked;
                if (!e.target.checked) {
                    links[index].defaults = {};
                }
                renderAll();
            });
            var toggleLabel = document.createElement('label');
            toggleLabel.htmlFor = 'tmpl-' + index;
            toggleLabel.textContent = 'Template';
            toggleWrap.appendChild(checkbox);
            toggleWrap.appendChild(toggleLabel);

            // Delete button
            var delBtn = document.createElement('button');
            delBtn.type = 'button';
            delBtn.className = 'btn btn-danger btn-sm';
            delBtn.textContent = 'Remove';
            delBtn.addEventListener('click', function() {
                links.splice(index, 1);
                renderAll();
            });

            row.appendChild(nameGroup);
            row.appendChild(urlGroup);
            row.appendChild(toggleWrap);
            row.appendChild(delBtn);
            card.appendChild(row);

            // Defaults section (only for templates)
            if (link.is_template) {
                var defaultsSection = document.createElement('div');
                defaultsSection.className = 'defaults-section';

                var header = document.createElement('div');
                header.className = 'defaults-header';
                var headerLabel = document.createElement('span');
                headerLabel.textContent = 'Default Values';
                var addDefaultBtn = document.createElement('button');
                addDefaultBtn.type = 'button';
                addDefaultBtn.className = 'btn btn-secondary btn-sm';
                addDefaultBtn.textContent = '+ Add Default';
                addDefaultBtn.addEventListener('click', function() {
                    links[index].defaults[''] = '';
                    renderAll();
                });
                header.appendChild(headerLabel);
                header.appendChild(addDefaultBtn);
                defaultsSection.appendChild(header);

                var keys = Object.keys(link.defaults);
                for (var k = 0; k < keys.length; k++) {
                    (function(oldKey) {
                        var defRow = document.createElement('div');
                        defRow.className = 'default-row';

                        var keyInput = document.createElement('input');
                        keyInput.type = 'text';
                        keyInput.className = 'default-key';
                        keyInput.value = oldKey;
                        keyInput.placeholder = 'key';
                        keyInput.setAttribute('data-field', 'default-key');
                        keyInput.addEventListener('change', function(e) {
                            var newKey = e.target.value;
                            var val = links[index].defaults[oldKey];
                            delete links[index].defaults[oldKey];
                            if (newKey) {
                                links[index].defaults[newKey] = val;
                            }
                            renderAll();
                        });

                        var valInput = document.createElement('input');
                        valInput.type = 'text';
                        valInput.className = 'default-value';
                        valInput.value = link.defaults[oldKey];
                        valInput.placeholder = 'default value';
                        valInput.setAttribute('data-field', 'default-value');
                        valInput.addEventListener('input', function(e) {
                            links[index].defaults[oldKey] = e.target.value;
                        });

                        var removeBtn = document.createElement('button');
                        removeBtn.type = 'button';
                        removeBtn.className = 'btn btn-danger btn-sm';
                        removeBtn.textContent = 'X';
                        removeBtn.addEventListener('click', function() {
                            delete links[index].defaults[oldKey];
                            renderAll();
                        });

                        defRow.appendChild(keyInput);
                        defRow.appendChild(valInput);
                        defRow.appendChild(removeBtn);
                        defaultsSection.appendChild(defRow);
                    })(keys[k]);
                }

                card.appendChild(defaultsSection);
            }

            return card;
        }

        // Add link
        document.getElementById('add-link-btn').addEventListener('click', function() {
            links.push({ name: '', url: '', is_template: false, defaults: {} });
            renderAll();
            var cards = container.querySelectorAll('.link-card');
            var last = cards[cards.length - 1];
            if (last) {
                var input = last.querySelector('input[data-field="name"]');
                if (input) input.focus();
            }
        });

        // Save
        document.getElementById('save-btn').addEventListener('click', function() {
            var config = {};
            var hasError = false;

            for (var i = 0; i < links.length; i++) {
                var link = links[i];
                var name = link.name.trim();
                if (!name) {
                    showMessage('Link #' + (i + 1) + ' is missing a shortcut name.', false);
                    hasError = true;
                    break;
                }
                if (!link.url.trim()) {
                    showMessage('Link "' + name + '" is missing a URL.', false);
                    hasError = true;
                    break;
                }
                if (config[name] !== undefined) {
                    showMessage('Duplicate shortcut name: "' + name + '".', false);
                    hasError = true;
                    break;
                }

                if (link.is_template) {
                    var entry = { template_url: link.url.trim(), defaults: {} };
                    var keys = Object.keys(link.defaults);
                    for (var k = 0; k < keys.length; k++) {
                        if (keys[k].trim()) {
                            entry.defaults[keys[k].trim()] = link.defaults[keys[k]];
                        }
                    }
                    if (Object.keys(entry.defaults).length === 0) {
                        delete entry.defaults;
                    }
                    config[name] = entry;
                } else {
                    config[name] = link.url.trim();
                }
            }

            if (hasError) return;

            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/edit', true);
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.onload = function() {
                if (xhr.status === 200) {
                    showMessage('Configuration saved successfully.', true);
                } else {
                    try {
                        var resp = JSON.parse(xhr.responseText);
                        showMessage('Error: ' + resp.error, false);
                    } catch(e) {
                        showMessage('Error saving configuration.', false);
                    }
                }
            };
            xhr.onerror = function() {
                showMessage('Network error while saving.', false);
            };
            xhr.send(JSON.stringify(config));
        });

        renderAll();
    })();
    </script>
{% endblock %}