{# templates/account/users/index.twig #}
{% extends "layouts/base.twig" %}

{% block title %}{{ translations.user_accounts|default('User accounts') }}{% endblock %}

{% block page_heading %}
    <div class="page-heading">
        <h3>{{ translations.user_accounts|default('User accounts') }}</h3>
        <p class="text-subtitle text-muted">
            {{ translations.user_accounts_subtitle|default('Central view for managing user accounts.') }}
        </p>
    </div>
{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-12">
            <div class="card">

                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="card-title">{{ translations.user_accounts_list|default('Accounts list') }}</h4>

                    <div class="d-flex gap-2 align-items-center">
                        <input type="text"
                               id="search_accounts"
                               class="form-control form-control-sm"
                               style="width: 260px;"
                               placeholder="{{ translations.search|default('Search') }}…">

                        <select id="lang_filter" class="form-select form-select-sm" style="width:auto;">
                            {% set currentLang = selected_lang ?? 'ALL' %}
                            <option value="ALL"
                                    {% if currentLang == 'ALL' %}selected{% endif %}>{{ translations.all|default('All') }}</option>
                            {% set langs = langs is defined ? langs : ['pl','en','fr','nl','it'] %}
                            {% for l in langs %}
                                <option value="{{ l }}"
                                        {% if currentLang == l %}selected{% endif %}>{{ l|upper }}</option>
                            {% endfor %}
                        </select>

                        <button class="btn btn-success btn-sm" id="add_account_btn">
                            <i class="bi bi-plus"></i> {{ translations.add|default('Add') }}
                        </button>
                    </div>
                </div>

                <div class="card-content">
                    <div class="card-body px-3 py-4-5">

                        <div class="table-responsive">
                            <table class="table table-hover text-sm align-middle" id="accounts_table">
                                <thead>
                                <tr>
                                    <th style="width: 6%;">#</th>
                                    <th style="width: 28%;">{{ translations.user|default('User') }}</th>
                                    <th style="width: 22%;">{{ translations.contact|default('Contact') }}</th>
                                    <th style="width: 10%;">{{ translations.lang|default('Lang') }}</th>
                                    <th style="width: 24%;">{{ translations.display_name|default('Display name') }}</th>
                                    <th style="width: 10%;">{{ translations.action|default('Action') }}</th>
                                </tr>
                                </thead>

                                <tbody>
                                {% set accounts = data.accounts is defined ? data.accounts : (accounts is defined ? accounts : []) %}

                                {% if accounts|length == 0 %}
                                    <tr>
                                        <td colspan="6" class="text-center text-muted">
                                            {{ translations.no_records_found|default('No records found.') }}
                                        </td>
                                    </tr>
                                {% else %}
                                    {% for account in accounts %}

                                        {% set id = account.getId() %}
                                        {% set email = account.getEmail() %}
                                        {% set firstName = account.getFirstName() %}
                                        {% set lastName = account.getLastName() %}
                                        {% set displayName = account.getDisplayName() %}
                                        {% set lang = account.getLangCode()|default('') %}
                                        {% set phone = account.getPhone() %}
                                        {% set phoneNormalized = phone ? phone|replace({' ': '', '-':'', '(': '', ')':'', '.':'', '/':''}) : '' %}
                                        {% if phoneNormalized starts with '00' %}
                                            {% set phoneNormalized = '+' ~ phoneNormalized|slice(2) %}
                                        {% endif %}
                                        {% set isPhoneE164 = phoneNormalized matches '/^\\+[1-9]\\d{1,14}$/' %}

                                        {% set fullName = (firstName ~ ' ' ~ lastName)|trim %}

                                        <tr class="account-row"
                                            data-id="{{ id }}"
                                            data-lang="{{ lang|lower }}"
                                            data-search="{{ (id ~ ' ' ~ fullName ~ ' ' ~ (displayName ?? '') ~ ' ' ~ (phone ?? '') ~ ' ' ~ (email ?? '') ~ ' ' ~ (lang ?? ''))|lower }}"
                                            data-phone="{{ phone }}"
                                            data-email="{{ email }}"
                                            data-first-name="{{ firstName }}"
                                            data-last-name="{{ lastName }}"
                                            data-display-name="{{ displayName }}"
                                            data-lang-code="{{ lang }}"
                                        >
                                            <td>
                                                <span class="text-muted">#{{ id }}</span>
                                            </td>

                                            <td>
                                                <div class="d-flex flex-column">
                                                    <strong>{{ fullName ?: translations.no_name|default('No name') }}</strong>
                                                    <small class="text-muted">{{ translations.account_id|default('Account ID') }}
                                                        : {{ id }}</small>
                                                </div>
                                            </td>

                                            <td>
                                                <div class="d-flex flex-column">
                                                    <span>
                                                        <i class="bi bi-telephone"></i>

                                                        {% if phone %}
                                                            {% if isPhoneE164 %}
                                                                <span class="badge bg-light-secondary">{{ phoneNormalized }}</span>
                                                            {% else %}
                                                                <span class="badge bg-danger"
                                                                      title="{{ translations.phone_invalid_e164_hint|default('Invalid phone. Required E.164 format: +48123456789') }}">
                                                                    {{ phone }}
                                                                </span>
                                                                <small class="text-danger">
                                                                    {{ translations.invalid_format|default('Invalid format') }}
                                                                </small>
                                                            {% endif %}
                                                        {% else %}
                                                            <span class="text-muted">—</span>
                                                        {% endif %}
                                                    </span>

                                                                                                <span>
                                                        <i class="bi bi-envelope"></i>
                                                        <span class="text-muted">{{ email ?: '—' }}</span>
                                                    </span>
                                                </div>
                                            </td>

                                            <td>
                                                <span class="badge bg-light-secondary">{{ lang ? lang|upper : '—' }}</span>
                                            </td>

                                            <td>
                                                <span class="text-muted">{{ displayName ?: '—' }}</span>
                                            </td>

                                            <td>
                                                <div class="btn-group">
                                                    <button class="btn btn-warning btn-sm edit_account_btn"
                                                            data-id="{{ id }}">
                                                        <i class="bi bi-pencil"></i>
                                                    </button>

                                                    <button class="btn btn-info btn-sm change_phone_btn"
                                                            data-id="{{ id }}"
                                                            title="{{ translations.change_phone|default('Change phone') }}">
                                                        <i class="bi bi-telephone"></i>
                                                    </button>

                                                    <button class="btn btn-secondary btn-sm change_password_btn"
                                                            data-id="{{ id }}"
                                                            title="{{ translations.change_password|default('Change password') }}">
                                                        <i class="bi bi-key"></i>
                                                    </button>

{#                                                    <button class="btn btn-danger btn-sm delete_account_btn"#}
{#                                                            data-id="{{ id }}"#}
{#                                                            data-name="{{ fullName ?: ('#' ~ id) }}">#}
{#                                                        <i class="bi bi-trash"></i>#}
{#                                                    </button>#}
                                                </div>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                {% endif %}
                                </tbody>
                            </table>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    {# =========================
       MODAL: ADD / EDIT ACCOUNT
       ========================= #}
    <div class="modal fade" id="accountModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="accountModalTitle">
                        {{ translations.manage_account|default('Manage account') }}
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="{{ translations.close|default('Close') }}"></button>
                </div>

                <form id="account_form" class="needs-validation" novalidate>
                    <div class="modal-body">

                        <input type="hidden" id="account_id" value="">

                        <div class="row g-3">

                            <div class="col-md-6">
                                <label class="form-label">{{ translations.first_name|default('First name') }}</label>
                                <input type="text" class="form-control" id="first_name" required>
                                <div class="invalid-feedback">{{ translations.required_field|default('Required field') }}</div>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">{{ translations.last_name|default('Last name') }}</label>
                                <input type="text" class="form-control" id="last_name" required>
                                <div class="invalid-feedback">{{ translations.required_field|default('Required field') }}</div>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">{{ translations.display_name|default('Display name') }}</label>
                                <input type="text" class="form-control" id="display_name">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">{{ translations.lang|default('Lang') }}</label>
                                <select class="form-select" id="lang_code" required>
                                    {% for l in langs %}
                                        <option value="{{ l }}">{{ l|upper }}</option>
                                    {% endfor %}
                                </select>
                                <div class="invalid-feedback">{{ translations.required_field|default('Required field') }}</div>
                            </div>

                            {# ===== PHONE (tylko ADD) ===== #}
                            <div class="col-md-6" id="account_phone_block">
                                <label class="form-label">{{ translations.phone|default('Phone') }}</label>
                                <input type="text"
                                       class="form-control"
                                       id="phone"
                                       inputmode="tel"
                                       autocomplete="tel"
                                       placeholder="+48123456789"
                                       aria-describedby="phoneHelp phoneError">

                                <small id="phoneHelp" class="text-muted">
                                    {{ translations.phone_e164_hint|default('Format E.164, e.g. +48123456789 (no spaces)') }}
                                </small>

                                <div id="phoneError" class="invalid-feedback">
                                {{ translations.phone_invalid_e164|default('Phone must be in E.164 format, e.g. +48123456789') }}
                                </div>

                                <small class="text-muted d-block mt-1" id="phoneEditHint" style="display:none;">
                                    {{ translations.phone_change_via_button|default('Phone can be changed via the phone button in the table.') }}
                                </small>
                            </div>

                            {# ===== EMAIL ===== #}
                            <div class="col-md-6">
                                <label class="form-label">{{ translations.email|default('Email') }}</label>
                                <input type="email" class="form-control" id="email">
                                <div class="invalid-feedback">{{ translations.invalid_email|default('Invalid email') }}</div>
                            </div>

                            {# ===== PASSWORD (tylko ADD) ===== #}
                            <div class="col-12" id="account_password_block">
                                <div class="alert alert-light border py-2">
                                    <small class="mb-0">
                                        {{ translations.set_initial_password_hint|default('Set an initial password for the new account.') }}
                                    </small>
                                </div>

                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label class="form-label">{{ translations.new_password|default('New password') }}</label>
                                        <input type="password"
                                               class="form-control"
                                               id="account_password"
                                               autocomplete="new-password"
                                               minlength="8">
                                        <div class="invalid-feedback">
                                            {{ translations.password_min_length|default('Minimum 8 characters.') }}
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <label class="form-label">{{ translations.confirm_password|default('Confirm password') }}</label>
                                        <input type="password"
                                               class="form-control"
                                               id="account_password_confirm"
                                               autocomplete="new-password"
                                               minlength="8">
                                        <div class="invalid-feedback">
                                            {{ translations.passwords_must_match|default('Passwords must match.') }}
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="alert alert-light border mb-0">
                                    <div class="d-flex justify-content-between flex-wrap">
                                        <div>
                                            <strong>{{ translations.meta|default('Meta') }}</strong><br>
                                            <small class="text-muted">
                                                {{ translations.account_id|default('Account ID') }}:
                                                <span id="meta_id">—</span>
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                            {{ translations.cancel|default('Cancel') }}
                        </button>

                        <button type="submit" class="btn btn-primary" id="save_account_btn">
                            {{ translations.save|default('Save') }}
                        </button>
                    </div>
                </form>

            </div>
        </div>
    </div>

    <div class="modal fade" id="changePhoneModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        {{ translations.change_phone|default('Change phone') }}
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="{{ translations.close|default('Close') }}"></button>
                </div>

                <form id="change_phone_form" class="needs-validation" novalidate>
                    <div class="modal-body">
                        <input type="hidden" id="change_phone_account_id" value="">

                        <div class="mb-2">
                            <small class="text-muted">
                                {{ translations.account_id|default('Account ID') }}:
                                <span id="change_phone_meta_id">—</span>
                            </small>
                        </div>

                        <label class="form-label">{{ translations.phone|default('Phone') }}</label>
                        <input type="text"
                               class="form-control"
                               id="change_phone_input"
                               inputmode="tel"
                               autocomplete="tel"
                               placeholder="+48123456789"
                               aria-describedby="changePhoneHelp changePhoneError"
                               required>

                        <small id="changePhoneHelp" class="text-muted">
                            {{ translations.phone_e164_hint|default('Format E.164, e.g. +48123456789 (no spaces)') }}
                        </small>

                        <div id="changePhoneError" class="invalid-feedback">
                        {{ translations.phone_invalid_e164|default('Phone must be in E.164 format, e.g. +48123456789') }}
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                            {{ translations.cancel|default('Cancel') }}
                        </button>
                        <button type="submit" class="btn btn-primary">
                            {{ translations.save|default('Save') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade" id="changePasswordModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        {{ translations.change_password|default('Change password') }}
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="{{ translations.close|default('Close') }}"></button>
                </div>

                <form id="change_password_form" class="needs-validation" novalidate>
                    <div class="modal-body">
                        <input type="hidden" id="change_password_account_id" value="">

                        <div class="mb-2">
                            <small class="text-muted">
                                {{ translations.account_id|default('Account ID') }}:
                                <span id="change_password_meta_id">—</span>
                            </small>
                        </div>

                        <div class="alert alert-warning py-2">
                            <small class="mb-0">
                                {{ translations.password_change_warning|default('This will overwrite the current password.') }}
                            </small>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">{{ translations.new_password|default('New password') }}</label>
                            <input type="password"
                                   class="form-control"
                                   id="new_password"
                                   autocomplete="new-password"
                                   minlength="8"
                                   required>
                            <div class="invalid-feedback">
                                {{ translations.password_min_length|default('Minimum 8 characters.') }}
                            </div>
                        </div>

                        <div class="mb-0">
                            <label class="form-label">{{ translations.confirm_password|default('Confirm password') }}</label>
                            <input type="password"
                                   class="form-control"
                                   id="new_password_confirm"
                                   autocomplete="new-password"
                                   minlength="8"
                                   required>
                            <div class="invalid-feedback">
                                {{ translations.passwords_must_match|default('Passwords must match.') }}
                            </div>
                        </div>

                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                            {{ translations.cancel|default('Cancel') }}
                        </button>
                        <button type="submit" class="btn btn-primary">
                            {{ translations.save|default('Save') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

{% endblock %}

{% block scripts %}
    <script>
        document.addEventListener('DOMContentLoaded', function () {

            let ACCOUNT_MODAL_MODE = 'add'; // add | edit
            let EDIT_ACCOUNT_ID = null;

            const accountModalEl = document.getElementById('accountModal');
            const accountModal = new bootstrap.Modal(accountModalEl);

            const addBtn = document.getElementById('add_account_btn');
            const form = document.getElementById('account_form');

            const searchInput = document.getElementById('search_accounts');
            const langFilter = document.getElementById('lang_filter');

            // Modal inputs
            const idInput = document.getElementById('account_id');
            const firstNameInput = document.getElementById('first_name');
            const lastNameInput = document.getElementById('last_name');
            const displayNameInput = document.getElementById('display_name');
            const langCodeSelect = document.getElementById('lang_code');
            const emailInput = document.getElementById('email');

            const phoneInput = document.getElementById('phone');
            const phoneBlock = document.getElementById('account_phone_block');

            const passwordBlock = document.getElementById('account_password_block');
            const accountPasswordInput = document.getElementById('account_password');
            const accountPasswordConfirmInput = document.getElementById('account_password_confirm');

            const metaId = document.getElementById('meta_id');

            // ===== Change phone modal =====
            const changePhoneModalEl = document.getElementById('changePhoneModal');
            const changePhoneModal = new bootstrap.Modal(changePhoneModalEl);
            const changePhoneForm = document.getElementById('change_phone_form');
            const changePhoneAccountId = document.getElementById('change_phone_account_id');
            const changePhoneMetaId = document.getElementById('change_phone_meta_id');
            const changePhoneInput = document.getElementById('change_phone_input');

            // ===== Change password modal =====
            const changePasswordModalEl = document.getElementById('changePasswordModal');
            const changePasswordModal = new bootstrap.Modal(changePasswordModalEl);
            const changePasswordForm = document.getElementById('change_password_form');
            const changePasswordAccountId = document.getElementById('change_password_account_id');
            const changePasswordMetaId = document.getElementById('change_password_meta_id');
            const newPasswordInput = document.getElementById('new_password');
            const newPasswordConfirmInput = document.getElementById('new_password_confirm');

            // ===== Helpers =====
            function normalizePhoneToE164Candidate(raw) {
                if (!raw) return '';
                let v = String(raw).trim();
                v = v.replace(/[ \t\n\r().\-\/\\]/g, '');
                if (v.startsWith('00')) v = '+' + v.substring(2);
                return v;
            }

            function isValidE164(v) {
                return /^\+[1-9]\d{1,14}$/.test(v);
            }

            function clearFormValidationState() {
                form.classList.remove('was-validated');
            }

            // ===== Modal mode =====
            function setAccountModalMode(mode) {
                const isAdd = mode === 'add';

                if (phoneBlock) phoneBlock.style.display = isAdd ? '' : 'none';
                if (passwordBlock) passwordBlock.style.display = isAdd ? '' : 'none';

                // PHONE
                if (phoneInput) {
                    phoneInput.required = isAdd;
                    phoneInput.disabled = !isAdd;
                    if (!isAdd) phoneInput.value = '';
                    phoneInput.classList.remove('is-valid', 'is-invalid');
                }

                // PASSWORD (ADD only)
                if (accountPasswordInput && accountPasswordConfirmInput) {
                    accountPasswordInput.required = isAdd;
                    accountPasswordConfirmInput.required = isAdd;

                    accountPasswordInput.disabled = !isAdd;
                    accountPasswordConfirmInput.disabled = !isAdd;

                    if (!isAdd) {
                        accountPasswordInput.value = '';
                        accountPasswordConfirmInput.value = '';
                    }

                    accountPasswordInput.classList.remove('is-valid', 'is-invalid');
                    accountPasswordConfirmInput.classList.remove('is-valid', 'is-invalid');
                }
            }

            // ===== ADD password live UI =====
            function updateAccountPasswordMatchUi() {
                const p1 = (accountPasswordInput?.value || '').trim();
                const p2 = (accountPasswordConfirmInput?.value || '').trim();

                if (!p1 && !p2) {
                    accountPasswordInput.classList.remove('is-invalid', 'is-valid');
                    accountPasswordConfirmInput.classList.remove('is-invalid', 'is-valid');
                    return;
                }

                const okLen = p1.length >= 8;
                const okMatch = p1 === p2 && p2.length > 0;

                if (okLen) {
                    accountPasswordInput.classList.remove('is-invalid');
                    accountPasswordInput.classList.add('is-valid');
                } else {
                    accountPasswordInput.classList.remove('is-valid');
                    accountPasswordInput.classList.add('is-invalid');
                }

                if (okLen && okMatch) {
                    accountPasswordConfirmInput.classList.remove('is-invalid');
                    accountPasswordConfirmInput.classList.add('is-valid');
                } else if (p2.length > 0) {
                    accountPasswordConfirmInput.classList.remove('is-valid');
                    accountPasswordConfirmInput.classList.add('is-invalid');
                } else {
                    accountPasswordConfirmInput.classList.remove('is-invalid', 'is-valid');
                }
            }

            if (accountPasswordInput && accountPasswordConfirmInput) {
                accountPasswordInput.addEventListener('input', () => {
                    clearFormValidationState();
                    updateAccountPasswordMatchUi();
                });
                accountPasswordConfirmInput.addEventListener('input', () => {
                    clearFormValidationState();
                    updateAccountPasswordMatchUi();
                });
            }

            // ===== ADD phone UI =====
            function updatePhoneUi() {
                const raw = phoneInput.value;
                const normalized = normalizePhoneToE164Candidate(raw);
                if (raw !== normalized) phoneInput.value = normalized;

                if (!normalized) {
                    phoneInput.classList.remove('is-invalid', 'is-valid');
                    return;
                }

                if (isValidE164(normalized)) {
                    phoneInput.classList.remove('is-invalid');
                    phoneInput.classList.add('is-valid');
                } else {
                    phoneInput.classList.remove('is-valid');
                    phoneInput.classList.add('is-invalid');
                }
            }

            phoneInput.addEventListener('input', () => {
                clearFormValidationState();
                updatePhoneUi();
            });
            phoneInput.addEventListener('blur', updatePhoneUi);

            // ===== Change phone UI =====
            function updateChangePhoneUi() {
                const raw = changePhoneInput.value;
                const normalized = normalizePhoneToE164Candidate(raw);
                if (raw !== normalized) changePhoneInput.value = normalized;

                if (!normalized) {
                    changePhoneInput.classList.remove('is-invalid', 'is-valid');
                    return;
                }

                if (isValidE164(normalized)) {
                    changePhoneInput.classList.remove('is-invalid');
                    changePhoneInput.classList.add('is-valid');
                } else {
                    changePhoneInput.classList.remove('is-valid');
                    changePhoneInput.classList.add('is-invalid');
                }
            }

            changePhoneInput.addEventListener('input', updateChangePhoneUi);
            changePhoneInput.addEventListener('blur', updateChangePhoneUi);

            // ===== Change password UI =====
            function updatePasswordMatchUi() {
                const p1 = (newPasswordInput.value || '').trim();
                const p2 = (newPasswordConfirmInput.value || '').trim();

                if (!p1 && !p2) {
                    newPasswordInput.classList.remove('is-invalid', 'is-valid');
                    newPasswordConfirmInput.classList.remove('is-invalid', 'is-valid');
                    return;
                }

                if (p1.length >= 8 && p1 === p2) {
                    newPasswordInput.classList.remove('is-invalid');
                    newPasswordConfirmInput.classList.remove('is-invalid');
                    newPasswordInput.classList.add('is-valid');
                    newPasswordConfirmInput.classList.add('is-valid');
                } else {
                    newPasswordInput.classList.remove('is-valid');
                    newPasswordConfirmInput.classList.remove('is-valid');
                    newPasswordInput.classList.add('is-invalid');
                    newPasswordConfirmInput.classList.add('is-invalid');
                }
            }

            newPasswordInput.addEventListener('input', updatePasswordMatchUi);
            newPasswordConfirmInput.addEventListener('input', updatePasswordMatchUi);

            // ===== Resets =====
            function resetModal() {
                form.reset();
                form.classList.remove('was-validated');

                phoneInput.classList.remove('is-valid', 'is-invalid');

                idInput.value = '';
                EDIT_ACCOUNT_ID = null;
                metaId.textContent = '—';

                if (accountPasswordInput && accountPasswordConfirmInput) {
                    accountPasswordInput.classList.remove('is-valid', 'is-invalid');
                    accountPasswordConfirmInput.classList.remove('is-valid', 'is-invalid');
                }
            }

            function resetChangePhoneModal() {
                changePhoneForm.reset();
                changePhoneForm.classList.remove('was-validated');
                changePhoneAccountId.value = '';
                changePhoneMetaId.textContent = '—';
                changePhoneInput.classList.remove('is-valid', 'is-invalid');
            }

            function resetChangePasswordModal() {
                changePasswordForm.reset();
                changePasswordForm.classList.remove('was-validated');
                changePasswordAccountId.value = '';
                changePasswordMetaId.textContent = '—';
                newPasswordInput.classList.remove('is-invalid', 'is-valid');
                newPasswordConfirmInput.classList.remove('is-invalid', 'is-valid');
            }

            // ===== Fill modal =====
            function fillModalFromRow(row) {
                idInput.value = row.dataset.id || '';
                firstNameInput.value = row.dataset.firstName || '';
                lastNameInput.value = row.dataset.lastName || '';
                displayNameInput.value = row.dataset.displayName || '';
                langCodeSelect.value = (row.dataset.langCode || 'pl').toLowerCase();
                emailInput.value = row.dataset.email || '';
                metaId.textContent = row.dataset.id || '—';
            }

            // ===== Filters =====
            function rowMatchesFilters(row) {
                const q = (searchInput.value || '').trim().toLowerCase();
                const wantedLang = (langFilter.value || 'ALL').toLowerCase();
                const hay = (row.dataset.search || '');
                const rowLang = (row.dataset.lang || '').toLowerCase();

                if (q && !hay.includes(q)) return false;
                if (wantedLang !== 'all' && rowLang !== wantedLang) return false;
                return true;
            }

            function applyFilters() {
                document.querySelectorAll('.account-row').forEach(row => {
                    row.style.display = rowMatchesFilters(row) ? '' : 'none';
                });
            }

            if (searchInput) searchInput.addEventListener('input', applyFilters);
            if (langFilter) langFilter.addEventListener('change', applyFilters);

            // ===== ADD =====
            if (addBtn) {
                addBtn.addEventListener('click', function () {
                    ACCOUNT_MODAL_MODE = 'add';
                    resetModal();
                    setAccountModalMode('add');

                    document.getElementById('accountModalTitle').textContent =
                        "{{ translations.add_account|default('Add account') }}";
                    document.getElementById('save_account_btn').textContent =
                        "{{ translations.save|default('Save') }}";

                    if (!langCodeSelect.value) langCodeSelect.value = 'pl';
                    accountModal.show();
                });
            }

            // ===== EDIT =====
            document.body.addEventListener('click', function (e) {
                const btn = e.target.closest('.edit_account_btn');
                if (!btn) return;

                const id = btn.dataset.id;
                const row = document.querySelector(`.account-row[data-id="${id}"]`);
                if (!row) return;

                ACCOUNT_MODAL_MODE = 'edit';
                resetModal();
                setAccountModalMode('edit');

                EDIT_ACCOUNT_ID = id;
                fillModalFromRow(row);

                document.getElementById('accountModalTitle').textContent =
                    "{{ translations.edit_account|default('Edit account') }}";
                document.getElementById('save_account_btn').textContent =
                    "{{ translations.edit|default('Edit') }}";

                accountModal.show();
            });

            // ===== SAVE (ADD/EDIT) =====
            form.addEventListener('submit', async function (e) {
                e.preventDefault();

                const isAdd = (ACCOUNT_MODAL_MODE === 'add');

                const payload = {
                    first_name: firstNameInput.value,
                    last_name: lastNameInput.value,
                    display_name: displayNameInput.value,
                    lang_code: langCodeSelect.value,
                    email: emailInput.value
                };

                if (isAdd) {
                    const phoneNorm = normalizePhoneToE164Candidate(phoneInput.value);
                    if (!phoneNorm || !isValidE164(phoneNorm)) {
                        form.classList.add('was-validated');
                        phoneInput.classList.add('is-invalid');

                        Swal.fire({
                            icon: 'error',
                            title: '{{ translations.error|default('Error') }}',
                            text: '{{ translations.phone_invalid_e164|default('Phone must be in E.164 format, e.g. +48123456789') }}'
                        });
                        return;
                    }

                    const p1 = (accountPasswordInput.value || '').trim();
                    const p2 = (accountPasswordConfirmInput.value || '').trim();
                    if (p1.length < 8 || p1 !== p2) {
                        form.classList.add('was-validated');
                        updateAccountPasswordMatchUi();

                        Swal.fire({
                            icon: 'error',
                            title: '{{ translations.error|default('Error') }}',
                            text: '{{ translations.passwords_must_match|default('Passwords must match.') }}'
                        });
                        return;
                    }

                    payload.phone = phoneNorm;
                    payload.password = p1;
                    payload.password_confirm = p2;
                }

                if (!form.checkValidity()) {
                    form.classList.add('was-validated');
                    return;
                }

                let url = '/ajax/user-accounts';
                let method = 'POST';

                if (!isAdd) {
                    url = `/ajax/user-accounts/${EDIT_ACCOUNT_ID}/profile`;
                    method = 'PATCH';
                }

                api(url, {method, data: payload})
                    .then(resp => {
                        if (resp.success || resp.ok) {
                            Swal.fire({
                                icon: 'success',
                                title: '{{ translations.success|default('Success') }}',
                                text: '{{ translations.operation_successful|default('Operation successful') }}',
                                timer: 1500,
                                showConfirmButton: false
                            });
                            setTimeout(() => window.location.reload(), 900);
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: '{{ translations.error|default('Error') }}',
                                text: resp.message ?? '{{ translations.undefined_error_occurred|default('Undefined error occurred') }}'
                            });
                        }
                    })
                    .catch(err => {
                        console.error(err);
                        Swal.fire({
                            icon: 'error',
                            title: '{{ translations.error|default('Error') }}',
                            text: '{{ translations.no_api_connection|default('No API connection') }}'
                        });
                    });
            });

            // ===== DELETE =====
            document.body.addEventListener('click', function (e) {
                const btn = e.target.closest('.delete_account_btn');
                if (!btn) return;

                const id = btn.dataset.id;
                const name = btn.dataset.name || ('#' + id);

                Swal.fire({
                    title: '{{ translations.are_you_sure|default('Are you sure?') }}',
                    text: '{{ translations.delete_confirmation|default('Delete confirmation') }}: "' + name + '"',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: '{{ translations.yes_delete_it|default('Yes, delete it') }}',
                    cancelButtonText: '{{ translations.cancel|default('Cancel') }}'
                }).then((result) => {
                    if (!result.isConfirmed) return;

                    api(`/ajax/user-accounts/${id}`, {method: 'DELETE'})
                        .then(resp => {
                            if (resp.success || resp.ok) {
                                Swal.fire({
                                    icon: 'success',
                                    title: '{{ translations.success|default('Success') }}',
                                    text: '{{ translations.deleted_successfully|default('Deleted successfully') }}',
                                    timer: 1500,
                                    showConfirmButton: false
                                });
                                setTimeout(() => window.location.reload(), 900);
                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: '{{ translations.error|default('Error') }}',
                                    text: resp.message ?? '{{ translations.undefined_error_occurred|default('Undefined error occurred') }}'
                                });
                            }
                        })
                        .catch(() => {
                            Swal.fire({
                                icon: 'error',
                                title: '{{ translations.error|default('Error') }}',
                                text: '{{ translations.no_api_connection|default('No API connection') }}'
                            });
                        });
                });
            });

            // ===== Open change phone / password =====
            document.body.addEventListener('click', function (e) {

                const phoneBtn = e.target.closest('.change_phone_btn');
                if (phoneBtn) {
                    const id = phoneBtn.dataset.id;
                    const row = document.querySelector(`.account-row[data-id="${id}"]`);
                    if (!row) return;

                    resetChangePhoneModal();
                    changePhoneAccountId.value = id;
                    changePhoneMetaId.textContent = id;

                    changePhoneInput.value = row.dataset.phone || '';
                    updateChangePhoneUi();

                    changePhoneModal.show();
                    return;
                }

                const passBtn = e.target.closest('.change_password_btn');
                if (passBtn) {
                    const id = passBtn.dataset.id;

                    resetChangePasswordModal();
                    changePasswordAccountId.value = id;
                    changePasswordMetaId.textContent = id;

                    changePasswordModal.show();
                    return;
                }
            });

            // ===== Change phone submit =====
            changePhoneForm.addEventListener('submit', function (e) {
                e.preventDefault();

                const id = changePhoneAccountId.value;
                const phoneNorm = normalizePhoneToE164Candidate(changePhoneInput.value);

                if (!phoneNorm || !isValidE164(phoneNorm)) {
                    changePhoneForm.classList.add('was-validated');
                    changePhoneInput.classList.add('is-invalid');
                    return;
                }

                api(`/ajax/user-accounts/${id}/phone`, {
                    method: 'PATCH',
                    data: { phone: phoneNorm }
                })
                    .then(resp => {
                        if (resp.success || resp.ok) {
                            Swal.fire({
                                icon: 'success',
                                title: '{{ translations.success|default('Success') }}',
                                text: '{{ translations.operation_successful|default('Operation successful') }}',
                                timer: 1300,
                                showConfirmButton: false
                            });
                            changePhoneModal.hide();
                            setTimeout(() => window.location.reload(), 700);
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: '{{ translations.error|default('Error') }}',
                                text: resp.message ?? '{{ translations.undefined_error_occurred|default('Undefined error occurred') }}'
                            });
                        }
                    })
                    .catch(() => {
                        Swal.fire({
                            icon: 'error',
                            title: '{{ translations.error|default('Error') }}',
                            text: '{{ translations.no_api_connection|default('No API connection') }}'
                        });
                    });
            });

            // ===== Change password submit =====
            changePasswordForm.addEventListener('submit', function (e) {
                e.preventDefault();

                const id = changePasswordAccountId.value;
                const p1 = (newPasswordInput.value || '').trim();
                const p2 = (newPasswordConfirmInput.value || '').trim();

                if (p1.length < 8 || p1 !== p2) {
                    changePasswordForm.classList.add('was-validated');
                    updatePasswordMatchUi();

                    Swal.fire({
                        icon: 'error',
                        title: '{{ translations.error|default('Error') }}',
                        text: '{{ translations.passwords_must_match|default('Passwords must match.') }}'
                    });
                    return;
                }

                api(`/ajax/user-accounts/${id}/password`, {
                    method: 'PATCH',
                    data: { password: p1, password_confirm: p2 }
                })
                    .then(resp => {
                        if (resp.success || resp.ok) {
                            Swal.fire({
                                icon: 'success',
                                title: '{{ translations.success|default('Success') }}',
                                text: '{{ translations.operation_successful|default('Operation successful') }}',
                                timer: 1300,
                                showConfirmButton: false
                            });
                            changePasswordModal.hide();
                            setTimeout(() => window.location.reload(), 700);
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: '{{ translations.error|default('Error') }}',
                                text: resp.message ?? '{{ translations.undefined_error_occurred|default('Undefined error occurred') }}'
                            });
                        }
                    })
                    .catch(() => {
                        Swal.fire({
                            icon: 'error',
                            title: '{{ translations.error|default('Error') }}',
                            text: '{{ translations.no_api_connection|default('No API connection') }}'
                        });
                    });
            });

            // initial
            applyFilters();
        });
    </script>

{% endblock %}