{% extends "base.html" %}

{% block title %}Gestione Thesaurus{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2><i class="fas fa-book"></i> Gestione Thesaurus ICCD</h2>
    </div>

    <!-- Table and Field Selection -->
    <div class="card mb-4">
        <div class="card-header">
            <i class="fas fa-filter"></i> Seleziona Tabella e Campo
        </div>
        <div class="card-body">
            <form method="GET" id="filterForm">
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="table" class="form-label">Tabella</label>
                        <select class="form-select" id="table" name="table" onchange="handleTableChange()">
                            <option value="">-- Seleziona Tabella --</option>
                            {% for table in tables %}
                            <option value="{{ table }}" {% if table == selected_table %}selected{% endif %}>
                                {{ table.replace('_', ' ').title() }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="field" class="form-label">Campo</label>
                        <select class="form-select" id="field" name="field" onchange="handleFieldChange()" {% if not selected_table %}disabled{% endif %}>
                            <option value="">-- Seleziona Campo --</option>
                            {% for field in fields %}
                            <option value="{{ field }}" {% if field == selected_field %}selected{% endif %}>
                                {{ field.replace('_', ' ').title() }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
            </form>

            <script>
            function handleTableChange() {
                const table = document.getElementById('table').value;
                if (table) {
                    // Reset field and submit only with table parameter
                    window.location.href = '{{ url_for("thesaurus_list") }}?table=' + encodeURIComponent(table);
                } else {
                    // No table selected, reload without parameters
                    window.location.href = '{{ url_for("thesaurus_list") }}';
                }
            }

            function handleFieldChange() {
                const table = document.getElementById('table').value;
                const field = document.getElementById('field').value;
                if (table && field) {
                    // Submit with both parameters
                    window.location.href = '{{ url_for("thesaurus_list") }}?table=' + encodeURIComponent(table) + '&field=' + encodeURIComponent(field);
                } else if (table) {
                    // Only table selected
                    window.location.href = '{{ url_for("thesaurus_list") }}?table=' + encodeURIComponent(table);
                }
            }
            </script>
        </div>
    </div>

    <!-- Help Message -->
    {% if not selected_table %}
    <div class="alert alert-warning">
        <i class="fas fa-info-circle"></i> <strong>Passo 1:</strong> Seleziona una tabella dal dropdown sopra.
    </div>
    {% elif not selected_field %}
    <div class="alert alert-warning">
        <i class="fas fa-info-circle"></i> <strong>Passo 2:</strong> Seleziona un campo dal secondo dropdown.
    </div>
    {% endif %}

    <!-- Add New Value Form -->
    {% if selected_table and selected_field %}
    <div class="card mb-4">
        <div class="card-header bg-success text-white">
            <i class="fas fa-plus"></i> Aggiungi Nuovo Valore
        </div>
        <div class="card-body">
            <form method="POST" action="{{ url_for('thesaurus_create') }}">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                <input type="hidden" name="table_name" value="{{ selected_table }}">
                <input type="hidden" name="field_name" value="{{ selected_field }}">

                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label for="value" class="form-label fw-bold">Valore <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="value" name="value" required
                               placeholder="Valore del vocabolario">
                    </div>
                    <div class="col-md-4 mb-3">
                        <label for="label" class="form-label">Etichetta</label>
                        <input type="text" class="form-control" id="label" name="label"
                               placeholder="Etichetta leggibile (opzionale)">
                    </div>
                    <div class="col-md-4 mb-3">
                        <label for="description" class="form-label">Descrizione</label>
                        <input type="text" class="form-control" id="description" name="description"
                               placeholder="Descrizione (opzionale)">
                    </div>
                </div>
                <button type="submit" class="btn btn-success">
                    <i class="fas fa-plus"></i> Aggiungi
                </button>
            </form>
        </div>
    </div>

    <!-- Values Table -->
    <div class="card">
        <div class="card-header">
            <i class="fas fa-list"></i> Valori Thesaurus
            <span class="badge bg-primary ms-2">{{ values|length }} valori</span>
        </div>
        <div class="card-body">
            {% if values %}
            <div class="table-responsive">
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th style="width: 5%">ID</th>
                            <th style="width: 25%">Valore</th>
                            <th style="width: 25%">Etichetta</th>
                            <th style="width: 30%">Descrizione</th>
                            <th style="width: 15%">Azioni</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for val in values %}
                        {% set is_predefined = (val.id|string).startswith('predefined_') %}
                        <tr id="row-{{ val.id }}" {% if is_predefined %}class="table-secondary"{% endif %}>
                            <td>
                                {{ val.id }}
                                {% if is_predefined %}
                                <span class="badge bg-info" title="Valore predefinito da ICCD">ICCD</span>
                                {% endif %}
                            </td>
                            <td>
                                <span class="view-mode-{{ val.id }}">{{ val.value }}</span>
                                {% if not is_predefined %}
                                <input type="text" class="form-control form-control-sm edit-mode-{{ val.id }} d-none"
                                       value="{{ val.value }}" data-field="value">
                                {% endif %}
                            </td>
                            <td>
                                <span class="view-mode-{{ val.id }}">{{ val.label or '-' }}</span>
                                {% if not is_predefined %}
                                <input type="text" class="form-control form-control-sm edit-mode-{{ val.id }} d-none"
                                       value="{{ val.label or '' }}" data-field="label">
                                {% endif %}
                            </td>
                            <td>
                                <span class="view-mode-{{ val.id }}">{{ val.description or '-' }}</span>
                                {% if not is_predefined %}
                                <input type="text" class="form-control form-control-sm edit-mode-{{ val.id }} d-none"
                                       value="{{ val.description or '' }}" data-field="description">
                                {% endif %}
                            </td>
                            <td>
                                {% if is_predefined %}
                                <span class="text-muted small">
                                    <i class="fas fa-lock"></i> Sola lettura
                                </span>
                                {% else %}
                                <div class="btn-group btn-group-sm view-mode-{{ val.id }}">
                                    <button type="button" class="btn btn-primary" onclick="editRow('{{ val.id }}')"
                                            title="Modifica">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <form method="POST" action="{{ url_for('thesaurus_delete', field_id=val.id) }}"
                                          style="display: inline;"
                                          onsubmit="return confirm('Sei sicuro di voler eliminare questo valore?');">
                                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                                        <input type="hidden" name="table_name" value="{{ selected_table }}">
                                        <input type="hidden" name="field_name" value="{{ selected_field }}">
                                        <button type="submit" class="btn btn-danger" title="Elimina">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </form>
                                </div>
                                <div class="btn-group btn-group-sm edit-mode-{{ val.id }} d-none">
                                    <button type="button" class="btn btn-success" onclick="saveRow('{{ val.id }}')"
                                            title="Salva">
                                        <i class="fas fa-save"></i>
                                    </button>
                                    <button type="button" class="btn btn-secondary" onclick="cancelEdit('{{ val.id }}')"
                                            title="Annulla">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <div class="alert alert-info">
                <i class="fas fa-info-circle"></i> Nessun valore trovato per questo campo.
            </div>
            {% endif %}
        </div>
    </div>
    {% endif %}

    <!-- Help Card -->
    <div class="card mt-4">
        <div class="card-header">
            <i class="fas fa-info-circle"></i> Informazioni sul Thesaurus ICCD
        </div>
        <div class="card-body">
            <p><strong>Il Thesaurus ICCD</strong> è un sistema di vocabolari controllati utilizzato per standardizzare i dati archeologici.</p>
            <h6>Come usare questa interfaccia:</h6>
            <ol>
                <li><strong>Seleziona una Tabella</strong>: Scegli la tabella del database (es. us_table, inventario_materiali_table)</li>
                <li><strong>Seleziona un Campo</strong>: Scegli il campo specifico per cui vuoi gestire i valori</li>
                <li><strong>Gestisci i Valori</strong>: Aggiungi, modifica o elimina i valori del vocabolario controllato</li>
            </ol>

            <h6 class="mt-3">Tipi di valori:</h6>
            <ul>
                <li><strong><span class="badge bg-info">ICCD</span> Valori Predefiniti</strong>: Vocabolari standard ICCD (sola lettura, evidenziati in grigio)</li>
                <li><strong>Valori Personalizzati</strong>: Voci aggiunte dall'utente (modificabili ed eliminabili)</li>
            </ul>

            <p class="mb-0"><strong>Nota:</strong> I valori del thesaurus vengono utilizzati come opzioni nei dropdown dei form di inserimento dati. I valori predefiniti ICCD non possono essere modificati per mantenere la conformità agli standard.</p>
        </div>
    </div>
</div>

<script>
function editRow(id) {
    // Hide view mode, show edit mode
    document.querySelectorAll('.view-mode-' + id).forEach(el => el.classList.add('d-none'));
    document.querySelectorAll('.edit-mode-' + id).forEach(el => el.classList.remove('d-none'));
}

function cancelEdit(id) {
    // Show view mode, hide edit mode, reset values
    document.querySelectorAll('.edit-mode-' + id).forEach(el => el.classList.add('d-none'));
    document.querySelectorAll('.view-mode-' + id).forEach(el => el.classList.remove('d-none'));
    location.reload(); // Reload to reset form values
}

function saveRow(id) {
    // Get updated values
    const row = document.getElementById('row-' + id);
    const inputs = row.querySelectorAll('.edit-mode-' + id + ' input');

    const value = inputs[0].value;
    const label = inputs[1].value;
    const description = inputs[2].value;

    // Create and submit form
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = '{{ url_for('thesaurus_edit', field_id=0) }}'.replace('/0/', '/' + id + '/');

    const fields = {
        'csrf_token': '{{ csrf_token() }}',
        'value': value,
        'label': label,
        'description': description,
        'table_name': '{{ selected_table }}',
        'field_name': '{{ selected_field }}'
    };

    for (const [key, val] of Object.entries(fields)) {
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = key;
        input.value = val;
        form.appendChild(input);
    }

    document.body.appendChild(form);
    form.submit();
}
</script>
{% endblock %}