{% 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>
            
            <!-- 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);
    });
    
    // 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 %}