// Função para carregar o TOM SELECT com estilo/dados da empresa
function loadSelectEmpresa(elemento = '#selectEmpresaChamado', placeholder = 'SELECIONE A EMPRESA') {
    const ts = new TomSelect(`${elemento}`, {
        maxItems: 1,
        create: false,
        allowEmptyOption: true,
        placeholder: placeholder,
        persist: false,

        searchField: ['cnpj', 'nome', 'fantasia'],

        render: {
            no_results(data, escape) {
                return `<div class="no-results">Nenhum resultado encontrado</div>`;
            },
            option(data, escape) {
                if (data.value == 0) {
                    return `<div><span><i class="ri-building-line"></i> TODAS EMPRESAS</span></div>`;
                } else if (data.value == -1) {
                    return `<div>SELECIONE A EMPRESA</div>`
                }

                const cnpj = escape(data.cnpj);
                const nome = escape(data.nome);
                const nomeFantasia = escape(data.fantasia);
                const inativo = escape(data.inativo);

                return `
                    <div class="py-2">
                      <div class="fw-bold">${cnpj}</div>
                      <div>
                        ${nome}
                        <i class="ri-checkbox-blank-circle-fill ${inativo == 0 ? 'text-success' : 'text-danger'} px-2" data-toggle="tooltip" data-placement="top" title="${inativo == 0 ? 'Ativo' : 'Inativo'}"></i>
                      </div>
                      <small class="text-muted">${nomeFantasia}</small>
                    </div>
                `;
            },
            item(data, escape) {
                if (data.value == 0) {
                    return `<div><span><i class="ri-building-line"></i> TODAS EMPRESAS</span></div>`;
                } else if (data.value == -1) {
                    return `<div>SELECIONE A EMPRESA</div>`
                }

                const cnpj = escape(data.cnpj);
                const nome = escape(data.nome);
                const inativo = escape(data.inativo);

                return `
                    <div>
                      <i class="ri-checkbox-blank-circle-fill ${inativo == 0 ? 'text-success' : 'text-danger'} px-2" data-toggle="tooltip" data-placement="top" title="${inativo == 0 ? 'Ativo' : 'Inativo'}"></i>
                      <span>${nome}</span>
                      <small class="text-muted" style="margin-left: 5px !important;color: #1f1f1f !important; font-weight: 600 !important;">(${cnpj})</small>
                    </div>
                `;
            }
        }
    });

    return ts;
}

function loadSelectUsuario(elemento = '#selectAtendenteFiltroChamados', placeholderFull = '', allText = 'ATENDENTES', selectText = 'ATENDENTE') {
    new TomSelect(`${elemento}`, {
        maxItems: 1,
        create: false,
        allowEmptyOption: true,
        placeholder: placeholderFull == '' ? `SELECIONE O ${selectText}` : placeholderFull,
        persist: false,

        searchField: ['cnpj', 'nome', 'fantasia'],

        render: {
            no_results(data, escape) {
                return `<div class="no-results">Nenhum resultado encontrado</div>`;
            },
            option(data, escape) {
                if (data.value == 0) {
                    return `<div><span><i class="ri-group-line"></i> TODOS ${allText}</span></div>`;
                } else if (data.value == -1) {
                    const texto = placeholderFull == '' ? `SELECIONE O ${selectText}` : placeholderFull;
                    return `<div>${texto}</div>`
                }

                const nome = escape(data.nome);
                const email = escape(data.email);
                const foto = escape(data.foto);

                const srcFoto = foto ? URL_ARQUIVOS + '/' + foto : DEFAULT_PICTURE;

                return `
                    <div style="flex-direction: row !important; display: flex !important; align-items: center !important; gap: 8px !important; justify-content: start !important;">
                      <img 
                        src="${srcFoto}" 
                        alt="${nome}"
                        style="width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0;border: 1px solid #d3d3d3;"
                      />
                      <div style="display:flex;flex-direction:column;line-height:1.2;">
                        <span class="text-start">${nome}</span>
                        <small class="text-muted text-start">${email}</small>
                      </div>
                    </div>
                `;
            },
            item(data, escape) {
                if (data.value == 0) {
                    return `<div><span><i class="ri-group-line"></i> TODOS ${allText}</span></div>`;
                } else if (data.value == -1) {
                    const texto = placeholderFull == '' ? `SELECIONE O ${selectText}` : placeholderFull;
                    return `<div>${texto}</div>`
                }

                const nome = escape(data.nome);
                const foto = escape(data.foto);
                const email = escape(data.email);

                const srcFoto = foto ? URL_ARQUIVOS + '/' + foto : DEFAULT_PICTURE;

                return `
                  <div class="d-flex align-items-center gap-2">
                    <img 
                      src="${srcFoto}" 
                      alt="${nome}"
                      style="width:18px;height:18px;border-radius:50%;object-fit:cover;border: 1px solid #d3d3d3;"
                    />
                    <span>
                        ${nome}
                        <small class="text-muted" style="color: #1f1f1f !important; font-weight: 600 !important;">(${email})</small>
                    </span>
                  </div>
                `;
            }
        }
    });
}

