{% extends "base.html" %}

{% block title %}System Settings - Stegasoo{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-10">
        <!-- Channel Key Configuration -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-broadcast me-2"></i>Channel Key Configuration</h5>
            </div>
            <div class="card-body">
                {% if channel_configured %}
                <div class="alert alert-success mb-4">
                    <i class="bi bi-shield-lock me-2"></i>
                    <strong>Server channel key active:</strong>
                    <code class="ms-2">{{ channel_fingerprint }}</code>
                    <span class="text-muted ms-2">({{ channel_source }})</span>
                </div>
                {% else %}
                <div class="alert alert-info mb-4">
                    <i class="bi bi-info-circle me-2"></i>
                    Server running in <strong>public mode</strong>.
                    Set <code>STEGASOO_CHANNEL_KEY</code> environment variable to enable server-wide channel isolation.
                </div>
                {% endif %}

                <!-- QR Code Generator -->
                <div class="card bg-dark border-secondary">
                    <div class="card-header">
                        <i class="bi bi-qr-code me-2"></i>Share Channel Key via QR
                    </div>
                    <div class="card-body">
                        <p class="small text-muted mb-3">Generate a QR code to share a channel key with others.</p>

                        <!-- Locked state - requires password -->
                        <div id="channelKeyLocked">
                            <div class="row g-2 align-items-end">
                                <div class="col-md-8">
                                    <label class="form-label small">Channel Key</label>
                                    <div class="input-group">
                                        <input type="password" class="form-control font-monospace"
                                               value="********************************" disabled>
                                        <span class="input-group-text"><i class="bi bi-lock"></i></span>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <button class="btn btn-warning w-100" type="button" id="channelKeyUnlock">
                                        <i class="bi bi-unlock me-1"></i>Unlock
                                    </button>
                                </div>
                            </div>
                            <small class="text-muted mt-2 d-block">
                                <i class="bi bi-shield-lock me-1"></i>Re-enter your password to view or export the channel key.
                            </small>
                        </div>

                        <!-- Unlocked state - shows key and QR options -->
                        <div id="channelKeyUnlocked" style="display: none;">
                            <div class="row g-2 align-items-end">
                                <div class="col-md-8">
                                    <label class="form-label small">Channel Key</label>
                                    <div class="input-group">
                                        <input type="text" class="form-control font-monospace" id="channelKeyQrInput"
                                               placeholder="Enter or generate a key">
                                        <button class="btn btn-outline-secondary" type="button" id="channelKeyQrGenerate"
                                                title="Generate random key">
                                            <i class="bi bi-shuffle"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <button class="btn btn-primary w-100" type="button" id="channelKeyQrShow">
                                        <i class="bi bi-qr-code me-1"></i>Show QR
                                    </button>
                                </div>
                            </div>
                            <small class="text-success mt-2 d-block">
                                <i class="bi bi-unlock me-1"></i>Unlocked for this session.
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Server Configuration -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-gear me-2"></i>Server Configuration</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <table class="table table-dark table-sm">
                            <tbody>
                                <tr>
                                    <td><i class="bi bi-hdd-network me-2"></i>Hostname</td>
                                    <td><code>{{ hostname }}</code></td>
                                </tr>
                                <tr>
                                    <td><i class="bi bi-ethernet me-2"></i>Port</td>
                                    <td><code>{{ port }}</code></td>
                                </tr>
                                <tr>
                                    <td><i class="bi bi-shield-lock me-2"></i>HTTPS</td>
                                    <td>
                                        {% if https_enabled %}
                                        <span class="badge bg-success"><i class="bi bi-lock me-1"></i>Enabled</span>
                                        {% else %}
                                        <span class="badge bg-warning text-dark"><i class="bi bi-unlock me-1"></i>Disabled</span>
                                        {% endif %}
                                    </td>
                                </tr>
                                <tr>
                                    <td><i class="bi bi-person-lock me-2"></i>Authentication</td>
                                    <td>
                                        {% if auth_enabled %}
                                        <span class="badge bg-success"><i class="bi bi-check me-1"></i>Enabled</span>
                                        {% else %}
                                        <span class="badge bg-danger"><i class="bi bi-x me-1"></i>Disabled</span>
                                        {% endif %}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <table class="table table-dark table-sm">
                            <tbody>
                                <tr>
                                    <td><i class="bi bi-file-earmark me-2"></i>Max Payload</td>
                                    <td><code>{{ max_payload_kb }} KB</code></td>
                                </tr>
                                <tr>
                                    <td><i class="bi bi-upload me-2"></i>Max Upload</td>
                                    <td><code>{{ max_upload_mb }} MB</code></td>
                                </tr>
                                <tr>
                                    <td><i class="bi bi-soundwave me-2"></i>DCT Mode</td>
                                    <td>
                                        {% if dct_available %}
                                        <span class="badge bg-success"><i class="bi bi-check me-1"></i>Available</span>
                                        {% else %}
                                        <span class="badge bg-secondary">Not Available</span>
                                        {% endif %}
                                    </td>
                                </tr>
                                <tr>
                                    <td><i class="bi bi-qr-code me-2"></i>QR Support</td>
                                    <td>
                                        {% if qr_available %}
                                        <span class="badge bg-success"><i class="bi bi-check me-1"></i>Available</span>
                                        {% else %}
                                        <span class="badge bg-secondary">Not Available</span>
                                        {% endif %}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="alert alert-secondary small mt-3 mb-0">
                    <i class="bi bi-info-circle me-2"></i>
                    To change server settings, edit environment variables or config file and restart the service.
                    <br>See <code>STEGASOO_HTTPS_ENABLED</code>, <code>STEGASOO_PORT</code>, <code>STEGASOO_CHANNEL_KEY</code>
                </div>
            </div>
        </div>

        <!-- Environment Info -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-info-circle me-2"></i>Environment</h5>
            </div>
            <div class="card-body">
                <div class="row text-center">
                    <div class="col-6 col-md-3 mb-3">
                        <div class="p-3 bg-dark rounded h-100">
                            <i class="bi bi-box text-primary fs-3 d-block mb-2"></i>
                            <div class="small text-muted">Version</div>
                            <strong>{{ version }}</strong>
                        </div>
                    </div>
                    <div class="col-6 col-md-3 mb-3">
                        <div class="p-3 bg-dark rounded h-100">
                            <i class="bi bi-terminal text-info fs-3 d-block mb-2"></i>
                            <div class="small text-muted">Python</div>
                            <strong>{{ python_version }}</strong>
                        </div>
                    </div>
                    <div class="col-6 col-md-3 mb-3">
                        <div class="p-3 bg-dark rounded h-100">
                            <i class="bi bi-cpu text-warning fs-3 d-block mb-2"></i>
                            <div class="small text-muted">Platform</div>
                            <strong>{{ platform }}</strong>
                        </div>
                    </div>
                    <div class="col-6 col-md-3 mb-3">
                        <div class="p-3 bg-dark rounded h-100">
                            <i class="bi bi-shield-check text-success fs-3 d-block mb-2"></i>
                            <div class="small text-muted">KDF</div>
                            <strong>{{ kdf_type }}</strong>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Password Verification Modal -->
<div class="modal fade" id="passwordModal" tabindex="-1">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title"><i class="bi bi-shield-lock me-2"></i>Verify Password</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p class="small text-muted mb-3">Re-enter your password to access sensitive data.</p>
                <div class="mb-3">
                    <label class="form-label small">Password</label>
                    <input type="password" class="form-control" id="verifyPassword" autocomplete="current-password">
                    <div class="invalid-feedback" id="passwordError">Incorrect password</div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-warning btn-sm" id="verifyPasswordBtn">
                    <i class="bi bi-unlock me-1"></i>Unlock
                </button>
            </div>
        </div>
    </div>
</div>

<!-- QR Code Modal -->
<div class="modal fade" id="channelKeyQrModal" tabindex="-1">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title"><i class="bi bi-qr-code me-2"></i>Channel Key</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body text-center">
                <canvas id="channelKeyQrCanvas" class="bg-white p-2 rounded"></canvas>
                <div class="mt-2">
                    <code class="small" id="channelKeyQrDisplay"></code>
                </div>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn btn-sm btn-outline-secondary" id="channelKeyQrDownload">
                    <i class="bi bi-download me-1"></i>Download
                </button>
                <button type="button" class="btn btn-sm btn-outline-secondary" id="channelKeyQrPrint">
                    <i class="bi bi-printer me-1"></i>Print Sheet
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/qrcode.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/stegasoo.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const input = document.getElementById('channelKeyQrInput');
    const generateBtn = document.getElementById('channelKeyQrGenerate');
    const showBtn = document.getElementById('channelKeyQrShow');
    const canvas = document.getElementById('channelKeyQrCanvas');
    const displayEl = document.getElementById('channelKeyQrDisplay');
    const downloadBtn = document.getElementById('channelKeyQrDownload');
    const modalEl = document.getElementById('channelKeyQrModal');
    const modal = modalEl ? new bootstrap.Modal(modalEl) : null;

    // Password verification elements
    const lockedDiv = document.getElementById('channelKeyLocked');
    const unlockedDiv = document.getElementById('channelKeyUnlocked');
    const unlockBtn = document.getElementById('channelKeyUnlock');
    const passwordModalEl = document.getElementById('passwordModal');
    const passwordModal = passwordModalEl ? new bootstrap.Modal(passwordModalEl) : null;
    const verifyPasswordInput = document.getElementById('verifyPassword');
    const verifyPasswordBtn = document.getElementById('verifyPasswordBtn');
    const passwordError = document.getElementById('passwordError');

    // Unlock button shows password modal
    unlockBtn?.addEventListener('click', function() {
        verifyPasswordInput.value = '';
        verifyPasswordInput.classList.remove('is-invalid');
        passwordModal?.show();
        setTimeout(() => verifyPasswordInput.focus(), 300);
    });

    // Handle Enter key in password field
    verifyPasswordInput?.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            verifyPasswordBtn?.click();
        }
    });

    // Verify password and unlock
    verifyPasswordBtn?.addEventListener('click', async function() {
        const password = verifyPasswordInput.value;
        if (!password) {
            verifyPasswordInput.classList.add('is-invalid');
            return;
        }

        verifyPasswordBtn.disabled = true;
        verifyPasswordBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Verifying...';

        try {
            const response = await fetch('/admin/settings/unlock', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: JSON.stringify({ password })
            });

            const data = await response.json();

            if (data.success) {
                // Unlock successful
                passwordModal?.hide();
                lockedDiv.style.display = 'none';
                unlockedDiv.style.display = 'block';
                if (data.channel_key && input) {
                    input.value = data.channel_key;
                }
            } else {
                // Password incorrect
                verifyPasswordInput.classList.add('is-invalid');
                passwordError.textContent = data.error || 'Incorrect password';
            }
        } catch (error) {
            verifyPasswordInput.classList.add('is-invalid');
            passwordError.textContent = 'Verification failed';
        } finally {
            verifyPasswordBtn.disabled = false;
            verifyPasswordBtn.innerHTML = '<i class="bi bi-unlock me-1"></i>Unlock';
        }
    });

    // Generate random key
    generateBtn?.addEventListener('click', function() {
        if (!input) return;
        if (typeof Stegasoo !== 'undefined' && Stegasoo.generateChannelKey) {
            input.value = Stegasoo.generateChannelKey();
        } else {
            const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
            let key = '';
            for (let i = 0; i < 8; i++) {
                if (i > 0) key += '-';
                for (let j = 0; j < 4; j++) {
                    key += chars.charAt(Math.floor(Math.random() * chars.length));
                }
            }
            input.value = key;
        }
    });

    // Show QR code in modal
    showBtn?.addEventListener('click', function() {
        const key = input?.value?.trim().replace(/-/g, '');
        if (!key || key.length !== 32) {
            alert('Please enter a valid 32-character channel key');
            return;
        }

        const formatted = key.match(/.{4}/g)?.join('-') || key;

        if (typeof QRious === 'undefined') {
            alert('QR Code library failed to load.');
            return;
        }

        try {
            new QRious({
                element: canvas,
                value: formatted,
                size: 200,
                level: 'M'
            });
            if (displayEl) displayEl.textContent = formatted;
            modal?.show();
        } catch (error) {
            alert('Failed to generate QR code: ' + error.message);
        }
    });

    // Download QR as PNG
    downloadBtn?.addEventListener('click', function() {
        if (canvas) {
            const link = document.createElement('a');
            link.download = 'stegasoo-channel-key.png';
            link.href = canvas.toDataURL('image/png');
            link.click();
        }
    });

    // Print tiled QR sheet (US Letter)
    document.getElementById('channelKeyQrPrint')?.addEventListener('click', function() {
        if (canvas && displayEl) {
            printQrSheet(canvas, displayEl.textContent, 'Channel Key');
        }
    });
});

