{% extends 'backend.html.twig' %}

{% block title %}Documenti di {{ bot.name }} — Mostry{% endblock %}

{% block backend %}
    <div class="page-head page-head--row">
        <div>
            <h1>Documenti di {{ bot.name }}</h1>
            <p class="muted">
                Carica i tuoi file: PDF, foto scattate col telefono, documenti Word.
                Mostry li legge e li trasforma da solo in schede consultabili —
                <b>non devi scrivere niente a mano</b>.
            </p>
        </div>
        <div style="display:flex; gap:.5rem; flex-wrap:wrap">
            <a href="{{ path('documents') }}" class="btn btn--ghost btn--sm">
                <i class="fa-solid fa-folder-open"></i> Tutti i miei documenti
            </a>
            <a href="{{ path('bot_show', {id: bot.id}) }}" class="btn btn--ghost btn--sm">
                <i class="fa-solid fa-arrow-left"></i> Torna all'assistente
            </a>
        </div>
    </div>

    {% if not stato.knowledge %}
        <div class="alert alert--warn">
            <i class="fa-solid fa-circle-info"></i>
            La base di conoscenza è inclusa dal piano Standard in su. Le schede restano salvate,
            ma il tuo assistente le userà solo dopo il passaggio di piano.
            <a href="{{ path('subscription') }}">Vedi i piani</a>
        </div>
    {% endif %}

    {# ── Caricamento ── #}
    <div class="card upload-box">
        <form method="post" action="{{ path('knowledge_upload', {id: bot.id}) }}" enctype="multipart/form-data" id="uploadForm">
            <input type="hidden" name="_token" value="{{ csrf_token('knowledge' ~ bot.id) }}">

            <label class="dropzone" id="dropzone">
                <input type="file" name="documenti[]" id="fileInput" multiple
                       accept=".pdf,.jpg,.jpeg,.png,.webp,.txt,.md,.csv,.html,.docx" hidden>
                <span class="dropzone__ico"><i class="fa-solid fa-cloud-arrow-up"></i></span>
                <span class="dropzone__title">Trascina qui i file, o clicca per sceglierli</span>
                <span class="dropzone__hint">
                    {{ formati|join(' · ') }} — massimo {{ maxMb }} MB per file
                </span>
            </label>

            <ul class="filelist" id="filelist"></ul>

            <button type="submit" class="btn" id="uploadBtn" disabled>
                <i class="fa-solid fa-wand-magic-sparkles"></i> Trasforma in conoscenza
            </button>
            <p class="muted upload-note">
                La lettura richiede qualche secondo per file: resta su questa pagina finché non finisce.
            </p>
        </form>
    </div>

    {# ── Documento unico sommato ── #}
    {% if markdownUnico %}
        <div class="card md-unico">
            <div class="md-unico__head">
                <div>
                    <h2 class="section-title" style="margin:0">Documento unico</h2>
                    <p class="muted" style="font-size:var(--fs-md); margin-top:.35rem">
                        Tutte le schede attive sommate in un solo Markdown: è esattamente ciò che legge il tuo assistente.
                    </p>
                </div>
                <a href="{{ path('knowledge_markdown', {id: bot.id}) }}" class="btn btn--sm">
                    <i class="fa-solid fa-download"></i> Scarica .md
                </a>
            </div>
            <details class="doc__body">
                <summary>Vedi il documento unico</summary>
                <pre class="snippet">{{ markdownUnico }}</pre>
            </details>
        </div>
    {% endif %}

    {# ── Schede generate ── #}
    <h2 class="section-title">Schede dell'assistente <span class="muted">({{ documenti|length }})</span></h2>

    {% if documenti is empty %}
        <div class="card empty-state">
            <i class="fa-solid fa-folder-open" style="font-size:1.6rem;color:var(--accent)"></i>
            <p class="muted">
                Ancora nessun documento. Carica il primo file qui sopra:
                un listino, un manuale, le procedure interne o anche la foto di un foglio.
            </p>
        </div>
    {% else %}
        <div class="doc-list">
            {% for d in documenti %}
                <article class="card doc {{ d.attivo ? '' : 'doc--off' }}">
                    <div class="doc__head">
                        <span class="doc__ico"><i class="{{ d.icona }}"></i></span>
                        <div class="doc__meta">
                            <h3>{{ d.titolo ?: d.nomeFile }}</h3>
                            <p class="muted">
                                {{ d.etichettaTipo }} · {{ (d.dimensione / 1024)|number_format(0) }} KB ·
                                {{ d.caricatoIl|date('d/m/Y H:i') }} · {{ d.nomeFile }}
                            </p>
                        </div>
                        <span class="pill {{ d.attivo ? 'pill--on' : 'pill--off' }}">
                            {{ d.attivo ? 'in uso' : 'da parte' }}
                        </span>
                    </div>

                    <details class="doc__body">
                        <summary>Vedi il testo generato</summary>
                        <pre class="snippet">{{ d.markdown }}</pre>
                    </details>

                    <div class="doc__actions">
                        {% if d.consultabile %}
                            <a href="{{ path('knowledge_file', {id: bot.id, doc: d.id}) }}" target="_blank" class="btn btn--ghost btn--sm">
                                <i class="fa-solid fa-eye"></i> Apri l'originale
                            </a>
                        {% endif %}
                        <form method="post" action="{{ path('knowledge_toggle', {id: bot.id, doc: d.id}) }}" class="inline-form">
                            <input type="hidden" name="_token" value="{{ csrf_token('knowledge_doc' ~ d.id) }}">
                            <button type="submit" class="btn btn--ghost btn--sm">
                                <i class="fa-solid {{ d.attivo ? 'fa-eye-slash' : 'fa-eye' }}"></i>
                                {{ d.attivo ? 'Metti da parte' : 'Riattiva' }}
                            </button>
                        </form>
                        <form method="post" action="{{ path('knowledge_delete', {id: bot.id, doc: d.id}) }}" class="inline-form"
                              onsubmit="return confirm('Elimino definitivamente questa scheda?')">
                            <input type="hidden" name="_token" value="{{ csrf_token('knowledge_doc' ~ d.id) }}">
                            <button type="submit" class="btn btn--ghost btn--sm btn--danger">
                                <i class="fa-solid fa-trash"></i> Elimina
                            </button>
                        </form>
                    </div>
                </article>
            {% endfor %}
        </div>
    {% endif %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        (function () {
            var zone = document.getElementById('dropzone');
            var input = document.getElementById('fileInput');
            var lista = document.getElementById('filelist');
            var btn = document.getElementById('uploadBtn');
            var form = document.getElementById('uploadForm');
            if (!zone || !input) return;

            var MAX = {{ maxMb }} * 1024 * 1024;

            function kb(n) { return (n / 1024).toFixed(0) + ' KB'; }

            function mostra() {
                lista.innerHTML = '';
                var validi = 0;

                Array.prototype.forEach.call(input.files, function (f) {
                    var li = document.createElement('li');
                    var troppo = f.size > MAX;
                    li.className = troppo ? 'is-bad' : '';
                    li.innerHTML = '<i class="fa-solid ' + (troppo ? 'fa-triangle-exclamation' : 'fa-file') + '"></i> ' +
                        '<span>' + f.name + '</span> <em>' + kb(f.size) +
                        (troppo ? ' — troppo grande' : '') + '</em>';
                    lista.appendChild(li);
                    if (!troppo) validi++;
                });

                btn.disabled = validi === 0;
            }

            zone.addEventListener('click', function () { input.click(); });
            input.addEventListener('change', mostra);

            ['dragenter', 'dragover'].forEach(function (e) {
                zone.addEventListener(e, function (ev) { ev.preventDefault(); zone.classList.add('is-over'); });
            });
            ['dragleave', 'drop'].forEach(function (e) {
                zone.addEventListener(e, function (ev) { ev.preventDefault(); zone.classList.remove('is-over'); });
            });
            zone.addEventListener('drop', function (ev) {
                input.files = ev.dataTransfer.files;
                mostra();
            });

            form.addEventListener('submit', function () {
                btn.disabled = true;
                btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Sto leggendo i documenti…';
            });
        })();
    </script>
{% endblock %}