{% extends "base.html" %}

{% block title %}Settings - Admin Panel{% endblock %}

{% block page_title %}System Settings{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <h1 class="h3 mb-4">Settings</h1>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" id="settingsTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="api-keys-tab" data-bs-toggle="tab" data-bs-target="#api-keys" type="button" role="tab">
                            API Keys
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="captcha-tab" data-bs-toggle="tab" data-bs-target="#captcha" type="button" role="tab">
                            Turnstile CAPTCHA
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="domain-tab" data-bs-toggle="tab" data-bs-target="#domain" type="button" role="tab">
                            Domain Configuration
                        </button>
                    </li>
                </ul>
            </div>
            <div class="card-body">
                <form method="POST">
                    <div class="tab-content" id="settingsTabsContent">
                        <!-- API Keys Tab -->
                        <div class="tab-pane fade show active" id="api-keys" role="tabpanel">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="telegram_token" class="form-label">Telegram Bot Token</label>
                                        <input type="text" class="form-control" id="telegram_token" name="telegram_token" 
                                               value="{{ telegram_token }}" placeholder="Enter your Telegram bot token">
                                        <div class="form-text">Get this from @BotFather on Telegram</div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="telegram_chat_id" class="form-label">Telegram Chat ID</label>
                                        <input type="text" class="form-control" id="telegram_chat_id" name="telegram_chat_id" 
                                               value="{{ telegram_chat_id }}" placeholder="Enter your Telegram chat ID">
                                        <div class="form-text">Your chat ID or group ID</div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="ipinfo_api_key" class="form-label">IPInfo.io API Key</label>
                                        <input type="text" class="form-control" id="ipinfo_api_key" name="ipinfo_api_key" 
                                               value="{{ ipinfo_api_key }}" placeholder="Enter your IPInfo.io API key">
                                        <div class="form-text">For IP geolocation and proxy detection</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- CAPTCHA Tab -->
                        <div class="tab-pane fade" id="captcha" role="tabpanel">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="turnstile_site_key" class="form-label">Turnstile Site Key</label>
                                        <input type="text" class="form-control" id="turnstile_site_key" name="turnstile_site_key" 
                                               value="{{ turnstile_site_key }}" placeholder="Enter your Turnstile site key">
                                        <div class="form-text">Get this from your Cloudflare dashboard</div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="turnstile_secret_key" class="form-label">Turnstile Secret Key</label>
                                        <input type="password" class="form-control" id="turnstile_secret_key" name="turnstile_secret_key" 
                                               value="{{ turnstile_secret_key }}" placeholder="Enter your Turnstile secret key">
                                        <div class="form-text">Used for server-side verification</div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="auto_block_bots" name="auto_block_bots" 
                                                   {% if auto_block_bots %}checked{% endif %}>
                                            <label class="form-check-label" for="auto_block_bots">
                                                Auto-block known bots
                                            </label>
                                        </div>
                                        <div class="form-text">Automatically block detected bot traffic</div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="auto_block_tor" name="auto_block_tor" 
                                                   {% if auto_block_tor %}checked{% endif %}>
                                            <label class="form-check-label" for="auto_block_tor">
                                                Auto-block Tor/Proxy IPs
                                            </label>
                                        </div>
                                        <div class="form-text">Block traffic from Tor and proxy servers</div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="ai_antibot_enabled" name="ai_antibot_enabled" 
                                                   {% if ai_antibot_enabled %}checked{% endif %}>
                                            <label class="form-check-label" for="ai_antibot_enabled">
                                                Enable AI-AntiBot System
                                            </label>
                                        </div>
                                        <div class="form-text">Enable machine learning-based bot detection that learns from Turnstile</div>
                                    </div>

                                    <div class="mb-3">
                                        <div class="alert alert-info">
                                            <i class="fas fa-brain"></i>
                                            <strong>AI-AntiBot:</strong> Uses machine learning to detect bots, learning from Cloudflare Turnstile results.
                                        </div>
                                    </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Domain Configuration Tab -->
                        <div class="tab-pane fade" id="domain" role="tabpanel">
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="mb-3">
                                        <label for="base_url" class="form-label">Domain Name</label>
                                        <input type="text" class="form-control" id="base_url" name="base_url" 
                                               value="{{ base_url.replace('https://', '').replace('http://', '') }}" 
                                               placeholder="example.com">
                                        <div class="form-text">Enter your domain name. SSL certificate will be automatically configured via Let's Encrypt.</div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label class="form-label">Domain Status</label>
                                        <div id="domain-status-container">
                                            <div class="d-flex align-items-center">
                                                <div class="spinner-border spinner-border-sm me-2" id="domain-status-spinner" style="display: none;"></div>
                                                <span id="domain-status-text">Checking...</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-12">
                                    <div class="alert alert-info">
                                        <i class="fas fa-info-circle"></i>
                                        <strong>Automatic Domain Setup:</strong> When you save a new domain, the system will:
                                        <ul class="mt-2 mb-0">
                                            <li>Configure Nginx with proper settings</li>
                                            <li>Install SSL certificate via Let's Encrypt</li>
                                            <li>Replace any existing domain (only one domain active at a time)</li>
                                            <li>Set up HTTPS redirects and security headers</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            
                            {% if domain_status and domain_status.domain %}
                            <div class="row">
                                <div class="col-12">
                                    <div class="card">
                                        <div class="card-header">
                                            <h6 class="card-title mb-0">Current Domain Configuration</h6>
                                        </div>
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <strong>Domain:</strong> {{ domain_status.domain }}<br>
                                                    <strong>Base URL:</strong> {{ domain_status.base_url }}<br>
                                                    <strong>SSL Enabled:</strong> 
                                                    {% if domain_status.ssl_enabled %}
                                                        <span class="badge bg-success">Yes</span>
                                                    {% else %}
                                                        <span class="badge bg-danger">No</span>
                                                    {% endif %}
                                                </div>
                                                <div class="col-md-6">
                                                    <strong>Status:</strong> 
                                                    {% if domain_status.configured %}
                                                        <span class="badge bg-success">Configured</span>
                                                    {% else %}
                                                        <span class="badge bg-warning">Not Configured</span>
                                                    {% endif %}
                                                    <br>
                                                    <strong>Accessible:</strong> 
                                                    {% if domain_status.accessible %}
                                                        <span class="badge bg-success">Yes</span>
                                                    {% else %}
                                                        <span class="badge bg-danger">No</span>
                                                    {% endif %}
                                                    <br>
                                                    {% if domain_status.configured_at %}
                                                    <strong>Configured:</strong> {{ domain_status.configured_at[:19] }}
                                                    {% endif %}
                                                </div>
                                            </div>
                                            <div class="row mt-3">
                                                <div class="col-12">
                                                    <button type="button" class="btn btn-warning btn-sm" onclick="removeDomain()">
                                                        <i class="fas fa-trash"></i> Remove Domain
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% endif %}
                        </div>
                    </div>

                    <div class="mt-4">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> Save Settings
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
// Domain Management JavaScript
document.addEventListener('DOMContentLoaded', function() {
    // Load domain status when page loads
    loadDomainStatus();
    
    // Load status when domain tab is activated
    document.getElementById('domain-tab').addEventListener('shown.bs.tab', function() {
        loadDomainStatus();
    });
});