// Print QR codes tiled on US Letter paper (8.5" x 11")
function printQrSheet(canvas, keyText, title) {
    const qrDataUrl = canvas.toDataURL('image/png');
    const printWindow = window.open('', '_blank');
    if (!printWindow) {
        alert('Please allow popups to print');
        return;
    }

    // US Letter: 8.5" x 11" - create 4x5 grid of QR codes
    const cols = 4;
    const rows = 5;

    // Split key into two lines (4 groups each)
    const keyParts = keyText.split('-');
    const keyLine1 = keyParts.slice(0, 4).join('-');
    const keyLine2 = keyParts.slice(4).join('-');

    let qrGrid = '';
    for (let i = 0; i < rows * cols; i++) {
        qrGrid += `
            <div class="qr-tile">
                <div class="key-text">${keyLine1}</div>
                <img src="${qrDataUrl}" alt="QR">
                <div class="key-text">${keyLine2}</div>
            </div>
        `;
    }

    printWindow.document.write(`
        <!DOCTYPE html>
        <html>
        <head>
            <title></title>
            <style>
                @page {
                    size: letter;
                    margin: 0.2in;
                    margin-top: 0.1in;
                    margin-bottom: 0.1in;
                }
                @media print {
                    @page { margin: 0.15in; }
                    html, body { margin: 0; padding: 0; }
                }
                * { margin: 0; padding: 0; box-sizing: border-box; }
                body {
                    font-family: 'Courier New', monospace;
                    background: white;
                }
                .grid {
                    display: grid;
                    grid-template-columns: repeat(${cols}, 1fr);
                    gap: 0;
                    margin-top: 0.09in;
                }
                .qr-tile {
                    border: 1px dashed #ccc;
                    padding: 0.04in;
                    text-align: center;
                    page-break-inside: avoid;
                }
                .qr-tile img {
                    width: 1.6in;
                    height: 1.6in;
                }
                .key-text {
                    font-size: 10pt;
                    font-weight: bold;
                    color: #333;
                    line-height: 1.2;
                }
                .footer {
                    display: none;
                }
            </style>
        </head>
        <body>
            <div class="grid">${qrGrid}</div>
            <div class="footer">Cut along dashed lines</div>
            <script>
                window.onload = function() { window.print(); };
            <\/script>
        </body>
        </html>
    `);
    printWindow.document.close();
}
</script>
{% endblock %}