{% extends "layout.html" %}

{% block title %}
Tools
{% endblock %}

{% block main %}
<div class="container">
    <h1 class="my-4">Toggle Values Manager</h1>
    
    <div class="card shadow-sm mb-4">
        <div class="card-body">
            <textarea 
                id="toggleValuesBox" 
                class="form-control" 
                style="height: 300px; font-family: monospace;"
                placeholder='Enter Values here...'
            ></textarea>
        </div>
    </div>

    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
        <button 
            id="retrieveButton" 
            class="btn btn-primary"
            onclick="fetchToggleValues()"
        >
            <i class="fas fa-download me-2"></i>Get Values
        </button>
        <button 
            id="submitButton" 
            class="btn btn-success"
            onclick="saveToggleValues()"
        >
            <i class="fas fa-upload me-2"></i>Save Values
        </button>
    </div>
</div>

<script>
    async function fetchToggleValues() {
        try {
            const response = await fetch('/get_toggle_values');
            const data = await response.json();
            document.getElementById('toggleValuesBox').value = 
                JSON.stringify(data, null, 2);
        } catch (error) {
            alert('Error fetching values');
        }
    }

    async function saveToggleValues() {
        const textarea = document.getElementById('toggleValuesBox');
        try {
            const jsonData = JSON.parse(textarea.value);
            
            const response = await fetch('/store_toggle_values', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(jsonData),
            });

            if (response.ok) {
                alert('Successfully saved!');
            } else {
                throw new Error('Save failed');
            }
        } catch (error) {
            alert('Invalid JSON format!');
            textarea.classList.add('is-invalid');
            setTimeout(() => textarea.classList.remove('is-invalid'), 2000);
        }
    }
</script>

<style>
    .card {
        border-radius: 12px;
    }
    textarea {
        white-space: pre;
        overflow-wrap: normal;
        overflow-x: auto;
    }
</style>
{% endblock %}