{% extends "base.html" %}

{% block title %}Server Settings - Email Server{% endblock %}

{% block extra_css %}
<style>
    .setting-section {
        border-left: 4px solid var(--bs-primary);
        padding-left: 1rem;
        margin-bottom: 2rem;
    }
    .setting-description {
        font-size: 0.875rem;
        color: var(--bs-secondary);
        margin-bottom: 0.5rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>
            <i class="bi bi-sliders me-2"></i>
            Server Settings
        </h2>
        <div class="btn-group">
            <button type="button" class="btn btn-outline-warning" onclick="resetToDefaults()">
                <i class="bi bi-arrow-clockwise me-2"></i>
                Reset to Defaults
            </button>
            <button type="button" class="btn btn-outline-info" onclick="exportSettings()">
                <i class="bi bi-download me-2"></i>
                Export Config
            </button>
        </div>
    </div>

    <form method="POST" action="{{ url_for('email.update_settings') }}">
        <!-- Server Settings -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="bi bi-server me-2"></i>
                    Server Configuration
                </h5>
            </div>
            <div class="card-body">
                <div class="setting-section">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">SMTP Port</label>
                                <div class="setting-description">Port for SMTP connections (standard: 25, 587)</div>
                                <input type="number" 
                                       class="form-control" 
                                       name="Server.SMTP_PORT" 
                                       value="{{ settings['Server']['SMTP_PORT'] }}"
                                       min="1" max="65535">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">SMTP TLS Port</label>
                                <div class="setting-description">Port for SMTP over TLS connections (standard: 465)</div>
                                <input type="number" 
                                       class="form-control" 
                                       name="Server.SMTP_TLS_PORT" 
                                       value="{{ settings['Server']['SMTP_TLS_PORT'] }}"
                                       min="1" max="65535">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Bind IP Address</label>
                                <div class="setting-description">IP address to bind the server to (0.0.0.0 for all interfaces)</div>
                                <input type="text" 
                                       class="form-control" 
                                       name="Server.BIND_IP" 
                                       value="{{ settings['Server']['BIND_IP'] }}"
                                       pattern="^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Hostname</label>
                                <div class="setting-description">Server hostname for HELO/EHLO commands</div>
                                <input type="text" 
                                       class="form-control" 
                                       name="Server.hostname" 
                                       value="{{ settings['Server']['hostname'] }}">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Database Settings -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="bi bi-database me-2"></i>
                    Database Configuration
                </h5>
            </div>
            <div class="card-body">
                <div class="setting-section">
                    <div class="mb-3">
                        <label class="form-label">Database URL</label>
                        <div class="setting-description">SQLite database file path or connection string</div>
                        <input type="text" 
                               class="form-control font-monospace" 
                               name="Database.DATABASE_URL" 
                               value="{{ settings['Database']['DATABASE_URL'] }}">
                    </div>
                </div>
            </div>
        </div>

        <!-- Logging Settings -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="bi bi-journal-text me-2"></i>
                    Logging Configuration
                </h5>
            </div>
            <div class="card-body">
                <div class="setting-section">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Log Level</label>
                                <div class="setting-description">Minimum log level to record</div>
                                <select class="form-select" name="Logging.LOG_LEVEL">
                                    <option value="DEBUG" {{ 'selected' if settings['Logging']['LOG_LEVEL'] == 'DEBUG' else '' }}>DEBUG</option>
                                    <option value="INFO" {{ 'selected' if settings['Logging']['LOG_LEVEL'] == 'INFO' else '' }}>INFO</option>
                                    <option value="WARNING" {{ 'selected' if settings['Logging']['LOG_LEVEL'] == 'WARNING' else '' }}>WARNING</option>
                                    <option value="ERROR" {{ 'selected' if settings['Logging']['LOG_LEVEL'] == 'ERROR' else '' }}>ERROR</option>
                                    <option value="CRITICAL" {{ 'selected' if settings['Logging']['LOG_LEVEL'] == 'CRITICAL' else '' }}>CRITICAL</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Hide aiosmtpd INFO Messages</label>
                                <div class="setting-description">Reduce verbose logging from aiosmtpd library</div>
                                <select class="form-select" name="Logging.hide_info_aiosmtpd">
                                    <option value="true" {{ 'selected' if settings['Logging']['hide_info_aiosmtpd'] == 'true' else '' }}>Yes</option>
                                    <option value="false" {{ 'selected' if settings['Logging']['hide_info_aiosmtpd'] == 'false' else '' }}>No</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Relay Settings -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="bi bi-arrow-repeat me-2"></i>
                    Email Relay Configuration
                </h5>
            </div>
            <div class="card-body">
                <div class="setting-section">
                    <div class="mb-3">
                        <label class="form-label">Relay Timeout (seconds)</label>
                        <div class="setting-description">Timeout for external SMTP connections when relaying emails</div>
                        <input type="number" 
                               class="form-control" 
                               name="Relay.RELAY_TIMEOUT" 
                               value="{{ settings['Relay']['RELAY_TIMEOUT'] }}"
                               min="5" max="300">
                    </div>
                </div>
            </div>
        </div>

        <!-- TLS Settings -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="bi bi-shield-lock me-2"></i>
                    TLS/SSL Configuration
                </h5>
            </div>
            <div class="card-body">
                <div class="setting-section">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">TLS Certificate File</label>
                                <div class="setting-description">Path to SSL certificate file (.crt or .pem)</div>
                                <input type="text" 
                                       class="form-control font-monospace" 
                                       name="TLS.TLS_CERT_FILE" 
                                       value="{{ settings['TLS']['TLS_CERT_FILE'] }}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">TLS Private Key File</label>
                                <div class="setting-description">Path to SSL private key file (.key or .pem)</div>
                                <input type="text" 
                                       class="form-control font-monospace" 
                                       name="TLS.TLS_KEY_FILE" 
                                       value="{{ settings['TLS']['TLS_KEY_FILE'] }}">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- DKIM Settings -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="bi bi-key me-2"></i>
                    DKIM Configuration
                </h5>
            </div>
            <div class="card-body">
                <div class="setting-section">
                    <div class="mb-3">
                        <label class="form-label">DKIM Key Size</label>
                        <div class="setting-description">RSA key size for new DKIM keys (larger = more secure, slower)</div>
                        <select class="form-select" name="DKIM.DKIM_KEY_SIZE">
                            <option value="1024" {{ 'selected' if settings['DKIM']['DKIM_KEY_SIZE'] == '1024' else '' }}>1024 bits</option>
                            <option value="2048" {{ 'selected' if settings['DKIM']['DKIM_KEY_SIZE'] == '2048' else '' }}>2048 bits (Recommended)</option>
                            <option value="4096" {{ 'selected' if settings['DKIM']['DKIM_KEY_SIZE'] == '4096' else '' }}>4096 bits</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <!-- Save Button -->
        <div class="d-flex justify-content-between align-items-center">
            <div class="alert alert-warning d-flex align-items-center mb-0">
                <i class="bi bi-exclamation-triangle me-2"></i>
                <small>Server restart required after changing settings</small>
            </div>
            <button type="submit" class="btn btn-primary btn-lg">
                <i class="bi bi-save me-2"></i>
                Save Settings
            </button>
        </div>
    </form>
</div>

<!-- Reset Confirmation Modal -->
<div class="modal fade" id="resetModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Reset Settings</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to reset all settings to their default values?</p>
                <p class="text-warning"><strong>Warning:</strong> This action cannot be undone.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-warning" onclick="confirmReset()">Reset Settings</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    function resetToDefaults() {
        new bootstrap.Modal(document.getElementById('resetModal')).show();
    }
    
    function confirmReset() {
        // This would need to be implemented as a separate endpoint
        // For now, just redirect to a reset URL
        window.location.href = '{{ url_for("email.settings") }}?reset=true';
    }
    
    function exportSettings() {
        // Create a downloadable config file
        const settings = {};
        const formData = new FormData(document.querySelector('form'));
        
        for (let [key, value] of formData.entries()) {
            const [section, setting] = key.split('.');
            if (!settings[section]) {
                settings[section] = {};
            }
            settings[section][setting] = value;
        }
        
        const configText = generateConfigFile(settings);
        downloadFile('settings.ini', configText);
    }
    
    function generateConfigFile(settings) {
        let config = '';
        for (const [section, values] of Object.entries(settings)) {
            config += `[${section}]\n`;
            for (const [key, value] of Object.entries(values)) {
                config += `${key} = ${value}\n`;
            }
            config += '\n';
        }
        return config;
    }
    
    function downloadFile(filename, content) {
        const element = document.createElement('a');
        element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(content));
        element.setAttribute('download', filename);
        element.style.display = 'none';
        document.body.appendChild(element);
        element.click();
        document.body.removeChild(element);
    }
    
    // Form validation
    document.querySelector('form').addEventListener('submit', function(e) {
        // Basic validation
        const ports = ['Server.SMTP_PORT', 'Server.SMTP_TLS_PORT'];
        for (const portField of ports) {
            const input = document.querySelector(`[name="${portField}"]`);
            const port = parseInt(input.value);
            if (port < 1 || port > 65535) {
                e.preventDefault();
                alert(`Invalid port number: ${port}. Must be between 1 and 65535.`);
                input.focus();
                return;
            }
        }
        
        // Check if ports are different
        const smtpPort = document.querySelector('[name="Server.SMTP_PORT"]').value;
        const tlsPort = document.querySelector('[name="Server.SMTP_TLS_PORT"]').value;
        if (smtpPort === tlsPort) {
            e.preventDefault();
            alert('SMTP and TLS ports must be different.');
            return;
        }
    });
</script>
{% endblock %}