{if $error}
    <div class="alert alert-danger">
        <strong>Erro:</strong> {$error}
    </div>
{else}
    <div class="row">
        <div class="col-md-6">
            {if $formatted_config}
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            <i class="fa fa-qrcode"></i> Código QR
                        </h3>
                    </div>
                    <div class="panel-body text-center">
                        <div id="qrcode" style="display: inline-block; margin-bottom: 10px;"></div>
                        <p class="text-muted">Escaneie este código QR com seu cliente WireGuard</p>
                        <div class="text-center" style="margin-top: 15px;">
                            <button class="btn btn-info btn-sm" onclick="showInstructions()">
                                <i class="fa fa-info-circle"></i> Instruções de Instalação
                            </button>
                        </div>
                    </div>
                </div>
            {else}
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            <i class="fa fa-qrcode"></i> Código QR
                        </h3>
                    </div>
                    <div class="panel-body text-center">
                        <p class="text-muted">Configuração não disponível</p>
                    </div>
                </div>
            {/if}
        </div>

        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <i class="fa fa-cog"></i> Configuração WireGuard
                    </h3>
                </div>
                <div class="panel-body">
                    {if $formatted_config}
                        <div class="form-group">
                            <label>Arquivo de Configuração:</label>
                            <pre class="wireguard-config" style="background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; padding: 15px; font-family: 'Courier New', monospace; font-size: 13px; line-height: 1.4; color: #333; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; max-height: 350px; overflow-y: auto;">{$formatted_config|escape}</pre>
                        </div>
                        <div class="text-center">
                            <button class="btn btn-primary" onclick="downloadFormattedConfig()">
                                <i class="fa fa-download"></i> Baixar Configuração
                            </button>
                            <button class="btn btn-default" onclick="copyFormattedConfig()">
                                <i class="fa fa-copy"></i> Copiar para Área de Transferência
                            </button>
                        </div>
                    {else}
                        <p class="text-muted">Configuração não disponível</p>
                    {/if}
                </div>
            </div>
        </div>
    </div>
{/if}

{* Modal de Instruções *}
<div class="modal fade" id="instructionsModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Instruções de Configuração WireGuard</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Fechar"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <h5>Dispositivos Móveis (Android/iOS):</h5>
                <ol>
                    <li>Instale o aplicativo WireGuard da Google Play Store ou App Store</li>
                    <li>Abra o aplicativo e toque no botão "+"</li>
                    <li>Selecione "Escanear código QR"</li>
                    <li>Escaneie o código QR exibido acima</li>
                    <li>Dê um nome ao seu túnel e salve</li>
                </ol>

                <h5>Desktop (Windows/macOS/Linux):</h5>
                <ol>
                    <li>Baixe e instale o WireGuard de <a href="https://www.wireguard.com/install/" target="_blank">wireguard.com</a></li>
                    <li>Clique em "Adicionar Túnel" → "Adicionar túnel vazio..."</li>
                    <li>Copie a configuração acima e cole</li>
                    <li>Salve e ative o túnel</li>
                </ol>

                <h5>Linha de Comando (Linux):</h5>
                <ol>
                    <li>Salve a configuração em um arquivo (ex: <code>wg0.conf</code>)</li>
                    <li>Execute: <code>sudo wg-quick up wg0</code></li>
                    <li>Para parar: <code>sudo wg-quick down wg0</code></li>
                </ol>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js" onload="initQRCode()" onerror="loadQRCodeFallback()"></script>
<script>
var qrCodeLibraryLoaded = false;
var configForQR = null;

function initQRCode() {
    qrCodeLibraryLoaded = true;
    console.log('QRCode library loaded successfully');
    if (configForQR) {
        generateQRCode(configForQR);
    }
}

function loadQRCodeFallback() {
    console.log('Primary QRCode library failed, trying fallback...');
    var script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode.min.js';
    script.onload = function() {
        console.log('Fallback QRCode library loaded');
        qrCodeLibraryLoaded = true;
        if (configForQR) {
            generateQRCodeFallback(configForQR);
        }
    };
    script.onerror = function() {
        console.error('Both QRCode libraries failed to load');
        var qrCodeElement = document.getElementById('qrcode');
        if (qrCodeElement) {
            qrCodeElement.innerHTML = '<p class="text-danger">Unable to load QR Code library</p>';
        }
    };
    document.head.appendChild(script);
}

function generateQRCode(configText) {
    var qrCodeElement = document.getElementById('qrcode');
    
    console.log('Generating QR Code with qrcode.js...');
    console.log('Config text length:', configText.length);
    
    if (qrCodeElement && configText && configText.trim() !== '') {
        // Check if QRCode library is loaded
        if (typeof QRCode === 'undefined') {
            console.error('Biblioteca QRCode não disponível, tentando fallback');
            generateQRCodeFallback(configText);
            return;
        }
        
        try {
            QRCode.toCanvas(qrCodeElement, configText, {
                width: 250,
                margin: 3,
                color: {
                    dark: '#000000',
                    light: '#FFFFFF'
                }
            }, function(error) {
                if (error) {
                    console.error('Falha na geração do QR Code:', error);
                    qrCodeElement.innerHTML = '<p class="text-danger">Falha na geração do QR Code: ' + error.message + '</p>';
                } else {
                    console.log('QR Code gerado com sucesso');
                }
            });
        } catch (e) {
            console.error('Exceção durante a geração do QR code:', e);
            qrCodeElement.innerHTML = '<p class="text-danger">Erro na geração do QR Code: ' + e.message + '</p>';
        }
    } else {
        console.error('Falha na geração do QR Code: elemento ou configuração ausente');
        if (qrCodeElement) {
            qrCodeElement.innerHTML = '<p class="text-warning">Configuração não disponível para QR code</p>';
        }
    }
}

