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

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

{% block content %}
<div class="container-fluid px-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0">{% trans "Survey Analytics Reports" %}</h1>
            <p class="text-muted mb-0">{% trans "Comprehensive survey performance analysis with statistical insights" %}</p>
        </div>
        <div>
            <a href="{% url 'surveys:enhanced_reports_list' %}" class="btn btn-success me-2">
                <i class="bi bi-graph-up me-2"></i>{% trans "Enhanced Reports" %}
            </a>
            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#generateReportModal">
                <i class="bi bi-file-earmark-plus me-2"></i>{% trans "Generate Report" %}
            </button>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row g-4 mb-4">
        <div class="col-xl-3 col-md-6">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h6 class="text-muted mb-1">{% trans "Total Reports" %}</h6>
                            <h3 class="mb-0">{{ stats.total }}</h3>
                        </div>
                        <div class="bg-primary bg-opacity-10 rounded-circle p-3">
                            <i class="bi bi-files text-primary fs-4"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-3 col-md-6">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h6 class="text-muted mb-1">{% trans "JSON Reports" %}</h6>
                            <h3 class="mb-0">{{ stats.json }}</h3>
                        </div>
                        <div class="bg-info bg-opacity-10 rounded-circle p-3">
                            <i class="bi bi-file-code text-info fs-4"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-3 col-md-6">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h6 class="text-muted mb-1">{% trans "HTML Reports" %}</h6>
                            <h3 class="mb-0">{{ stats.html }}</h3>
                        </div>
                        <div class="bg-success bg-opacity-10 rounded-circle p-3">
                            <i class="bi bi-file-earmark-text text-success fs-4"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-3 col-md-6">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h6 class="text-muted mb-1">{% trans "Markdown Reports" %}</h6>
                            <h3 class="mb-0">{{ stats.markdown }}</h3>
                        </div>
                        <div class="bg-warning bg-opacity-10 rounded-circle p-3">
                            <i class="bi bi-file-richtext text-warning fs-4"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Reports Table -->
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white border-0">
            <h5 class="mb-0">{% trans "Available Reports" %}</h5>
        </div>
        <div class="card-body">
            {% if reports %}
                <div class="table-responsive">
                    <table class="table table-hover align-middle">
                        <thead>
                            <tr>
                                <th>{% trans "Filename" %}</th>
                                <th>{% trans "Type" %}</th>
                                <th>{% trans "Size" %}</th>
                                <th>{% trans "Created" %}</th>
                                <th class="text-end">{% trans "Actions" %}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for report in reports %}
                                <tr>
                                    <td>
                                        <i class="bi bi-file-earmark me-2"></i>
                                        <strong>{{ report.filename }}</strong>
                                    </td>
                                    <td>
                                        {% if report.type == 'json' %}
                                            <span class="badge bg-info">JSON</span>
                                        {% elif report.type == 'html' %}
                                            <span class="badge bg-success">HTML</span>
                                        {% elif report.type == 'markdown' %}
                                            <span class="badge bg-warning text-dark">Markdown</span>
                                        {% else %}
                                            <span class="badge bg-secondary">{{ report.type|title }}</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ report.size_human }}</td>
                                    <td>
                                        <small class="text-muted">{{ report.created_date|date:"Y-m-d H:i:s" }}</small>
                                    </td>
                                    <td class="text-end">
                                        <div class="btn-group">
                                            <a href="{% url 'surveys:analytics_report_view_inline' report.filename %}" 
                                               class="btn btn-sm btn-outline-primary"
                                               title="{% trans 'View' %}"
                                               target="_blank">
                                                <i class="bi bi-eye"></i>
                                            </a>
                                            <a href="{% url 'surveys:analytics_report_download' report.filename %}" 
                                               class="btn btn-sm btn-outline-success"
                                               title="{% trans 'Download' %}">
                                                <i class="bi bi-download"></i>
                                            </a>
                                            <form method="post" 
                                                  action="{% url 'surveys:analytics_report_delete' report.filename %}"
                                                  class="d-inline"
                                                  onsubmit="return confirm('{% trans "Are you sure you want to delete this report?" %}')">
                                                {% csrf_token %}
                                                <button type="submit" class="btn btn-sm btn-outline-danger"
                                                        title="{% trans 'Delete' %}">
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% else %}
                <div class="text-center py-5">
                    <i class="bi bi-file-earmark-x text-muted fs-1 mb-3"></i>
                    <h5 class="text-muted">{% trans "No reports found" %}</h5>
                    <p class="text-muted mb-4">
                        {% trans "Generate your first comprehensive survey analytics report." %}
                    </p>
                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#generateReportModal">
                        <i class="bi bi-file-earmark-plus me-2"></i>{% trans "Generate Report" %}
                    </button>
                </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- Generate Report Modal -->
