<?php $title = 'Produtos'; ?>

<div class="card" aria-labelledby="produtos-title">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
        <h1 id="produtos-title">Produtos</h1>
        <div>
            <a href="/produtos/create" class="btn" aria-label="Criar novo produto">Novo Produto</a>
            <button id="btnImportar" class="btn btn-secondary" style="margin-left: 0.5rem;">Importar</button>
            <button id="btnExportar" class="btn btn-secondary" style="margin-left: 0.5rem;">Exportar</button>
        </div>
    </div>

    <div style="display: flex; gap: 1rem; align-items: flex-end; margin-bottom: 1rem;">
        <div class="form-group" style="max-width: 320px; position: relative;">
            <label for="searchProdutos" style="display:block; margin-bottom:0.25rem;">Buscar (código, SKU, nome, marca, categoria)</label>
            <input id="searchProdutos" type="text" placeholder="Digite ao menos 3 letras" aria-label="Buscar por código, SKU, nome, marca ou categoria" autocomplete="off" style="height: 36px;">
            <div id="searchSuggestions" style="position:absolute; top:100%; left:0; right:0; background:#fff; border:1px solid #e5e7eb; border-radius:6px; box-shadow:0 8px 24px rgba(0,0,0,0.08); display:none; z-index:100; max-height:240px; overflow:auto;"></div>
        </div>
        <div class="form-group" style="max-width: 200px;">
            <label for="perPage" style="display:block; margin-bottom:0.25rem;">Itens por página</label>
            <select id="perPage" aria-label="Quantidade por página" style="height: 36px;">
                <option value="20">20</option>
                <option value="50">50</option>
                <option value="100">100</option>
            </select>
        </div>
        <div class="form-group" style="max-width: 200px;">
            <label for="btnConfigColunas" style="display:block; margin-bottom:0.25rem; visibility:hidden;">Config</label>
            <button id="btnConfigColunas" class="btn btn-secondary" aria-expanded="false" aria-controls="panelConfig" style="height: 36px; display:inline-flex; align-items:center;">Configurar colunas</button>
        </div>
    </div>

    <div id="panelConfig" class="card" style="display:none; margin-bottom: 1rem;" role="region" aria-label="Configuração de colunas visíveis">
        <strong>Colunas visíveis</strong>
        <div id="configCheckboxes" style="display:flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.5rem;"></div>
        <div style="margin-top: 0.5rem; display:flex; gap:0.5rem;">
            <button id="btnSalvarPrefs" class="btn">Salvar preferências</button>
            <button id="btnResetPrefs" class="btn btn-secondary">Redefinir</button>
        </div>
    </div>

    <div id="error" class="alert alert-error" style="display: none;" role="alert" aria-live="polite"></div>
    <div id="loading" class="loading" aria-live="polite">Carregando produtos...</div>
    <div id="empty" class="alert" style="display: none;" role="status" aria-live="polite">Nenhum produto encontrado</div>

    <div class="table-responsive" aria-live="polite">
        <table id="produtosTable" class="table" style="display: none;" role="table" aria-label="Lista de produtos">
            <thead>
                <tr>
                    <th style="width:32px"><input type="checkbox" id="selectAll" aria-label="Selecionar todos"></th>
                    <th data-col="id">ID</th>
                    <th data-col="codigo">Código</th>
                    <th data-col="nome">Nome</th>
                    <th data-col="ean">EAN</th>
                    <th data-col="ncm">NCM</th>
                    <th data-col="cest">CEST</th>
                    <th data-col="cfop">CFOP</th>
                    <th data-col="preco">Preço</th>
                    <th data-col="estoque">Estoque</th>
                    <th>Ações</th>
                </tr>
            </thead>
            <tbody id="produtosBody"></tbody>
        </table>
    </div>

    <div style="display:flex; justify-content: space-between; align-items: center; margin-top: 0.75rem;">
        <div style="display:flex; gap:0.5rem;">
            <button id="btnEditarSelecionados" class="btn btn-secondary" disabled>Editar selecionados</button>
            <button id="btnExcluirSelecionados" class="btn btn-danger" disabled>Excluir selecionados</button>
        </div>
        <div style="display:flex; gap:0.5rem; align-items:center;">
            <button id="btnPrev" class="btn btn-secondary">Anterior</button>
            <span id="pageInfo" aria-live="polite"></span>
            <button id="btnNext" class="btn btn-secondary">Próxima</button>
        </div>
    </div>

    
</div>

<!-- Modal de edição removido; edição agora ocorre na tela unificada de cadastro -->

