{% extends "base.html" %}

{% block title %}{{ page_title }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <h1>Configuration</h1>
            <p>Manage application settings and preferences.</p>
            
            <!-- General Settings -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5>General Settings</h5>
                </div>
                <div class="card-body">
                    <form id="general-config-form">
                        <div class="mb-3">
                            <label for="app-name" class="form-label">Application Name</label>
                            <input type="text" class="form-control" id="app-name" value="{{ config.app_name or 'MbetterClient' }}">
                        </div>
                        <div class="mb-3">
                            <label for="log-level" class="form-label">Log Level</label>
                            <select class="form-select" id="log-level">
                                <option value="DEBUG" {% if config.log_level == 'DEBUG' %}selected{% endif %}>DEBUG</option>
                                <option value="INFO" {% if config.log_level == 'INFO' %}selected{% endif %}>INFO</option>
                                <option value="WARNING" {% if config.log_level == 'WARNING' %}selected{% endif %}>WARNING</option>
                                <option value="ERROR" {% if config.log_level == 'ERROR' %}selected{% endif %}>ERROR</option>
                            </select>
                        </div>
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" id="enable-qt" {% if config.enable_qt %}checked{% endif %}>
                            <label class="form-check-label" for="enable-qt">
                                Enable Qt Video Player
                            </label>
                        </div>
                        <button type="submit" class="btn btn-primary">Save General Settings</button>
                    </form>
                </div>
            </div>
            
            <!-- Video Settings -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5>Video Settings</h5>
                </div>
                <div class="card-body">
                    <form id="video-config-form">
                        <div class="mb-3">
                            <label for="video-width" class="form-label">Video Width</label>
                            <input type="number" class="form-control" id="video-width" value="{{ config.video_width or 1920 }}">
                        </div>
                        <div class="mb-3">
                            <label for="video-height" class="form-label">Video Height</label>
                            <input type="number" class="form-control" id="video-height" value="{{ config.video_height or 1080 }}">
                        </div>
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" id="fullscreen" {% if config.fullscreen %}checked{% endif %}>
                            <label class="form-check-label" for="fullscreen">
                                Fullscreen Mode
                            </label>
                        </div>
                        <button type="submit" class="btn btn-primary">Save Video Settings</button>
                    </form>
                </div>
            </div>
            
            <!-- API Settings -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5>API Settings</h5>
                </div>
                <div class="card-body">
                    <form id="api-config-form">
                        <div class="mb-3">
                            <label for="fastapi-url" class="form-label">FastAPI Server URL</label>
                            <input type="url" class="form-control" id="fastapi-url"
                                   value="{{ config.fastapi_url or 'https://mbetter.nexlab.net/api/updates' }}"
                                   placeholder="https://mbetter.nexlab.net/api/updates">
                            <div class="form-text">Base URL for FastAPI server requests (include https:// or http://)</div>
                        </div>
                        <div class="mb-3">
                            <label for="api-token" class="form-label">API Access Token</label>
                            <input type="password" class="form-control" id="api-token"
                                   value="{{ config.api_token or '' }}"
                                   placeholder="Enter your API access token">
                            <div class="form-text">Authentication token for FastAPI server access</div>
                        </div>
                        <div class="mb-3">
                            <label for="api-timeout" class="form-label">Request Timeout (seconds)</label>
                            <input type="number" class="form-control" id="api-timeout"
                                   value="{{ config.api_timeout or 30 }}" min="5" max="300">
                            <div class="form-text">Timeout for API requests (5-300 seconds)</div>
                        </div>
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" id="api-enabled"
                                   {% if config.api_enabled != false %}checked{% endif %}>
                            <label class="form-check-label" for="api-enabled">
                                Enable API Client
                            </label>
                            <div class="form-text">Enable/disable automatic API requests</div>
                        </div>
                        <button type="submit" class="btn btn-primary">Save API Settings</button>
                        <button type="button" class="btn btn-outline-secondary ms-2" id="test-api-connection">
                            Test Connection
                        </button>
                    </form>
                </div>
            </div>
            
            <!-- Database Settings -->
            <div class="card">
                <div class="card-header">
                    <h5>Database Settings</h5>
                </div>
                <div class="card-body">
                    <form id="database-config-form">
                        <div class="mb-3">
                            <label for="db-path" class="form-label">Database Path</label>
                            <input type="text" class="form-control" id="db-path" value="{{ config.db_path or 'data/mbetterclient.db' }}">
                        </div>
                        <button type="submit" class="btn btn-primary">Save Database Settings</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // Save general configuration
    document.getElementById('general-config-form').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const config = {
            app_name: document.getElementById('app-name').value,
            log_level: document.getElementById('log-level').value,
            enable_qt: document.getElementById('enable-qt').checked
        };
        
        saveConfig('general', config);
    });
    
    // Save video configuration
    document.getElementById('video-config-form').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const config = {
            video_width: parseInt(document.getElementById('video-width').value),
            video_height: parseInt(document.getElementById('video-height').value),
            fullscreen: document.getElementById('fullscreen').checked
        };
        
        saveConfig('video', config);
    });
    
    // Save database configuration
    document.getElementById('database-config-form').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const config = {
            db_path: document.getElementById('db-path').value
        };
        
        saveConfig('database', config);
    });
    
    // Save API configuration
    document.getElementById('api-config-form').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const config = {
            fastapi_url: document.getElementById('fastapi-url').value,
            api_token: document.getElementById('api-token').value,
            api_timeout: parseInt(document.getElementById('api-timeout').value),
            api_enabled: document.getElementById('api-enabled').checked
        };
        
        saveConfig('api', config);
    });
    
    // Test API connection
    document.getElementById('test-api-connection').addEventListener('click', function() {
        const url = document.getElementById('fastapi-url').value;
        const token = document.getElementById('api-token').value;
        
        if (!url) {
            alert('Please enter a FastAPI URL first');
            return;
        }
        
        this.disabled = true;
        this.textContent = 'Testing...';
        
        fetch('/api/config/test-connection', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                url: url,
                token: token
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Connection successful! Response: ' + (data.message || 'OK'));
            } else {
                alert('Connection failed: ' + (data.error || 'Unknown error'));
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Connection test failed: ' + error.message);
        })
        .finally(() => {
            this.disabled = false;
            this.textContent = 'Test Connection';
        });
    });
    
    // Generic config save function
    function saveConfig(section, config) {
        fetch('/api/config/' + section, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(config)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert(section.charAt(0).toUpperCase() + section.slice(1) + ' configuration saved successfully');
            } else {
                alert('Failed to save ' + section + ' configuration: ' + data.error);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Failed to save ' + section + ' configuration');
        });
    }
</script>
{% endblock %}