<div class="modal fade" id="generateReportModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{% trans "Generate Analytics Report" %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="generateReportForm">
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="template" class="form-label">{% trans "Survey Template (optional)" %}</label>
                            <select name="template" id="template" class="form-select">
                                <option value="">{% trans "All Templates" %}</option>
                                <!-- Templates will be loaded via AJAX -->
                            </select>
                        </div>
                        
                        <div class="col-md-6">
                            <label for="format" class="form-label">{% trans "Output Format" %}</label>
                            <select name="format" id="format" class="form-select">
                                <option value="json">JSON</option>
                                <option value="html">HTML</option>
                                <option value="markdown">Markdown</option>
                            </select>
                        </div>
                        
                        <div class="col-md-6">
                            <label for="start_date" class="form-label">{% trans "Start Date (optional)" %}</label>
                            <input type="date" name="start_date" id="start_date" class="form-control">
                        </div>
                        
                        <div class="col-md-6">
                            <label for="end_date" class="form-label">{% trans "End Date (optional)" %}</label>
                            <input type="date" name="end_date" id="end_date" class="form-control">
                        </div>
                        
                        <div class="col-12">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="save" id="save" checked>
                                <label class="form-check-label" for="save">
                                    {% trans "Save report to server for later access" %}
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
                    <button type="submit" class="btn btn-primary" id="generateBtn">
                        <i class="bi bi-gear me-2"></i>{% trans "Generate" %}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Load survey templates
    fetch('/surveys/api/templates/')
        .then(response => response.json())
        .then(data => {
            const templateSelect = document.getElementById('template');
            data.results.forEach(template => {
                const option = document.createElement('option');
                option.value = template.name;
                option.textContent = template.name;
                templateSelect.appendChild(option);
            });
        })
        .catch(error => console.error('Error loading templates:', error));
    
    // Handle form submission
    document.getElementById('generateReportForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const btn = document.getElementById('generateBtn');
        const originalText = btn.innerHTML;
        btn.disabled = true;
        btn.innerHTML = '<i class="bi bi-hourglass-split me-2"></i>{% trans "Generating..." %}';
        
        const formData = new FormData(this);
        const data = {};
        formData.forEach((value, key) => {
            if (value) {
                if (key === 'save') {
                    data[key] = true;
                } else {
                    data[key] = value;
                }
            }
        });
        
        fetch('/surveys/api/analytics/generate_report/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(result => {
            btn.disabled = false;
            btn.innerHTML = originalText;
            
            if (result.success) {
                const modal = bootstrap.Modal.getInstance(document.getElementById('generateReportModal'));
                modal.hide();
                
                if (result.content) {
                    // Show content in new tab for HTML/Markdown
                    const blob = new Blob([result.content], { type: 'text/html' });
                    const url = URL.createObjectURL(blob);
                    window.open(url, '_blank');
                } else if (result.data) {
                    // Show JSON data
                    const blob = new Blob([JSON.stringify(result.data, null, 2)], { type: 'application/json' });
                    const url = URL.createObjectURL(blob);
                    window.open(url, '_blank');
                }
                
                location.reload();
            } else {
                alert('Error: ' + (result.error || 'Failed to generate report'));
            }
        })
        .catch(error => {
            btn.disabled = false;
            btn.innerHTML = originalText;
            alert('Error: ' + error.message);
        });
    });
});
</script>
{% endblock %}