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

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

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- Page Header -->
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
        <div>
            <h2 class="text-3xl font-bold text-gray-800 mb-2 flex items-center gap-2">
                <i data-lucide="file-text" class="w-8 h-8 text-navy"></i>
                {{ filename }}
            </h2>
            <div class="flex flex-wrap gap-4 text-sm text-gray-500">
                <div class="flex items-center gap-2">
                    <i data-lucide="file-type" class="w-4 h-4"></i>
                    <span>{% trans "Type" %}:</span>
                    {% if report_type == 'json' %}
                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-bold bg-cyan-100 text-cyan-700">JSON</span>
                    {% elif report_type == 'html' %}
                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-bold bg-emerald-100 text-emerald-700">HTML</span>
                    {% elif report_type == 'markdown' %}
                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-bold bg-amber-100 text-amber-700">Markdown</span>
                    {% else %}
                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-bold bg-gray-100 text-gray-700">{{ report_type|upper }}</span>
                    {% endif %}
                </div>
                <div class="flex items-center gap-2">
                    <i data-lucide="hard-drive" class="w-4 h-4"></i>
                    <span>{% trans "Size" %}: {{ size_human }}</span>
                </div>
                <div class="flex items-center gap-2">
                    <i data-lucide="calendar" class="w-4 h-4"></i>
                    <span>{% trans "Created" %}: {{ created_date|date:"Y-m-d H:i:s" }}</span>
                </div>
            </div>
        </div>
        <div class="flex flex-wrap gap-3">
            <a href="{% url 'surveys:analytics_report_view_inline' filename %}" 
               class="bg-emerald-500 text-white px-6 py-3 rounded-xl font-semibold hover:bg-emerald-600 transition flex items-center gap-2"
               target="_blank">
                <i data-lucide="eye" class="w-5 h-5"></i> {% trans "View" %}
            </a>
            <a href="{% url 'surveys:analytics_report_download' filename %}" 
               class="bg-blue-500 text-white px-6 py-3 rounded-xl font-semibold hover:bg-blue-600 transition flex items-center gap-2">
                <i data-lucide="download" class="w-5 h-5"></i> {% trans "Download" %}
            </a>
            <a href="{% url 'surveys:analytics_reports' %}" 
               class="border-2 border-gray-200 text-gray-700 px-6 py-3 rounded-xl font-semibold hover:bg-gray-50 transition flex items-center gap-2">
                <i data-lucide="arrow-left" class="w-5 h-5"></i> {% trans "Back to Reports" %}
            </a>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
        <div class="lg:col-span-2">
            <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-50">
                <h3 class="font-bold text-gray-800 mb-4 flex items-center gap-2">
                    <i data-lucide="info" class="w-5 h-5 text-navy"></i>
                    {% trans "Report Information" %}
                </h3>
                <div class="space-y-4">
                    <div class="flex justify-between items-center py-3 border-b border-gray-100">
                        <span class="text-gray-500 font-medium">{% trans "Filename" %}</span>
                        <strong class="text-gray-800">{{ filename }}</strong>
                    </div>
                    <div class="flex justify-between items-center py-3 border-b border-gray-100">
                        <span class="text-gray-500 font-medium">{% trans "Format" %}</span>
                        {% if report_type == 'json' %}
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-cyan-100 text-cyan-700">JSON</span>
                        {% elif report_type == 'markdown' %}
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-amber-100 text-amber-700">Markdown</span>
                        {% else %}
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-gray-100 text-gray-700">{{ report_type|title }}</span>
                        {% endif %}
                    </div>
                    <div class="flex justify-between items-center py-3 border-b border-gray-100">
                        <span class="text-gray-500 font-medium">{% trans "Size" %}</span>
                        <span class="text-gray-800">{{ size_human }}</span>
                    </div>
                    <div class="flex justify-between items-center py-3 border-b border-gray-100">
                        <span class="text-gray-500 font-medium">{% trans "Created" %}</span>
                        <span class="text-gray-800">{{ created_date|date:"Y-m-d H:i:s" }}</span>
                    </div>
                    <div class="flex justify-between items-center py-3">
                        <span class="text-gray-500 font-medium">{% trans "Last Modified" %}</span>
                        <span class="text-gray-800">{{ modified_date|date:"Y-m-d H:i:s" }}</span>
                    </div>
                </div>
            </div>
        </div>

        <div>
            <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-50">
                <h3 class="font-bold text-gray-800 mb-4 flex items-center gap-2">
                    <i data-lucide="file-code" class="w-5 h-5 text-navy"></i>
                    {% trans "File Format Details" %}
                </h3>
                {% if report_type == 'json' %}
                <div class="bg-cyan-50 border border-cyan-100 p-4 rounded-xl mb-4">
                    <div class="flex items-center gap-2 mb-2">
                        <i data-lucide="info" class="w-5 h-5 text-cyan-600"></i>
                        <strong class="text-cyan-700">{% trans "JSON Format" %}</strong>
                    </div>
                    <p class="text-sm text-cyan-600 leading-relaxed">
                        {% trans "Structured data format suitable for programmatic access and API integration. Can be imported into data analysis tools or custom applications." %}
                    </p>
                </div>
                <h4 class="font-bold text-gray-800 mb-3">{% trans "Recommended Viewers" %}:</h4>
                <ul class="space-y-2">
                    <li class="flex items-center gap-2 text-sm text-gray-600">
                        <i data-lucide="check" class="w-4 h-4 text-emerald-500"></i>
                        {% trans "Any text editor" %}
                    </li>
                    <li class="flex items-center gap-2 text-sm text-gray-600">
                        <i data-lucide="check" class="w-4 h-4 text-emerald-500"></i>
                        {% trans "JSON formatters/validators" %}
                    </li>
                    <li class="flex items-center gap-2 text-sm text-gray-600">
                        <i data-lucide="check" class="w-4 h-4 text-emerald-500"></i>
                        {% trans "Data analysis tools" %}
                    </li>
                </ul>
                {% elif report_type == 'markdown' %}
                <div class="bg-amber-50 border border-amber-100 p-4 rounded-xl mb-4">
                    <div class="flex items-center gap-2 mb-2">
                        <i data-lucide="info" class="w-5 h-5 text-amber-600"></i>
                        <strong class="text-amber-700">{% trans "Markdown Format" %}</strong>
                    </div>
                    <p class="text-sm text-amber-600 leading-relaxed">
                        {% trans "Plain text formatting syntax. Lightweight and readable, perfect for documentation and version control systems." %}
                    </p>
                </div>
                <h4 class="font-bold text-gray-800 mb-3">{% trans "Recommended Viewers" %}:</h4>
                <ul class="space-y-2">
                    <li class="flex items-center gap-2 text-sm text-gray-600">
                        <i data-lucide="check" class="w-4 h-4 text-emerald-500"></i>
                        {% trans "Any text editor" %}
                    </li>
                    <li class="flex items-center gap-2 text-sm text-gray-600">
                        <i data-lucide="check" class="w-4 h-4 text-emerald-500"></i>
                        {% trans "Markdown previewers" %}
                    </li>
                    <li class="flex items-center gap-2 text-sm text-gray-600">
                        <i data-lucide="check" class="w-4 h-4 text-emerald-500"></i>
                        {% trans "GitHub/GitLab renderers" %}
                    </li>
                </ul>
                {% else %}
                <div class="bg-gray-50 border border-gray-100 p-4 rounded-xl mb-4">
                    <div class="flex items-center gap-2 mb-2">
                        <i data-lucide="help-circle" class="w-5 h-5 text-gray-500"></i>
                        <strong class="text-gray-700">{% trans "Unknown Format" %}</strong>
                    </div>
                    <p class="text-sm text-gray-600 leading-relaxed">
                        {% trans "This report format is not recognized. Please download the file to view its contents." %}
                    </p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-50">
        <h3 class="font-bold text-gray-800 mb-4 flex items-center gap-2">
            <i data-lucide="zap" class="w-5 h-5 text-navy"></i>
            {% trans "Quick Actions" %}
        </h3>
        <div class="flex flex-wrap gap-3">
            <a href="{% url 'surveys:analytics_report_view_inline' filename %}" 
               class="bg-emerald-500 text-white px-6 py-3 rounded-xl font-semibold hover:bg-emerald-600 transition flex items-center gap-2"
               target="_blank">
                <i data-lucide="eye" class="w-5 h-5"></i> {% trans "View Report" %}
            </a>
            <a href="{% url 'surveys:analytics_report_download' filename %}" 
               class="bg-blue-500 text-white px-6 py-3 rounded-xl font-semibold hover:bg-blue-600 transition flex items-center gap-2">
                <i data-lucide="download" class="w-5 h-5"></i> {% trans "Download Report" %}
            </a>
            <a href="{% url 'surveys:analytics_reports' %}" 
               class="border-2 border-gray-200 text-gray-700 px-6 py-3 rounded-xl font-semibold hover:bg-gray-50 transition flex items-center gap-2">
                <i data-lucide="list" class="w-5 h-5"></i> {% trans "View All Reports" %}
            </a>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    lucide.createIcons();
});
</script>
{% endblock %}