function generateQRCodeFallback(configText) {
    var qrCodeElement = document.getElementById('qrcode');
    console.log('Trying fallback QR code generation...');
    
    if (qrCodeElement && configText) {
        try {
            // Create QR code using online service as fallback
            var qrUrl = 'https://api.qrserver.com/v1/create-qr-code/?size=250x250&data=' + encodeURIComponent(configText);
            var img = document.createElement('img');
            img.src = qrUrl;
            img.alt = 'WireGuard QR Code';
            img.style.border = '3px solid #ddd';
            img.style.borderRadius = '4px';
            img.onload = function() {
                console.log('Fallback QR code loaded successfully');
            };
            img.onerror = function() {
                qrCodeElement.innerHTML = '<p class="text-danger">Falha ao gerar código QR</p>';
            };
            qrCodeElement.innerHTML = '';
            qrCodeElement.appendChild(img);
        } catch (e) {
            console.error('Falha na geração do QR code de fallback:', e);
            qrCodeElement.innerHTML = '<p class="text-danger">Falha na geração do código QR</p>';
        }
    }
}

// Generate QR Code if formatted config is available
{if $formatted_config}
document.addEventListener('DOMContentLoaded', function() {
    configForQR = {$formatted_config|json_encode};
    
    if (qrCodeLibraryLoaded) {
        generateQRCode(configForQR);
    } else {
        console.log('Waiting for QRCode library to load...');
        // Timeout fallback
        setTimeout(function() {
            if (!qrCodeLibraryLoaded && configForQR) {
                console.log('Timeout reached, using fallback QR generation');
                generateQRCodeFallback(configForQR);
            }
        }, 3000);
    }
});
{else}
console.log('No formatted config available for QR code');
{/if}

function downloadFormattedConfig() {
    {if $formatted_config}
    var config = {$formatted_config|json_encode};
    var element = document.createElement('a');
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(config));
    element.setAttribute('download', '{$peer_name|default:"wireguard"}.conf');
    element.style.display = 'none';
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
    {/if}
}

function copyFormattedConfig() {
    {if $formatted_config}
    var config = {$formatted_config|json_encode};
    if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(config).then(function() {
            alert('Configuração copiada para a área de transferência!');
        }).catch(function(err) {
            fallbackCopyTextToClipboard(config);
        });
    } else {
        fallbackCopyTextToClipboard(config);
    }
    {/if}
}

function fallbackCopyTextToClipboard(text) {
    var textArea = document.createElement("textarea");
    textArea.value = text;
    textArea.style.top = "0";
    textArea.style.left = "0";
    textArea.style.position = "fixed";
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    try {
        var successful = document.execCommand('copy');
        if (successful) {
            alert('Configuração copiada para a área de transferência!');
        } else {
            alert('Falha ao copiar configuração. Por favor, copie manualmente.');
        }
    } catch (err) {
        alert('Falha ao copiar configuração. Por favor, copie manualmente.');
    }
    document.body.removeChild(textArea);
}

// Legacy functions for backward compatibility
function downloadConfig() {
    var textarea = document.querySelector('textarea');
    if (textarea) {
        var config = textarea.value;
        var element = document.createElement('a');
        element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(config));
        element.setAttribute('download', '{$peer_name|default:"wireguard"}.conf');
        element.style.display = 'none';
        document.body.appendChild(element);
        element.click();
        document.body.removeChild(element);
    }
}

function copyConfig() {
    var textarea = document.querySelector('textarea');
    if (textarea) {
        textarea.select();
        try {
            document.execCommand('copy');
            alert('Configuração copiada para a área de transferência!');
        } catch (err) {
            alert('Falha ao copiar configuração. Por favor, selecione e copie manualmente.');
        }
    }
}

function showInstructions() {
    $('#instructionsModal').modal('show');
}
</script>

<style>
.panel-heading .fa {
    margin-right: 5px;
}

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

code {
    word-break: break-all;
}

.table-condensed td {
    padding: 5px;
}

.modal-body h5 {
    color: #337ab7;
    margin-top: 20px;
    margin-bottom: 10px;
}

.modal-body h5:first-child {
    margin-top: 0;
}

/***** Modal close button alignment *****/
.modal-header {
    position: relative;
}
.modal-header .close {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 28px;
    line-height: 1;
}

.wireguard-config {
    max-height: 350px;
    overflow-y: auto;
}

#qrcode canvas {
    border: 1px solid #ddd;
    border-radius: 4px;
}
</style>