function loadDomainStatus() {
    const statusContainer = document.getElementById('domain-status-container');
    const statusSpinner = document.getElementById('domain-status-spinner');
    const statusText = document.getElementById('domain-status-text');
    
    statusSpinner.style.display = 'inline-block';
    statusText.textContent = 'Checking...';
    
    fetch('/domain/status')
        .then(response => response.json())
        .then(data => {
            statusSpinner.style.display = 'none';
            updateDomainStatus(data);
        })
        .catch(error => {
            console.error('Error loading domain status:', error);
            statusSpinner.style.display = 'none';
            statusText.textContent = 'Error loading status';
        });
}

function updateDomainStatus(status) {
    const statusText = document.getElementById('domain-status-text');
    
    if (status.domain) {
        let statusHtml = `<strong>${status.domain}</strong><br>`;
        
        if (status.configured) {
            statusHtml += '<span class="badge bg-success">Configured</span>';
        } else {
            statusHtml += '<span class="badge bg-warning">Not Configured</span>';
        }
        
        if (status.ssl_enabled) {
            statusHtml += ' <span class="badge bg-success">SSL</span>';
        }
        
        if (status.accessible) {
            statusHtml += ' <span class="badge bg-success">Online</span>';
        } else {
            statusHtml += ' <span class="badge bg-danger">Offline</span>';
        }
        
        statusText.innerHTML = statusHtml;
    } else {
        statusText.innerHTML = '<span class="text-muted">No domain configured</span>';
    }
}

function removeDomain() {
    if (!confirm('Are you sure you want to remove the current domain configuration? This will remove SSL certificates and Nginx configuration.')) {
        return;
    }
    
    const button = event.target;
    const originalText = button.innerHTML;
    button.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Removing...';
    button.disabled = true;
    
    fetch('/domain/remove', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {
        button.innerHTML = originalText;
        button.disabled = false;
        
        if (data.success) {
            alert('Domain removed successfully');
            location.reload();
        } else {
            alert('Error removing domain: ' + data.error);
        }
    })
    .catch(error => {
        console.error('Error removing domain:', error);
        button.innerHTML = originalText;
        button.disabled = false;
        alert('Error removing domain: ' + error.message);
    });
}

// Override form submission to show progress for domain configuration
document.querySelector('form').addEventListener('submit', function(e) {
    const baseUrlInput = document.getElementById('base_url');
    const submitButton = document.querySelector('button[type="submit"]');
    
    if (baseUrlInput.value.trim()) {
        submitButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Configuring Domain...';
        submitButton.disabled = true;
        
        // Show progress message
        const progressDiv = document.createElement('div');
        progressDiv.className = 'alert alert-info mt-3';
        progressDiv.innerHTML = '<i class="fas fa-cog fa-spin"></i> Configuring domain with Nginx and SSL certificate. This may take a few minutes...';
        baseUrlInput.parentElement.appendChild(progressDiv);
    }
});
</script>
{% endblock %}