{% extends "diario/base.html" %}
{% load custom_filters %}
{% block title %}{{ persona.get_full_name|default:persona.username }}{% endblock %}

{% block content %}
<div class="row justify-content-center">
<div class="col-lg-10">

    <div class="d-flex align-items-center mb-4 gap-3 fade-in">
        <a href="{% url 'persone_lista' %}" class="btn btn-icon btn-outline-secondary">
            <i class="bi bi-arrow-left" style="font-size:.85rem;"></i>
        </a>
        <span class="avatar avatar-lg">{{ persona.username|slice:":2"|upper }}</span>
        <div>
            <h5 class="mb-0 fw-bold">{{ persona.get_full_name|default:persona.username }}</h5>
            <small class="text-muted">@{{ persona.username }}</small>
        </div>
    </div>

    <!-- Tabs -->
    <ul class="nav nav-pills mb-4 gap-1 fade-in" role="tablist">
        <li class="nav-item">
            <button class="nav-link active btn-sm" data-bs-toggle="pill" data-bs-target="#tab-conv">
                <i class="bi bi-chat-quote me-1"></i>Conversazioni <span class="badge bg-secondary bg-opacity-25 text-dark ms-1">{{ conversazioni|length }}</span>
            </button>
        </li>
        <li class="nav-item">
            <button class="nav-link btn-sm" data-bs-toggle="pill" data-bs-target="#tab-obj">
                <i class="bi bi-bullseye me-1"></i>Obiettivi <span class="badge bg-secondary bg-opacity-25 text-dark ms-1">{{ obiettivi|length }}</span>
            </button>
        </li>
        <li class="nav-item">
            <button class="nav-link btn-sm" data-bs-toggle="pill" data-bs-target="#tab-doc">
                <i class="bi bi-file-pdf me-1"></i>Documenti <span class="badge bg-secondary bg-opacity-25 text-dark ms-1">{{ documenti|length }}</span>
            </button>
        </li>
        <li class="nav-item">
            <button class="nav-link btn-sm" data-bs-toggle="pill" data-bs-target="#tab-menzioni">
                <i class="bi bi-at me-1"></i>Menzioni <span class="badge bg-primary bg-opacity-25 text-primary ms-1">{{ totale_menzioni }}</span>
            </button>
        </li>
    </ul>

    <div class="tab-content">
        <!-- Conversazioni -->
        <div class="tab-pane fade show active" id="tab-conv">
            {% for conv in conversazioni %}
            <div class="card mb-2 p-3 fade-in">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <a href="{% url 'conversazione_dettaglio' conv.pk %}" class="text-decoration-none text-dark fw-semibold">{{ conv.titolo }}</a>
                        <div class="text-muted small mt-1">{{ conv.data|date:"d/m/Y H:i" }}</div>
                    </div>
                    {% if conv.registrato_da == persona %}
                    <span class="doc-badge">Autore</span>
                    {% else %}
                    <span class="badge-stato stato-aperto">Partecipante</span>
                    {% endif %}
                </div>
            </div>
            {% empty %}
            <div class="empty-state"><i class="bi bi-chat-square-dots"></i><p>Nessuna conversazione.</p></div>
            {% endfor %}
        </div>

        <!-- Obiettivi -->
        <div class="tab-pane fade" id="tab-obj">
            {% for obj in obiettivi %}
            <div class="card mb-2 p-3 fade-in">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <a href="{% url 'obiettivo_dettaglio' obj.pk %}" class="text-decoration-none text-dark fw-semibold">{{ obj.titolo }}</a>
                        <div class="d-flex gap-2 mt-1">
                            <span class="badge-stato stato-{{ obj.stato }}">{{ obj.get_stato_display }}</span>
                            <span class="pill-tipo pill-{{ obj.tipo }}">{{ obj.get_tipo_display }}</span>
                        </div>
                    </div>
                    {% if obj.creato_da == persona %}
                    <span class="doc-badge">Creato</span>
                    {% else %}
                    <span class="badge-stato stato-in_corso">Assegnato</span>
                    {% endif %}
                </div>
            </div>
            {% empty %}
            <div class="empty-state"><i class="bi bi-bullseye"></i><p>Nessun obiettivo.</p></div>
            {% endfor %}
        </div>

        <!-- Documenti -->
        <div class="tab-pane fade" id="tab-doc">
            {% for doc in documenti %}
            <div class="card mb-2 p-3 fade-in">
                <div class="d-flex align-items-center gap-3">
                    <i class="bi bi-file-earmark-pdf" style="font-size:1.2rem;color:#ef4444;"></i>
                    <div>
                        <a href="{% url 'documento_dettaglio' doc.pk %}" class="text-decoration-none text-dark fw-semibold">{{ doc.titolo }}</a>
                        <div class="text-muted small">{{ doc.data_caricamento|date:"d/m/Y" }}</div>
                    </div>
                </div>
            </div>
            {% empty %}
            <div class="empty-state"><i class="bi bi-file-earmark-pdf"></i><p>Nessun documento.</p></div>
            {% endfor %}
        </div>

        <!-- Menzioni -->
        <div class="tab-pane fade" id="tab-menzioni">
            {% for c in menzioni_commenti %}
            <div class="card mb-2 p-3 fade-in">
                <div class="d-flex align-items-start gap-2">
                    <i class="bi bi-at" style="font-size:1.1rem;color:var(--accent);"></i>
                    <div class="flex-grow-1">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <small class="text-muted">
                                <span class="fw-semibold text-dark">{{ c.autore.get_full_name|default:c.autore.username }}</span>
                                ha taggato in un commento
                            </small>
                            <small class="text-muted">{{ c.data|date:"d/m/Y H:i" }}</small>
                        </div>
                        <a href="{% url 'conversazione_dettaglio' c.conversazione.pk %}" class="text-decoration-none text-primary small fw-semibold d-block mb-1">
                            <i class="bi bi-chat-quote me-1"></i>{{ c.conversazione.titolo }}
                        </a>
                        <p class="mb-0 small text-muted" style="white-space:pre-wrap;line-height:1.5;">{{ c.testo|render_mentions|truncatewords:30 }}</p>
                    </div>
                </div>
            </div>
            {% endfor %}

            {% for a in menzioni_aggiornamenti %}
            <div class="card mb-2 p-3 fade-in">
                <div class="d-flex align-items-start gap-2">
                    <i class="bi bi-at" style="font-size:1.1rem;color:#f97316;"></i>
                    <div class="flex-grow-1">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <small class="text-muted">
                                <span class="fw-semibold text-dark">{{ a.autore.get_full_name|default:a.autore.username }}</span>
                                ha taggato in un aggiornamento
                            </small>
                            <small class="text-muted">{{ a.data|date:"d/m/Y H:i" }}</small>
                        </div>
                        <a href="{% url 'obiettivo_dettaglio' a.obiettivo.pk %}" class="text-decoration-none text-primary small fw-semibold d-block mb-1">
                            <i class="bi bi-bullseye me-1"></i>{{ a.obiettivo.titolo }}
                        </a>
                        <p class="mb-0 small text-muted" style="white-space:pre-wrap;line-height:1.5;">{{ a.testo|render_mentions|truncatewords:30 }}</p>
                    </div>
                </div>
            </div>
            {% endfor %}

            {% if not menzioni_commenti and not menzioni_aggiornamenti %}
            <div class="empty-state"><i class="bi bi-at"></i><p>Nessuna menzione trovata.</p></div>
            {% endif %}
        </div>
    </div>

</div>
</div>
{% endblock %}