{% extends "layouts/base.twig" %}
{% block title %}{{ dict_label }}{% endblock %}

{% block page_heading %}
    <div class="page-heading">
        <h3>{{ dict_label }}</h3>
        <p class="text-subtitle text-muted">{{ translations.manage_dictionary_items_subtitle }}</p>
    </div>
{% endblock %}

{% block content %}
<div class="row g-3">

    {# ── Formularz dodawania ─────────────────────────────────── #}
    <div class="col-12 col-lg-4">
        <div class="card h-100">
            <div class="card-header">
                <h4 class="card-title">{{ translations.add_new_item }}</h4>
            </div>
            <div class="card-content">
                <div class="card-body px-3 py-3">
                    <div class="mb-3">
                        <label class="form-label">{{ translations.name }}</label>
                        <input type="text   " class="form-control" id="new-item-name"
                               placeholder="{{ translations.name_placeholder }}" autocomplete="off">
                    </div>
                    <button class="btn btn-primary w-100" id="btn-add">
                        <i class="bi bi-plus-circle me-1"></i> {{ translations.add }}
                    </button>
                    <div id="add-feedback" class="mt-2" style="font-size:.83rem"></div>
                </div>
            </div>
        </div>
    </div>

    {# ── Lista pozycji ────────────────────────────────────────── #}
    <div class="col-12 col-lg-8">
        <div class="card">
            <div class="card-header d-flex align-items-center justify-content-between flex-wrap gap-2">
                <h4 class="card-title mb-0">{{ translations.dictionary_items }} (<span id="items-count">{{ items|length }}</span>)</h4>
                <div class="d-flex align-items-center gap-3">
                    <div id="list-feedback" style="font-size:.83rem; min-height:1.1rem;"></div>
                    <a href="{{ root }}/b2b-attributes" class="btn btn-sm btn-light">
                        ← {{ translations.back }}
                    </a>
                </div>
            </div>
            <div class="card-content">
                <div class="card-body px-3 py-2">
                    <table class="table" id="items-table">
                        <thead>
                            <tr>
                                <th style="width:60%">{{ translations.name }}</th>
                                <th style="width:40%"></th>
                            </tr>
                        </thead>
                        <tbody id="items-tbody">
                            {% for item in items %}
                                <tr data-id="{{ item.id }}">
                                    <td>
                                        <span class="item-name">{{ item.name }}</span>
                                        <input type="text" class="form-control item-input d-none"
                                               value="{{ item.name }}">
                                    </td>
                                    <td class="text-end">
                                        <button class="btn btn-sm btn-warning btn-edit me-1">
                                            {{ translations.edit }}
                                        </button>
                                        <button class="btn btn-sm btn-success d-none btn-save me-1">
                                            {{ translations.save }}
                                        </button>
                                        <button class="btn btn-sm btn-danger btn-delete">
                                            {{ translations.delete }}
                                        </button>
                                    </td>
                                </tr>
                            {% else %}
                                <tr id="empty-row">
                                    <td colspan="2" class="text-center text-muted py-4">
                                        {{ translations.no_items_add_first }}
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

</div>
{% endblock %}

{% block scripts %}
<script>
    const DICT     = '{{ dict }}';
    const ROOT     = '{{ root }}';
    const ENDPOINT = `${ROOT}/ajax/b2b-attributes/${DICT}`;

    // ── Tłumaczenia przekazane z Twig ──────────────────────────
    const T = {
        edit:                 '{{ translations.edit|e('js') }}',
        save:                 '{{ translations.save|e('js') }}',
        delete:               '{{ translations.delete|e('js') }}',
        enter_name:           '{{ translations.enter_name|e('js') }}',
        added_successfully:   '{{ translations.added_successfully|e('js') }}',
        updated_successfully: '{{ translations.updated_successfully|e('js') }}',
        deleted_successfully: '{{ translations.deleted_successfully|e('js') }}',
        error:                '{{ translations.error|e('js') }}',
        save_error:           '{{ translations.save_error|e('js') }}',
        delete_error:         '{{ translations.delete_error|e('js') }}',
        confirm_delete_item:  '{{ translations.confirm_delete_item|e('js') }}',
        no_items_add_first:   '{{ translations.no_items_add_first|e('js') }}',
    };

    const listFeedback = document.getElementById('list-feedback');

    // ── Licznik wierszy ────────────────────────────────────────
    function updateCount(delta) {
        const el  = document.getElementById('items-count');
        el.textContent = Math.max(0, parseInt(el.textContent, 10) + delta);
    }

    // ── Pomocnicze ─────────────────────────────────────────────
    function showFeedback(el, msg, ok) {
        el.textContent = msg;
        el.style.color = ok ? '#16a34a' : '#dc2626';
        setTimeout(() => el.textContent = '', 3000);
    }

    function buildRow(item) {
        const tr = document.createElement('tr');
        tr.dataset.id = item.id;
        tr.innerHTML = `
            <td>
                <span class="item-name">${escHtml(item.name)}</span>
                <input type="text" class="form-control item-input d-none" value="${escHtml(item.name)}">
            </td>
            <td class="text-end">
                <button class="btn btn-sm btn-warning btn-edit me-1">${escHtml(T.edit)}</button>
                <button class="btn btn-sm btn-success d-none btn-save me-1">${escHtml(T.save)}</button>
                <button class="btn btn-sm btn-danger btn-delete">${escHtml(T.delete)}</button>
            </td>`;
        return tr;
    }

    function escHtml(s) {
        return String(s ?? '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
    }

    // ── Dodaj ──────────────────────────────────────────────────
    document.getElementById('btn-add').addEventListener('click', async () => {
        const input    = document.getElementById('new-item-name');
        const feedback = document.getElementById('add-feedback');
        const name     = input.value.trim();
        if (!name) { showFeedback(feedback, T.enter_name, false); return; }

        const resp = await fetch(ENDPOINT, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ name }),
        }).then(r => r.json());

        if (resp.success) {
            showFeedback(feedback, T.added_successfully, true);
            input.value = '';
            const tbody = document.getElementById('items-tbody');
            document.getElementById('empty-row')?.remove();
            tbody.appendChild(buildRow(resp.data));
            updateCount(+1);
        } else {
            showFeedback(feedback, resp.message ?? T.error, false);
        }
    });

    // ── Edytuj / Zapisz / Usuń — delegacja ────────────────────
    document.getElementById('items-tbody').addEventListener('click', async (e) => {
        const tr = e.target.closest('tr');
        if (!tr) return;
        const id = tr.dataset.id;

        if (e.target.classList.contains('btn-edit')) {
            tr.querySelector('.item-name').classList.add('d-none');
            tr.querySelector('.item-input').classList.remove('d-none');
            tr.querySelector('.btn-edit').classList.add('d-none');
            tr.querySelector('.btn-save').classList.remove('d-none');
            tr.querySelector('.item-input').focus();
            return;
        }

        if (e.target.classList.contains('btn-save')) {
            const name = tr.querySelector('.item-input').value.trim();
            if (!name) return;
            const resp = await fetch(`${ENDPOINT}/${id}`, {
                method: 'PATCH',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ name }),
            }).then(r => r.json());

            if (resp.success) {
                tr.querySelector('.item-name').textContent = name;
                tr.querySelector('.item-name').classList.remove('d-none');
                tr.querySelector('.item-input').classList.add('d-none');
                tr.querySelector('.btn-edit').classList.remove('d-none');
                tr.querySelector('.btn-save').classList.add('d-none');
                showFeedback(listFeedback, T.updated_successfully, true);
            } else {
                showFeedback(listFeedback, resp.message ?? T.save_error, false);
            }
            return;
        }

        if (e.target.classList.contains('btn-delete')) {
            if (!confirm(T.confirm_delete_item)) return;
            const resp = await fetch(`${ENDPOINT}/${id}`, { method: 'DELETE' }).then(r => r.json());
            if (resp.success) {
                tr.remove();
                updateCount(-1);
                if (!document.querySelectorAll('#items-tbody tr').length) {
                    document.getElementById('items-tbody').innerHTML =
                        `<tr id="empty-row"><td colspan="2" class="text-center text-muted py-4">${escHtml(T.no_items_add_first)}</td></tr>`;
                }
                showFeedback(listFeedback, T.deleted_successfully, true);
            } else {
                showFeedback(listFeedback, resp.message ?? T.delete_error, false);
            }
        }
    });

    // Enter w polu dodawania
    document.getElementById('new-item-name').addEventListener('keydown', e => {
        if (e.key === 'Enter') document.getElementById('btn-add').click();
    });
</script>
{% endblock %}