{% extends "layouts/public_base.html" %}
{% load i18n %}
{% load static %}

{% block title %}{% trans "Observation Submitted" %}{% endblock %}

{% block extra_css %}
<style>
    @keyframes scaleIn {
        from {
            transform: scale(0);
            opacity: 0;
        }
        to {
            transform: scale(1);
            opacity: 1;
        }
    }

    @keyframes pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.05); }
    }

    .animate-float {
        animation: pulse 2s ease-in-out infinite;
    }

    .success-checkmark {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: scaleIn 0.5s ease-out;
    }

    .reference-card {
        background: linear-gradient(135deg, #005696 0%, #007bbd 100%);
        position: relative;
        overflow: hidden;
    }

    .reference-card::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    }
</style>
{% endblock %}

{% block content %}
<div class="min-h-screen py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-3xl mx-auto">
        <!-- Success Icon -->
        <div class="text-center mb-8">
            <div class="success-checkmark inline-flex items-center justify-center bg-gradient-to-br from-green-400 to-green-600 shadow-xl shadow-green-200">
                <i data-lucide="check" class="w-16 h-16 text-white"></i>
            </div>
        </div>

        <!-- Main Card -->
        <div class="glass-card rounded-3xl shadow-2xl p-8 md:p-12 animate-fade-in">
            <!-- Header -->
            <div class="text-center mb-8">
                <h1 class="text-3xl font-bold text-navy mb-4">{% trans "Thank You!" %}</h1>
                <p class="text-slate text-lg leading-relaxed">
                    {% trans "Your observation has been submitted successfully." %}
                </p>
            </div>

            <!-- Reference Number -->
            <div class="reference-card rounded-2xl p-8 text-center mb-8 shadow-xl">
                <div class="relative z-10">
                    <div class="text-sm text-white/80 font-semibold mb-3 uppercase tracking-wider">
                        {% trans "Your Reference Number" %}
                    </div>
                    <div class="text-3xl md:text-4xl font-bold text-white tracking-widest font-mono mb-4" id="trackingCode">
                        {{ tracking_code }}
                    </div>
                    <button onclick="copyTrackingCode()" class="inline-flex items-center gap-2 px-4 py-2 bg-white/20 hover:bg-white/30 text-white rounded-lg text-sm font-semibold transition" id="copyBtn">
                        <i data-lucide="clipboard-copy" class="w-4 h-4"></i>
                        <span id="copyText">{% trans "Copy Code" %}</span>
                    </button>
                </div>
            </div>

            <!-- What Happens Next -->
            <div class="bg-gradient-to-br from-blue-50 to-light rounded-2xl p-6 mb-6 border-2 border-blue-100">
                <h4 class="text-lg font-bold text-navy mb-4 flex items-center gap-2">
                    <i data-lucide="info" class="w-5 h-5 text-blue"></i>
                    {% trans "Important" %}
                </h4>
                <ul class="space-y-3">
                    <li class="flex items-start gap-3">
                        <div class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 mt-0.5">
                            <i data-lucide="check" class="w-4 h-4 text-green-600"></i>
                        </div>
                        <span class="text-slate text-sm">{% trans "Save this reference number to check the status of your observation." %}</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <div class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 mt-0.5">
                            <i data-lucide="check" class="w-4 h-4 text-green-600"></i>
                        </div>
                        <span class="text-slate text-sm">{% trans "Our team will review your observation and take appropriate action." %}</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <div class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 mt-0.5">
                            <i data-lucide="check" class="w-4 h-4 text-green-600"></i>
                        </div>
                        <span class="text-slate text-sm">{% trans "You can track your observation status anytime using the reference number." %}</span>
                    </li>
                </ul>
            </div>

            <!-- Observation Summary -->
            <div class="bg-slate-50 rounded-2xl p-6 mb-8 border border-slate-100">
                <h4 class="text-sm font-bold text-navy mb-4">{% trans "Observation Summary" %}</h4>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <p class="text-xs font-bold text-slate uppercase mb-1">{% trans "Category" %}</p>
                        <p class="text-sm font-medium text-gray-800">{{ observation.category.name|default:_("Not specified") }}</p>
                    </div>
                    <div>
                        <p class="text-xs font-bold text-slate uppercase mb-1">{% trans "Severity" %}</p>
                        <span class="px-2.5 py-1 rounded-full text-xs font-semibold
                            {% if observation.severity == 'low' %}bg-green-100 text-green-700
                            {% elif observation.severity == 'medium' %}bg-yellow-100 text-yellow-700
                            {% elif observation.severity == 'high' %}bg-red-100 text-red-700
                            {% elif observation.severity == 'critical' %}bg-red-500 text-white
                            {% else %}bg-gray-100 text-gray-600{% endif %}">
                            {{ observation.get_severity_display }}
                        </span>
                    </div>
                    <div>
                        <p class="text-xs font-bold text-slate uppercase mb-1">{% trans "Status" %}</p>
                        <span class="px-2.5 py-1 rounded-full text-xs font-semibold
                            {% if observation.status == 'new' %}bg-sky-100 text-sky-700
                            {% elif observation.status == 'triaged' %}bg-teal-100 text-teal-700
                            {% elif observation.status == 'assigned' %}bg-teal-100 text-teal-700
                            {% elif observation.status == 'in_progress' %}bg-yellow-100 text-yellow-700
                            {% elif observation.status == 'resolved' %}bg-green-100 text-green-700
                            {% elif observation.status == 'closed' %}bg-gray-100 text-gray-600
                            {% elif observation.status == 'rejected' %}bg-red-100 text-red-700
                            {% elif observation.status == 'duplicate' %}bg-gray-100 text-gray-600
                            {% else %}bg-gray-100 text-gray-600{% endif %}">
                            {{ observation.get_status_display }}
                        </span>
                    </div>
                    <div>
                        <p class="text-xs font-bold text-slate uppercase mb-1">{% trans "Submitted" %}</p>
                        <p class="text-sm font-medium text-gray-800">{{ observation.created_at|date:"M d, Y H:i" }}</p>
                    </div>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="flex flex-col sm:flex-row gap-3 justify-center">
                <a href="{% url 'observations:observation_track' %}?tracking_code={{ tracking_code }}"
                   class="inline-flex items-center justify-center gap-2 bg-navy hover:bg-blue text-white px-8 py-4 rounded-xl font-bold transition shadow-lg shadow-navy/25 btn-hover">
                    <i data-lucide="search" class="w-5 h-5"></i>
                    {% trans "Track Status" %}
                </a>
                <a href="{% url 'observations:observation_create_public' %}"
                   class="inline-flex items-center justify-center gap-2 bg-slate-600 hover:bg-slate-700 text-white px-8 py-4 rounded-xl font-bold transition shadow-lg shadow-slate-200 btn-hover">
                    <i data-lucide="plus-circle" class="w-5 h-5"></i>
                    {% trans "Submit Another" %}
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function copyTrackingCode() {
    const code = document.getElementById('trackingCode').textContent.trim();
    navigator.clipboard.writeText(code).then(() => {
        const btn = document.getElementById('copyBtn');
        const text = document.getElementById('copyText');
        btn.classList.add('bg-green-500/30');
        text.textContent = '{% trans "Copied!" %}';

        setTimeout(() => {
            btn.classList.remove('bg-green-500/30');
            text.textContent = '{% trans "Copy Code" %}';
        }, 2000);
    });
}
</script>
{% endblock %}