<!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">
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
    <style>
        .code-box {
            background: var(--light-bg);
            border: 2px dashed var(--border);
            border-radius: var(--radius);
            padding: 1rem;
            font-family: var(--font-mono);
            font-size: 1.25rem;
            letter-spacing: 0.1em;
            color: var(--heading-color);
            cursor: pointer;
            transition: all 0.15s ease;
            user-select: all;
            margin-bottom: 0.5rem;
            text-align: center;
        }
        .code-box:hover {
            border-color: var(--primary);
            background: rgba(110, 86, 207, 0.04);
        }
        .code-hint {
            font-size: 0.8rem;
            color: var(--muted-foreground);
            margin-bottom: 1.5rem;
            text-align: center;
        }
        .platform-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            padding: 0.75rem 1.5rem;
            border-radius: var(--radius);
            font-weight: 600;
            font-size: 0.9rem;
            font-family: var(--font-sans);
            text-decoration: none;
            transition: all 0.15s ease;
            border: none;
            cursor: pointer;
            margin-bottom: 0.75rem;
        }
        .platform-btn:active { transform: scale(0.98); }
        .platform-btn-prolific { background: #5c6ac4; color: white; }
        .platform-btn-prolific:hover { background: #4959bd; color: white; }
        .platform-btn-mturk { background: #ff9900; color: #111; }
        .platform-btn-mturk:hover { background: #e68a00; color: #111; }
    </style>
</head>
<body class="potato-page-center">
    <div class="potato-page-card potato-page-card-wide" style="text-align: center;">
        <div class="potato-page-icon potato-page-icon-success">
            <i class="fas fa-check"></i>
        </div>

        <h1 class="potato-page-title">Thank You!</h1>
        <p class="potato-page-subtitle">
            You have successfully completed the annotation task.
            {% if completion_code %}Your responses have been recorded.{% endif %}
        </p>

        {% if completion_code %}
        <div class="mb-3">
            <div class="code-box" id="completion-code" onclick="copyCode()" title="Click to copy">
                {{ completion_code }}
            </div>
            <p class="code-hint">
                <i class="fas fa-copy me-1"></i> Click to copy your completion code
            </p>
        </div>

        {% if mturk_submit_url and mturk_assignment_id %}
        <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="platform-btn platform-btn-mturk">
                <i class="fas fa-external-link-alt me-2"></i> Submit HIT to MTurk
            </button>
        </form>
        {% elif prolific_redirect_url %}
        <a href="{{ prolific_redirect_url }}" class="platform-btn platform-btn-prolific">
            <i class="fas fa-external-link-alt me-2"></i> Return to Prolific
        </a>
        {% else %}
        <div class="potato-alert potato-alert-info" style="text-align: left;">
            <i class="fas fa-info-circle me-2"></i>
            Copy the code above and paste it in your crowdsourcing platform to receive credit.
        </div>
        {% endif %}
        {% else %}
        <div class="potato-alert potato-alert-success" style="text-align: left;">
            <i class="fas fa-check me-2"></i>
            Your annotations have been saved. You may close this window.
        </div>
        {% endif %}

        <div style="margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: 0.75rem; color: var(--muted-foreground);">
            <i class="fas fa-shield-alt me-1"></i> Your responses have been securely recorded.
        </div>
    </div>

    <script>
        function copyCode() {
            var code = document.getElementById('completion-code').innerText.trim();
            navigator.clipboard.writeText(code).then(function() {
                var codeBox = document.getElementById('completion-code');
                var originalText = codeBox.innerText;
                codeBox.innerHTML = '<i class="fas fa-check me-2"></i>Copied!';
                codeBox.style.borderColor = 'var(--success-color)';
                codeBox.style.background = 'rgba(16, 185, 129, 0.08)';
                codeBox.style.color = '#065f46';
                setTimeout(function() {
                    codeBox.innerText = originalText;
                    codeBox.style.borderColor = '';
                    codeBox.style.background = '';
                    codeBox.style.color = '';
                }, 2000);
            }).catch(function(err) {
                console.error('Failed to copy: ', err);
                alert('Failed to copy. Please select and copy manually.');
            });
        }

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