{% extends 'base.html' %}

{% block title %}Message Sent Successfully | {{ settings.site_name }}{% endblock %}

{% block content %}
<section class="section">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-6 text-center">
                <!-- Success Icon -->
                <div class="mb-4">
                    <div class="success-checkmark mx-auto">
                        <i class="fas fa-check"></i>
                    </div>
                </div>
                
                <h1 class="h2 mb-3">Message Sent Successfully!</h1>
                <p class="text-muted mb-4">
                    Thank you for contacting us. We've received your message and will respond as soon as possible.
                </p>
                
                <!-- Thread Details Card -->
                {% if thread %}
                <div class="card text-start mb-4">
                    <div class="card-header bg-success text-white">
                        <i class="fas fa-envelope-open-text me-2"></i>Your Conversation Details
                    </div>
                    <div class="card-body">
                        <div class="row mb-3">
                            <div class="col-sm-4 fw-semibold">Subject:</div>
                            <div class="col-sm-8">{{ thread.subject }}</div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-sm-4 fw-semibold">Submitted:</div>
                            <div class="col-sm-8">{{ thread.created_at.strftime('%B %d, %Y at %I:%M %p') }}</div>
                        </div>
                        <div class="row">
                            <div class="col-sm-4 fw-semibold">Your Email:</div>
                            <div class="col-sm-8">{{ thread.email }}</div>
                        </div>
                    </div>
                </div>
                
                <!-- Access Link -->
                <div class="card text-start mb-4">
                    <div class="card-header">
                        <i class="fas fa-link me-2"></i>Your Unique Conversation Link
                    </div>
                    <div class="card-body">
                        <p class="small text-muted mb-3">
                            Use this link to view replies and send follow-up messages. Keep it safe!
                        </p>
                        <div class="input-group mb-3">
                            <input type="text" class="form-control" readonly 
                                   id="thread-link"
                                   value="{{ url_for('contact.view_thread', token=thread.secure_token, _external=True) }}">
                            <button class="btn btn-outline-secondary" type="button" onclick="copyThreadLink()">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                        <div class="alert alert-info small mb-0">
                            <i class="fas fa-envelope me-2"></i>
                            We've also sent this link to your email address.
                        </div>
                    </div>
                </div>
                {% endif %}
                
                <!-- What to Expect -->
                <div class="card text-start mb-4">
                    <div class="card-header">
                        <i class="fas fa-clock me-2"></i>What Happens Next?
                    </div>
                    <div class="card-body">
                        <ul class="list-unstyled mb-0">
                            <li class="d-flex align-items-start mb-3">
                                <span class="badge bg-primary rounded-circle me-3">1</span>
                                <div>
                                    <strong>Review</strong>
                                    <p class="text-muted small mb-0">Our team will review your message within 1-2 business days.</p>
                                </div>
                            </li>
                            <li class="d-flex align-items-start mb-3">
                                <span class="badge bg-primary rounded-circle me-3">2</span>
                                <div>
                                    <strong>Response</strong>
                                    <p class="text-muted small mb-0">You'll receive an email notification when we reply.</p>
                                </div>
                            </li>
                            <li class="d-flex align-items-start">
                                <span class="badge bg-primary rounded-circle me-3">3</span>
                                <div>
                                    <strong>Follow Up</strong>
                                    <p class="text-muted small mb-0">Use your unique link to view replies and continue the conversation.</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                
                <!-- Action Buttons -->
                <div class="d-flex flex-column flex-sm-row gap-3 justify-content-center">
                    {% if thread %}
                    <a href="{{ url_for('contact.view_thread', token=thread.secure_token) }}" class="btn btn-primary">
                        <i class="fas fa-comments me-2"></i>View Conversation
                    </a>
                    {% endif %}
                    <a href="{{ url_for('main.home') }}" class="btn btn-outline-secondary">
                        <i class="fas fa-home me-2"></i>Return to Home
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}

{% block scripts %}
<script>
function copyThreadLink() {
    const linkInput = document.getElementById('thread-link');
    linkInput.select();
    linkInput.setSelectionRange(0, 99999);
    navigator.clipboard.writeText(linkInput.value).then(() => {
        const btn = event.target.closest('button');
        const originalHTML = btn.innerHTML;
        btn.innerHTML = '<i class="fas fa-check text-success"></i>';
        setTimeout(() => {
            btn.innerHTML = originalHTML;
        }, 2000);
    });
}
</script>
{% endblock %}