<!-- Modal Importação -->
<div id="modalImport" class="card" style="display:none; position: fixed; top: 8%; left: 50%; transform: translateX(-50%); z-index: 1000; max-width: 800px; width: 95%;" role="dialog" aria-modal="true" aria-labelledby="modalImportTitulo">
    <h2 id="modalImportTitulo">Importar Produtos via CSV</h2>
    <div style="margin-bottom:0.5rem;">
        <button id="btnBaixarModeloCSV" class="btn btn-secondary">Baixar modelo CSV</button>
    </div>
    <form id="formImport" novalidate>
        <div class="form-group"><label for="csvFile">Arquivo CSV</label><input id="csvFile" type="file" accept=".csv" required></div>
        <div style="display:flex; gap:0.5rem;">
            <button type="submit" class="btn">Pré-visualizar</button>
            <button type="button" id="btnFecharImport" class="btn btn-secondary">Fechar</button>
        </div>
    </form>
    <div id="importPreview" style="margin-top:1rem; display:none;">
        <strong>Pré-visualização</strong>
        <div id="importErrors" class="alert alert-error" style="display:none; margin-top:0.5rem;"></div>
        <div class="table-responsive"><table class="table"><thead><tr><th>id</th><th>codigo</th><th>ean</th><th>ncm</th><th>cest</th><th>cfop</th><th>preco</th><th>Status</th></tr></thead><tbody id="importTbody"></tbody></table></div>
        <div style="display:flex; gap:0.5rem; margin-top:0.5rem;">
            <button id="btnConfirmImport" class="btn">Importar</button>
        </div>
    </div>
    <div id="importFeedback" class="alert" style="display:none; margin-top:0.5rem;"></div>
</div>

