{% extends "base.html" %}

{% block title %}Thesaurus Management{% 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> ICCD Thesaurus Management</h2>
    </div>

    <!-- Table and Field Selection -->
    <div class="card mb-4">
        <div class="card-header">
            <i class="fas fa-filter"></i> Select Table and Field
        </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">Table</label>
                        <select class="form-select" id="table" name="table" onchange="handleTableChange()">
                            <option value="">-- Select Table --</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">Field</label>
                        <select class="form-select" id="field" name="field" onchange="handleFieldChange()" {% if not selected_table %}disabled{% endif %}>
                            <option value="">-- Select Field --</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>Step 1:</strong> Select a table from the dropdown above.
    </div>
    {% elif not selected_field %}
    <div class="alert alert-warning">
        <i class="fas fa-info-circle"></i> <strong>Step 2:</strong> Select a field from the second 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> Add New Value
        </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">Value <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="value" name="value" required
                               placeholder="Vocabulary value">
                    </div>
                    <div class="col-md-4 mb-3">
                        <label for="label" class="form-label">Label</label>
                        <input type="text" class="form-control" id="label" name="label"
                               placeholder="Readable label (optional)">
                    </div>
                    <div class="col-md-4 mb-3">
                        <label for="description" class="form-label">Description</label>
                        <input type="text" class="form-control" id="description" name="description"
                               placeholder="Description (optional)">
                    </div>
                </div>
                <button type="submit" class="btn btn-success">
                    <i class="fas fa-plus"></i> Add
                </button>
            </form>
        </div>
    </div>

    <!-- Values Table -->
    <div class="card">
        <div class="card-header">
            <i class="fas fa-list"></i> Thesaurus Values
            <span class="badge bg-primary ms-2">{{ values|length }} values</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%">Value</th>
                            <th style="width: 25%">Label</th>
                            <th style="width: 30%">Description</th>
                            <th style="width: 15%">Actions</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="ICCD predefined value">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> Read-only
                                </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="Edit">
                                        <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('Are you sure you want to delete this value?');">
                                        <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="Delete">
                                            <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="Save">
                                        <i class="fas fa-save"></i>
                                    </button>
                                    <button type="button" class="btn btn-secondary" onclick="cancelEdit('{{ val.id }}')"
                                            title="Cancel">
                                        <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> No values found for this field.
            </div>
            {% endif %}
        </div>
    </div>
    {% endif %}

    <!-- Help Card -->
    <div class="card mt-4">
        <div class="card-header">
            <i class="fas fa-info-circle"></i> About ICCD Thesaurus
        </div>
        <div class="card-body">
            <p><strong>The ICCD Thesaurus</strong> is a system of controlled vocabularies used to standardize archaeological data.</p>
            <h6>How to use this interface:</h6>
            <ol>
                <li><strong>Select a Table</strong>: Choose the database table (e.g., us_table, inventario_materiali_table)</li>
                <li><strong>Select a Field</strong>: Choose the specific field you want to manage values for</li>
                <li><strong>Manage Values</strong>: Add, edit, or delete controlled vocabulary values</li>
            </ol>

            <h6 class="mt-3">Types of values:</h6>
            <ul>
                <li><strong><span class="badge bg-info">ICCD</span> Predefined Values</strong>: Standard ICCD vocabularies (read-only, highlighted in gray)</li>
                <li><strong>Custom Values</strong>: User-added entries (editable and deletable)</li>
            </ul>

            <p class="mb-0"><strong>Note:</strong> Thesaurus values are used as options in data entry form dropdowns. ICCD predefined values cannot be modified to maintain standards compliance.</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 %}