{% extends "base.html" %}

{% block content %}
<div class="card border-secondary">
    <div class="card-body text-center">
        <h5 class="card-title">Секрет создан!</h5>
        <p class="text-secondary">Ссылка для получения секрета готова.</p>
        <div class="alert alert-secondary text-start position-relative">
            <label class="form-label fw-bold small mb-1">
                <i class="bi bi-clipboard me-1"></i> Скопируйте этот текст и отправьте получателю:
            </label>

            <div id="fullMessageBlock" class="bg-white p-2 rounded border"
                 style="font-family: monospace; font-size: 0.95rem; word-wrap: break-word; user-select: all; cursor: text; line-height: 1.6; white-space: pre-line;">Перейдите по ссылке, чтобы прочитать сообщение.
                Ссылка действительна 24 часа.
                После открытия доступ к данным будет потерян навсегда.
                Повторно запросить или восстановить ссылку невозможно.
                {{ link }}
            </div>

            <div class="mt-2 text-end">
                <button class="btn btn-sm btn-outline-secondary js-copy-trigger" type="button"
                        data-target="fullMessageBlock">
                    <i class="bi bi-clipboard-plus"></i> Скопировать всё сообщение
                </button>
            </div>
        </div>

        <div class="alert alert-secondary text-start position-relative">
            <label class="form-label fw-bold small mb-1">
                <i class="bi bi-clipboard me-1"></i> Скопируйте этот текст и отправьте получателю:
            </label>

            <div id="fullMessageBlock1" class="bg-white p-2 rounded border"
                 style="font-family: monospace; font-size: 0.95rem; word-wrap: break-word; user-select: all; cursor: text; line-height: 1.6; white-space: pre-line;">Follow the link to read the message.
                The link is valid for 24 hours.
                Once opened, access to the data will be lost forever.
                It is impossible to request the link again or restore it.
                {{ link }}
            </div>

            <div class="mt-2 text-end">
                <button class="btn btn-sm btn-outline-secondary js-copy-trigger" type="button"
                        data-target="fullMessageBlock1">
                    <i class="bi bi-clipboard-plus"></i> Скопировать всё сообщение
                </button>
            </div>
        </div>

        <div class="mb-3">
            <label class="form-label small text-secondary">Только ссылка:</label>
            <div class="input-group">
                <input type="text" class="form-control" id="secretLink" value="{{ link }}" readonly>
                <button class="btn btn-secondary" type="button" id="copyBtn">
                    <i class="bi bi-clipboard"></i> Копировать
                </button>
            </div>
        </div>

        <div class="row g-2">
            <div class="col">
                <a href="{{ link }}" class="btn btn-secondary w-100" target="_blank" rel="noopener noreferrer">Открыть
                    секрет</a>
            </div>
            <div class="col">
                <a href="{{ url_for('index') }}" class="btn btn-outline-secondary w-100">Создать ещё</a>
            </div>
        </div>

    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function () {

        var copyTriggers = document.querySelectorAll('.js-copy-trigger');

        copyTriggers.forEach(function (btn) {
            btn.addEventListener('click', function () {
                var targetId = this.getAttribute('data-target');
                var targetContainer = document.getElementById(targetId);

                if (targetContainer) {
                    var textToCopy = targetContainer.innerText || targetContainer.textContent;
                    textToCopy = textToCopy.trim();

                    var isEnglish = targetId.includes('1');
                    var successMsg = isEnglish ? 'English text copied!' : 'Русский текст скопирован!';

                    handleCopy(textToCopy, this, successMsg);
                }
            });
        });

        var copyLinkBtn = document.getElementById('copyBtn');
        var input = document.getElementById('secretLink');

        if (copyLinkBtn && input) {
            copyLinkBtn.addEventListener('click', function () {
                var textToCopy = input.value.trim();
                handleCopy(textToCopy, this, 'Ссылка скопирована! / Link copied!');
            });
        }

        if (!window.handleCopyRegistered) {
            window.handleCopyRegistered = true;

            window.handleCopy = function (text, buttonElement, successMessage) {
                if (navigator.clipboard && navigator.clipboard.writeText) {
                    navigator.clipboard.writeText(text).then(function () {
                        processVisualSuccess(buttonElement, successMessage);
                    }).catch(function () {
                        executeFallback(text, buttonElement, successMessage);
                    });
                } else {
                    executeFallback(text, buttonElement, successMessage);
                }
            }

            window.executeFallback = function (text, buttonElement, successMessage) {
                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(buttonElement, successMessage);
                    } else {
                        alert('Не удалось скопировать. Выделите текст руками и нажмите Ctrl+C');
                    }
                } catch (err) {
                    alert('Не удалось скопировать. Выделите текст руками и нажмите Ctrl+C');
                }
                document.body.removeChild(ta);
            }

            window.processVisualSuccess = function (btn, message) {
                if (typeof showToast === 'function') {
                    showToast(message, 'success');
                }

                var originalHtml = btn.innerHTML;
                var isSmallBtn = btn.classList.contains('btn-sm');

                btn.innerHTML = '<i class="bi bi-check-lg"></i> Скопировано!';
                btn.classList.remove('btn-secondary', 'btn-outline-secondary');
                btn.classList.add('btn-success');

                setTimeout(function () {
                    btn.innerHTML = originalHtml;
                    btn.classList.remove('btn-success');
                    if (isSmallBtn) {
                        btn.classList.add('btn-outline-secondary');
                    } else {
                        btn.classList.add('btn-secondary');
                    }
                }, 2000);
            }
        }
    });
</script>
{% endblock %}