{% extends "wagtailadmin/base.html" %}
{% load i18n wagtailadmin_tags %}

{% block titletag %}Inscrições — {{ formulario.title }}{% endblock %}

{% block content %}
<style>
    .inscricoes-layout {
        display: grid;
        grid-template-columns: 300px 1fr;
        gap: 0;
        height: calc(100vh - 120px);
    }
    .inscricoes-sidebar {
        border-right: 1px solid #e5e5e5;
        overflow-y: auto;
        background: #fafafa;
    }
    .inscricoes-sidebar h3 {
        padding: 15px 20px;
        margin: 0;
        background: #024248;
        color: white;
        font-size: 14px;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    .submissao-item {
        display: block;
        padding: 12px 16px;
        border-bottom: 1px solid #eee;
        text-decoration: none;
        color: #333;
        transition: background 0.15s;
    }
    .submissao-item:hover {
        background: #e8f4f4;
        text-decoration: none;
        color: #333;
    }
    .submissao-item.active {
        background: #d0eaea;
        border-left: 3px solid #024248;
        font-weight: 600;
    }
    .submissao-item .sub-date {
        font-size: 12px;
        color: #666;
        display: block;
    }
    .submissao-item .sub-id {
        font-size: 11px;
        color: #999;
    }
    .inscricoes-detail {
        padding: 24px 30px;
        overflow-y: auto;
    }
    .detail-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 24px;
        padding-bottom: 16px;
        border-bottom: 2px solid #e5e5e5;
    }
    .detail-header h2 {
        margin: 0;
        font-size: 20px;
        color: #024248;
    }
    .detail-meta {
        font-size: 13px;
        color: #666;
        margin-top: 4px;
    }
    .campo-item {
        margin-bottom: 20px;
        padding: 16px;
        background: #f8f8f8;
        border-radius: 6px;
        border-left: 3px solid #e5e5e5;
    }
    .campo-item.has-value {
        border-left-color: #007D7A;
    }
    .campo-label {
        font-size: 12px;
        font-weight: 700;
        color: #555;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 6px;
    }
    .campo-value {
        font-size: 15px;
        color: #222;
        word-break: break-word;
    }
    .campo-empty {
        font-size: 14px;
        color: #bbb;
        font-style: italic;
    }
    .arquivo-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 14px;
        background: #024248;
        color: white;
        border-radius: 4px;
        text-decoration: none;
        font-size: 13px;
        margin-top: 4px;
    }
    .arquivo-link:hover {
        background: #035a5a;
        color: white;
        text-decoration: none;
    }
    .arquivo-size {
        font-size: 11px;
        color: rgba(255,255,255,0.75);
    }
    .page-header {
        background: #024248;
        color: white;
        padding: 16px 24px;
        display: flex;
        align-items: center;
        gap: 16px;
    }
    .page-header h1 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
    }
    .page-header a {
        color: rgba(255,255,255,0.8);
        text-decoration: none;
        font-size: 13px;
    }
    .page-header a:hover { color: white; }
    .empty-state {
        text-align: center;
        padding: 80px 40px;
        color: #999;
    }
    .btn-csv {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        background: #007D7A;
        color: white;
        border-radius: 4px;
        text-decoration: none;
        font-size: 13px;
    }
    .btn-csv:hover {
        background: #005f5d;
        color: white;
        text-decoration: none;
    }
</style>

<div class="page-header">
    <a href="{% url 'csv_export_updated' %}">← Formulários</a>
    <h1>{{ formulario.title }}</h1>
    <span style="margin-left:auto; font-size:13px; opacity:0.8">{{ submissoes.count }} inscrição{{ submissoes.count|pluralize:"ões" }}</span>
    {% if submissoes.count > 0 %}
    <a href="/admin/export-csv/{{ formulario.id }}/" class="btn-csv" target="_blank">📊 Exportar CSV</a>
    {% endif %}
</div>

{% if submissoes %}
<div class="inscricoes-layout">
    <aside class="inscricoes-sidebar">
        <h3>Inscrições</h3>
        {% for sub in submissoes %}
        <a href="?id={{ sub.id }}"
           class="submissao-item {% if selected_submission.id == sub.id %}active{% endif %}">
            <span class="sub-date">{{ sub.submit_time|date:"d/m/Y H:i" }}</span>
            <span class="sub-id">#{{ sub.id }}</span>
        </a>
        {% endfor %}
    </aside>

    <main class="inscricoes-detail">
        {% if selected_submission %}
        <div class="detail-header">
            <div>
                <h2>Inscrição #{{ selected_submission.id }}</h2>
                <div class="detail-meta">
                    Enviada em {{ selected_submission.submit_time|date:"d/m/Y \à\s H:i" }}
                    {% if selected_submission.user_ip %} · IP: {{ selected_submission.user_ip }}{% endif %}
                </div>
            </div>
        </div>

        {% if campos %}
            {% for campo in campos %}
            <div class="campo-item {% if campo.value %}has-value{% endif %}">
                <div class="campo-label">{{ campo.label }}</div>
                {% if campo.is_file %}
                    {% if campo.file_info %}
                        {% if campo.file_info|length == 1 or campo.file_info.filename %}
                            {% if campo.file_info.filename %}
                            <a href="{{ campo.file_info.download_url }}" class="arquivo-link" target="_blank">
                                📎 {{ campo.file_info.filename }}
                                {% if campo.file_info.size_mb %}<span class="arquivo-size">({{ campo.file_info.size_mb }} MB)</span>{% endif %}
                            </a>
                            {% endif %}
                        {% else %}
                            {% for arq in campo.file_info %}
                            <a href="{{ arq.download_url }}" class="arquivo-link" target="_blank" style="display:block; margin-bottom:6px;">
                                📎 {{ arq.filename }}
                                {% if arq.size_mb %}<span class="arquivo-size">({{ arq.size_mb }} MB)</span>{% endif %}
                            </a>
                            {% endfor %}
                        {% endif %}
                    {% else %}
                        <span class="campo-empty">Arquivo não disponível</span>
                    {% endif %}
                {% elif campo.value %}
                    <div class="campo-value">{{ campo.value }}</div>
                {% else %}
                    <span class="campo-empty">Não preenchido</span>
                {% endif %}
            </div>
            {% endfor %}
        {% else %}
            <p style="color:#999;">Nenhum campo encontrado nesta inscrição.</p>
        {% endif %}

        {% else %}
        <div class="empty-state">
            <p>Selecione uma inscrição na lista ao lado.</p>
        </div>
        {% endif %}
    </main>
</div>
{% else %}
<div class="empty-state" style="padding:80px 40px; text-align:center; color:#999;">
    <h2>Nenhuma inscrição ainda</h2>
    <p>Este formulário ainda não recebeu respostas.</p>
</div>
{% endif %}

{% endblock %}