<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }} - Complete</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        body {
            background-color: #f8f9fa;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .completion-card {
            max-width: 600px;
            width: 100%;
            margin: 20px;
        }
        .completion-icon {
            font-size: 4rem;
            color: #28a745;
        }
        .completion-code-box {
            background-color: #e9ecef;
            border: 2px dashed #6c757d;
            border-radius: 8px;
            padding: 20px;
            font-size: 1.5rem;
            font-family: monospace;
            letter-spacing: 2px;
            text-align: center;
            margin: 20px 0;
            user-select: all;
            cursor: pointer;
        }
        .completion-code-box:hover {
            background-color: #dee2e6;
        }
        .copy-hint {
            font-size: 0.85rem;
            color: #6c757d;
        }
        .prolific-button {
            background-color: #5c6ac4;
            border-color: #5c6ac4;
        }
        .prolific-button:hover {
            background-color: #4959bd;
            border-color: #4959bd;
        }
        .mturk-button {
            background-color: #ff9900;
            border-color: #ff9900;
            color: #111;
        }
        .mturk-button:hover {
            background-color: #e68a00;
            border-color: #e68a00;
            color: #111;
        }
    </style>
</head>
<body>
    <div class="card completion-card shadow">
        <div class="card-body text-center p-5">
            <div class="completion-icon mb-4">
                <i class="fas fa-check-circle"></i>
            </div>

            <h1 class="card-title mb-3">Thank You!</h1>
            <p class="card-text text-muted mb-4">
                You have successfully completed the annotation task.
                {% if completion_code %}
                Your responses have been recorded.
                {% endif %}
            </p>

            {% if completion_code %}
            <div class="mb-4">
                <h5 class="mb-3">Your Completion Code:</h5>
                <div class="completion-code-box" id="completion-code" onclick="copyCode()" title="Click to copy">
                    {{ completion_code }}
                </div>
                <p class="copy-hint">
                    <i class="fas fa-copy me-1"></i>
                    Click the code above to copy it to your clipboard
                </p>
            </div>

            {% if mturk_submit_url and mturk_assignment_id %}
            <!-- MTurk Submission Form -->
            <div class="d-grid gap-2 mb-4">
                <form id="mturk-form" action="{{ mturk_submit_url }}" method="POST">
                    <input type="hidden" name="assignmentId" value="{{ mturk_assignment_id }}">
                    {% if completion_code %}
                    <input type="hidden" name="completionCode" value="{{ completion_code }}">
                    {% endif %}
                    <button type="submit" class="btn btn-lg w-100 mturk-button">
                        <i class="fas fa-external-link-alt me-2"></i>
                        Submit HIT to MTurk
                    </button>
                </form>
            </div>
            <p class="text-muted small">
                Click the button above to submit your completed HIT to Amazon Mechanical Turk.
            </p>
            {% elif prolific_redirect_url %}
            <div class="d-grid gap-2 mb-4">
                <a href="{{ prolific_redirect_url }}" class="btn btn-primary btn-lg prolific-button">
                    <i class="fas fa-external-link-alt me-2"></i>
                    Return to Prolific
                </a>
            </div>
            <p class="text-muted small">
                Click the button above to automatically submit your completion code to Prolific.
            </p>
            {% else %}
            <div class="alert alert-info" role="alert">
                <i class="fas fa-info-circle me-2"></i>
                Please copy the completion code above and paste it in your crowdsourcing platform to receive credit for your work.
            </div>
            {% endif %}
            {% else %}
            <div class="alert alert-success" role="alert">
                <i class="fas fa-check me-2"></i>
                Your annotations have been saved. You may now close this window.
            </div>
            {% endif %}

            <hr class="my-4">

            <p class="text-muted small mb-0">
                <i class="fas fa-shield-alt me-1"></i>
                Your responses have been securely recorded.
            </p>
        </div>
    </div>

    <script>
        function copyCode() {
            const code = document.getElementById('completion-code').innerText.trim();
            navigator.clipboard.writeText(code).then(function() {
                // Show feedback
                const codeBox = document.getElementById('completion-code');
                const originalText = codeBox.innerText;
                codeBox.innerHTML = '<i class="fas fa-check me-2"></i>Copied!';
                codeBox.style.backgroundColor = '#d4edda';
                codeBox.style.color = '#155724';

                setTimeout(function() {
                    codeBox.innerText = originalText;
                    codeBox.style.backgroundColor = '';
                    codeBox.style.color = '';
                }, 2000);
            }).catch(function(err) {
                console.error('Failed to copy: ', err);
                alert('Failed to copy code. Please select and copy manually.');
            });
        }

        {% if auto_redirect and prolific_redirect_url %}
        // Auto-redirect after a delay (configurable)
        setTimeout(function() {
            window.location.href = "{{ prolific_redirect_url }}";
        }, {{ auto_redirect_delay|default(5000) }});
        {% endif %}
    </script>
</body>
</html>
