{% extends "layouts/base.html" %}
{% load i18n %}

{% block title %}{% trans "Survey Analytics Dashboard" %} - PX360{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-navy mb-2">{% trans "Survey Analytics Dashboard" %}</h1>
        <p class="text-slate">{% trans "Real-time insights and metrics for your surveys" %}</p>
    </div>

    <!-- Template Selector -->
    <div class="bg-white rounded-2xl shadow-lg p-6 mb-8">
        <form method="get" class="flex items-end gap-4">
            <div class="flex-1">
                <label class="block text-sm font-semibold text-navy mb-2">{% trans "Select Survey Template" %}</label>
                <select name="template" class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl focus:border-blue focus:outline-none">
                    <option value="">{% trans "-- Choose a template --" %}</option>
                    {% for template in templates %}
                    <option value="{{ template.id }}" {% if selected_template.id == template.id %}selected{% endif %}>
                        {{ template.name }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            <button type="submit" class="bg-blue-600 text-white px-6 py-3 rounded-xl font-semibold hover:bg-blue-700 transition">
                {% trans "View Analytics" %}
            </button>
        </form>
    </div>

    {% if analytics_data %}
    <!-- Key Metrics -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <div class="bg-white rounded-2xl shadow-lg p-6">
            <div class="text-sm text-slate mb-1">{% trans "Total Sent" %}</div>
            <div class="text-3xl font-bold text-navy">{{ analytics_data.total_sent }}</div>
        </div>

        <div class="bg-white rounded-2xl shadow-lg p-6">
            <div class="text-sm text-slate mb-1">{% trans "Completion Rate" %}</div>
            <div class="text-3xl font-bold text-green-600">{{ analytics_data.completion_rate|floatformat:1 }}%</div>
        </div>

        <div class="bg-white rounded-2xl shadow-lg p-6">
            <div class="text-sm text-slate mb-1">{% trans "Avg. Score" %}</div>
            <div class="text-3xl font-bold text-blue-600">{{ analytics_data.avg_score|floatformat:1 }}</div>
        </div>

        <div class="bg-white rounded-2xl shadow-lg p-6">
            <div class="text-sm text-slate mb-1">{% trans "Response Time" %}</div>
            <div class="text-3xl font-bold text-purple-600">{{ analytics_data.avg_completion_time|floatformat:0 }}s</div>
        </div>
    </div>

    <!-- Charts Section -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <div class="bg-white rounded-2xl shadow-lg p-6">
            <h3 class="text-lg font-bold text-navy mb-4">{% trans "Status Distribution" %}</h3>
            <div id="statusChart" class="h-64">
                <div class="flex items-center justify-center h-full text-slate">
                    {% trans "Chart visualization would render here" %}
                </div>
            </div>
        </div>

        <div class="bg-white rounded-2xl shadow-lg p-6">
            <h3 class="text-lg font-bold text-navy mb-4">{% trans "Daily Activity (Last 30 Days)" %}</h3>
            <div id="activityChart" class="h-64">
                <div class="flex items-center justify-center h-full text-slate">
                    {% trans "Chart visualization would render here" %}
                </div>
            </div>
        </div>
    </div>

    <!-- Detailed Stats -->
    <div class="bg-white rounded-2xl shadow-lg p-6 mt-8">
        <h3 class="text-lg font-bold text-navy mb-4">{% trans "Detailed Statistics" %}</h3>
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="border-b border-slate-200">
                        <th class="text-left py-3 px-4 font-semibold text-navy">{% trans "Metric" %}</th>
                        <th class="text-right py-3 px-4 font-semibold text-navy">{% trans "Value" %}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="border-b border-slate-100">
                        <td class="py-3 px-4">{% trans "Total Surveys Sent" %}</td>
                        <td class="py-3 px-4 text-right font-semibold">{{ analytics_data.total_sent }}</td>
                    </tr>
                    <tr class="border-b border-slate-100">
                        <td class="py-3 px-4">{% trans "Surveys Opened" %}</td>
                        <td class="py-3 px-4 text-right font-semibold">{{ analytics_data.total_opened }}</td>
                    </tr>
                    <tr class="border-b border-slate-100">
                        <td class="py-3 px-4">{% trans "Surveys Completed" %}</td>
                        <td class="py-3 px-4 text-right font-semibold text-green-600">{{ analytics_data.total_completed }}</td>
                    </tr>
                    <tr class="border-b border-slate-100">
                        <td class="py-3 px-4">{% trans "Surveys Abandoned" %}</td>
                        <td class="py-3 px-4 text-right font-semibold text-red-600">{{ analytics_data.total_abandoned }}</td>
                    </tr>
                    <tr class="border-b border-slate-100">
                        <td class="py-3 px-4">{% trans "Average Time to Complete" %}</td>
                        <td class="py-3 px-4 text-right font-semibold">{{ analytics_data.avg_completion_time|floatformat:1 }}s</td>
                    </tr>
                    <tr>
                        <td class="py-3 px-4">{% trans "Negative Survey Rate" %}</td>
                        <td class="py-3 px-4 text-right font-semibold">{{ analytics_data.negative_rate|floatformat:1 }}%</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    {% else %}
    <div class="bg-white rounded-2xl shadow-lg p-12 text-center">
        <div class="text-6xl mb-4">📊</div>
        <h3 class="text-xl font-bold text-navy mb-2">{% trans "Select a Survey Template" %}</h3>
        <p class="text-slate">{% trans "Choose a survey template above to view detailed analytics and metrics." %}</p>
    </div>
    {% endif %}
</div>
{% endblock %}