function loadSelectTiposDemanda(elemento = '#selectTiposDemanda') {

    const ts = new TomSelect(`${elemento}`, {
        maxItems: 1,
        create: false,
        allowEmptyOption: true,
        placeholder: 'SELECIONE O TIPO DE DEMANDA',
        persist: false,

        searchField: ['descricao', 'modelo'],

        render: {
            no_results(data, escape) {
                return `<div class="no-results">Nenhum resultado encontrado</div>`;
            },
            option(data, escape) {
                if (data.value == -1) {
                    return `<div>SELECIONE O TIPO DE DEMANDA</div>`;
                }

                const descricao = escape(data.descricao || data.text);
                const tituloModelo = escape(data.modelo || '');

                let etiquetasHtml = '';

                if (data.etiquetas && data.etiquetas !== '') {
                    let etiquetas = [];

                    try {
                        if (typeof data.etiquetas === 'string') {
                            etiquetas = JSON.parse(data.etiquetas);
                        } else if (Array.isArray(data.etiquetas)) {
                            etiquetas = data.etiquetas;
                        }
                    } catch (e) {
                        console.warn('Erro ao converter etiquetas:', data.etiquetas);
                        etiquetas = [];
                    }

                    etiquetas.forEach(etq => {
                        etiquetasHtml += `<span class="badge me-1" style="background:${etq.cor};color:#fff;font-size:11px;padding:4px 6px;border-radius:4px;">
                            ${escape(etq.nome)}
                        </span>`;
                    });
                }

                return `
                    <div class="py-2">
                        <div class="fw-bold">${descricao}</div>
                        <small class="text-muted d-block">${tituloModelo}</small>
                        <div class="mt-1">${etiquetasHtml}</div>
                    </div>
                `;
            },

            item(data, escape) {

                if (data.value == -1) {
                    return `<div>SELECIONE O TIPO DE DEMANDA</div>`;
                }

                const descricao = escape(data.descricao || data.text);

                return `
                    <div>
                        <span class="fw-semibold">${descricao}</span>
                    </div>
                `;
            }
        }
    });

    return ts;
}

function showTomSelectLoader(tsInstance, position = 'start') {
    if (!tsInstance || !tsInstance.wrapper) return;

    const control = tsInstance.wrapper.querySelector('.ts-control');

    // Evita duplicação
    if (control.querySelector('.ts-loader')) return;

    const loader = document.createElement('div');
    loader.classList.add('ts-loader');

    loader.innerHTML = `
        <div class="spinner-border spinner-border-sm" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    `;

    if (position === 'start') {
        control.prepend(loader);
    } else {
        control.append(loader);
    }

    control.classList.add('ts-loading');
}

function hideTomSelectLoader(tsInstance) {
    if (!tsInstance || !tsInstance.wrapper) return;

    const control = tsInstance.wrapper.querySelector('.ts-control');
    const loader = control.querySelector('.ts-loader');

    if (loader) loader.remove();

    control.classList.remove('ts-loading');
}

function resetTomSelectPlaceholder(ts, placeholder) {
    ts.clear(true); // limpa seleção

    ts.settings.placeholder = placeholder;

    if (ts.control_input) {
        ts.control_input.placeholder = placeholder;
    }

    ts.refreshState();
}