<script>
    // Configuração de colunas e preferências
    const allColumns = ['foto','id','codigo','nome','ean','ncm','cest','cfop','preco','estoque','created_at','updated_at'];
    let visibleColumns = [...allColumns];
    let currentPage = 1;
    let totalPages = 1;
    let currentQuery = '';
    let perPage = 20;
    let selectedIds = new Set();
    let currentData = [];
    let userPrefsKey = 'prefs:produtos:default:anon';

    async function resolveUserPrefsKey() {
        try {
            const res = await apiRequest('/api/auth/me');
            if (!res) return; // not authenticated context
            const js = await res.json();
            const u = js.user || {};
            const email = (u.email || 'anon').replace(/[^a-z0-9@._-]/gi, '_');
            const tenant = (u.tenant || 'default').replace(/[^a-z0-9._-]/gi, '_');
            userPrefsKey = `prefs:produtos:${tenant}:${email}`;
        } catch (_) {}
    }

    function loadPrefs() {
        try {
            const raw = localStorage.getItem(userPrefsKey);
            if (!raw) return;
            const prefs = JSON.parse(raw);
            if (Array.isArray(prefs.visibleColumns)) visibleColumns = prefs.visibleColumns.filter(c => allColumns.includes(c));
            if (typeof prefs.perPage === 'number') perPage = Math.min(100, Math.max(20, prefs.perPage));
        } catch (_) {}
    }
    function savePrefs() {
        try {
            const prefs = { visibleColumns, perPage };
            localStorage.setItem(userPrefsKey, JSON.stringify(prefs));
            showAlert('Preferências salvas', 'success');
        } catch (e) {
            showAlert('Falha ao salvar preferências', 'error');
        }
    }

    function renderConfigCheckboxes() {
        const wrap = document.getElementById('configCheckboxes');
        wrap.innerHTML = '';
        for (const col of allColumns) {
            const id = `col_${col}`;
            const div = document.createElement('div');
            const labelMap = { foto: 'Foto', id: 'ID', codigo: 'Código', nome: 'Nome', ean: 'EAN', ncm: 'NCM', cest: 'CEST', cfop: 'CFOP', preco: 'Preço', estoque: 'Estoque', created_at: 'Criado', updated_at: 'Atualizado' };
            const label = labelMap[col] || col.toUpperCase();
            div.innerHTML = `<label for="${id}"><input type="checkbox" id="${id}" ${visibleColumns.includes(col)?'checked':''}> ${label}</label>`;
            wrap.appendChild(div);
            div.querySelector('input').addEventListener('change', (e) => {
                const checked = e.target.checked;
                if (checked && !visibleColumns.includes(col)) visibleColumns.push(col);
                if (!checked) visibleColumns = visibleColumns.filter(c => c !== col);
                renderTable();
            });
        }
        // Aplica visibilidade nos th
        const ths = document.querySelectorAll('#produtosTable thead th[data-col]');
        ths.forEach(th => {
            const col = th.getAttribute('data-col');
            th.style.display = visibleColumns.includes(col) ? '' : 'none';
        });
    }

    function applyColumnVisibilityToRow(tr, p) {
        const fmtQty = (typeof window !== 'undefined' && window.fmtQty) ? window.fmtQty : (n => String(Math.trunc(Number(n || 0))));
        const map = {
            foto: `<td data-col="foto">${p._foto ? `<img src="${p._foto}" alt="Foto produto ${p.id}" style="width:40px;height:40px;object-fit:cover;">` : ''}</td>`,
            id: `<td data-col="id">${p.id}</td>`,
            codigo: `<td data-col="codigo">${p.codigo ?? ''}</td>`,
            nome: `<td data-col="nome">${p.nome ?? ''}</td>`,
            ean: `<td data-col="ean">${p.ean ?? ''}</td>`,
            ncm: `<td data-col="ncm">${p.ncm ?? ''}</td>`,
            cest: `<td data-col="cest">${p.cest ?? ''}</td>`,
            cfop: `<td data-col="cfop">${p.cfop ?? ''}</td>`,
            preco: `<td data-col="preco">${p.preco ? parseFloat(p.preco).toFixed(2) : ''}</td>`,
            estoque: `<td data-col="estoque">${p.estoque !== undefined ? fmtQty(p.estoque) : '0'}</td>`,
            created_at: `<td data-col="created_at">${p.created_at ?? ''}</td>`,
            updated_at: `<td data-col="updated_at">${p.updated_at ?? ''}</td>`
        };
        const tds = [];
        for (const col of allColumns) {
            const tdHtml = map[col];
            const shouldShow = visibleColumns.includes(col);
            tds.push(shouldShow ? tdHtml : `<td data-col="${col}" style="display:none"></td>`);
        }
        tr.innerHTML = `
            <td style="width:32px"><input type="checkbox" class="rowSelect" data-id="${p.id}" aria-label="Selecionar produto ${p.id}"></td>
            ${tds.join('')}
            <td>
                <button class="btn btn-secondary btn-edit" data-id="${p.id}" aria-label="Editar produto ${p.id}" style="padding: 0.25rem 0.5rem; font-size: 0.875rem;">Editar</button>
                <button class="btn btn-danger btn-delete" data-id="${p.id}" aria-label="Excluir produto ${p.id}" style="padding: 0.25rem 0.5rem; font-size: 0.875rem; margin-left:0.25rem;">Excluir</button>
            </td>`;
    }

    async function loadProdutos() {
        try {
            // Verificar autenticação antes de fazer qualquer request
            const authToken = localStorage.getItem('auth_token') || localStorage.getItem('admin_token');
            const hasCookieAuth = document.cookie.includes('auth_token=') || document.cookie.includes('admin_token=');
            
            if (!authToken && !hasCookieAuth) {
                console.log('Sem autenticação, não fazendo request para /api/produtos');
                return;
            }
            
            // reset UI states
            document.getElementById('error').style.display = 'none';
            document.getElementById('empty').style.display = 'none';
            showLoading();
            const response = await apiRequest(`/api/produtos?page=${currentPage}&per_page=${perPage}&q=${encodeURIComponent(currentQuery)}`);
            if (!response) return; // Redirecionado para login ou abortado
            // tratamento de erro explícito
            if (!response.ok) {
                hideLoading();
                let msg = 'Erro ao carregar produtos';
                try {
                    const j = await response.json();
                    if (j && j.error && j.error.message) msg = j.error.message;
                } catch (_) {
                    msg = response.statusText || msg;
                }
                const err = document.getElementById('error');
                err.textContent = msg;
                err.style.display = 'block';
                document.getElementById('produtosTable').style.display = 'none';
                return;
            }
            const json = await response.json();
            const data = json.data || [];
            // Parse nome a partir de meta_json quando vier do backend
            for (const p of data) {
                if (p.nome && typeof p.nome === 'string') continue; // já enriquecido
                try {
                    const meta = p.meta_json ? JSON.parse(p.meta_json) : null;
                    p.nome = meta && (meta.nome || meta.name || meta.title) ? (meta.nome || meta.name || meta.title) : '';
                } catch (_) { p.nome = p.nome || ''; }
            }
            currentData = data;
            totalPages = json.total_pages || 1;
            const tbody = document.getElementById('produtosBody');
            tbody.innerHTML = '';
            selectedIds.clear();

            for (const p of data) {
                const tr = document.createElement('tr');
                applyColumnVisibilityToRow(tr, p);
                tbody.appendChild(tr);
            }

            document.getElementById('selectAll').checked = false;
            updateBulkButtons();
            hideLoading();
            document.getElementById('produtosTable').style.display = data.length ? 'table' : 'none';
            if (data.length === 0) {
                const emptyDiv = document.getElementById('empty');
                emptyDiv.textContent = currentQuery ? 'Nenhum produto encontrado para a busca.' : 'Nenhum produto encontrado';
                emptyDiv.style.display = 'block';
            }
            document.getElementById('pageInfo').textContent = `Página ${json.page || 1} de ${totalPages}`;
            if (data.length) await enrichVisibleColumns();
        } catch (error) {
            hideLoading();
            const err = document.getElementById('error');
            err.textContent = 'Erro ao carregar produtos';
            err.style.display = 'block';
            document.getElementById('produtosTable').style.display = 'none';
        }
    }

    async function enrichVisibleColumns() {
        // Inserir cabeçalhos se ainda não existirem
        ensureHeaderColumns();
        // Carregar fotos se a coluna estiver visível
        if (visibleColumns.includes('foto')) {
            const tbody = document.getElementById('produtosBody');
            const rows = Array.from(tbody.querySelectorAll('tr'));
            for (let i = 0; i < currentData.length; i++) {
                const p = currentData[i];
                try {
                    const res = await apiRequest(`/api/produtos/${p.id}/media`);
                    if (!res) continue;
                    const js = await res.json();
                    const firstImg = (js.data || []).find(m => m.type === 'image');
                    const td = rows[i].querySelector('td[data-col="foto"]');
                    const placeholder = '/assets/logo-light.png';
                    if (firstImg) {
                        let url = firstImg.thumb_url || firstImg.url || (firstImg.filename ? ('/uploads/' + firstImg.filename) : null);
                        if (url && !/^https?:\/\//.test(url) && !url.startsWith('/')) { url = '/' + url.replace(/^\/+/, ''); }
                        if (url && td) {
                            p._foto = url;
                            td.innerHTML = `<img src="${url}" alt="Foto produto ${p.id}" style="width:40px;height:40px;object-fit:cover;" onerror="this.onerror=null;this.src='${placeholder}';">`;
                        }
                    } else if (td) {
                        // Sem mídia: exibir placeholder para evitar célula vazia
                        td.innerHTML = `<img src="${placeholder}" alt="Sem foto" style="width:40px;height:40px;object-fit:cover;opacity:0.8;">`;
                    }
                } catch (_) {}
            }
        }
        // Carregar created_at/updated_at se necessário
        if (visibleColumns.includes('created_at') || visibleColumns.includes('updated_at')) {
            const tbody = document.getElementById('produtosBody');
            const rows = Array.from(tbody.querySelectorAll('tr'));
            for (let i = 0; i < currentData.length; i++) {
                const p = currentData[i];
                try {
                    const res = await apiRequest(`/api/produtos/${p.id}`);
                    if (!res) continue;
                    const js = await res.json();
                    const d = js.data || {};
                    p.created_at = d.created_at || p.created_at;
                    p.updated_at = d.updated_at || p.updated_at;
                    const tdC = rows[i].querySelector('td[data-col="created_at"]');
                    if (tdC) tdC.textContent = p.created_at || '';
                    const tdU = rows[i].querySelector('td[data-col="updated_at"]');
                    if (tdU) tdU.textContent = p.updated_at || '';
                } catch (_) {}
            }
        }
    }

    function ensureHeaderColumns() {
        const theadRow = document.querySelector('#produtosTable thead tr');
        if (!theadRow) return;
        const ths = theadRow.querySelectorAll('th');
        // Inserir Foto após o checkbox de seleção
        const hasFoto = theadRow.querySelector('th[data-col="foto"]');
        if (!hasFoto) {
            const fotoTh = document.createElement('th');
            fotoTh.setAttribute('data-col', 'foto');
            fotoTh.textContent = 'Foto';
            if (ths.length > 0) {
                theadRow.insertBefore(fotoTh, ths[1]); // após o checkbox
            } else { theadRow.appendChild(fotoTh); }
        }
        // Inserir Criado/Atualizado antes de Ações
        const actionsTh = Array.from(theadRow.querySelectorAll('th')).find(th => th.textContent.trim() === 'Ações');
        if (actionsTh) {
            if (!theadRow.querySelector('th[data-col="created_at"]')) {
                const cTh = document.createElement('th'); cTh.setAttribute('data-col','created_at'); cTh.textContent = 'Criado';
                theadRow.insertBefore(cTh, actionsTh);
            }
            if (!theadRow.querySelector('th[data-col="updated_at"]')) {
                const uTh = document.createElement('th'); uTh.setAttribute('data-col','updated_at'); uTh.textContent = 'Atualizado';
                theadRow.insertBefore(uTh, actionsTh);
            }
        }
        // Aplicar visibilidade conforme preferências
        document.querySelectorAll('#produtosTable thead th[data-col]').forEach(th => {
            const col = th.getAttribute('data-col');
            th.style.display = visibleColumns.includes(col) ? '' : 'none';
        });
    }

    function updateBulkButtons() {
        const hasSelection = selectedIds.size > 0;
        document.getElementById('btnEditarSelecionados').disabled = !hasSelection;
        document.getElementById('btnExcluirSelecionados').disabled = !hasSelection;
    }

    function renderTable() {
        const tbody = document.getElementById('produtosBody');
        tbody.querySelectorAll('tr').forEach((tr, idx) => {
            applyColumnVisibilityToRow(tr, currentData[idx]);
        });
        // Atualiza visibilidade do cabeçalho
        document.querySelectorAll('#produtosTable thead th[data-col]').forEach(th => {
            const col = th.getAttribute('data-col');
            th.style.display = visibleColumns.includes(col) ? '' : 'none';
        });
    }

    function bindTableEvents() {
        const tbody = document.getElementById('produtosBody');
        tbody.addEventListener('change', (e) => {
            const cb = e.target.closest('.rowSelect');
            if (cb) {
                const id = parseInt(cb.getAttribute('data-id'));
                if (cb.checked) selectedIds.add(id); else selectedIds.delete(id);
                updateBulkButtons();
            }
        });
        tbody.addEventListener('click', (e) => {
            const editBtn = e.target.closest('.btn-edit');
            if (editBtn) { openEditModal(parseInt(editBtn.getAttribute('data-id'))); return; }
            // Modal de mídia removido; gerenciamento de mídia agora na edição
            const delBtn = e.target.closest('.btn-delete');
            if (delBtn) { confirmDelete(parseInt(delBtn.getAttribute('data-id'))); return; }
        });
    }

    function openEditModal(id) {
        window.location.href = `/produtos/${id}/edit`;
    }

    // Edição agora é feita na rota unificada; form modal removido

    async function confirmDelete(id) {
        if (!confirm('Excluir este produto?')) return;
        try {
            const res = await apiRequest(`/api/produtos/${id}`, { method: 'DELETE' });
            if (!res) return;
            if (res.status >= 200 && res.status < 300) {
                showAlert('Produto excluído', 'success');
                await loadProdutos();
            } else {
                showAlert('Falha ao excluir', 'error');
            }
        } catch (_) { showAlert('Erro de rede ao excluir', 'error'); }
    }

    async function bulkEditSelected() {
        const ids = Array.from(selectedIds);
        if (ids.length === 0) return;
        const campo = prompt('Qual campo deseja alterar (codigo, ean, ncm, cest, cfop, preco)?');
        if (!campo || !allColumns.includes(campo)) return;
        const valor = prompt(`Novo valor para ${campo}:`);
        if (valor === null) return;
        showLoading();
        try {
            for (const id of ids) {
                const body = { [campo]: campo === 'preco' ? parseFloat(valor) : valor };
                await apiRequest(`/api/produtos/${id}`, { method: 'PATCH', body: JSON.stringify(body) });
            }
            showAlert('Alterações aplicadas', 'success');
            await loadProdutos();
        } catch (_) { showAlert('Falha na edição em massa', 'error'); }
        finally { hideLoading(); }
    }

    async function bulkDeleteSelected() {
        const ids = Array.from(selectedIds);
        if (ids.length === 0) return;
        if (!confirm(`Excluir ${ids.length} produto(s) selecionado(s)?`)) return;
        showLoading();
        try {
            for (const id of ids) {
                await apiRequest(`/api/produtos/${id}`, { method: 'DELETE' });
            }
            showAlert('Exclusão concluída', 'success');
            await loadProdutos();
        } catch (_) { showAlert('Falha na exclusão em massa', 'error'); }
        finally { hideLoading(); }
    }

    function toCSV(rows, columns) {
        const header = columns.join(',');
        const lines = [header];
        for (const r of rows) {
            const vals = columns.map(c => {
                const v = r[c] ?? '';
                const s = String(v).replace(/"/g, '""');
                return `"${s}"`;
            });
            lines.push(vals.join(','));
        }
        return lines.join('\n');
    }

    async function exportarCSV(tipo) {
        try {
            showLoading();
            let rows = [];
            if (tipo === 'selecionados') {
                const ids = new Set(selectedIds);
                rows = currentData.filter(r => ids.has(r.id));
            } else if (tipo === 'filtrados') {
                rows = currentData; // apenas página atual filtrada
            } else { // todos
                let page = 1; const per = 100; let totalP = 1;
                do {
                    const res = await apiRequest(`/api/produtos?page=${page}&per_page=${per}&q=${encodeURIComponent(currentQuery)}`);
                    if (!res) break;
                    const js = await res.json();
                    rows = rows.concat(js.data || []);
                    totalP = js.total_pages || page;
                    page++;
                } while (page <= totalP);
            }
            const csv = toCSV(rows, visibleColumns);
            const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url; a.download = 'produtos.csv';
            document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url);
            showAlert('Exportação concluída', 'success');
        } catch (_) { showAlert('Falha na exportação', 'error'); }
        finally { hideLoading(); }
    }

    function downloadModeloCSV() {
        const cols = ['id','codigo','ean','ncm','cest','cfop','preco'];
        const exemplo = [{id:'',codigo:'ABC123',ean:'7891234567890',ncm:'12345678',cest:'',cfop:'5102',preco:'19.90'}];
        const csv = toCSV(exemplo, cols);
        const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a'); a.href = url; a.download = 'modelo_produtos.csv';
        document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url);
    }

    function parseCSV(text) {
        const lines = text.split(/\r?\n/).filter(l => l.trim() !== '');
        if (lines.length === 0) return [];
        const header = lines[0].split(',').map(h => h.trim().replace(/^"|"$/g,''));
        const rows = [];
        for (let i=1; i<lines.length; i++) {
            const cols = lines[i].match(/("[^"]*("{2})*[^"]*"|[^,]+)/g) || [];
            const vals = cols.map(c => c.trim().replace(/^"|"$/g,'').replace(/""/g,'"'));
            const obj = {};
            header.forEach((h,idx) => obj[h] = vals[idx] ?? '');
            rows.push(obj);
        }
        return rows;
    }

    async function handleImportPreview(e) {
        e.preventDefault();
        const file = document.getElementById('csvFile').files[0];
        if (!file) { showAlert('Selecione um arquivo CSV', 'error'); return; }
        const text = await file.text();
        const rows = parseCSV(text);
        const tbody = document.getElementById('importTbody');
        tbody.innerHTML = '';
        const errors = [];
        for (const r of rows) {
            const preco = r.preco ? parseFloat(r.preco) : null;
            const ok = r.codigo && (preco === null || !isNaN(preco));
            const tr = document.createElement('tr');
            tr.innerHTML = `<td>${r.id||''}</td><td>${r.codigo||''}</td><td>${r.ean||''}</td><td>${r.ncm||''}</td><td>${r.cest||''}</td><td>${r.cfop||''}</td><td>${r.preco||''}</td><td>${ok?'OK':'Inválido'}</td>`;
            if (!ok) tr.style.background = '#fee2e2';
            tbody.appendChild(tr);
            if (!ok) errors.push(`Linha inválida: código obrigatório e preço numérico opcional.`);
        }
        const errDiv = document.getElementById('importErrors');
        if (errors.length) { errDiv.textContent = errors.join('\n'); errDiv.style.display = 'block'; } else { errDiv.style.display = 'none'; }
        document.getElementById('importPreview').style.display = 'block';
    }

    async function handleImportConfirm() {
        const tbody = document.getElementById('importTbody');
        const rows = Array.from(tbody.querySelectorAll('tr')).map(tr => {
            const tds = tr.querySelectorAll('td');
            return { id: tds[0].textContent, codigo: tds[1].textContent, ean: tds[2].textContent, ncm: tds[3].textContent, cest: tds[4].textContent, cfop: tds[5].textContent, preco: tds[6].textContent };
        });
        showLoading();
        let okCount = 0, failCount = 0;
        try {
            for (const r of rows) {
                const body = {
                    codigo: r.codigo,
                    ean: r.ean || null,
                    ncm: r.ncm || null,
                    cest: r.cest || null,
                    cfop: r.cfop || null,
                    preco: r.preco ? parseFloat(r.preco) : null
                };
                if (r.id) {
                    const res = await apiRequest(`/api/produtos/${r.id}`, { method: 'PATCH', body: JSON.stringify(body) });
                    if (res && res.status >= 200 && res.status < 300) okCount++; else failCount++;
                } else {
                    // criar novo ou atualizar por código se existir
                    let exists = false; let existingId = null;
                    try {
                        const chk = await apiRequest(`/api/produtos/check-codigo?codigo=${encodeURIComponent(r.codigo)}`);
                        if (chk) { const cj = await chk.json(); exists = !!cj.exists; }
                        if (exists) {
                            const sr = await apiRequest(`/api/produtos?q=${encodeURIComponent(r.codigo)}&per_page=1`);
                            const sj = sr ? await sr.json() : {data:[]};
                            existingId = (sj.data && sj.data[0] && sj.data[0].id) ? sj.data[0].id : null;
                        }
                    } catch (_) {}
                    if (exists && existingId) {
                        const res = await apiRequest(`/api/produtos/${existingId}`, { method: 'PATCH', body: JSON.stringify(body) });
                        if (res && res.status >= 200 && res.status < 300) okCount++; else failCount++;
                    } else {
                        const res = await apiRequest(`/api/produtos`, { method: 'POST', body: JSON.stringify(body) });
                        if (res && res.status >= 200 && res.status < 300) okCount++; else failCount++;
                    }
                }
            }
            showAlert(`Importação concluída: ${okCount} ok, ${failCount} falhas`, failCount? 'error':'success');
            document.getElementById('importFeedback').className = failCount? 'alert alert-error':'alert alert-success';
            document.getElementById('importFeedback').textContent = `Importados: ${okCount}. Falhas: ${failCount}.`;
            document.getElementById('importFeedback').style.display = 'block';
            await loadProdutos();
        } catch (_) { showAlert('Erro durante importação', 'error'); }
        finally { hideLoading(); }
    }

    // util de debounce para reduzir chamadas em digitação
    function debounce(fn, delay) {
        let t = null;
        return (...args) => {
            if (t) clearTimeout(t);
            t = setTimeout(() => fn(...args), delay);
        };
    }

    function initEvents() {
        document.getElementById('btnConfigColunas').addEventListener('click', () => {
            const panel = document.getElementById('panelConfig');
            const isOpen = panel.style.display !== 'none';
            panel.style.display = isOpen ? 'none' : 'block';
            document.getElementById('btnConfigColunas').setAttribute('aria-expanded', (!isOpen).toString());
        });
        document.getElementById('btnSalvarPrefs').addEventListener('click', () => { savePrefs(); renderTable(); });
        document.getElementById('btnResetPrefs').addEventListener('click', () => { visibleColumns = []; renderConfigCheckboxes(); renderTable(); savePrefs(); });
        document.getElementById('perPage').addEventListener('change', (e) => { perPage = parseInt(e.target.value); savePrefs(); currentPage = 1; loadProdutos(); });
        const searchInput = document.getElementById('searchProdutos');
        const sugBox = document.getElementById('searchSuggestions');
        let sugAbort = null;
        function hideSuggestions(){ sugBox.style.display='none'; sugBox.innerHTML=''; }
        async function fetchSuggestions(q){
            try {
                if (sugAbort) { sugAbort.abort(); }
                sugAbort = new AbortController();
                const res = await apiRequest(`/api/produtos?per_page=5&q=${encodeURIComponent(q)}`, { signal: sugAbort.signal });
                if (!res) return;
                const js = await res.json();
                const items = js.data || [];
                if (!items.length) { hideSuggestions(); return; }
                const frag = document.createDocumentFragment();
                items.forEach(it => {
                    const div = document.createElement('div');
                    div.style.padding = '0.5rem';
                    div.style.cursor = 'pointer';
                    div.style.display = 'flex';
                    div.style.alignItems = 'center';
                    div.style.gap = '0.5rem';
                    let meta = null;
                    try { meta = it.meta_json ? JSON.parse(it.meta_json) : null; } catch (_) { meta = null; }
                    const nome = meta && meta.nome ? meta.nome : '';
                    const marca = meta && meta.marca ? meta.marca : '';
                    const categoria = meta && meta.categoria ? meta.categoria : '';
                    const sku = it.codigo ?? '';
                    div.innerHTML = `<span style="font-weight:600;">${sku || it.id}</span><span style="color:#64748b;">${nome ? `Nome: ${nome} • ` : ''}${marca ? `Marca: ${marca} • ` : ''}${categoria ? `Categoria: ${categoria} • ` : ''}EAN: ${it.ean ?? ''} • NCM: ${it.ncm ?? ''}</span>`;
                    div.addEventListener('mousedown', (ev)=>{ ev.preventDefault(); });
                    div.addEventListener('click', async ()=>{
                        searchInput.value = String(sku || nome || '');
                        currentQuery = searchInput.value.trim();
                        hideSuggestions();
                        currentPage = 1;
                        await loadProdutos();
                    });
                    frag.appendChild(div);
                });
                sugBox.innerHTML = '';
                sugBox.appendChild(frag);
                sugBox.style.display = 'block';
            } catch (_) { /* ignore */ }
        }
        const debouncedLoad = debounce(loadProdutos, 300);
        const debouncedFetchSuggestions = debounce(fetchSuggestions, 250);
        searchInput.addEventListener('input', (e) => {
            currentQuery = e.target.value.trim();
            currentPage = 1;
            const v = currentQuery;
            if (v.length >= 3) { debouncedFetchSuggestions(v); } else { hideSuggestions(); }
            debouncedLoad();
        });
        searchInput.addEventListener('blur', () => { setTimeout(hideSuggestions, 120); });
        document.getElementById('btnPrev').addEventListener('click', () => { if (currentPage > 1) { currentPage--; loadProdutos(); } });
        document.getElementById('btnNext').addEventListener('click', () => { if (currentPage < totalPages) { currentPage++; loadProdutos(); } });
        document.getElementById('selectAll').addEventListener('change', (e) => {
            const checked = e.target.checked;
            document.querySelectorAll('.rowSelect').forEach(cb => { cb.checked = checked; const id = parseInt(cb.getAttribute('data-id')); if (checked) selectedIds.add(id); else selectedIds.delete(id); });
            updateBulkButtons();
        });
        document.getElementById('btnEditarSelecionados').addEventListener('click', bulkEditSelected);
        document.getElementById('btnExcluirSelecionados').addEventListener('click', bulkDeleteSelected);
        document.getElementById('btnExportar').addEventListener('click', async () => {
            const tipo = prompt('Exportar: todos | filtrados | selecionados', 'filtrados');
            if (!tipo) return; exportarCSV(tipo);
        });
        document.getElementById('btnImportar').addEventListener('click', () => { document.getElementById('modalImport').style.display = 'block'; });
        document.getElementById('btnFecharImport').addEventListener('click', () => { document.getElementById('modalImport').style.display = 'none'; document.getElementById('importPreview').style.display='none'; });
        document.getElementById('btnBaixarModeloCSV').addEventListener('click', downloadModeloCSV);
        document.getElementById('formImport').addEventListener('submit', handleImportPreview);
        document.getElementById('btnConfirmImport').addEventListener('click', handleImportConfirm);
    }

    document.addEventListener('DOMContentLoaded', async () => {
        // Aguardar um pouco para garantir que o layout carregou completamente
        await new Promise(resolve => setTimeout(resolve, 100));
        
        // Verificar múltiplas formas de autenticação antes de fazer requests
        let hasAuth = false;
        try {
            // Verificar localStorage
            const authToken = localStorage.getItem('auth_token') || localStorage.getItem('admin_token');
            if (authToken) hasAuth = true;
            
            // Verificar cookies se localStorage não tiver
            if (!hasAuth && document.cookie.includes('auth_token=')) hasAuth = true;
            if (!hasAuth && document.cookie.includes('admin_token=')) hasAuth = true;
            
            // Verificar funções globais se disponíveis
            if (!hasAuth && typeof getAuthToken === 'function' && getAuthToken()) hasAuth = true;
            if (!hasAuth && typeof getAdminToken === 'function' && getAdminToken()) hasAuth = true;
            
            // Se não há autenticação, não fazer requests
            if (!hasAuth) {
                console.log('Nenhuma autenticação encontrada, aguardando redirect...');
                return;
            }
        } catch (error) {
            console.log('Erro ao verificar autenticação:', error);
            return;
        }
        await resolveUserPrefsKey();
        loadPrefs();
        // Inicializa seleção perPage
        const selPer = document.getElementById('perPage');
        selPer.value = String(perPage);
        ensureHeaderColumns();
        renderConfigCheckboxes();
        bindTableEvents();
        initEvents();
        
        // Verificar se há parâmetro updated na URL (vindo da edição)
        const urlParams = new URLSearchParams(window.location.search);
        const isUpdated = urlParams.has('updated');
        
        await loadProdutos();
        
        // Se veio da edição, limpar o parâmetro da URL sem recarregar a página
        if (isUpdated) {
            const newUrl = window.location.pathname;
            window.history.replaceState({}, document.title, newUrl);
        }
        
        // Forçar recarga ao voltar da edição (BFCache/voltar do histórico)
        window.addEventListener('pageshow', async (e) => { try { await loadProdutos(); } catch(_){} });
        document.addEventListener('visibilitychange', async () => { if (document.visibilityState === 'visible') { try { await loadProdutos(); } catch(_){} } });
    });
</script>

<!-- Modal de mídia removido: gerenciamento de imagens ocorre na aba "Mídias" da edição/cadastro -->