{% extends "base.html" %}

{% block content %}
<div class="container my-5">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <a href="{% url 'survey:survey_list' %}" class="btn btn-sm btn-outline-secondary mb-2">
                <i class="bi bi-arrow-left"></i> Back to Dashboard
            </a>
            <h1 class="h2 text-white"><i class="bi bi-bar-chart-line text-primary me-2"></i>Results: {{ survey.name }}</h1>
            <p class="text-muted mb-0">Analytics and details for the feedback questions.</p>
        </div>
        <div>
            <a href="{% url 'survey:survey_export_csv' survey.pk %}?filter_context={{ filter_context|default:'' }}&filter_target={{ filter_target|default:'' }}" class="btn btn-success">
                <i class="bi bi-download me-1"></i>Export to CSV
            </a>
        </div>
    </div>

    <!-- Filters Block -->
    <div class="card bg-dark border-secondary text-white shadow mb-4">
        <div class="card-body">
            <form method="get" class="row align-items-end g-3">
                <div class="col-md-5">
                    <label class="form-label small text-muted">Filter by Context / Source</label>
                    <select name="filter_context" class="form-select bg-black border-secondary text-white">
                        <option value="">All Contexts (Pre/Post/General)</option>
                        <option value="PRE" {% if filter_context == 'PRE' %}selected{% endif %}>Pre-Exam / Collection</option>
                        <option value="POST" {% if filter_context == 'POST' %}selected{% endif %}>Post-Exam / Collection</option>
                        <option value="GENERAL" {% if filter_context == 'GENERAL' %}selected{% endif %}>General / Standalone</option>
                    </select>
                </div>
                <div class="col-md-5">
                    <label class="form-label small text-muted">Filter by Exam / Case Collection</label>
                    <select name="filter_target" class="form-select bg-black border-secondary text-white">
                        <option value="">All Exams & Collections</option>
                        {% for target in targets %}
                            {% with val=target.content_type_id|stringformat:"s"|add:":"|add:target.object_id|stringformat:"s" %}
                                <option value="{{ val }}" {% if filter_target == val %}selected{% endif %}>
                                    {{ target.name }}
                                </option>
                            {% endwith %}
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2 d-flex gap-2">
                    <button type="submit" class="btn btn-primary w-100">Filter</button>
                    <a href="{% url 'survey:survey_results' survey.pk %}" class="btn btn-secondary">Reset</a>
                </div>
            </form>
        </div>
    </div>

    <div class="row g-4 mb-4">
        <div class="col-md-4">
            <div class="card bg-dark border-secondary text-white text-center shadow p-3">
                <div class="card-body">
                    <h6 class="text-muted uppercase mb-1">Total Submissions</h6>
                    <span class="display-4 fw-bold text-white">{{ responses_count }}</span>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card bg-dark border-secondary text-white text-center shadow p-3">
                <div class="card-body">
                    <h6 class="text-muted uppercase mb-1">Total Questions</h6>
                    <span class="display-4 fw-bold text-white">{{ survey.questions.count }}</span>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card bg-dark border-secondary text-white text-center shadow p-3">
                <div class="card-body">
                    <h6 class="text-muted uppercase mb-1">Anonymous Mode</h6>
                    <span class="display-4 fw-bold text-white">{% if survey.anonymous %}Yes{% else %}No{% endif %}</span>
                </div>
            </div>
        </div>
    </div>

    <h2 class="h4 text-white mb-3 mt-5"><i class="bi bi-pie-chart me-2"></i>Question Breakdowns</h2>
    
    <div class="row g-4">
        {% for item in analytics %}
            <div class="col-12">
                <div class="card bg-dark border-secondary text-white shadow">
                    <div class="card-header border-secondary py-3 d-flex justify-content-between align-items-center">
                        <h4 class="h5 mb-0 text-white">
                            <span class="badge bg-primary me-2">{{ forloop.counter }}</span>
                            {{ item.question.text }}
                        </h4>
                        <span class="badge bg-secondary">{{ item.question.get_question_type_display }}</span>
                    </div>
                    <div class="card-body">
                        <p class="text-muted small">Answers: <strong>{{ item.answers_count }}</strong> / {{ responses_count }} submissions</p>
                        
                        <!-- RATING QUESTION -->
                        {% if item.question.question_type == 'RATING' %}
                            <div class="row align-items-center">
                                <div class="col-md-4 text-center border-end border-secondary py-3">
                                    <div class="text-muted mb-1">Average Score</div>
                                    <div class="display-3 fw-bold text-primary">{{ item.average_rating }}</div>
                                    <div class="small text-muted">Out of 5</div>
                                </div>
                                <div class="col-md-8 ps-md-4 py-3">
                                    {% for r in item.rating_breakdown %}
                                        <div class="d-flex align-items-center mb-2">
                                            <span class="me-2 text-white" style="width: 25px;">{{ r.rating }} ★</span>
                                            <div class="progress flex-grow-1 bg-black border border-secondary" style="height: 12px;">
                                                <div class="progress-bar bg-warning" role="progressbar" style="width: {{ r.percentage }}%" aria-valuenow="{{ r.percentage }}" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                            <span class="ms-3 text-muted small" style="width: 90px; text-align: right;">{{ r.count }} ({{ r.percentage }}%)</span>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                            
                        <!-- CHOICE QUESTION -->
                        {% elif item.question.question_type == 'CHOICE' %}
                            <div class="py-2">
                                {% for c in item.choice_counts %}
                                    <div class="mb-3">
                                        <div class="d-flex justify-content-between mb-1">
                                            <span class="fw-semibold text-white">{{ c.choice }}</span>
                                            <span class="text-muted small">{{ c.count }} responses ({{ c.percentage }}%)</span>
                                        </div>
                                        <div class="progress bg-black border border-secondary" style="height: 12px;">
                                            <div class="progress-bar bg-info" role="progressbar" style="width: {{ c.percentage }}%" aria-valuenow="{{ c.percentage }}" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                {% empty %}
                                    <p class="text-muted">No choice options selected yet.</p>
                                {% endfor %}
                            </div>
                            
                        <!-- TEXT QUESTION -->
                        {% elif item.question.question_type == 'TEXT' %}
                            <div class="py-2">
                                <details class="bg-black rounded p-3 border border-secondary">
                                    <summary class="text-primary cursor-pointer fw-semibold">
                                        Show all {{ item.text_answers|length }} replies
                                    </summary>
                                    <div class="mt-3" style="max-height: 300px; overflow-y: auto;">
                                        {% for ans in item.text_answers %}
                                            <div class="p-2 border-bottom border-secondary mb-2 bg-dark rounded">
                                                <p class="mb-0 text-white-50 small">{{ ans|linebreaksbr }}</p>
                                            </div>
                                        {% empty %}
                                            <p class="text-muted small mb-0">No text responses submitted yet.</p>
                                        {% endfor %}
                                    </div>
                                </details>
                            </div>

                        <!-- INTEGER QUESTION -->
                        {% elif item.question.question_type == 'INTEGER' %}
                            <div class="row align-items-center">
                                <div class="col-md-4 text-center border-end border-secondary py-3">
                                    <div class="text-muted mb-1">Average Response</div>
                                    <div class="display-3 fw-bold text-info">{{ item.average_integer }}</div>
                                </div>
                                <div class="col-md-8 ps-md-4 py-3">
                                    <div class="text-muted mb-2">Submitted Numbers</div>
                                    <div style="max-height: 120px; overflow-y: auto;">
                                        {% for ans in item.integer_answers %}
                                            <span class="badge bg-black border border-secondary text-white me-2 mb-2 p-2">{{ ans }}</span>
                                        {% empty %}
                                            <span class="text-muted small">No submissions yet.</span>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>

                        <!-- DATE QUESTION -->
                        {% elif item.question.question_type == 'DATE' %}
                            <div class="py-2">
                                <details class="bg-black rounded p-3 border border-secondary">
                                    <summary class="text-primary cursor-pointer fw-semibold">
                                        Show all {{ item.date_answers|length }} date responses
                                    </summary>
                                    <div class="mt-3" style="max-height: 200px; overflow-y: auto;">
                                        {% for ans in item.date_answers %}
                                            <span class="badge bg-black border border-secondary text-white me-2 mb-2 p-2">
                                                <i class="bi bi-calendar-event me-1"></i>{{ ans|date:"Y-m-d" }}
                                            </span>
                                        {% empty %}
                                            <p class="text-muted small mb-0">No dates submitted yet.</p>
                                        {% endfor %}
                                    </div>
                                </details>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
</div>
{% endblock %}