{% extends "base.html" %}

{% block title %}Config - Codomyrmex{% endblock %}

{% block content %}
<h1>Configuration Management</h1>

<div style="display: flex; gap: 2rem; height: 70vh;">
    <div style="width: 300px; border-right: 1px solid var(--border-color); overflow-y: auto;">
        <h3 style="margin-bottom: 1rem;">Files</h3>
        <ul class="file-list" id="config-file-list">
            {% for config in config_files %}
            <li>
                <a href="#" class="config-file-link" data-filename="{{ config.name }}">
                    <span class="file-icon" aria-hidden="true">{% if config.type == 'toml' %}⚙️{% elif config.type == 'yaml' or config.type
                        == 'yml' %}📋{% elif config.type == 'json' %}📄{% else %}📝{% endif %}</span>
                    {{ config.name }}
                </a>
            </li>
            {% endfor %}
        </ul>
        {% if not config_files %}
        <div class="empty-state" style="padding: 1rem;">
            <p>No configuration files found.</p>
        </div>
        {% endif %}
    </div>

    <div style="flex: 1; display: flex; flex-direction: column;">
        <div style="margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center;">
            <h3 id="current-config-file">Select a file to edit</h3>
            <button id="save-config-btn" class="btn btn-primary" disabled>Save Changes</button>
        </div>
        <div id="config-empty-state" class="empty-state"
            style="flex: 1; background: var(--bg-secondary); border-radius: 12px; border: 1px solid var(--border-color);">
            <div class="empty-state-icon">📝</div>
            <p>Select a configuration file from the sidebar to view and edit its contents.</p>
        </div>
        <label for="config-editor" class="sr-only">Configuration file editor</label>
        <textarea id="config-editor"
            style="flex: 1; font-family: 'Fira Code', monospace; padding: 1rem; line-height: 1.5; resize: none; border-color: var(--border-color); background-color: var(--bg-tertiary); color: var(--text-primary); display: none;"
            spellcheck="false"></textarea>
        <div id="save-status" class="save-status" role="status" aria-live="polite"></div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const configEditor = document.getElementById('config-editor');
        const emptyState = document.getElementById('config-empty-state');
        const saveBtn = document.getElementById('save-config-btn');
        const currentFileLabel = document.getElementById('current-config-file');
        const saveStatus = document.getElementById('save-status');
        let activeFilename = null;

        // Load file content via GET /api/config/{filename}
        async function loadFile(filename) {
            emptyState.style.display = 'none';
            configEditor.style.display = 'block';
            configEditor.disabled = true;
            saveBtn.disabled = true;
            currentFileLabel.textContent = filename;
            saveStatus.textContent = '';

            try {
                const resp = await fetch('/api/config/' + encodeURIComponent(filename));
                if (resp.ok) {
                    const data = await resp.json();
                    configEditor.value = data.content || '';
                    configEditor.disabled = false;
                    saveBtn.disabled = false;
                    activeFilename = filename;
                } else {
                    const data = await resp.json();
                    configEditor.value = '';
                    saveStatus.textContent = 'Error loading file: ' + (data.error || resp.status);
                    saveStatus.style.color = 'var(--error-color)';
                }
            } catch (err) {
                saveStatus.textContent = 'Connection error: ' + err.message;
                saveStatus.style.color = 'var(--error-color)';
            }
        }

        // Save file content via POST /api/config
        saveBtn.addEventListener('click', async function () {
            if (!activeFilename) return;
            saveBtn.disabled = true;
            saveStatus.textContent = 'Saving…';
            saveStatus.style.color = 'var(--text-secondary)';

            try {
                const resp = await fetch('/api/config', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ filename: activeFilename, content: configEditor.value })
                });
                const data = await resp.json();
                if (data.success) {
                    saveStatus.textContent = '✓ Saved';
                    saveStatus.style.color = 'var(--success-color)';
                } else {
                    saveStatus.textContent = 'Save failed: ' + (data.error || resp.status);
                    saveStatus.style.color = 'var(--error-color)';
                }
            } catch (err) {
                saveStatus.textContent = 'Connection error: ' + err.message;
                saveStatus.style.color = 'var(--error-color)';
            } finally {
                saveBtn.disabled = false;
            }
        });

        // Wire file list links
        document.querySelectorAll('.config-file-link').forEach(function (link) {
            link.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelectorAll('.config-file-link').forEach(function (l) { l.classList.remove('active'); });
                this.classList.add('active');
                loadFile(this.dataset.filename);
            });
        });

        // Auto-select first file
        const first = document.querySelector('.config-file-link');
        if (first) setTimeout(function () { first.click(); }, 100);
    });
</script>
{% endblock %}