{% extends "base.html" %}

{% block content %}
<div class="card">
    <div class="card-body">
        <div class="alert ">
            <i class="bi  me-2"></i>
            <strong>Внимание!</strong> Данные удалены, после закрытия страницы она не откроется повторно.
            <ul class="mb-0 mt-1 small">
                <li>Обновление страницы или повторный переход по ссылке не откроют данные.</li>
                <li>Восстановить информацию невозможно.</li>
                <li>При необходимости <strong>сохраните или скопируйте</strong> информацию сейчас.</li>
            </ul>
        </div>

        <div class="card bg-light mb-3">
            <div class="card-header bg-secondary text-white d-flex justify-content-between align-items-center">
                <span><i class="bi me-2"></i>Полученное сообщение</span>

                <button class="btn btn-sm btn-light"
                        id="viewCopyBtn"
                        title="Копировать секрет">
                    <i class="bi bi-clipboard"></i> Копировать секрет
                </button>
            </div>
            <div class="card-body">
                <div class="bg-white p-4 rounded border"
                     id="secretContainer"
                     style="font-family: 'Courier New', monospace;
                            font-size: 1rem;
                            word-wrap: break-word;
                            max-height: 600px;
                            overflow-y: auto;
                            line-height: 1.8;
                            background-color: #f8f9fa;
                            border: 2px dashed #6c757d !important;
                            box-shadow: inset 0 0 10px rgba(0,0,0,0.05);
                            white-space: pre-wrap;">{{ secret | safe }}
                </div>

                <div class="d-flex justify-content-between align-items-center mt-3">
                    <div class="text-secondary small">
                        <i class="bi bi-info-circle me-1"></i>
                        Размер: {{ secret|length }} символов
                    </div>
                </div>
            </div>
        </div>

        {% if is_authenticated %}
        <div class="text-center mt-3">
            <a href="{{ url_for('index') }}" class="btn btn-secondary">
                <i class="bi  me-1"></i> Создать новый секрет
            </a>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var copyBtn = document.getElementById('viewCopyBtn');
        var container = document.getElementById('secretContainer');

        if (!copyBtn || !container) return;

        copyBtn.addEventListener('click', function () {
            var textToCopy = container.innerText || container.textContent;
            textToCopy = textToCopy.trim();

            if (navigator.clipboard && navigator.clipboard.writeText) {
                navigator.clipboard.writeText(textToCopy).then(function () {
                    processVisualSuccess();
                }).catch(function () {
                    executeFallback(textToCopy);
                });
            } else {
                executeFallback(textToCopy);
            }
        });

        function executeFallback(text) {
            var ta = document.createElement('textarea');
            ta.value = text;
            ta.style.position = 'fixed';
            ta.style.opacity = '0';
            document.body.appendChild(ta);
            ta.select();
            try {
                var successful = document.execCommand('copy');
                if (successful) {
                    processVisualSuccess();
                } else {
                    alert('Не удалось скопировать автоматически. Выделите текст и нажмите Ctrl+C');
                }
            } catch (e) {
                alert('Не удалось скопировать автоматически. Выделите текст и нажмите Ctrl+C');
            }
            document.body.removeChild(ta);
        }

        function processVisualSuccess() {
            if (typeof showToast === 'function') {
                showToast('Секрет успешно скопирован!', 'success');
            }
            var originalHtml = copyBtn.innerHTML;
            copyBtn.innerHTML = '<i class="bi bi-check-lg"></i> Скопировано!';
            copyBtn.classList.remove('btn-light');
            copyBtn.classList.add('btn-success', 'text-white');

            setTimeout(function () {
                copyBtn.innerHTML = originalHtml;
                copyBtn.classList.remove('btn-success', 'text-white');
                copyBtn.classList.add('btn-light');
            }, 2000);
        }
    });
</script>
{% endblock %}