{% extends "layout.html" %}

{% block content %}
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header bg-dark text-white">Application Settings</div>
                <div class="card-body">
                    <form method="post">
                        <h5 class="card-title mb-3">LLM Configuration (OpenRouter)</h5>
                        
                        <div class="mb-3">
                            <label for="api_key" class="form-label">OpenRouter API Key</label>
                            <div class="input-group">
                                <input type="password" class="form-control" id="api_key" name="api_key" value="{{ settings.openrouter_api_key or '' }}">
                                <button class="btn btn-outline-secondary" type="button" id="connect-btn">Connect & Load Models</button>
                            </div>
                            <div class="form-text">Required for AI text generation features.</div>
                        </div>

                        <div class="mb-3">
                            <label for="model" class="form-label">Model Selection</label>
                            <select class="form-select" id="model" name="model">
                                <option value="{{ settings.openrouter_model }}" selected>{{ settings.openrouter_model }}</option>
                            </select>
                            <div class="form-text">Click "Connect" above to load the latest available models.</div>
                        </div>

                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary">Save Settings</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const connectBtn = document.getElementById('connect-btn');
        const apiKeyInput = document.getElementById('api_key');
        const modelSelect = document.getElementById('model');
        const currentModel = "{{ settings.openrouter_model }}";

        connectBtn.addEventListener('click', async () => {
            const apiKey = apiKeyInput.value;
            if (!apiKey) {
                alert('Please enter an API Key first.');
                return;
            }

            connectBtn.disabled = true;
            connectBtn.textContent = 'Connecting...';

            try {
                const formData = new FormData();
                formData.append('api_key', apiKey);

                const response = await fetch('/get_openrouter_models', {
                    method: 'POST',
                    body: formData
                });
                
                const data = await response.json();

                if (data.error) {
                    alert('Error: ' + data.error);
                } else {
                    // Clear and populate dropdown
                    modelSelect.innerHTML = '';
                    data.models.sort((a, b) => a.name.localeCompare(b.name)).forEach(model => {
                        const option = document.createElement('option');
                        option.value = model.id;
                        option.textContent = model.name;
                        if (model.id === currentModel) {
                            option.selected = true;
                        }
                        modelSelect.appendChild(option);
                    });
                    alert('Model list loaded successfully!');
                }
            } catch (err) {
                console.error(err);
                alert('Failed to connect to OpenRouter.');
            } finally {
                connectBtn.disabled = false;
                connectBtn.textContent = 'Connect & Load Models';
            }
        });
    });
</script>
{% endblock %}