{% extends "base.html" %}

{% import 'macros/empresa.html' as empresa_ui %}

{% block title %}Editor de Etiquetas{% endblock %}

{% block content %}
<div class="card mb-3 editor-topbar-card">
    <div class="card-body py-2 px-3">
        <form method="GET" class="form-no-lock mb-0">
            <div class="row g-2 align-items-center">
                <div class="col-12 col-xl-4">
                    <div class="d-flex align-items-center gap-2 flex-wrap">
                        <h1 class="editor-page-title mb-0"><i class="bi bi-tags"></i> Editor de Etiquetas</h1>
                        <span class="badge text-bg-light border">{{ modelo.nome if modelo else 'Novo modelo' }}</span>
                    </div>
                </div>
                <div class="col-12 col-md-7 col-xl-5">
                    <label class="form-label small mb-1">Empresa</label>
                    <select name="empresa_id" class="form-select form-select-sm" onchange="this.form.submit()">
                        {% for empresa in empresas_disponiveis %}
                        <option value="{{ empresa.id }}" {% if empresa_id_selecionada == empresa.id %}selected{% endif %} title="{{ empresa_ui.titulo(empresa) }}">
                            {{ empresa_ui.nome(empresa) }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-12 col-md-5 col-xl-3">
                    <div class="d-flex justify-content-md-end gap-2 flex-wrap editor-topbar-actions">
                        <a href="{{ url_for('etiquetas_modelos') }}" class="btn btn-outline-secondary btn-sm">
                            <i class="bi bi-list"></i> Modelos
                        </a>
                        <button type="button" class="btn btn-outline-dark btn-sm" onclick="capeVoltarOu('{{ url_for('etiquetas_modelos') }}')">
                            <i class="bi bi-arrow-left"></i> Voltar
                        </button>
                    </div>
                </div>
                {% if modelo %}
                <input type="hidden" name="modelo_id" value="{{ modelo.id }}">
                {% endif %}
            </div>
        </form>
    </div>
</div>

<div class="row g-3 align-items-start">
    <!-- Painel Esquerdo - Campos Disponíveis -->
    <div class="col-12 col-lg-4 col-xl-3">
        <div class="editor-sidebar-stack">
        <div class="card editor-card-compact editor-side-scroll">
            <div class="card-header bg-secondary text-white">
                <button class="btn btn-link btn-collapse-card text-white text-decoration-none w-100 d-flex justify-content-between align-items-center p-0" type="button" data-bs-toggle="collapse" data-bs-target="#editor-configuracoes-body" aria-expanded="true" aria-controls="editor-configuracoes-body">
                    <h6 class="mb-0"><i class="bi bi-gear"></i> Configurações</h6>
                    <i class="bi bi-chevron-down small"></i>
                </button>
            </div>
            <div id="editor-configuracoes-body" class="collapse show">
            <div class="card-body">
                <div class="small fw-bold text-primary mb-2">Base da etiqueta</div>
                <div class="mb-2">
                    <label class="form-label small">Nome do Modelo</label>
                    <input type="text" id="modelo-nome" class="form-control form-control-sm" 
                           value="{{ modelo.nome if modelo else 'Nova Etiqueta' }}">
                </div>
                
                <div class="mb-2">
                    <label class="form-label small">Tipo</label>
                    <select id="modelo-tipo" class="form-select form-select-sm">
                        <option value="produto" {% if modelo and modelo.tipo == 'produto' %}selected{% endif %}>Produto</option>
                        <option value="prateleira" {% if modelo and modelo.tipo == 'prateleira' %}selected{% endif %}>Prateleira</option>
                        <option value="pdv" {% if modelo and modelo.tipo == 'pdv' %}selected{% endif %}>PDV</option>
                        <option value="expedicao" {% if modelo and modelo.tipo == 'expedicao' %}selected{% endif %}>Expedição</option>
                        <option value="lote" {% if modelo and modelo.tipo == 'lote' %}selected{% endif %}>Lote/Validade</option>
                    </select>
                </div>
                
                <div class="mb-2">
                    <label class="form-label small">Tamanho da Etiqueta</label>
                    <select id="modelo-tamanho" class="form-select form-select-sm">
                        {% for t in tamanhos %}
                        <option value="{{ t.id }}" data-largura="{{ t.largura }}" data-altura="{{ t.altura }}"
                                {% if modelo and modelo.largura == t.largura and modelo.altura == t.altura %}selected{% endif %}>
                            {{ t.nome }}
                        </option>
                        {% endfor %}
                        <option value="personalizado">Personalizado...</option>
                    </select>
                </div>

                <div class="mb-2">
                    <label class="form-label small">Modelo Pronto</label>
                    <div class="input-group input-group-sm">
                        <select id="preset-modelo" class="form-select form-select-sm">
                            <option value="">Selecione um preset...</option>
                            <option value="gondola_normal">Gôndola normal</option>
                            <option value="gondola_reduzida">Gôndola reduzida</option>
                            <option value="produto_3_linha">Produto 3 por linha</option>
                            <option value="tag_65x45_2precos">TAG 65x45 - 2 preços</option>
                        </select>
                        <button class="btn btn-outline-secondary" type="button" id="btn-aplicar-preset">
                            <i class="bi bi-magic"></i>
                        </button>
                    </div>
                    <small class="text-muted editor-help-inline">Presets prontos para rolo térmico.</small>
                </div>
                
                <div id="tamanho-personalizado" class="mt-2">
                    <div class="row g-2">
                        <div class="col-6">
                            <label class="form-label small">Largura (mm)</label>
                            <input type="number" id="modelo-largura" class="form-control form-control-sm" 
                                   value="{{ modelo.largura if modelo else 50 }}" min="10" max="300" step="0.1">
                        </div>
                        <div class="col-6">
                            <label class="form-label small">Altura (mm)</label>
                            <input type="number" id="modelo-altura" class="form-control form-control-sm" 
                                   value="{{ modelo.altura if modelo else 30 }}" min="10" max="300" step="0.1">
                        </div>
                    </div>
                    <button class="btn btn-primary btn-sm w-100 mt-2" id="btn-aplicar-tamanho">
                        <i class="bi bi-check-circle"></i> Fixar Tamanho
                    </button>
                    <small class="text-muted d-block mt-1">Você pode ajustar manualmente a largura e a altura, mesmo usando um tamanho pronto.</small>
                </div>
                
                <div id="aviso-tamanho-fixo" class="alert alert-success alert-sm mt-2" style="display: none; font-size: 11px; padding: 5px 10px;">
                    <i class="bi bi-lock"></i> Área de impressão: <strong id="tamanho-fixo-texto"></strong>
                </div>

                <div class="mb-2">
                    <label class="form-label small">Papel/Impressora</label>
                    <select id="modelo-papel" class="form-select form-select-sm">
                        <option value="a4" {% if not modelo or modelo.papel == 'a4' %}selected{% endif %}>Folha A4</option>
                        <option value="bobina60" {% if modelo and modelo.papel == 'bobina60' %}selected{% endif %}>Rolo térmico 60mm</option>
                        <option value="bobina80" {% if modelo and modelo.papel == 'bobina80' %}selected{% endif %}>Bobina térmica 80mm</option>
                        <option value="bobina100" {% if modelo and modelo.papel == 'bobina100' %}selected{% endif %}>Rolo térmico 100mm</option>
                    </select>
                    <small class="text-muted editor-help-inline">Compatível conforme largura do rolo.</small>
                </div>

                <div class="mb-2">
                    <label class="form-label small">Colunas por linha</label>
                    {% set config_impressao_modelo = (modelo.layout_config if modelo else {}) %}
                    <select id="modelo-colunas-por-linha" class="form-select form-select-sm" data-configurada="{{ '1' if config_impressao_modelo and config_impressao_modelo.get('colunas_por_linha') else '0' }}">
                        <option value="1" {% if not config_impressao_modelo or config_impressao_modelo.get('colunas_por_linha', 1) == 1 %}selected{% endif %}>1 coluna</option>
                        <option value="2" {% if config_impressao_modelo and config_impressao_modelo.get('colunas_por_linha') == 2 %}selected{% endif %}>2 colunas</option>
                        <option value="3" {% if config_impressao_modelo and config_impressao_modelo.get('colunas_por_linha') == 3 %}selected{% endif %}>3 colunas</option>
                        <option value="4" {% if config_impressao_modelo and config_impressao_modelo.get('colunas_por_linha') == 4 %}selected{% endif %}>4 colunas</option>
                    </select>
                    <small class="text-muted editor-help-inline">Use este valor para editar exatamente como a linha será impressa.</small>
                </div>

                <hr>

                <div class="small fw-bold text-primary mb-2">Rotação da impressão</div>

                <div class="mb-2">
                    <label class="form-label small">Orientação de Impressão</label>
                    <select id="modelo-orientacao" class="form-select form-select-sm">
                        <option value="retrato" {% if not modelo or modelo.orientacao == 'retrato' %}selected{% endif %}>Vertical (Retrato)</option>
                        <option value="paisagem" {% if modelo and modelo.orientacao == 'paisagem' %}selected{% endif %}>Horizontal (Paisagem)</option>
                        <option value="90_direita" {% if modelo and modelo.orientacao == '90_direita' %}selected{% endif %}>90° Direita</option>
                        <option value="90_esquerda" {% if modelo and modelo.orientacao == '90_esquerda' %}selected{% endif %}>90° Esquerda</option>
                        <option value="180" {% if modelo and modelo.orientacao == '180' %}selected{% endif %}>180°</option>
                    </select>
                    <small class="text-muted editor-help-inline">Depois disso os campos são liberados.</small>
                </div>

                <hr>

                <div class="small fw-bold text-primary mb-2">Apoios rápidos</div>

                <div class="mb-2">
                    <label class="form-label small">Importar / Exportar</label>
                    <div class="d-grid gap-2">
                        <button class="btn btn-outline-primary btn-sm" type="button" id="btn-exportar-modelo">
                            <i class="bi bi-download"></i> Exportar modelo JSON
                        </button>
                        <button class="btn btn-outline-secondary btn-sm" type="button" id="btn-importar-modelo">
                            <i class="bi bi-upload"></i> Importar modelo JSON
                        </button>
                        <input type="file" id="arquivo-importacao-modelo" accept=".json,.etiqueta.json" class="d-none">
                    </div>
                </div>

                <div class="form-check form-switch mb-2">
                    <input class="form-check-input" type="checkbox" id="mostrar-guias" checked>
                    <label class="form-check-label small" for="mostrar-guias">
                        Mostrar guias pontilhadas de alinhamento
                    </label>
                </div>
                <small class="text-muted editor-help-inline d-block mb-2">Guias a cada 5 mm.</small>

                <div class="mb-2">
                    <label class="form-label small">Força do snap</label>
                    <select id="forca-snap" class="form-select form-select-sm">
                        <option value="0.6">Fraco</option>
                        <option value="1.2" selected>Médio</option>
                        <option value="2">Forte</option>
                    </select>
                    <small class="text-muted editor-help-inline">Sensibilidade do snap.</small>
                </div>

                <div id="aviso-limites" class="alert alert-warning alert-sm mt-2" style="display: none; font-size: 11px; padding: 5px 10px;"></div>
                
                <hr>
                
                <div class="form-check mb-2">
                    <input class="form-check-input" type="checkbox" id="validar-gtin" 
                           {% if modelo and modelo.validar_gtin %}checked{% endif %}>
                    <label class="form-check-label small" for="validar-gtin">
                        Validar GTIN
                    </label>
                </div>
                
                <div class="form-check mb-2">
                    <input class="form-check-input" type="checkbox" id="validar-preco" 
                           {% if not modelo or modelo.validar_preco %}checked{% endif %}>
                    <label class="form-check-label small" for="validar-preco">
                        Exigir preço
                    </label>
                </div>
                
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="validar-validade"
                           {% if modelo and modelo.validar_validade %}checked{% endif %}>
                    <label class="form-check-label small" for="validar-validade">
                        Exigir validade
                    </label>
                </div>
            </div>
            </div>
        </div>

        <div class="card editor-card-compact editor-side-scroll">
            <div class="card-header bg-primary text-white">
                <button class="btn btn-link btn-collapse-card text-white text-decoration-none w-100 d-flex justify-content-between align-items-center p-0" type="button" data-bs-toggle="collapse" data-bs-target="#editor-campos-body-wrapper" aria-expanded="true" aria-controls="editor-campos-body-wrapper">
                    <h6 class="mb-0"><i class="bi bi-puzzle"></i> Campos Disponíveis</h6>
                    <i class="bi bi-chevron-down small"></i>
                </button>
            </div>
            <div id="editor-campos-body-wrapper" class="collapse show">
            <div class="card-body p-2" id="painel-campos-body">
                <div id="fluxo-campos-bloqueado" class="alert alert-warning py-2 px-2 small mb-2">
                    <i class="bi bi-lock"></i> Defina as configurações básicas para liberar os campos.
                </div>
                <div class="mb-3">
                    <label class="form-label small">Adicionar campo</label>
                    <div class="input-group input-group-sm">
                        <select id="select-novo-campo" class="form-select">
                            {% if campos %}
                                {% for c in campos %}
                                <option value="{{ c.id }}" data-tipo="{{ c.tipo }}">{{ c.label }}</option>
                                {% endfor %}
                                <option value="texto.livre" data-tipo="texto">Texto livre</option>
                            {% else %}
                                <option value="produto.nome" data-tipo="texto">Nome do Produto</option>
                                <option value="produto.descricao" data-tipo="texto">Descrição do Produto</option>
                                <option value="texto.livre" data-tipo="texto">Texto livre</option>
                                <option value="produto.codigo_barras" data-tipo="barcode">Código de Barras</option>
                                <option value="produto.preco" data-tipo="moeda">Preço</option>
                            {% endif %}
                        </select>
                        <button class="btn btn-outline-primary" type="button" id="btn-adicionar-campo">
                            <i class="bi bi-plus-circle"></i>
                        </button>
                    </div>
                    <small class="text-muted editor-help-inline">O botão + insere no centro.</small>
                </div>

                <ul class="nav nav-pills nav-fill nav-editor-campos mb-2" id="editor-campos-tabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="tab-campos-produto" data-bs-toggle="tab" data-bs-target="#pane-campos-produto" type="button" role="tab" aria-controls="pane-campos-produto" aria-selected="true">Produto</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="tab-campos-lote" data-bs-toggle="tab" data-bs-target="#pane-campos-lote" type="button" role="tab" aria-controls="pane-campos-lote" aria-selected="false">Lote</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="tab-campos-empresa" data-bs-toggle="tab" data-bs-target="#pane-campos-empresa" type="button" role="tab" aria-controls="pane-campos-empresa" aria-selected="false">Empresa</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="tab-campos-pedido" data-bs-toggle="tab" data-bs-target="#pane-campos-pedido" type="button" role="tab" aria-controls="pane-campos-pedido" aria-selected="false">Expedição</button>
                    </li>
                </ul>

                <div class="tab-content editor-campos-tab-content">
                <div class="tab-pane fade show active" id="pane-campos-produto" role="tabpanel" aria-labelledby="tab-campos-produto" tabindex="0">
                    <div class="mt-1" id="campos-produto">
                        <div class="campo-disponivel" draggable="true" data-campo="texto.livre" data-tipo="texto">
                            <i class="bi bi-input-cursor-text"></i> Texto livre
                        </div>
                        <div class="campo-disponivel" draggable="true" data-campo="produto.nome" data-tipo="texto">
                            <i class="bi bi-fonts"></i> Nome do Produto
                        </div>
                        <div class="campo-disponivel" draggable="true" data-campo="produto.descricao" data-tipo="texto">
                            <i class="bi bi-text-paragraph"></i> Descrição do Produto
                        </div>
                            <div class="campo-disponivel" draggable="true" data-campo="produto.cota" data-tipo="texto">
                                <i class="bi bi-bookmark-star"></i> Cota
                            </div>
                        <div class="campo-disponivel" draggable="true" data-campo="produto.codigo" data-tipo="texto">
                            <i class="bi bi-hash"></i> Código Interno
                        </div>
                        <div class="campo-disponivel" draggable="true" data-campo="produto.gtin" data-tipo="texto">
                            <i class="bi bi-upc"></i> GTIN/EAN
                        </div>
                        <div class="campo-disponivel" draggable="true" data-campo="produto.codigo_barras" data-tipo="barcode">
                            <i class="bi bi-upc-scan"></i> Código de Barras
                        </div>
                        <div class="campo-disponivel" draggable="true" data-campo="produto.qrcode" data-tipo="qrcode">
                            <i class="bi bi-qr-code"></i> QR Code
                        </div>
                        <div class="campo-disponivel" draggable="true" data-campo="produto.imagem" data-tipo="imagem">
                            <i class="bi bi-image"></i> Imagem do Produto
                        </div>
                        <div class="campo-disponivel" draggable="true" data-campo="produto.preco" data-tipo="moeda">
                            <i class="bi bi-currency-dollar"></i> Preço
                        </div>
                        <div class="campo-disponivel" draggable="true" data-campo="produto.preco_promocao" data-tipo="moeda">
                            <i class="bi bi-tag"></i> Preço Promoção
                        </div>
                        <div class="campo-disponivel" draggable="true" data-campo="tabela1.nome" data-tipo="texto">
                            <i class="bi bi-tags"></i> Tabela 1 - Nome
                        </div>
                        <div class="campo-disponivel" draggable="true" data-campo="tabela1.preco" data-tipo="moeda">
                            <i class="bi bi-cash-stack"></i> Tabela 1 - Preço
                        </div>
                        <div class="campo-disponivel" draggable="true" data-campo="tabela2.nome" data-tipo="texto">
                            <i class="bi bi-tags"></i> Tabela 2 - Nome
                        </div>
                        <div class="campo-disponivel" draggable="true" data-campo="tabela2.preco" data-tipo="moeda">
                            <i class="bi bi-cash-stack"></i> Tabela 2 - Preço
                        </div>
                        <div class="campo-disponivel" draggable="true" data-campo="tabela3.nome" data-tipo="texto">
                            <i class="bi bi-tags"></i> Tabela 3 - Nome
                        </div>
                        <div class="campo-disponivel" draggable="true" data-campo="tabela3.preco" data-tipo="moeda">
                            <i class="bi bi-cash-stack"></i> Tabela 3 - Preço
                        </div>
                        <div class="campo-disponivel" draggable="true" data-campo="tabela4.nome" data-tipo="texto">
                            <i class="bi bi-tags"></i> Tabela 4 - Nome
                        </div>
                        <div class="campo-disponivel" draggable="true" data-campo="tabela4.preco" data-tipo="moeda">
                            <i class="bi bi-cash-stack"></i> Tabela 4 - Preço
                        </div>
                        <div class="campo-disponivel" draggable="true" data-campo="produto.unidade" data-tipo="texto">
                            <i class="bi bi-box-seam"></i> Unidade
                        </div>
                    </div>
                </div>

                <div class="tab-pane fade" id="pane-campos-lote" role="tabpanel" aria-labelledby="tab-campos-lote" tabindex="0">
                    <div class="mt-1" id="campos-lote">
                            <div class="campo-disponivel" draggable="true" data-campo="lote.codigo_barras" data-tipo="barcode">
                                <i class="bi bi-upc-scan"></i> Código de Barras do Lote
                            </div>
                        <div class="campo-disponivel" draggable="true" data-campo="lote.numero" data-tipo="texto">
                            <i class="bi bi-123"></i> Número do Lote
                        </div>
                        <div class="campo-disponivel" draggable="true" data-campo="lote.validade" data-tipo="data">
                            <i class="bi bi-calendar-event"></i> Validade
                        </div>
                        <div class="campo-disponivel" draggable="true" data-campo="lote.fabricacao" data-tipo="data">
                            <i class="bi bi-calendar"></i> Fabricação
                        </div>
                    </div>
                </div>

                <div class="tab-pane fade" id="pane-campos-empresa" role="tabpanel" aria-labelledby="tab-campos-empresa" tabindex="0">
                    <div class="mt-1" id="campos-empresa">
                        <div class="campo-disponivel" draggable="true" data-campo="empresa.nome" data-tipo="texto">
                            <i class="bi bi-shop"></i> Nome Empresa
                        </div>
                        <div class="campo-disponivel" draggable="true" data-campo="empresa.logo" data-tipo="imagem">
                            <i class="bi bi-image"></i> Logotipo
                        </div>
                        <div class="campo-disponivel" draggable="true" data-campo="imagem.personalizada" data-tipo="imagem">
                            <i class="bi bi-card-image"></i> Imagem Personalizada
                        </div>
                    </div>
                </div>

                <div class="tab-pane fade" id="pane-campos-pedido" role="tabpanel" aria-labelledby="tab-campos-pedido" tabindex="0">
                    <div class="mt-1" id="campos-pedido">
                        <div class="campo-disponivel" draggable="true" data-campo="pedido.numero" data-tipo="texto">
                            <i class="bi bi-receipt"></i> Nº Pedido
                        </div>
                        <div class="campo-disponivel" draggable="true" data-campo="pedido.cliente" data-tipo="texto">
                            <i class="bi bi-person"></i> Cliente
                        </div>
                        <div class="campo-disponivel" draggable="true" data-campo="pedido.quantidade" data-tipo="numero">
                            <i class="bi bi-stack"></i> Quantidade
                        </div>
                    </div>
                </div>
                </div>
            </div>
            </div>
        </div>
        </div>
    </div>
    
    <!-- Painel Central - Área de Edição -->
    <div class="col-12 col-lg-5 col-xl-6 editor-main-col" id="editor-main-col">
        <div class="card">
            <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
                <h6 class="mb-0"><i class="bi bi-pencil-square"></i> Área de Edição</h6>
                <small id="editor-status" class="text-warning">Carregando…</small>
                <div>
                    <button class="btn btn-sm btn-outline-light me-1" id="btn-editor-focus" title="Modo foco">
                        <i class="bi bi-arrows-fullscreen"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-light me-1" id="btn-zoom-out" title="Reduzir zoom">
                        <i class="bi bi-zoom-out"></i>
                    </button>
                    <span id="zoom-nivel" class="mx-2">100%</span>
                    <button class="btn btn-sm btn-outline-light" id="btn-zoom-in" title="Aumentar zoom">
                        <i class="bi bi-zoom-in"></i>
                    </button>
                </div>
            </div>
              <div class="card-body d-flex justify-content-center align-items-center editor-canvas-shell" 
                  style="background: #f5f5f5; background-image: linear-gradient(45deg, #e0e0e0 25%, transparent 25%), linear-gradient(-45deg, #e0e0e0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e0e0e0 75%), linear-gradient(-45deg, transparent 75%, #e0e0e0 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px;">
                <div id="editor-error" class="alert alert-danger" style="display:none; position:absolute; top:10px; left:10px; right:10px; z-index:5;"></div>

                <div id="editor-workspace" class="editor-workspace">
                    <div class="editor-corner"></div>
                    <div id="regua-horizontal" class="regua regua-horizontal"></div>
                    <div id="regua-vertical" class="regua regua-vertical"></div>

                    <div id="editor-canvas-area" class="editor-canvas-area">
                        <div id="editor-grade-header" class="editor-grade-header" style="display: none;">
                            <div>
                                <div class="fw-semibold small text-uppercase text-muted">Colunas sincronizadas</div>
                                <div class="small text-muted">A edição acontece em uma única base e todas as colunas acompanham em tempo real.</div>
                            </div>
                            <span class="badge text-bg-light border" id="preview-grade-badge">3 por linha</span>
                        </div>

                        <div id="editor-grade-grid" class="editor-grade-grid-principal">
                            <div class="editor-grade-slot is-master" data-coluna="0">
                                <div class="editor-grade-slot-label">Coluna 1 · base</div>
                                <div id="editor-grade-slot-master" class="editor-grade-slot-body">
                                    <div id="guia-alinhamento-x" class="guia-alinhamento guia-vertical d-none"></div>
                                    <div id="guia-alinhamento-y" class="guia-alinhamento guia-horizontal d-none"></div>

                                    <!-- Canvas da Etiqueta -->
                                    <div id="etiqueta-canvas" 
                                         ondragover="event.preventDefault(); event.stopPropagation(); this.style.outline='2px dashed #0d6efd';"
                                         ondragleave="this.style.outline='none';"
                                         style="background: white; box-shadow: 0 4px 12px rgba(0,0,0,0.2); position: relative; overflow: hidden; width: {{ (modelo.largura if modelo else 50) * 3 }}px; height: {{ (modelo.altura if modelo else 30) * 3 }}px;"
                                         data-largura="{{ modelo.largura if modelo else 50 }}"
                                         data-altura="{{ modelo.altura if modelo else 30 }}">
                                        <!-- Elementos serão adicionados aqui via JS -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Barra de ferramentas -->
            <div class="card-footer">
                <div class="d-flex justify-content-between">
                    <div>
                        <button class="btn btn-outline-danger btn-sm" id="btn-limpar">
                            <i class="bi bi-trash"></i> Limpar
                        </button>
                        <button class="btn btn-outline-secondary btn-sm" id="btn-desfazer" disabled>
                            <i class="bi bi-arrow-counterclockwise"></i> Desfazer
                        </button>
                    </div>
                    <div>
                        <button class="btn btn-info btn-sm" id="btn-preview">
                            <i class="bi bi-eye"></i> Preview
                        </button>
                        <button class="btn btn-success btn-sm" id="btn-salvar">
                            <i class="bi bi-save"></i> Salvar Modelo
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="small text-muted mt-2 px-1">Arraste da esquerda, clique para editar e use as bordas para redimensionar.</div>
    </div>
    
    <!-- Painel Direito - Propriedades -->
    <div class="col-12 col-lg-3 col-xl-3">
        <div class="editor-sidebar-stack">
        <div class="card editor-card-compact d-none" id="painel-propriedades">
            <div class="card-header bg-light border-bottom">
                <button class="btn btn-link btn-collapse-card text-decoration-none w-100 d-flex justify-content-between align-items-center p-0" type="button" data-bs-toggle="collapse" data-bs-target="#editor-propriedades-body" aria-expanded="true" aria-controls="editor-propriedades-body">
                    <h6 class="mb-0 text-dark"><i class="bi bi-sliders"></i> Campo selecionado</h6>
                    <i class="bi bi-chevron-down small text-muted"></i>
                </button>
            </div>
            <div id="editor-propriedades-body" class="collapse show">
                <div class="card-body">
                    <div id="propriedades-conteudo"></div>
                </div>
            </div>
        </div>

        <!-- Ações de Impressão -->
        <div class="card editor-card-compact">
            <div class="card-header bg-success text-white">
                <button class="btn btn-link btn-collapse-card text-white text-decoration-none w-100 d-flex justify-content-between align-items-center p-0" type="button" data-bs-toggle="collapse" data-bs-target="#editor-impressao-body" aria-expanded="true" aria-controls="editor-impressao-body">
                    <h6 class="mb-0"><i class="bi bi-printer"></i> Impressão</h6>
                    <i class="bi bi-chevron-down small"></i>
                </button>
            </div>
            <div id="editor-impressao-body" class="collapse show">
            <div class="card-body">
                <div class="editor-mini-section">
                    <div class="editor-inline-grid">
                        <div>
                            <label class="form-label small mb-1">Formato</label>
                            <select id="formato-saida" class="form-select form-select-sm">
                                <option value="pdf">PDF</option>
                                <option value="zpl">ZPL (Zebra)</option>
                                <option value="epl">EPL</option>
                            </select>
                        </div>
                        <div>
                            <label class="form-label small mb-1">Preço 1</label>
                            <select id="select-tabela-editor-1" class="form-select form-select-sm">
                                <option value="">-- Padrão --</option>
                                {% for tabela in tabelas_preco %}
                                <option value="{{ tabela.id }}">{{ tabela.nome }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>

                    <div class="mt-2">
                        <label class="form-label small mb-1">Preço 2</label>
                        <select id="select-tabela-editor-2" class="form-select form-select-sm">
                            <option value="">-- Não usar --</option>
                            {% for tabela in tabelas_preco %}
                            <option value="{{ tabela.id }}">{{ tabela.nome }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="editor-panel-muted mt-2">Leve até 2 tabelas de preço direto para a tela final.</div>
                </div>
                
                <div class="editor-action-grid mt-2">
                    <button class="btn btn-primary btn-sm" id="btn-imprimir-teste">
                        <i class="bi bi-printer"></i> Imprimir Teste
                    </button>
                    <button type="button" class="btn btn-outline-primary btn-sm" id="btn-ir-impressao">
                        <i class="bi bi-printer-fill"></i> Ir para Impressão
                    </button>
                </div>
            </div>
            </div>
        </div>
        </div>
    </div>
</div>

<!-- Modal de Preview -->
<div class="modal fade cape-modal-standard cape-modal-detail" id="modalPreview" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bi bi-eye"></i> Preview da Etiqueta</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body text-center">
                <iframe id="preview-iframe" style="width: 100%; height: 400px; border: 1px solid #ddd;"></iframe>
            </div>
        </div>
    </div>
</div>

<style>
.editor-topbar-card {
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

.editor-page-title {
    font-size: 1.25rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.editor-topbar-actions .btn {
    white-space: nowrap;
}

.editor-sidebar-stack {
    position: sticky;
    top: 78px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.editor-card-compact .card-header,
.editor-card-compact .card-body,
.editor-card-compact .card-footer {
    padding: 0.65rem 0.75rem;
}

.btn-collapse-card {
    color: inherit;
    box-shadow: none !important;
}

.btn-collapse-card:hover,
.btn-collapse-card:focus {
    color: inherit;
}

.editor-side-scroll {
    max-height: calc(100vh - 110px);
    overflow: auto;
}

.editor-help-inline {
    font-size: 11px;
    display: none;
}

.editor-canvas-shell {
    min-height: 320px;
    max-height: calc(100vh - 240px);
    overflow: auto;
    padding: 0.75rem;
}

.nav-editor-campos .nav-link {
    padding: 0.35rem 0.45rem;
    font-size: 11px;
}

.editor-campos-tab-content {
    min-height: 220px;
}

.editor-mini-section {
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
    padding: 0.5rem;
    background: #fff;
}

.editor-mini-section + .editor-mini-section {
    margin-top: 0.5rem;
}

.editor-inline-grid,
.editor-action-grid,
.editor-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.editor-props-tabs .nav-link {
    padding: 0.3rem 0.45rem;
    font-size: 11px;
}

.editor-tab-pane-compact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.editor-panel-muted {
    font-size: 11px;
    color: #6c757d;
}

.editor-empty-state {
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#propriedades-conteudo .form-label {
    margin-bottom: 0.2rem;
}

#propriedades-conteudo .mb-2,
#propriedades-conteudo .mb-3,
#propriedades-conteudo .row.g-2 {
    margin-bottom: 0.5rem !important;
}

#propriedades-conteudo hr {
    margin: 0.55rem 0;
}

#propriedades-conteudo .btn-group .btn,
#propriedades-conteudo .btn {
    font-size: 11px;
}

#propriedades-conteudo .form-control,
#propriedades-conteudo .form-select {
    font-size: 12px;
}

body.editor-focus-mode .editor-sidebar-stack,
body.editor-focus-mode .small.text-muted.mt-2.px-1 {
    display: none !important;
}

body.editor-focus-mode #editor-main-col {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}

body.editor-focus-mode .editor-canvas-shell {
    max-height: calc(100vh - 170px);
    min-height: calc(100vh - 260px);
}

#painel-campos-body,
#propriedades-conteudo {
    overflow: auto;
}

/* Campos disponíveis */
.campo-disponivel {
    padding: 5px 8px;
    margin: 2px 0;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    cursor: grab;
    font-size: 11px;
    transition: all 0.2s;
}
.campo-disponivel:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}
.campo-disponivel:active {
    cursor: grabbing;
}
.campo-disponivel.dragging {
    opacity: 0.5;
}
.campo-disponivel.bloqueado {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Canvas da etiqueta */
.editor-workspace {
    display: grid;
    grid-template-columns: 24px auto;
    grid-template-rows: 24px auto;
    gap: 0;
    align-items: start;
    justify-items: start;
}

.editor-corner {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #e9ecef 0%, #f8f9fa 100%);
    border-right: 1px solid #d0d7de;
    border-bottom: 1px solid #d0d7de;
    border-top-left-radius: 6px;
}

.editor-canvas-area {
    position: relative;
    overflow: auto;
    max-width: 100%;
}

.editor-grade-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

.editor-grade-grid-principal {
    display: grid;
    gap: 0.75rem;
    align-items: start;
    width: max-content;
    min-width: 100%;
}

.editor-grade-slot {
    padding: 0.4rem;
    border: 1px dashed #cbd5e1;
    border-radius: 0.6rem;
    background: rgba(255, 255, 255, 0.96);
}

.editor-grade-slot.is-master {
    border-style: solid;
    border-color: #0d6efd;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.08);
}

.editor-grade-slot-label {
    font-size: 11px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.35rem;
}

.editor-grade-slot-body {
    position: relative;
    width: max-content;
}

.regua {
    position: relative;
    overflow: hidden;
    background: #f8f9fa;
    color: #6c757d;
    user-select: none;
}

.regua-horizontal {
    width: 100%;
    height: 24px;
    border-bottom: 1px solid #d0d7de;
    border-top-right-radius: 6px;
}

.regua-vertical {
    width: 24px;
    height: 100%;
    border-right: 1px solid #d0d7de;
    border-bottom-left-radius: 6px;
}

.regua-marcador {
    position: absolute;
    background: rgba(108, 117, 125, 0.65);
}

.regua-horizontal .regua-marcador {
    bottom: 0;
    width: 1px;
}

.regua-vertical .regua-marcador {
    right: 0;
    height: 1px;
}

.regua-marcador.maior {
    background: rgba(13, 110, 253, 0.65);
}

.regua-label {
    position: absolute;
    font-size: 9px;
    color: #495057;
    line-height: 1;
}

.regua-horizontal .regua-label {
    top: 3px;
    transform: translateX(-50%);
}

.regua-vertical .regua-label {
    left: 2px;
    transform: translateY(-50%);
}

#etiqueta-canvas {
    transition: transform 0.2s;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center center;
}

.guia-alinhamento {
    position: absolute;
    pointer-events: none;
    z-index: 4;
}

.guia-alinhamento.guia-vertical {
    top: 0;
    bottom: 0;
    width: 1px;
    background: repeating-linear-gradient(
        to bottom,
        rgba(220, 53, 69, 0.75) 0 6px,
        rgba(220, 53, 69, 0) 6px 10px
    );
}

.guia-alinhamento.guia-horizontal {
    left: 0;
    right: 0;
    height: 1px;
    background: repeating-linear-gradient(
        to right,
        rgba(220, 53, 69, 0.75) 0 6px,
        rgba(220, 53, 69, 0) 6px 10px
    );
}

.preview-grade-canvas,
.editor-grade-mirror {
    position: relative;
    background: #fff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
    overflow: hidden;
    transform-origin: top left;
    pointer-events: none;
}

.preview-grade-canvas .elemento-etiqueta,
.editor-grade-mirror .elemento-etiqueta {
    cursor: default;
}

.preview-grade-canvas .resize-handle,
.preview-grade-canvas .btn-remover,
.preview-grade-canvas .indicador-bloqueio,
.editor-grade-mirror .resize-handle,
.editor-grade-mirror .btn-remover,
.editor-grade-mirror .indicador-bloqueio {
    display: none !important;
}

/* Elementos na etiqueta */
.elemento-etiqueta {
    position: absolute;
    border: 1px dashed transparent;
    padding: 1px;
    cursor: move;
    min-width: 20px;
    min-height: 15px;
    transition: border-color 0.2s;
}
.elemento-etiqueta:hover {
    border-color: #0d6efd;
}
.elemento-etiqueta.selecionado {
    border: 2px solid #0d6efd;
    background: rgba(13, 110, 253, 0.05);
}
.elemento-etiqueta.bloqueado {
    cursor: default;
    border-style: dotted;
    border-color: rgba(108, 117, 125, 0.55);
    background: rgba(108, 117, 125, 0.06);
}
.elemento-etiqueta .resize-handle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #0d6efd;
    border-radius: 2px;
    display: none;
}
.elemento-etiqueta.selecionado .resize-handle {
    display: block;
}
.elemento-etiqueta.bloqueado .resize-handle,
.elemento-etiqueta.bloqueado .btn-remover {
    display: none !important;
}
.elemento-etiqueta .resize-handle.se {
    bottom: -4px;
    right: -4px;
    cursor: se-resize;
}
.elemento-etiqueta .resize-handle.e {
    top: 50%;
    right: -4px;
    transform: translateY(-50%);
    cursor: e-resize;
}
.elemento-etiqueta .resize-handle.s {
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    cursor: s-resize;
}

/* Botão remover */
.elemento-etiqueta .btn-remover {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 16px;
    height: 16px;
    background: #dc3545;
    color: white;
    border-radius: 50%;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    cursor: pointer;
    display: none;
}
.elemento-etiqueta.selecionado .btn-remover {
    display: block;
}
.elemento-etiqueta .indicador-bloqueio {
    position: absolute;
    top: -8px;
    left: -8px;
    width: 16px;
    height: 16px;
    background: #6c757d;
    color: #fff;
    border-radius: 50%;
    font-size: 9px;
    line-height: 16px;
    text-align: center;
    display: none;
}
.elemento-etiqueta.bloqueado .indicador-bloqueio {
    display: block;
}

/* Conteúdo do elemento */
.elemento-conteudo {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.elemento-conteudo.barcode {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fff;
}

.elemento-conteudo.barcode svg {
    width: 100%;
    height: 100%;
    display: block;
}
.elemento-conteudo.qrcode {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 1199.98px) {
    .editor-sidebar-stack {
        position: static;
    }

    .editor-side-scroll,
    .editor-canvas-shell {
        max-height: none;
    }

    .editor-inline-grid,
    .editor-action-grid,
    .editor-summary-grid {
        grid-template-columns: 1fr;
    }
}
</style>
{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', filename='vendor/jsbarcode/JsBarcode.all.min.js') }}"></script>
<script>
// ============================================================
// EDITOR DE ETIQUETAS - JavaScript
// ============================================================

function reportEditorError(message) {
    const status = document.getElementById('editor-status');
    const box = document.getElementById('editor-error');
    if (status) {
        status.textContent = 'Erro no editor';
        status.classList.remove('text-warning');
        status.classList.add('text-danger');
    }
    if (box) {
        box.style.display = 'block';
        box.textContent = message;
    }
}

window.addEventListener('error', function(e) {
    reportEditorError('Erro JS: ' + (e.message || 'desconhecido'));
});

window.addEventListener('unhandledrejection', function(e) {
    reportEditorError('Erro JS (promise): ' + (e.reason?.message || e.reason || 'desconhecido'));
});

document.addEventListener('DOMContentLoaded', () => {
    const status = document.getElementById('editor-status');
    if (status && status.textContent && status.textContent.includes('Carregando')) {
        status.textContent = 'Modo básico pronto';
        status.classList.remove('text-warning');
        status.classList.add('text-info');
    }

    const canvas = document.getElementById('etiqueta-canvas');
    if (canvas && (!canvas.style.width || !canvas.style.height)) {
        const largura = parseFloat(canvas.dataset.largura || 50);
        const altura = parseFloat(canvas.dataset.altura || 30);
        canvas.style.width = (largura * 3) + 'px';
        canvas.style.height = (altura * 3) + 'px';
    }

    garantirOpcoesSelect();

    const inputNome = document.getElementById('modelo-nome');
    if (inputNome && {{ 'false' if modelo else 'true' }}) {
        const valorAtual = (inputNome.value || '').trim();
        if (!valorAtual || valorAtual === 'Nova Etiqueta') {
            inputNome.value = gerarNomePadraoModelo();
        }
    }
});

function garantirOpcoesSelect() {
    const select = document.getElementById('select-novo-campo');
    if (!select) return;

    const valorAtual = select.value;
    const camposDisponiveis = Array.from(document.querySelectorAll('.campo-disponivel'))
        .map(el => ({
            label: (el.textContent || '').replace(/\s+/g, ' ').trim(),
            campo: el.dataset.campo,
            tipo: el.dataset.tipo
        }))
        .filter(item => item.campo && item.tipo);

    const fallback = [
        { label: 'Texto livre', campo: 'texto.livre', tipo: 'texto' },
        { label: 'Nome do Produto', campo: 'produto.nome', tipo: 'texto' },
        { label: 'Cota', campo: 'produto.cota', tipo: 'texto' },
        { label: 'Código de Barras', campo: 'produto.codigo_barras', tipo: 'barcode' },
        { label: 'Código de Barras do Lote', campo: 'lote.codigo_barras', tipo: 'barcode' },
        { label: 'Preço', campo: 'produto.preco', tipo: 'moeda' },
        { label: 'Tabela 1 - Nome', campo: 'tabela1.nome', tipo: 'texto' },
        { label: 'Tabela 1 - Preço', campo: 'tabela1.preco', tipo: 'moeda' }
    ];

    const origem = camposDisponiveis.length ? camposDisponiveis : fallback;
    const unicos = [];
    const vistos = new Set();
    origem.forEach((item) => {
        const chave = `${item.campo}|${item.tipo}`;
        if (vistos.has(chave)) return;
        vistos.add(chave);
        unicos.push(item);
    });

    select.innerHTML = unicos.map(c => `<option value="${c.campo}" data-tipo="${c.tipo}">${c.label}</option>`).join('');
    if (valorAtual && Array.from(select.options).some(opt => opt.value === valorAtual)) {
        select.value = valorAtual;
    }
}

function gerarNomePadraoModelo() {
    const agora = new Date();
    const data = agora.toLocaleDateString('pt-BR').replace(/\//g, '-');
    const hora = agora.toLocaleTimeString('pt-BR', {
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
    }).replace(/:/g, '-');
    return `Etiqueta ${data} ${hora}`;
}

function resolverEspecificacaoBarcodePreview(valor, formatoPreferido = 'automatico') {
    const valorBruto = String(valor || '').trim();
    if (!valorBruto) return null;

    const valorLimpo = valorBruto.replace(/[^0-9A-Za-z\-\./\+\ %$]/g, '');
    if (!valorLimpo) return null;

    const apenasDigitos = valorBruto.replace(/\D/g, '');
    const formato = String(formatoPreferido || 'automatico').trim().toLowerCase();

    if (!['', 'automatico', 'auto'].includes(formato)) {
        if (formato === 'code128') {
            return { format: 'CODE128', value: valorLimpo, displayValue: false };
        }
        if (formato === 'ean13' && apenasDigitos.length === 13) {
            return { format: 'EAN13', value: apenasDigitos, displayValue: true };
        }
        if (formato === 'ean8' && apenasDigitos.length === 8) {
            return { format: 'EAN8', value: apenasDigitos, displayValue: true };
        }
        if (formato === 'upca' && apenasDigitos.length === 12) {
            return { format: 'UPC', value: apenasDigitos, displayValue: true };
        }
        if (formato === 'itf14' && apenasDigitos.length === 14) {
            return { format: 'ITF14', value: apenasDigitos, displayValue: true };
        }
        return null;
    }

    if (valorLimpo === apenasDigitos) {
        if (apenasDigitos.length === 14) {
            return { format: 'ITF14', value: apenasDigitos, displayValue: true };
        }
        if (apenasDigitos.length === 13) {
            return { format: 'EAN13', value: apenasDigitos, displayValue: true };
        }
        if (apenasDigitos.length === 12) {
            return { format: 'UPC', value: apenasDigitos, displayValue: true };
        }
        if (apenasDigitos.length === 8) {
            return { format: 'EAN8', value: apenasDigitos, displayValue: true };
        }
    }

    return { format: 'CODE128', value: valorLimpo, displayValue: false };
}

const PRESETS_ETIQUETA = {
    gondola_normal: {
        nome: 'Gôndola normal 100x30', tipo: 'prateleira', tamanhoId: '100x30', largura: 100, altura: 30,
        papel: 'bobina100', orientacao: 'retrato', formato: 'pdf',
        layout: [
            { campo: 'produto.nome', tipo: 'texto', x: 3, y: 3, largura: 56, altura: 8, fonte: 'Helvetica', tamanho: 10, negrito: true, alinhamento: 'esquerda', rotacao: 0 },
            { campo: 'produto.preco', tipo: 'moeda', x: 64, y: 4, largura: 30, altura: 10, fonte: 'Helvetica', tamanho: 17, negrito: true, alinhamento: 'direita', rotacao: 0 },
            { campo: 'produto.unidade', tipo: 'texto', x: 80, y: 14, largura: 14, altura: 5, fonte: 'Helvetica', tamanho: 8, negrito: false, alinhamento: 'direita', rotacao: 0 },
            { campo: 'produto.codigo_barras', tipo: 'barcode', x: 3, y: 16, largura: 50, altura: 10, fonte: 'Helvetica', tamanho: 8, negrito: false, alinhamento: 'esquerda', rotacao: 0 },
            { campo: 'produto.codigo', tipo: 'texto', x: 55, y: 18, largura: 12, altura: 6, fonte: 'Helvetica', tamanho: 8, negrito: false, alinhamento: 'esquerda', rotacao: 0 }
        ]
    },
    gondola_reduzida: {
        nome: 'Gôndola reduzida 80x20', tipo: 'prateleira', tamanhoId: '80x20', largura: 80, altura: 20,
        papel: 'bobina80', orientacao: 'retrato', formato: 'pdf',
        layout: [
            { campo: 'produto.nome', tipo: 'texto', x: 2, y: 2, largura: 42, altura: 6, fonte: 'Helvetica', tamanho: 8, negrito: true, alinhamento: 'esquerda', rotacao: 0 },
            { campo: 'produto.preco', tipo: 'moeda', x: 50, y: 2, largura: 22, altura: 7, fonte: 'Helvetica', tamanho: 12, negrito: true, alinhamento: 'direita', rotacao: 0 },
            { campo: 'produto.codigo_barras', tipo: 'barcode', x: 2, y: 9, largura: 42, altura: 8, fonte: 'Helvetica', tamanho: 8, negrito: false, alinhamento: 'esquerda', rotacao: 0 },
            { campo: 'produto.codigo', tipo: 'texto', x: 48, y: 11, largura: 10, altura: 5, fonte: 'Helvetica', tamanho: 7, negrito: false, alinhamento: 'esquerda', rotacao: 0 }
        ]
    },
    produto_3_linha: {
        nome: 'Produto 3 por linha 33x17', tipo: 'produto', tamanhoId: '33x17', largura: 33, altura: 17,
        papel: 'bobina100', orientacao: 'retrato', formato: 'pdf', colunas_por_linha: 3,
        layout: [
            { campo: 'produto.preco', tipo: 'moeda', x: 18, y: 1, largura: 12, altura: 4, fonte: 'Helvetica', tamanho: 7, negrito: true, alinhamento: 'direita', rotacao: 0 },
            { campo: 'produto.codigo_barras', tipo: 'barcode', x: 1.5, y: 5, largura: 30, altura: 8, fonte: 'Helvetica', tamanho: 8, negrito: false, alinhamento: 'centro', rotacao: 0 },
            { campo: 'produto.codigo', tipo: 'texto', x: 5, y: 13.2, largura: 23, altura: 3, fonte: 'Helvetica', tamanho: 5, negrito: false, alinhamento: 'centro', rotacao: 0 }
        ]
    },
    tag_65x45_2precos: {
        nome: 'TAG 65x45 - 2 Preços', tipo: 'produto', tamanhoId: '65x45', largura: 65, altura: 45,
        papel: 'bobina80', orientacao: '90_direita', formato: 'pdf',
        layout: [
            { campo: 'empresa.logo', tipo: 'imagem', x: 2, y: 2, largura: 24, altura: 24, fonte: 'Helvetica', tamanho: 8, negrito: false, alinhamento: 'centro', rotacao: 0 },
            { campo: 'empresa.nome', tipo: 'texto', x: 2, y: 28, largura: 24, altura: 5, fonte: 'Helvetica', tamanho: 7, negrito: true, alinhamento: 'centro', rotacao: 0 },
            { campo: 'produto.qrcode', tipo: 'qrcode', x: 5, y: 33, largura: 16, altura: 10, fonte: 'Helvetica', tamanho: 8, negrito: false, alinhamento: 'centro', rotacao: 0 },
            { campo: 'produto.nome', tipo: 'texto', x: 30, y: 3, largura: 30, altura: 7, fonte: 'Helvetica', tamanho: 8, negrito: true, alinhamento: 'esquerda', rotacao: 0 },
                { campo: 'produto.cota', tipo: 'texto', x: 30, y: 10, largura: 26, altura: 3, fonte: 'Helvetica', tamanho: 6.5, negrito: false, alinhamento: 'esquerda', rotacao: 0 },
            { campo: 'tabela1.nome', tipo: 'texto', x: 30, y: 12, largura: 15, altura: 4, fonte: 'Helvetica', tamanho: 7, negrito: true, alinhamento: 'esquerda', rotacao: 0 },
            { campo: 'tabela1.preco', tipo: 'moeda', x: 30, y: 16, largura: 26, altura: 6, fonte: 'Helvetica', tamanho: 13, negrito: true, alinhamento: 'direita', rotacao: 0 },
            { campo: 'tabela2.nome', tipo: 'texto', x: 30, y: 23, largura: 15, altura: 4, fonte: 'Helvetica', tamanho: 7, negrito: true, alinhamento: 'esquerda', rotacao: 0 },
            { campo: 'tabela2.preco', tipo: 'moeda', x: 30, y: 27, largura: 26, altura: 6, fonte: 'Helvetica', tamanho: 13, negrito: true, alinhamento: 'direita', rotacao: 0 },
            { campo: 'produto.codigo', tipo: 'texto', x: 43, y: 29, largura: 13, altura: 5, fonte: 'Helvetica', tamanho: 9, negrito: false, alinhamento: 'direita', rotacao: 90 },
            { campo: 'produto.codigo_barras', tipo: 'barcode', x: 30, y: 31, largura: 28, altura: 11, fonte: 'Helvetica', tamanho: 8, negrito: false, alinhamento: 'centro', rotacao: 0 }
        ]
    }
};

window.addCampoManual = function() {
    try {
        garantirOpcoesSelect();
        if (typeof EditorEtiquetas !== 'undefined' && !EditorEtiquetas.validarEtapasCampos()) {
            return;
        }
        const select = document.getElementById('select-novo-campo');
        const opt = select?.selectedOptions?.[0];
        if (!opt) {
            alert('Selecione um campo antes de adicionar.');
            return;
        }
        const campoNome = opt.value;
        const tipo = opt.dataset.tipo;
        if (typeof EditorEtiquetas !== 'undefined' && EditorEtiquetas.canvas) {
            const larguraCanvas = parseFloat(EditorEtiquetas.canvas.dataset.largura || 50);
            const alturaCanvas = parseFloat(EditorEtiquetas.canvas.dataset.altura || 30);
            const dimensoes = EditorEtiquetas.getDimensoesPadraoPorTipo(tipo);
            const larguraElem = dimensoes.largura;
            const alturaElem = dimensoes.altura;

            const x = Math.max(0, (larguraCanvas - larguraElem) / 2);
            const y = Math.max(0, (alturaCanvas - alturaElem) / 2);

            EditorEtiquetas.adicionarElemento({
                campo: campoNome,
                tipo: tipo,
                x: x,
                y: y,
                largura: larguraElem,
                altura: alturaElem,
                fonte: 'Helvetica',
                tamanho: tipo === 'moeda' ? 12 : 8,
                negrito: false,
                alinhamento: 'esquerda',
                rotacao: 0,
                imagem_origem: campoNome === 'imagem.personalizada' ? 'url_fixa' : 'campo'
            });
            return;
        }

        const canvas = document.getElementById('etiqueta-canvas');
        if (!canvas) {
            alert('Área de edição não encontrada.');
            return;
        }

        const larguraCanvas = parseFloat(canvas.dataset.largura || 50);
        const alturaCanvas = parseFloat(canvas.dataset.altura || 30);
        const dimensoes = typeof EditorEtiquetas !== 'undefined'
            ? EditorEtiquetas.getDimensoesPadraoPorTipo(tipo)
            : { largura: (tipo === 'barcode' ? 40 : (tipo === 'qrcode' ? 20 : (tipo === 'imagem' ? 20 : 30))), altura: (tipo === 'barcode' ? 12 : (tipo === 'qrcode' ? 20 : (tipo === 'imagem' ? 20 : 8))) };
        const larguraElem = dimensoes.largura;
        const alturaElem = dimensoes.altura;
        const x = Math.max(0, (larguraCanvas - larguraElem) / 2);
        const y = Math.max(0, (alturaCanvas - alturaElem) / 2);

        const div = document.createElement('div');
        div.className = 'elemento-etiqueta';
        div.style.left = (x * 3) + 'px';
        div.style.top = (y * 3) + 'px';
        div.style.width = (larguraElem * 3) + 'px';
        div.style.height = (alturaElem * 3) + 'px';
        div.style.border = '2px dashed #0d6efd';

        const conteudo = document.createElement('div');
        conteudo.className = 'elemento-conteudo';
        conteudo.textContent = campoNome;
        div.appendChild(conteudo);

        canvas.appendChild(div);
        alert('Editor não carregou totalmente. Campo adicionado no modo simples.');
    } catch (e) {
        alert('Falha ao adicionar campo: ' + e.message);
    }
};

window.aplicarPresetEtiqueta = function(presetId) {
    const preset = PRESETS_ETIQUETA[presetId];
    if (!preset || typeof EditorEtiquetas === 'undefined') return;

    const inputNome = document.getElementById('modelo-nome');
    const inputTipo = document.getElementById('modelo-tipo');
    const selectTamanho = document.getElementById('modelo-tamanho');
    const inputLargura = document.getElementById('modelo-largura');
    const inputAltura = document.getElementById('modelo-altura');
    const inputPapel = document.getElementById('modelo-papel');
    const inputOrientacao = document.getElementById('modelo-orientacao');
    const inputFormato = document.getElementById('formato-saida');

    if (inputNome && (!EditorEtiquetas.modeloId || !inputNome.value.trim() || inputNome.value.includes('Etiqueta '))) {
        inputNome.value = preset.nome;
    }
    if (inputTipo) inputTipo.value = preset.tipo;
    if (inputPapel) inputPapel.value = preset.papel;
    if (inputOrientacao) inputOrientacao.value = preset.orientacao;
    if (inputFormato) inputFormato.value = preset.formato;
    const inputColunas = document.getElementById('modelo-colunas-por-linha');
    if (inputLargura) inputLargura.value = preset.largura;
    if (inputAltura) inputAltura.value = preset.altura;
    if (inputColunas) {
        inputColunas.value = String(preset.colunas_por_linha || 1);
        inputColunas.dataset.configurada = '1';
    }

    if (selectTamanho) {
        const option = Array.from(selectTamanho.options).find(opt => opt.value === preset.tamanhoId);
        if (option) {
            selectTamanho.value = preset.tamanhoId;
        } else {
            selectTamanho.value = 'personalizado';
        }
    }

    EditorEtiquetas.tamanhoFixo = {
        largura: preset.largura,
        altura: preset.altura,
        fixado: true
    };
    EditorEtiquetas.atualizarTamanhoCanvas();
    EditorEtiquetas.mostrarAvisoTamanhoFixo();
    EditorEtiquetas.elementos = (preset.layout || []).map((item, idx) => ({
        id: `preset_${presetId}_${idx}_${Date.now()}`,
        ...item
    }));
    EditorEtiquetas.elementoSelecionado = null;
    EditorEtiquetas.renderizarLayoutAtual();
    EditorEtiquetas.salvarHistorico();
    EditorEtiquetas.mostrarToast('Sucesso', `Preset "${preset.nome}" aplicado`, 'success');
};

const EditorEtiquetas = {
    // Estado
    elementos: [],
    elementoSelecionado: null,
    elementosSelecionados: [],
    clipboardElementos: [],
    clipboardColagemPasso: 0,
    guiasAlinhamento: { x: null, y: null },
    zoom: 1,
    escala: 3, // pixels por mm
    modeloId: {{ modelo.id if modelo else 'null' }},
    historico: [],
    salvando: false,
    abaPropriedadesAtiva: 'prop-tab-layout',
    snapToleranciaMm: 1.2,
    tamanhoFixo: {
        largura: {{ modelo.largura if modelo else 50 }},
        altura: {{ modelo.altura if modelo else 30 }},
        fixado: {{ 'true' if modelo else 'false' }}
    },
    
    // Inicialização
    init() {
        this.canvas = document.getElementById('etiqueta-canvas');
        this.canvasArea = document.getElementById('editor-canvas-area');
        this.gradeHeader = document.getElementById('editor-grade-header');
        this.gradeGrid = document.getElementById('editor-grade-grid');
        this.reguaHorizontal = document.getElementById('regua-horizontal');
        this.reguaVertical = document.getElementById('regua-vertical');
        this.guiaX = document.getElementById('guia-alinhamento-x');
        this.guiaY = document.getElementById('guia-alinhamento-y');
        this.atualizarSnapTolerancia();
        this.sincronizarSeletorColunasPorLinha();
        this.atualizarTamanhoCanvas();
        this.configurarNovoCampo();
        this.configurarDragDrop();
        this.configurarEventos();
        this.carregarLayout();
        this.salvarHistorico();
        
        // Mostrar aviso de tamanho fixo se já estiver configurado
        if (this.tamanhoFixo.fixado) {
            this.mostrarAvisoTamanhoFixo();
        }

        this.atualizarFluxoEtapas();
        
        const status = document.getElementById('editor-status');
        if (status) {
            status.textContent = 'Editor pronto';
            status.classList.remove('text-warning');
            status.classList.add('text-success');
        }
    },

    getEscalaVisual() {
        return this.escala * this.zoom;
    },

    getDimensoesCanvasMm() {
        return {
            largura: parseFloat(this.canvas?.dataset.largura || this.tamanhoFixo.largura || 50),
            altura: parseFloat(this.canvas?.dataset.altura || this.tamanhoFixo.altura || 30)
        };
    },

    getDimensoesWorkspaceMm() {
        const etiqueta = this.getDimensoesCanvasMm();
        const grade = this.obterGradeFolhaAtual();
        const colunas = Math.max(1, grade.colunas || 1);
        const espacamentoMm = grade.espacamentoMm || 0;
        return {
            largura: (etiqueta.largura * colunas) + (Math.max(0, colunas - 1) * espacamentoMm),
            altura: etiqueta.altura
        };
    },

    obterEspacamentoColunasMm(grade = null) {
        const info = grade || this.obterGradeFolhaAtual();
        const papel = String(document.getElementById('modelo-papel')?.value || 'a4').trim().toLowerCase();
        const largura = parseFloat(document.getElementById('modelo-largura')?.value || this.canvas?.dataset.largura || 0);
        const altura = parseFloat(document.getElementById('modelo-altura')?.value || this.canvas?.dataset.altura || 0);
        const perfilPequeno3Colunas = largura >= 30 && largura <= 35 && altura >= 15 && altura <= 25;

        if (papel === 'bobina100' && perfilPequeno3Colunas && info.colunas === 3) {
            return 1.5;
        }

        return info.colunas > 1 ? 3 : 0;
    },

    inferirColunasPorLinhaPadrao() {
        const largura = parseFloat(document.getElementById('modelo-largura')?.value || this.canvas?.dataset.largura || 0);
        const altura = parseFloat(document.getElementById('modelo-altura')?.value || this.canvas?.dataset.altura || 0);
        const papel = String(document.getElementById('modelo-papel')?.value || 'a4').trim().toLowerCase();
        const nome = String(document.getElementById('modelo-nome')?.value || '').trim().toLowerCase();
        const perfilPequeno3Colunas = largura >= 30 && largura <= 35 && altura >= 15 && altura <= 25;

        if (papel === 'bobina100' && perfilPequeno3Colunas) return 3;
        if (nome.includes('4 por linha') || nome.includes('4 colunas')) return 4;
        if (nome.includes('3 por linha') || nome.includes('3 colunas')) return 3;
        if (largura >= 48 && largura <= 52 && altura >= 25 && altura <= 35) return 4;
        if (largura >= 58 && largura <= 66 && altura >= 38 && altura <= 48) return 3;
        return 1;
    },

    sincronizarSeletorColunasPorLinha({forcar = false} = {}) {
        const select = document.getElementById('modelo-colunas-por-linha');
        if (!select) return;

        const configurada = select.dataset.configurada === '1';
        if (configurada && !forcar) {
            return;
        }

        select.value = String(this.inferirColunasPorLinhaPadrao());
        if (forcar) {
            select.dataset.configurada = '1';
        }
    },

    obterColunasPorLinhaSelecionadas() {
        const select = document.getElementById('modelo-colunas-por-linha');
        if (!select) return this.inferirColunasPorLinhaPadrao();
        if (select.dataset.configurada !== '1') {
            return this.inferirColunasPorLinhaPadrao();
        }
        const valor = parseInt(select.value || '1', 10);
        return Number.isInteger(valor) && valor > 0 ? valor : this.inferirColunasPorLinhaPadrao();
    },

    getPontosAlinhamento(bounds) {
        return {
            x: [bounds.left, bounds.left + (bounds.width / 2), bounds.right],
            y: [bounds.top, bounds.top + (bounds.height / 2), bounds.bottom]
        };
    },

    ocultarGuiasAlinhamento() {
        this.guiasAlinhamento = { x: null, y: null };
        this.guiaX?.classList.add('d-none');
        this.guiaY?.classList.add('d-none');
    },

    mostrarGuiasAlinhamento() {
        if (this.guiasAlinhamento.x !== null && this.guiaX) {
            this.guiaX.classList.remove('d-none');
            this.guiaX.style.left = (this.guiasAlinhamento.x * this.getEscalaVisual()) + 'px';
        } else {
            this.guiaX?.classList.add('d-none');
        }

        if (this.guiasAlinhamento.y !== null && this.guiaY) {
            this.guiaY.classList.remove('d-none');
            this.guiaY.style.top = (this.guiasAlinhamento.y * this.getEscalaVisual()) + 'px';
        } else {
            this.guiaY?.classList.add('d-none');
        }
    },

    atualizarReguas() {
        const { largura, altura } = this.getDimensoesWorkspaceMm();
        const escalaVisual = this.getEscalaVisual();

        if (this.reguaHorizontal) {
            this.reguaHorizontal.style.width = (largura * escalaVisual) + 'px';
            let html = '';
            for (let mm = 0; mm <= largura; mm += 5) {
                const pos = mm * escalaVisual;
                const maior = mm % 10 === 0;
                html += `<div class="regua-marcador ${maior ? 'maior' : ''}" style="left:${pos}px;height:${maior ? 14 : 8}px"></div>`;
                if (maior) {
                    html += `<div class="regua-label" style="left:${pos}px">${mm}</div>`;
                }
            }
            this.reguaHorizontal.innerHTML = html;
        }

        if (this.reguaVertical) {
            this.reguaVertical.style.height = (altura * escalaVisual) + 'px';
            let html = '';
            for (let mm = 0; mm <= altura; mm += 5) {
                const pos = mm * escalaVisual;
                const maior = mm % 10 === 0;
                html += `<div class="regua-marcador ${maior ? 'maior' : ''}" style="top:${pos}px;width:${maior ? 14 : 8}px"></div>`;
                if (maior) {
                    html += `<div class="regua-label" style="top:${pos}px">${mm}</div>`;
                }
            }
            this.reguaVertical.innerHTML = html;
        }
    },

    obterAlvosAlinhamento(ignorarId = null) {
        const { largura, altura } = this.getDimensoesCanvasMm();
        const alvosX = [];
        const alvosY = [];

        for (let mm = 0; mm <= largura; mm += 5) alvosX.push(mm);
        for (let mm = 0; mm <= altura; mm += 5) alvosY.push(mm);

        alvosX.push(largura / 2, largura);
        alvosY.push(altura / 2, altura);

        this.elementos.forEach((item) => {
            if (item.id === ignorarId) return;
            const bounds = this.obterBoundsElemento(item);
            const pontos = this.getPontosAlinhamento(bounds);
            alvosX.push(...pontos.x);
            alvosY.push(...pontos.y);
        });

        return {
            x: [...new Set(alvosX.map(v => Number(v.toFixed(2))))],
            y: [...new Set(alvosY.map(v => Number(v.toFixed(2))))]
        };
    },

    aplicarSnapMovimento(elem) {
        const bounds = this.obterBoundsElemento(elem);
        const pontos = this.getPontosAlinhamento(bounds);
        const alvos = this.obterAlvosAlinhamento(elem.id);
        const tolerancia = this.snapToleranciaMm;

        let melhorX = null;
        let melhorY = null;

        pontos.x.forEach((ponto) => {
            alvos.x.forEach((alvo) => {
                const diff = alvo - ponto;
                if (Math.abs(diff) <= tolerancia && (!melhorX || Math.abs(diff) < Math.abs(melhorX.diff))) {
                    melhorX = { diff, alvo };
                }
            });
        });

        pontos.y.forEach((ponto) => {
            alvos.y.forEach((alvo) => {
                const diff = alvo - ponto;
                if (Math.abs(diff) <= tolerancia && (!melhorY || Math.abs(diff) < Math.abs(melhorY.diff))) {
                    melhorY = { diff, alvo };
                }
            });
        });

        if (melhorX) {
            elem.x += melhorX.diff;
            this.guiasAlinhamento.x = melhorX.alvo;
        } else {
            this.guiasAlinhamento.x = null;
        }

        if (melhorY) {
            elem.y += melhorY.diff;
            this.guiasAlinhamento.y = melhorY.alvo;
        } else {
            this.guiasAlinhamento.y = null;
        }

        this.mostrarGuiasAlinhamento();
        return elem;
    },

    atualizarSnapTolerancia() {
        const valor = parseFloat(document.getElementById('forca-snap')?.value || '1.2');
        this.snapToleranciaMm = Number.isFinite(valor) ? valor : 1.2;
    },

    alinharElementoSelecionado(modo) {
        const elem = this.elementoSelecionado;
        if (!elem) return;

        const { largura, altura } = this.getDimensoesCanvasMm();
        const bounds = this.obterBoundsElemento(elem);

        switch (modo) {
            case 'esquerda':
                elem.x += -bounds.left;
                break;
            case 'direita':
                elem.x += (largura - bounds.right);
                break;
            case 'centro-h':
                elem.x += ((largura / 2) - (bounds.left + bounds.width / 2));
                break;
            case 'topo':
                elem.y += -bounds.top;
                break;
            case 'base':
                elem.y += (altura - bounds.bottom);
                break;
            case 'centro-v':
                elem.y += ((altura / 2) - (bounds.top + bounds.height / 2));
                break;
            default:
                return;
        }

        if (this.tamanhoFixo.fixado) {
            this.ajustarParaLimites(elem);
        }

        const boundsFinais = this.obterBoundsElemento(elem);
        this.guiasAlinhamento.x = ['esquerda', 'direita', 'centro-h'].includes(modo)
            ? (modo === 'esquerda' ? boundsFinais.left : modo === 'direita' ? boundsFinais.right : boundsFinais.left + boundsFinais.width / 2)
            : null;
        this.guiasAlinhamento.y = ['topo', 'base', 'centro-v'].includes(modo)
            ? (modo === 'topo' ? boundsFinais.top : modo === 'base' ? boundsFinais.bottom : boundsFinais.top + boundsFinais.height / 2)
            : null;

        this.atualizarElementoVisual(elem.id);
        this.mostrarGuiasAlinhamento();
        this.mostrarPropriedades();
        this.salvarHistorico();
    },

    maximizarBarcodeSelecionado() {
        const elem = this.elementoSelecionado;
        if (!elem || elem.tipo !== 'barcode') {
            this.mostrarToast('Aviso', 'Selecione um campo de código de barras para maximizar.', 'warning');
            return;
        }

        const { largura: larguraCanvas, altura: alturaCanvas } = this.getDimensoesCanvasMm();
        const margemHorizontal = Math.min(2, Math.max(1, larguraCanvas * 0.02));
        const margemInferior = 1;
        const espacamentoVertical = 1;
        const topoAtual = Math.max(0, elem.y || 0);
        const novoX = margemHorizontal;
        const novaLargura = Math.max(20, larguraCanvas - (margemHorizontal * 2));
        const faixaEsquerda = novoX;
        const faixaDireita = novoX + novaLargura;

        let limiteInferior = alturaCanvas - margemInferior;
        this.elementos.forEach((outro) => {
            if (!outro || outro.id === elem.id) return;
            const boundsOutro = this.obterBoundsElemento(outro);
            const interceptaHorizontal = boundsOutro.right > faixaEsquerda && boundsOutro.left < faixaDireita;
            const estaAbaixo = boundsOutro.top >= topoAtual;

            if (interceptaHorizontal && estaAbaixo) {
                limiteInferior = Math.min(limiteInferior, boundsOutro.top - espacamentoVertical);
            }
        });

        const alturaDisponivel = Math.max(8, limiteInferior - topoAtual);
        const alturaSugerida = Math.max(elem.altura || 8, Math.min(alturaDisponivel, Math.max(14, alturaCanvas * 0.22)));

        elem.x = novoX;
        elem.largura = novaLargura;
        elem.altura = alturaSugerida;
        elem.barcode_ajuste = 'expandir_sem_texto';

        if (this.tamanhoFixo.fixado) {
            this.ajustarParaLimites(elem);
        }

        this.atualizarElementoVisual(elem.id);
        this.mostrarPropriedades();
        this.salvarHistorico();
        this.mostrarToast('Barcode maximizado', 'O campo foi ampliado na área livre e configurado para expandir sem texto embaixo.', 'success');
    },

    duplicarElementoSelecionado() {
        const selecionados = this.getElementosSelecionados();
        if (!selecionados.length) {
            this.mostrarToast('Aviso', 'Selecione um campo para duplicar', 'warning');
            return;
        }

        this.duplicarElementos(selecionados);
    },

    isEditableTarget(target) {
        if (!target) return false;
        const tag = (target.tagName || '').toLowerCase();
        return target.isContentEditable || ['input', 'textarea', 'select', 'button'].includes(tag);
    },

    getElementosSelecionados() {
        if (this.elementosSelecionados?.length) {
            return this.elementos.filter(e => this.elementosSelecionados.includes(e.id));
        }
        return this.elementoSelecionado ? [this.elementoSelecionado] : [];
    },

    limparSelecao() {
        this.elementoSelecionado = null;
        this.elementosSelecionados = [];
        document.querySelectorAll('.elemento-etiqueta.selecionado').forEach(el => el.classList.remove('selecionado'));
        this.ocultarGuiasAlinhamento();
        this.renderizarPainelSemSelecao();
    },

    atualizarSelecaoVisual() {
        document.querySelectorAll('.elemento-etiqueta').forEach((el) => {
            el.classList.toggle('selecionado', this.elementosSelecionados.includes(el.id));
        });
        this.atualizarPreviewGradeFolha();
    },

    duplicarElementos(elementos) {
        const novasCopias = [];
        elementos.forEach((elem) => {
            const copia = {
                ...JSON.parse(JSON.stringify(elem)),
                x: (elem.x || 0) + 2,
                y: (elem.y || 0) + 2,
                bloqueado: false
            };
            delete copia.id;
            const novo = this.normalizarElemento(copia, 'elem_' + Date.now() + '_' + novasCopias.length);
            if (this.tamanhoFixo.fixado && !this.validarElementoDentroLimites(novo)) {
                this.ajustarParaLimites(novo);
            }
            this.elementos.push(novo);
            novasCopias.push(novo);
        });

        this.renderizarLayoutAtual();
        this.elementosSelecionados = novasCopias.map(e => e.id);
        this.elementoSelecionado = novasCopias[novasCopias.length - 1] || null;
        this.atualizarSelecaoVisual();
        this.mostrarPropriedades();
        this.salvarHistorico();
        this.mostrarToast('Sucesso', `${novasCopias.length} campo(s) duplicado(s)`, 'success');
    },

    copiarElementosSelecionados() {
        const selecionados = this.getElementosSelecionados();
        if (!selecionados.length) {
            this.mostrarToast('Aviso', 'Selecione ao menos um campo para copiar', 'warning');
            return;
        }
        this.clipboardElementos = selecionados.map((elem) => {
            const copia = JSON.parse(JSON.stringify(elem));
            delete copia.id;
            return copia;
        });
        this.clipboardColagemPasso = 0;
        this.mostrarToast('Copiado', `${this.clipboardElementos.length} campo(s) copiado(s)`, 'info');
    },

    colarElementos() {
        if (!this.clipboardElementos.length) {
            this.mostrarToast('Aviso', 'Nenhum campo copiado para colar', 'warning');
            return;
        }

        this.clipboardColagemPasso += 1;
        const deslocamento = 2 * this.clipboardColagemPasso;
        const elementosParaColar = this.clipboardElementos.map((elem) => ({
            ...JSON.parse(JSON.stringify(elem)),
            x: (elem.x || 0) + deslocamento,
            y: (elem.y || 0) + deslocamento,
            bloqueado: false
        }));

        this.duplicarElementos(elementosParaColar.map((elem) => ({ ...elem, x: (elem.x || 0) - 2, y: (elem.y || 0) - 2 })));
    },

    removerElementosSelecionados() {
        const ids = [...this.elementosSelecionados];
        if (!ids.length && this.elementoSelecionado) ids.push(this.elementoSelecionado.id);
        if (!ids.length) return;
        this.elementos = this.elementos.filter(e => !ids.includes(e.id));
        ids.forEach(id => document.getElementById(id)?.remove());
        this.limparSelecao();
        this.renderizarLayoutAtual();
        this.salvarHistorico();
    },

    selecionarElemento(id, additive = false) {
        if (!id) return;
        const elem = this.elementos.find(e => e.id === id);
        if (!elem) return;

        if (additive) {
            if (this.elementosSelecionados.includes(id)) {
                this.elementosSelecionados = this.elementosSelecionados.filter(selId => selId !== id);
            } else {
                this.elementosSelecionados = [...this.elementosSelecionados, id];
            }
        } else {
            this.elementosSelecionados = [id];
        }

        this.elementoSelecionado = this.elementosSelecionados.length
            ? this.elementos.find(e => e.id === this.elementosSelecionados[this.elementosSelecionados.length - 1])
            : null;

        this.atualizarSelecaoVisual();
        if (this.elementosSelecionados.length) {
            this.mostrarPropriedades();
        } else {
            this.renderizarPainelSemSelecao();
        }
    },

    moverElementoSelecionado(deltaX, deltaY) {
        const selecionados = this.getElementosSelecionados().filter(elem => !elem.bloqueado);
        if (!selecionados.length) {
            this.mostrarToast('Campo travado', 'Destrave ou selecione um campo para mover com o teclado.', 'warning');
            return false;
        }

        selecionados.forEach((elem) => {
            elem.x = Math.max(0, (elem.x || 0) + deltaX);
            elem.y = Math.max(0, (elem.y || 0) + deltaY);

            if (this.tamanhoFixo.fixado) {
                this.ajustarParaLimites(elem);
            }

            this.atualizarElementoVisual(elem.id);
        });
        this.mostrarPropriedades();
        return true;
    },

    alternarBloqueioElementoSelecionado() {
        const selecionados = this.getElementosSelecionados();
        if (!selecionados.length) return;
        const travar = selecionados.some(elem => !elem.bloqueado);
        selecionados.forEach((elem) => {
            elem.bloqueado = travar;
            this.atualizarElementoVisual(elem.id);
        });
        this.mostrarPropriedades();
        this.salvarHistorico();
        this.mostrarToast('Campo atualizado', travar ? 'Campo(s) travado(s) com sucesso.' : 'Campo(s) destravado(s) com sucesso.', 'info');
    },

    moverCamadaSelecionada(direcao) {
        const elem = this.elementoSelecionado;
        if (!elem) return;

        const idx = this.elementos.findIndex(e => e.id === elem.id);
        if (idx === -1) return;

        if (direcao === 'frente' && idx < this.elementos.length - 1) {
            [this.elementos[idx], this.elementos[idx + 1]] = [this.elementos[idx + 1], this.elementos[idx]];
        } else if (direcao === 'tras' && idx > 0) {
            [this.elementos[idx], this.elementos[idx - 1]] = [this.elementos[idx - 1], this.elementos[idx]];
        } else {
            return;
        }

        this.renderizarLayoutAtual();
        this.selecionarElemento(elem.id);
        this.salvarHistorico();
    },

    etapa1Concluida() {
        const nome = (document.getElementById('modelo-nome')?.value || '').trim();
        const largura = parseFloat(document.getElementById('modelo-largura')?.value || 0);
        const altura = parseFloat(document.getElementById('modelo-altura')?.value || 0);
        return nome.length >= 3 && largura > 0 && altura > 0;
    },

    etapa2Concluida() {
        const orientacao = document.getElementById('modelo-orientacao')?.value || '';
        return !!orientacao;
    },

    podeEditarCampos() {
        return this.etapa1Concluida() && this.etapa2Concluida();
    },

    validarEtapasCampos(exibirAviso = true) {
        if (this.podeEditarCampos()) {
            return true;
        }

        if (exibirAviso) {
            this.mostrarToast('Fluxo do editor', 'Primeiro defina nome, tamanho e orientação da impressão. Depois disso os campos serão liberados.', 'warning');
        }
        return false;
    },

    atualizarFluxoEtapas() {
        const etapa1 = this.etapa1Concluida();
        const etapa2 = this.etapa2Concluida();
        const etapa3 = this.podeEditarCampos();

        const statusEtapa1 = document.getElementById('status-etapa-1');
        const statusEtapa2 = document.getElementById('status-etapa-2');
        const statusEtapa3 = document.getElementById('status-etapa-3');
        const avisoBloqueio = document.getElementById('fluxo-campos-bloqueado');
        const selectCampo = document.getElementById('select-novo-campo');
        const btnAdicionar = document.getElementById('btn-adicionar-campo');

        if (statusEtapa1) {
            statusEtapa1.className = `badge ${etapa1 ? 'text-bg-success' : 'text-bg-warning'}`;
            statusEtapa1.textContent = etapa1 ? 'OK' : 'Pendente';
        }
        if (statusEtapa2) {
            statusEtapa2.className = `badge ${etapa2 ? 'text-bg-success' : 'text-bg-warning'}`;
            statusEtapa2.textContent = etapa2 ? 'OK' : 'Pendente';
        }
        if (statusEtapa3) {
            statusEtapa3.className = `badge ${etapa3 ? 'text-bg-success' : 'text-bg-secondary'}`;
            statusEtapa3.textContent = etapa3 ? 'Liberado' : 'Aguardando';
        }

        if (selectCampo) {
            selectCampo.disabled = !etapa3;
        }
        if (btnAdicionar) {
            btnAdicionar.disabled = !etapa3;
            btnAdicionar.title = etapa3 ? 'Adicionar campo no centro da etiqueta' : 'Defina nome, tamanho e orientação antes de adicionar campos';
        }

        document.querySelectorAll('.campo-disponivel').forEach((campo) => {
            campo.classList.toggle('bloqueado', !etapa3);
            campo.setAttribute('aria-disabled', etapa3 ? 'false' : 'true');
        });

        if (avisoBloqueio) {
            avisoBloqueio.style.display = etapa3 ? 'none' : 'block';
        }
    },

    configurarNovoCampo() {
        const select = document.getElementById('select-novo-campo');
        const btn = document.getElementById('btn-adicionar-campo');
        if (!select || !btn) return;

        if (select.options.length === 0) {
            const campos = Array.from(document.querySelectorAll('.campo-disponivel'))
                .map(el => ({
                    label: el.textContent.trim(),
                    campo: el.dataset.campo,
                    tipo: el.dataset.tipo
                }))
                .filter(c => c.campo && c.tipo);

            if (campos.length === 0) {
                const fallback = [
                    { label: 'Texto livre', campo: 'texto.livre', tipo: 'texto' },
                    { label: 'Nome do Produto', campo: 'produto.nome', tipo: 'texto' },
                    { label: 'Descrição do Produto', campo: 'produto.descricao', tipo: 'texto' },
                    { label: 'Descrição do Produto', campo: 'produto.descricao', tipo: 'texto' },
                        { label: 'Cota', campo: 'produto.cota', tipo: 'texto' },
                    { label: 'Código de Barras', campo: 'produto.codigo_barras', tipo: 'barcode' },
                    { label: 'Preço', campo: 'produto.preco', tipo: 'moeda' },
                    { label: 'Tabela 1 - Nome', campo: 'tabela1.nome', tipo: 'texto' },
                    { label: 'Tabela 1 - Preço', campo: 'tabela1.preco', tipo: 'moeda' }
                ];
                select.innerHTML = fallback.map(c => `<option value="${c.campo}" data-tipo="${c.tipo}">${c.label}</option>`).join('');
            } else {
                select.innerHTML = campos.map(c => `<option value="${c.campo}" data-tipo="${c.tipo}">${c.label}</option>`).join('');
            }
        }

        if (btn.dataset.bound === 'true') return;
        btn.dataset.bound = 'true';
        btn.addEventListener('click', () => window.addCampoManual());
    },
    
    // Atualiza tamanho do canvas baseado no tamanho da etiqueta
    atualizarTamanhoCanvas() {
        const largura = parseFloat(document.getElementById('modelo-largura')?.value || 50);
        const altura = parseFloat(document.getElementById('modelo-altura')?.value || 30);
        
        // Validar dimensões em tempo real
        if (largura <= 0 || altura <= 0) {
            console.warn('Dimensões devem ser maiores que zero');
            return;
        }
        if (largura > 300 || altura > 300) {
            console.warn('Dimensões muito grandes (máximo 300mm)');
        }
        
        this.canvas.style.width = (largura * this.escala * this.zoom) + 'px';
        this.canvas.style.height = (altura * this.escala * this.zoom) + 'px';
        this.canvas.dataset.largura = largura;
        this.canvas.dataset.altura = altura;
        this.atualizarGuiasCanvas();
        this.atualizarReguas();
        this.mostrarGuiasAlinhamento();
        this.atualizarPreviewGradeFolha();
        
        // Avisar sobre elementos fora dos limites
        let elementosForaLimite = 0;
        this.elementos.forEach(elem => {
            const bounds = this.obterBoundsElemento(elem);
            if (bounds.left < 0 || bounds.top < 0 || bounds.right > largura || bounds.bottom > altura) {
                elementosForaLimite++;
                console.warn(`Elemento ${elem.campo} está fora dos limites`);
            }
        });
        
        if (elementosForaLimite > 0) {
            const aviso = document.getElementById('aviso-limites');
            if (aviso) {
                aviso.textContent = `⚠️ ${elementosForaLimite} campo(s) fora dos limites da etiqueta`;
                aviso.className = 'alert alert-warning alert-sm mt-2';
                aviso.style.display = 'block';
            }
        } else {
            const aviso = document.getElementById('aviso-limites');
            if (aviso) {
                aviso.style.display = 'none';
            }
        }
    },

    atualizarGuiasCanvas() {
        if (!this.canvas) return;

        const mostrarGuias = document.getElementById('mostrar-guias')?.checked !== false;
        if (!mostrarGuias) {
            this.canvas.style.backgroundImage = 'none';
            return;
        }

        const larguraMm = parseFloat(this.canvas.dataset.largura || this.tamanhoFixo.largura || 50);
        const alturaMm = parseFloat(this.canvas.dataset.altura || this.tamanhoFixo.altura || 30);
        const larguraPx = Math.max(1, larguraMm * this.getEscalaVisual());
        const alturaPx = Math.max(1, alturaMm * this.getEscalaVisual());
        const passoMenor = Math.max(10, 5 * this.getEscalaVisual());
        const passoMaior = Math.max(20, 10 * this.getEscalaVisual());
        const centroX = larguraPx / 2;
        const centroY = alturaPx / 2;

        const linhas = [];
        const criarLinha = (x1, y1, x2, y2, cor, espessura, tracejado) => {
            linhas.push(`<line x1="${x1.toFixed(2)}" y1="${y1.toFixed(2)}" x2="${x2.toFixed(2)}" y2="${y2.toFixed(2)}" stroke="${cor}" stroke-width="${espessura}" stroke-dasharray="${tracejado}" />`);
        };

        for (let x = passoMenor; x < larguraPx; x += passoMenor) {
            criarLinha(x, 0, x, alturaPx, 'rgba(13,110,253,0.15)', 1, '2 4');
        }
        for (let y = passoMenor; y < alturaPx; y += passoMenor) {
            criarLinha(0, y, larguraPx, y, 'rgba(13,110,253,0.15)', 1, '2 4');
        }

        for (let x = passoMaior; x < larguraPx; x += passoMaior) {
            criarLinha(x, 0, x, alturaPx, 'rgba(13,110,253,0.28)', 1.2, '3 5');
        }
        for (let y = passoMaior; y < alturaPx; y += passoMaior) {
            criarLinha(0, y, larguraPx, y, 'rgba(13,110,253,0.28)', 1.2, '3 5');
        }

        criarLinha(centroX, 0, centroX, alturaPx, 'rgba(220,53,69,0.35)', 1.4, '4 4');
        criarLinha(0, centroY, larguraPx, centroY, 'rgba(220,53,69,0.35)', 1.4, '4 4');

        const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${larguraPx.toFixed(2)}" height="${alturaPx.toFixed(2)}" viewBox="0 0 ${larguraPx.toFixed(2)} ${alturaPx.toFixed(2)}">${linhas.join('')}</svg>`;
        const dataUrl = `url("data:image/svg+xml;charset=UTF-8,${encodeURIComponent(svg)}")`;
        this.canvas.style.backgroundImage = dataUrl;
        this.canvas.style.backgroundSize = `${larguraPx}px ${alturaPx}px`;
    },
    
    // Configura drag and drop dos campos
    configurarDragDrop() {
        const campos = document.querySelectorAll('.campo-disponivel');
        const self = this;
        
        campos.forEach(campo => {
            campo.setAttribute('draggable', 'true');
            campo.addEventListener('click', function() {
                if (!self.validarEtapasCampos()) return;
                const campoNome = this.dataset.campo;
                const tipo = this.dataset.tipo;
                if (!campoNome || !tipo) return;

                const canvasRect = self.canvas.getBoundingClientRect();
                const larguraCanvas = parseFloat(self.canvas.dataset.largura || 50);
                const alturaCanvas = parseFloat(self.canvas.dataset.altura || 30);

                const dimensoes = self.getDimensoesPadraoPorTipo(tipo);
                const larguraElem = dimensoes.largura;
                const alturaElem = dimensoes.altura;

                const x = Math.max(0, (larguraCanvas - larguraElem) / 2);
                const y = Math.max(0, (alturaCanvas - alturaElem) / 2);

                self.adicionarElemento({
                    campo: campoNome,
                    tipo: tipo,
                    x: x,
                    y: y,
                    largura: larguraElem,
                    altura: alturaElem,
                    fonte: 'Helvetica',
                    tamanho: tipo === 'moeda' ? 12 : 8,
                    negrito: false,
                    alinhamento: 'esquerda',
                    rotacao: 0,
                    imagem_origem: campoNome === 'imagem.personalizada' ? 'url_fixa' : 'campo'
                });
            });
            campo.addEventListener('dragstart', function(e) {
                if (!self.validarEtapasCampos()) {
                    e.preventDefault();
                    return;
                }
                const payload = {
                    campo: this.dataset.campo,
                    tipo: this.dataset.tipo
                };
                e.dataTransfer.setData('text/campo', this.dataset.campo);
                e.dataTransfer.setData('text/tipo', this.dataset.tipo);
                e.dataTransfer.setData('text/plain', JSON.stringify(payload));
                e.dataTransfer.effectAllowed = 'copy';
                this.classList.add('dragging');
                console.log('Drag started:', this.dataset.campo);
            });
            
            campo.addEventListener('dragend', function(e) {
                this.classList.remove('dragging');
            });
        });
        
        // Canvas como drop target
        this.canvas.addEventListener('dragover', function(e) {
            e.preventDefault();
            e.stopPropagation();
            e.dataTransfer.dropEffect = 'copy';
            this.style.outline = '2px dashed #0d6efd';
        });
        
        this.canvas.addEventListener('dragleave', function(e) {
            this.style.outline = 'none';
        });
        
        this.canvas.addEventListener('drop', function(e) {
            e.preventDefault();
            e.stopPropagation();
            this.style.outline = 'none';

            if (!self.validarEtapasCampos()) {
                return;
            }
            
            let campo = e.dataTransfer.getData('text/campo');
            let tipo = e.dataTransfer.getData('text/tipo');
            if (!campo || !tipo) {
                try {
                    const parsed = JSON.parse(e.dataTransfer.getData('text/plain') || '{}');
                    campo = campo || parsed.campo;
                    tipo = tipo || parsed.tipo;
                } catch (err) {
                    // ignore
                }
            }
            
            console.log('Drop:', campo, tipo);
            
            if (campo) {
                const rect = self.canvas.getBoundingClientRect();
                const x = (e.clientX - rect.left) / self.zoom / self.escala;
                const y = (e.clientY - rect.top) / self.zoom / self.escala;
                
                self.adicionarElemento({
                    campo: campo,
                    tipo: tipo,
                    x: Math.max(0, x),
                    y: Math.max(0, y),
                    largura: self.getDimensoesPadraoPorTipo(tipo).largura,
                    altura: self.getDimensoesPadraoPorTipo(tipo).altura,
                    fonte: 'Helvetica',
                    tamanho: tipo === 'moeda' ? 12 : 8,
                    negrito: false,
                    alinhamento: 'esquerda',
                    rotacao: 0,
                    imagem_origem: campo === 'imagem.personalizada' ? 'url_fixa' : 'campo'
                });
            }
        });
    },
    
    // Calcula a caixa real ocupada pelo elemento considerando rotação
    obterBoundsElemento(elem) {
        const rotacao = ((elem.rotacao || 0) % 360 + 360) % 360;
        const rad = rotacao * (Math.PI / 180);
        const cos = Math.cos(rad);
        const sin = Math.sin(rad);
        const larguraBase = Math.max(0, elem.largura || 0);
        const alturaBase = Math.max(0, elem.altura || 0);
        const larguraRotacionada = Math.abs(larguraBase * cos) + Math.abs(alturaBase * sin);
        const alturaRotacionada = Math.abs(larguraBase * sin) + Math.abs(alturaBase * cos);
        const offsetX = (larguraRotacionada - larguraBase) / 2;
        const offsetY = (alturaRotacionada - alturaBase) / 2;

        return {
            left: elem.x - offsetX,
            top: elem.y - offsetY,
            right: elem.x - offsetX + larguraRotacionada,
            bottom: elem.y - offsetY + alturaRotacionada,
            width: larguraRotacionada,
            height: alturaRotacionada,
            offsetX: offsetX,
            offsetY: offsetY
        };
    },

    // Valida se elemento está dentro dos limites
    validarDentroLimites(x, y, largura, altura) {
        if (!this.tamanhoFixo.fixado) return true;

        const bounds = this.obterBoundsElemento({ x, y, largura, altura, rotacao: 0 });
        const limLargura = this.tamanhoFixo.largura;
        const limAltura = this.tamanhoFixo.altura;

        return bounds.left >= 0 && bounds.top >= 0 && bounds.right <= limLargura && bounds.bottom <= limAltura;
    },

    validarElementoDentroLimites(elem) {
        if (!this.tamanhoFixo.fixado) return true;

        const bounds = this.obterBoundsElemento(elem);
        const limLargura = this.tamanhoFixo.largura;
        const limAltura = this.tamanhoFixo.altura;

        return bounds.left >= 0 && bounds.top >= 0 && bounds.right <= limLargura && bounds.bottom <= limAltura;
    },
    
    // Ajusta elemento para caber dentro dos limites
    ajustarParaLimites(elem) {
        if (!this.tamanhoFixo.fixado) return elem;
        
        const limLargura = this.tamanhoFixo.largura;
        const limAltura = this.tamanhoFixo.altura;
        
        // Ajustar dimensões se necessário
        if (elem.largura > limLargura) elem.largura = limLargura;
        if (elem.altura > limAltura) elem.altura = limAltura;

        let bounds = this.obterBoundsElemento(elem);

        if (bounds.width > limLargura) {
            elem.x = Math.max(0, (limLargura - elem.largura) / 2);
        }
        if (bounds.height > limAltura) {
            elem.y = Math.max(0, (limAltura - elem.altura) / 2);
        }

        bounds = this.obterBoundsElemento(elem);

        if (bounds.left < 0) {
            elem.x += -bounds.left;
        }
        if (bounds.top < 0) {
            elem.y += -bounds.top;
        }

        bounds = this.obterBoundsElemento(elem);

        if (bounds.right > limLargura) {
            elem.x -= (bounds.right - limLargura);
        }
        if (bounds.bottom > limAltura) {
            elem.y -= (bounds.bottom - limAltura);
        }

        elem.x = Math.max(0, elem.x);
        elem.y = Math.max(0, elem.y);
        
        return elem;
    },
    
    // Valida todos os elementos dentro dos limites
    validarElementosDentroLimites() {
        let elementosAjustados = 0;
        
        this.elementos.forEach(elem => {
            const dentroLimites = this.validarElementoDentroLimites(elem);
            if (!dentroLimites) {
                this.ajustarParaLimites(elem);
                this.atualizarElementoVisual(elem.id);
                elementosAjustados++;
            }
        });
        
        if (elementosAjustados > 0) {
            this.mostrarToast('Aviso', `${elementosAjustados} campo(s) ajustado(s) para caber na área de impressão`, 'warning');
        }
        
        this.atualizarTamanhoCanvas();
    },
    
    // Mostra aviso de tamanho fixado
    mostrarAvisoTamanhoFixo() {
        const aviso = document.getElementById('aviso-tamanho-fixo');
        const texto = document.getElementById('tamanho-fixo-texto');
        
        if (aviso && texto && this.tamanhoFixo.fixado) {
            texto.textContent = `${this.tamanhoFixo.largura}mm x ${this.tamanhoFixo.altura}mm`;
            aviso.style.display = 'block';
        }
    },

    normalizarElemento(config, idFallback = null) {
        return {
            id: config.id || idFallback || ('elem_' + Date.now()),
            campo: config.campo,
            tipo: config.tipo,
            x: parseFloat(config.x ?? 0),
            y: parseFloat(config.y ?? 0),
            largura: parseFloat(config.largura ?? 30),
            altura: parseFloat(config.altura ?? 8),
            fonte: config.fonte || 'Helvetica',
            tamanho: parseFloat(config.tamanho ?? 8),
            negrito: !!config.negrito,
            alinhamento: config.alinhamento || 'esquerda',
            prefixo: config.prefixo || '',
            rotacao: parseInt(config.rotacao || 0, 10) || 0,
            bloqueado: !!config.bloqueado,
            quebra_automatica: Object.prototype.hasOwnProperty.call(config, 'quebra_automatica') ? !!config.quebra_automatica : config.campo === 'produto.descricao',
            valor_fixo: config.valor_fixo || (config.campo === 'texto.livre' ? 'Texto livre' : ''),
            qrcode_tipo: config.qrcode_tipo || 'automatico',
            barcode_tipo: config.barcode_tipo || 'automatico',
            barcode_formato: config.barcode_formato || 'automatico',
            barcode_ajuste: config.barcode_ajuste || 'auto',
            imagem_origem: config.imagem_origem || (config.campo === 'imagem.personalizada' ? 'upload' : 'campo'),
            imagem_ajuste: config.imagem_ajuste || 'contain'
        };
    },

    getDimensoesPadraoPorTipo(tipo) {
        if (tipo === 'barcode') return { largura: 40, altura: 12 };
        if (tipo === 'qrcode') return { largura: 20, altura: 20 };
        if (tipo === 'imagem') return { largura: 20, altura: 20 };
        return { largura: 30, altura: 8 };
    },

    obterSrcPreviewImagem(elem) {
        const src = (['url_fixa', 'upload'].includes(elem.imagem_origem) ? elem.valor_fixo : '').trim();
        if (!src) return '';
        return src;
    },

    obterValorPreviewElemento(elem) {
        if (!elem) return '';
        if (elem.tipo === 'barcode') {
            const barcodeTipo = (elem.barcode_tipo || 'automatico').trim();
            const exemplosBarcode = {
                codigo_barras: '7891234567890',
                gtin: '7891234567890',
                codigo: '12345',
                nome: 'PRODUTO123',
                lote_codigo_barras: 'LOT00123202512',
                lote_numero: 'LT2025001'
            };

            if (barcodeTipo === 'texto_livre') {
                return (elem.valor_fixo || '').trim() || 'LOT00123202512';
            }

            if (barcodeTipo !== 'automatico') {
                return exemplosBarcode[barcodeTipo] || this.getTextoExemplo(elem.campo, elem.tipo) || '7891234567890';
            }

            return this.getTextoExemplo(elem.campo, elem.tipo) || '7891234567890';
        }
        const valorBase = elem.campo === 'texto.livre'
            ? String(elem.valor_fixo || '').trim() || 'Texto livre'
            : this.getTextoExemplo(elem.campo, elem.tipo);
        return `${elem.prefixo || ''}${valorBase || ''}`;
    },

    aplicarEstiloTextoPreview(conteudo, elem) {
        if (!conteudo || !elem || ['barcode', 'qrcode', 'imagem'].includes(elem.tipo)) return;

        const quebraAutomatica = !!elem.quebra_automatica;
        conteudo.style.overflow = 'hidden';
        conteudo.style.textOverflow = quebraAutomatica ? 'clip' : 'ellipsis';
        conteudo.style.whiteSpace = quebraAutomatica ? 'normal' : 'nowrap';
        conteudo.style.wordBreak = quebraAutomatica ? 'break-word' : 'normal';
        conteudo.style.overflowWrap = quebraAutomatica ? 'anywhere' : 'normal';
        conteudo.style.lineHeight = '1.1';
        conteudo.style.display = 'block';
    },

    renderizarPreviewBarcode(conteudo, elem, escalaVisual) {
        if (!conteudo || !elem) return;

        const valorPreview = this.obterValorPreviewElemento(elem) || '7891234567890';
        const spec = resolverEspecificacaoBarcodePreview(valorPreview, elem.barcode_formato);
        if (!spec || typeof JsBarcode === 'undefined') {
            conteudo.textContent = valorPreview;
            conteudo.style.fontSize = Math.max(10, elem.altura * escalaVisual * 0.4) + 'px';
            return;
        }

        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
        svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
        svg.style.width = '100%';
        svg.style.height = '100%';
        svg.style.display = 'block';

        const ajusteBarcode = (elem.barcode_ajuste || 'auto').trim();
        const larguraPx = Math.max(30, elem.largura * escalaVisual);
        const alturaPx = Math.max(18, elem.altura * escalaVisual);
        const divisorBase = spec.format === 'EAN13' || spec.format === 'UPC' ? 95
            : spec.format === 'EAN8' ? 67
            : spec.format === 'ITF14' ? 95
            : Math.max(spec.value.length * 11, 72);
        const exibirTexto = ajusteBarcode !== 'expandir_sem_texto' && !!spec.displayValue;
        const fontSize = exibirTexto
            ? Math.max(8, Math.min(14, elem.altura * escalaVisual * 0.16))
            : 0;
        const modoExpandido = ajusteBarcode === 'expandir' || ajusteBarcode === 'expandir_sem_texto';
        const fatorExpansao = modoExpandido ? 1.35 : 1;
        const larguraBarra = Math.max(
            1,
            Math.min(
                modoExpandido ? 4.5 : 3,
                (larguraPx / divisorBase) * fatorExpansao
            )
        );
        const alturaBarra = Math.max(
            18,
            (alturaPx - (exibirTexto ? fontSize + (modoExpandido ? 4 : 6) : 4))
                * (modoExpandido ? 1.05 : 1)
        );

        conteudo.innerHTML = '';
        conteudo.style.display = 'flex';
        conteudo.style.flexDirection = 'column';
        conteudo.style.justifyContent = 'flex-start';
        conteudo.style.alignItems = 'stretch';

        const barrasWrapper = document.createElement('div');
        barrasWrapper.style.flex = '1 1 auto';
        barrasWrapper.style.minHeight = '0';
        barrasWrapper.style.display = 'flex';
        barrasWrapper.style.alignItems = 'center';
        barrasWrapper.style.justifyContent = 'center';
        barrasWrapper.appendChild(svg);
        conteudo.appendChild(barrasWrapper);

        if (exibirTexto) {
            const legenda = document.createElement('div');
            legenda.textContent = spec.value;
            legenda.style.flex = '0 0 auto';
            legenda.style.fontSize = `${Math.max(fontSize, 10)}px`;
            legenda.style.lineHeight = '1';
            legenda.style.fontWeight = '600';
            legenda.style.letterSpacing = '0.4px';
            legenda.style.textAlign = 'center';
            legenda.style.marginTop = '2px';
            legenda.style.whiteSpace = 'nowrap';
            conteudo.appendChild(legenda);
        }

        try {
            JsBarcode(svg, spec.value, {
                format: spec.format,
                displayValue: false,
                fontSize: fontSize,
                margin: 0,
                marginLeft: 0,
                marginRight: 0,
                marginTop: 0,
                marginBottom: 0,
                lineColor: '#111',
                background: '#ffffff',
                width: larguraBarra,
                height: alturaBarra,
                textMargin: 0,
                textAlign: 'center',
                valid: (ok) => {
                    if (!ok) {
                        conteudo.textContent = spec.value;
                    }
                }
            });
        } catch (error) {
            conteudo.textContent = spec.value;
            conteudo.style.fontSize = Math.max(10, elem.altura * escalaVisual * 0.4) + 'px';
        }
    },

    getObjectFitImagem(elem) {
        const ajuste = (elem.imagem_ajuste || 'contain').trim();
        const mapa = {
            contain: 'contain',
            cover: 'cover',
            fill: 'fill'
        };
        return mapa[ajuste] || 'contain';
    },

    escaparHtml(texto) {
        return String(texto ?? '')
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;');
    },

    processarUploadImagemPersonalizada(input) {
        const arquivo = input?.files?.[0];
        if (!arquivo) return;
        if (!this.elementoSelecionado || this.elementoSelecionado.tipo !== 'imagem') {
            this.mostrarToast('Aviso', 'Selecione um campo de imagem antes de carregar o arquivo.', 'warning');
            input.value = '';
            return;
        }

        if (!arquivo.type.startsWith('image/')) {
            this.mostrarToast('Aviso', 'Selecione um arquivo de imagem válido.', 'warning');
            input.value = '';
            return;
        }

        const reader = new FileReader();
        reader.onload = () => {
            this.elementoSelecionado.imagem_origem = 'upload';
            this.elementoSelecionado.valor_fixo = String(reader.result || '');
            this.atualizarElementoVisual(this.elementoSelecionado.id);
            this.mostrarPropriedades();
            this.salvarHistorico();
            this.mostrarToast('Sucesso', 'Imagem carregada no campo com sucesso.', 'success');
            input.value = '';
        };
        reader.onerror = () => {
            this.mostrarToast('Erro', 'Não foi possível ler a imagem selecionada.', 'danger');
            input.value = '';
        };
        reader.readAsDataURL(arquivo);
    },
    
    // Adiciona elemento na etiqueta
    adicionarElemento(config) {
        let elemento = this.normalizarElemento(config, 'elem_' + Date.now());
        
        // Validar e ajustar para caber nos limites
        if (this.tamanhoFixo.fixado) {
            const dentroLimites = this.validarElementoDentroLimites(elemento);
            
            if (!dentroLimites) {
                elemento = this.ajustarParaLimites(elemento);
                this.mostrarToast('Aviso', 'Campo ajustado para caber na área de impressão', 'info');
            }
        }
        
        this.elementos.push(elemento);
        this.renderizarElemento(elemento);
        this.selecionarElemento(elemento.id);
        this.salvarHistorico();
    },
    
    // Renderiza elemento no canvas
    renderizarElemento(elem) {
        const escalaVisual = this.getEscalaVisual();
        const div = document.createElement('div');
        div.id = elem.id;
        div.className = 'elemento-etiqueta';
        div.classList.toggle('bloqueado', !!elem.bloqueado);
        div.style.left = (elem.x * escalaVisual) + 'px';
        div.style.top = (elem.y * escalaVisual) + 'px';
        div.style.width = (elem.largura * escalaVisual) + 'px';
        div.style.height = (elem.altura * escalaVisual) + 'px';
        div.style.transform = `rotate(${elem.rotacao || 0}deg)`;
        div.style.transformOrigin = 'center center';
        div.style.zIndex = String(this.elementos.findIndex(e => e.id === elem.id) + 1);
        
        // Conteúdo
        const conteudo = document.createElement('div');
        conteudo.className = 'elemento-conteudo';
        conteudo.style.fontSize = (elem.tamanho * escalaVisual / 3) + 'px';
        conteudo.style.fontWeight = elem.negrito ? 'bold' : 'normal';
        conteudo.style.fontFamily = elem.fonte;
        conteudo.style.textAlign = elem.alinhamento;
        conteudo.style.width = '100%';
        conteudo.style.height = '100%';
        
        // Texto de exemplo
        const textoExemplo = this.obterValorPreviewElemento(elem);
        
        if (elem.tipo === 'barcode') {
            conteudo.classList.add('barcode');
            this.renderizarPreviewBarcode(conteudo, elem, escalaVisual);
        } else if (elem.tipo === 'qrcode') {
            conteudo.classList.add('qrcode');
            conteudo.innerHTML = '<i class="bi bi-qr-code" style="font-size: ' + (elem.altura * escalaVisual * 0.8) + 'px"></i>';
        } else if (elem.tipo === 'imagem') {
            const srcPreview = this.obterSrcPreviewImagem(elem);
            conteudo.innerHTML = srcPreview
                ? '<img src="' + srcPreview + '" alt="Imagem" style="width:100%;height:100%;object-fit:' + this.getObjectFitImagem(elem) + ';">'
                : '<i class="bi bi-image text-muted" style="font-size: ' + Math.max(12, elem.altura * escalaVisual * 0.6) + 'px"></i>';
        } else {
            this.aplicarEstiloTextoPreview(conteudo, elem);
            conteudo.textContent = textoExemplo;
        }
        
        div.appendChild(conteudo);

        const indicadorBloqueio = document.createElement('div');
        indicadorBloqueio.className = 'indicador-bloqueio';
        indicadorBloqueio.title = 'Campo bloqueado';
        indicadorBloqueio.innerHTML = '<i class="bi bi-lock-fill"></i>';
        div.appendChild(indicadorBloqueio);
        
        // Handles de redimensionamento
        ['se', 'e', 's'].forEach(pos => {
            const handle = document.createElement('div');
            handle.className = 'resize-handle ' + pos;
            handle.dataset.pos = pos;
            div.appendChild(handle);
        });
        
        // Botão remover
        const btnRemover = document.createElement('div');
        btnRemover.className = 'btn-remover';
        btnRemover.innerHTML = '×';
        btnRemover.onclick = (e) => {
            e.stopPropagation();
            this.removerElemento(elem.id);
        };
        div.appendChild(btnRemover);
        
        // Eventos
        div.addEventListener('mousedown', (e) => this.iniciarArrasto(e, elem.id));
        div.addEventListener('click', (e) => {
            e.stopPropagation();
            this.selecionarElemento(elem.id, e.ctrlKey || e.metaKey || e.shiftKey);
        });
        
        this.canvas.appendChild(div);
    },
    
    // Texto de exemplo para cada campo
    getTextoExemplo(campo, tipo) {
        const exemplos = {
            'texto.livre': 'Texto livre',
            'produto.nome': 'Nome do Produto',
            'produto.descricao': 'Descrição longa do produto para testar quebra automática dentro do limite do campo.',
            'produto.cota': 'Coleção Verão',
            'produto.codigo': '12345',
            'produto.codigo_barras': '7891234567890',
            'produto.gtin': '7891234567890',
            'produto.preco': 'R$ 29,90',
            'produto.preco_promocao': 'R$ 24,90',
            'produto.imagem': 'Imagem do Produto',
            'tabela1.nome': 'Dinheiro',
            'tabela1.preco': 'R$ 80,00',
            'tabela2.nome': 'Cartão',
            'tabela2.preco': 'R$ 100,00',
            'tabela3.nome': 'Atacado',
            'tabela3.preco': 'R$ 76,00',
            'tabela4.nome': 'Promoção',
            'tabela4.preco': 'R$ 74,90',
            'produto.unidade': 'UN',
            'lote.codigo_barras': 'LOT00123202512',
            'lote.numero': 'LT2025001',
            'lote.validade': '31/12/2025',
            'lote.fabricacao': '01/01/2025',
            'empresa.nome': 'Minha Empresa',
            'imagem.personalizada': 'Imagem Personalizada',
            'pedido.numero': 'PED-001',
            'pedido.cliente': 'João Silva',
            'pedido.quantidade': '10'
        };
        return exemplos[campo] || '{{' + campo + '}}';
    },

    obterGradeFolhaAtual() {
        const largura = parseFloat(document.getElementById('modelo-largura')?.value || this.canvas?.dataset.largura || 0);
        const altura = parseFloat(document.getElementById('modelo-altura')?.value || this.canvas?.dataset.altura || 0);
        const papel = String(document.getElementById('modelo-papel')?.value || 'a4').trim().toLowerCase();
        const nome = String(document.getElementById('modelo-nome')?.value || '').trim().toLowerCase();
        const largurasBobina = { bobina60: 60, bobina80: 80, bobina100: 100 };

        const paresConhecidos = {
            '60x40': 3,
            '65x45': 3,
            '50x30': 4
        };
        const chave = `${Math.round(largura)}x${Math.round(altura)}`;
        let colunas = this.obterColunasPorLinhaSelecionadas() || paresConhecidos[chave] || 1;
        const perfilPequeno3Colunas = largura >= 30 && largura <= 35 && altura >= 15 && altura <= 25;

        if (perfilPequeno3Colunas && papel !== 'bobina100') {
            colunas = 1;
        }

        if (largurasBobina[papel]) {
            const maxColunasFisicas = Math.max(1, Math.floor((largurasBobina[papel] + 0.5) / Math.max(largura, 1)));
            colunas = Math.min(colunas, maxColunasFisicas);
        }

        const grade = {
            colunas,
            mostrar: colunas > 1
        };
        grade.espacamentoMm = this.obterEspacamentoColunasMm(grade);
        return grade;
    },

    atualizarPreviewGradeFolha() {
        const wrapper = this.gradeHeader;
        const grid = this.gradeGrid;
        const badge = document.getElementById('preview-grade-badge');
        if (!grid || !this.canvas) return;

        const grade = this.obterGradeFolhaAtual();
        const colunas = Math.max(1, grade.colunas || 1);

        if (wrapper) {
            wrapper.style.display = grade.mostrar ? 'flex' : 'none';
        }

        if (badge) {
            badge.textContent = `${colunas} por linha`;
        }
        grid.style.gridTemplateColumns = `repeat(${colunas}, max-content)`;

        grid.innerHTML = '';
        for (let i = 0; i < colunas; i += 1) {
            const slot = document.createElement('div');
            slot.className = `editor-grade-slot ${i === 0 ? 'is-master' : ''}`;
            slot.dataset.coluna = String(i);

            const label = document.createElement('div');
            label.className = 'editor-grade-slot-label';
            label.textContent = i === 0 ? 'Coluna 1 · base' : `Coluna ${i + 1} · sincronizada`;
            if (!grade.mostrar) {
                label.style.display = 'none';
            }
            slot.appendChild(label);

            const body = document.createElement('div');
            body.className = 'editor-grade-slot-body';

            if (i === 0) {
                body.id = 'editor-grade-slot-master';
                body.appendChild(this.guiaX);
                body.appendChild(this.guiaY);
                body.appendChild(this.canvas);
            } else {
                const clone = this.canvas.cloneNode(true);
                clone.classList.add('editor-grade-mirror');
                clone.removeAttribute('id');
                clone.querySelectorAll('[id]').forEach(el => el.removeAttribute('id'));
                clone.querySelectorAll('.elemento-etiqueta').forEach(el => el.classList.remove('selecionado'));
                body.appendChild(clone);
            }

            slot.appendChild(body);
            grid.appendChild(slot);
        }
    },
    
    // Seleciona elemento
    atualizarVisibilidadePainelPropriedades(temSelecao) {
        const painelCard = document.getElementById('painel-propriedades');
        const painelBody = document.getElementById('editor-propriedades-body');
        if (!painelCard) return;

        painelCard.classList.toggle('d-none', !temSelecao);
        painelCard.setAttribute('aria-hidden', temSelecao ? 'false' : 'true');

        if (temSelecao && painelBody && !painelBody.classList.contains('show')) {
            painelBody.classList.add('show');
        }
    },

    renderizarPainelSemSelecao() {
        this.atualizarVisibilidadePainelPropriedades(false);
        const painel = document.getElementById('propriedades-conteudo');
        if (!painel) return;
        painel.innerHTML = `
            <div class="editor-empty-state text-muted">
                <div>
                    <i class="bi bi-cursor fs-3 d-block mb-2"></i>
                    <div class="fw-semibold">Selecione um campo</div>
                    <div class="editor-panel-muted">As propriedades aparecem aqui.</div>
                </div>
            </div>
        `;
    },

    obterBoundsColetivos(elementos) {
        if (!elementos.length) return null;

        return elementos.reduce((acc, elem) => {
            const bounds = this.obterBoundsElemento(elem);
            return {
                left: Math.min(acc.left, bounds.left),
                top: Math.min(acc.top, bounds.top),
                right: Math.max(acc.right, bounds.right),
                bottom: Math.max(acc.bottom, bounds.bottom)
            };
        }, {
            left: Number.POSITIVE_INFINITY,
            top: Number.POSITIVE_INFINITY,
            right: Number.NEGATIVE_INFINITY,
            bottom: Number.NEGATIVE_INFINITY
        });
    },

    alinharElementosSelecionados(modo) {
        const selecionados = this.getElementosSelecionados().filter(elem => !elem.bloqueado);
        if (!selecionados.length) {
            this.mostrarToast('Aviso', 'Selecione campos destravados para alinhar', 'warning');
            return;
        }

        if (selecionados.length === 1) {
            this.alinharElementoSelecionado(modo);
            return;
        }

        const grupo = this.obterBoundsColetivos(selecionados);
        if (!grupo) return;

        const alvoCentroX = (grupo.left + grupo.right) / 2;
        const alvoCentroY = (grupo.top + grupo.bottom) / 2;

        selecionados.forEach((elem) => {
            const bounds = this.obterBoundsElemento(elem);
            switch (modo) {
                case 'esquerda':
                    elem.x += (grupo.left - bounds.left);
                    break;
                case 'direita':
                    elem.x += (grupo.right - bounds.right);
                    break;
                case 'centro-h':
                    elem.x += (alvoCentroX - (bounds.left + bounds.width / 2));
                    break;
                case 'topo':
                    elem.y += (grupo.top - bounds.top);
                    break;
                case 'base':
                    elem.y += (grupo.bottom - bounds.bottom);
                    break;
                case 'centro-v':
                    elem.y += (alvoCentroY - (bounds.top + bounds.height / 2));
                    break;
                default:
                    break;
            }

            if (this.tamanhoFixo.fixado) {
                this.ajustarParaLimites(elem);
            }
            this.atualizarElementoVisual(elem.id);
        });

        this.mostrarPropriedades();
        this.salvarHistorico();
    },

    distribuirElementosSelecionados(eixo) {
        const selecionados = this.getElementosSelecionados().filter(elem => !elem.bloqueado);
        if (selecionados.length < 3) {
            this.mostrarToast('Aviso', 'Selecione pelo menos 3 campos destravados para distribuir', 'warning');
            return;
        }

        const itens = selecionados.map((elem) => ({ elem, bounds: this.obterBoundsElemento(elem) }));
        itens.sort((a, b) => eixo === 'horizontal' ? a.bounds.left - b.bounds.left : a.bounds.top - b.bounds.top);

        const totalTamanho = itens.reduce((acc, item) => acc + (eixo === 'horizontal' ? item.bounds.width : item.bounds.height), 0);
        const primeiro = itens[0].bounds;
        const ultimo = itens[itens.length - 1].bounds;
        const extensao = eixo === 'horizontal'
            ? (ultimo.right - primeiro.left)
            : (ultimo.bottom - primeiro.top);
        const espacamento = (extensao - totalTamanho) / (itens.length - 1);

        let cursor = eixo === 'horizontal' ? primeiro.left : primeiro.top;
        itens.forEach((item) => {
            const alvo = cursor;
            if (eixo === 'horizontal') {
                item.elem.x += (alvo - item.bounds.left);
            } else {
                item.elem.y += (alvo - item.bounds.top);
            }

            if (this.tamanhoFixo.fixado) {
                this.ajustarParaLimites(item.elem);
            }
            this.atualizarElementoVisual(item.elem.id);
            cursor += (eixo === 'horizontal' ? item.bounds.width : item.bounds.height) + espacamento;
        });

        this.mostrarPropriedades();
        this.salvarHistorico();
    },
    
    // Mostra painel de propriedades
    mostrarPropriedades() {
        const selecionados = this.getElementosSelecionados();
        if (!selecionados.length) {
            this.renderizarPainelSemSelecao();
            return;
        }

        this.atualizarVisibilidadePainelPropriedades(true);

        if (selecionados.length > 1) {
            const painel = document.getElementById('propriedades-conteudo');
            painel.innerHTML = `
                <div class="editor-mini-section">
                    <div class="small fw-bold mb-1">${selecionados.length} campos selecionados</div>
                    <div class="editor-panel-muted">Ctrl/Cmd ou Shift + clique mantém a seleção.</div>
                </div>

                <div class="editor-mini-section">
                    <label class="form-label small">Alinhar entre si</label>
                    <div class="d-grid gap-2">
                        <div class="btn-group btn-group-sm" role="group">
                            <button type="button" class="btn btn-outline-primary" onclick="EditorEtiquetas.alinharElementosSelecionados('esquerda')">
                                <i class="bi bi-align-start"></i>
                            </button>
                            <button type="button" class="btn btn-outline-primary" onclick="EditorEtiquetas.alinharElementosSelecionados('centro-h')">
                                <i class="bi bi-symmetry-horizontal"></i>
                            </button>
                            <button type="button" class="btn btn-outline-primary" onclick="EditorEtiquetas.alinharElementosSelecionados('direita')">
                                <i class="bi bi-align-end"></i>
                            </button>
                        </div>
                        <div class="btn-group btn-group-sm" role="group">
                            <button type="button" class="btn btn-outline-primary" onclick="EditorEtiquetas.alinharElementosSelecionados('topo')">
                                <i class="bi bi-align-top"></i>
                            </button>
                            <button type="button" class="btn btn-outline-primary" onclick="EditorEtiquetas.alinharElementosSelecionados('centro-v')">
                                <i class="bi bi-symmetry-vertical"></i>
                            </button>
                            <button type="button" class="btn btn-outline-primary" onclick="EditorEtiquetas.alinharElementosSelecionados('base')">
                                <i class="bi bi-align-bottom"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="editor-mini-section">
                    <label class="form-label small">Distribuir espaçamento</label>
                    <div class="btn-group btn-group-sm w-100" role="group">
                        <button type="button" class="btn btn-outline-secondary" onclick="EditorEtiquetas.distribuirElementosSelecionados('horizontal')">
                            <i class="bi bi-distribute-horizontal"></i> Horizontal
                        </button>
                        <button type="button" class="btn btn-outline-secondary" onclick="EditorEtiquetas.distribuirElementosSelecionados('vertical')">
                            <i class="bi bi-distribute-vertical"></i> Vertical
                        </button>
                    </div>
                </div>

                <div class="editor-action-grid">
                    <button class="btn btn-outline-secondary btn-sm" onclick="EditorEtiquetas.copiarElementosSelecionados()">
                        <i class="bi bi-copy"></i> Copiar seleção
                    </button>
                    <button class="btn btn-outline-secondary btn-sm" onclick="EditorEtiquetas.duplicarElementoSelecionado()">
                        <i class="bi bi-files"></i> Duplicar seleção
                    </button>
                    <button class="btn btn-outline-danger btn-sm" onclick="EditorEtiquetas.removerElementosSelecionados()" style="grid-column:1 / -1;">
                        <i class="bi bi-trash"></i> Remover seleção
                    </button>
                </div>
            `;
            return;
        }

        const elem = selecionados[0];
        const indiceCamada = this.elementos.findIndex(e => e.id === elem.id) + 1;
        const totalCamadas = this.elementos.length;
        const abaAtiva = ['prop-tab-layout', 'prop-tab-content', 'prop-tab-style'].includes(this.abaPropriedadesAtiva)
            ? this.abaPropriedadesAtiva
            : 'prop-tab-layout';
        
        const painel = document.getElementById('propriedades-conteudo');
        painel.innerHTML = `
            <div class="editor-mini-section">
                <label class="form-label small fw-bold">${elem.campo}</label>
                <div class="editor-summary-grid mt-2">
                    <div class="editor-mini-section p-2">
                        <div class="editor-panel-muted">Camada</div>
                        <div class="fw-semibold">${indiceCamada} de ${totalCamadas}</div>
                    </div>
                    <div class="editor-mini-section p-2">
                        <div class="editor-panel-muted">Tipo</div>
                        <div class="fw-semibold text-capitalize">${elem.tipo}</div>
                    </div>
                </div>
            </div>

            <div class="editor-mini-section">
                <label class="form-label small">${elem.tipo === 'imagem' ? 'Rotação da imagem' : 'Rotação'}: <strong id="rotacao-valor">${elem.rotacao || 0}°</strong></label>
                <input type="range" class="form-range" id="prop-rotacao" min="0" max="360" step="1" value="${elem.rotacao || 0}">
                <div class="editor-action-grid">
                    <button class="btn btn-outline-secondary btn-sm px-2 py-0" onclick="document.getElementById('prop-rotacao').value=0;document.getElementById('prop-rotacao').dispatchEvent(new Event('input'));">0°</button>
                    <button class="btn btn-outline-secondary btn-sm px-2 py-0" onclick="document.getElementById('prop-rotacao').value=90;document.getElementById('prop-rotacao').dispatchEvent(new Event('input'));">90°</button>
                    <button class="btn btn-outline-secondary btn-sm px-2 py-0" onclick="document.getElementById('prop-rotacao').value=180;document.getElementById('prop-rotacao').dispatchEvent(new Event('input'));">180°</button>
                    <button class="btn btn-outline-secondary btn-sm px-2 py-0" onclick="document.getElementById('prop-rotacao').value=270;document.getElementById('prop-rotacao').dispatchEvent(new Event('input'));">270°</button>
                </div>
            </div>

            <div class="editor-mini-section">
                <label class="form-label small">Posição rápida na etiqueta</label>
                <div class="d-grid gap-2">
                    <div class="btn-group btn-group-sm" role="group">
                        <button type="button" class="btn btn-outline-primary" onclick="EditorEtiquetas.alinharElementoSelecionado('esquerda')"><i class="bi bi-align-start"></i></button>
                        <button type="button" class="btn btn-outline-primary" onclick="EditorEtiquetas.alinharElementoSelecionado('centro-h')"><i class="bi bi-symmetry-horizontal"></i></button>
                        <button type="button" class="btn btn-outline-primary" onclick="EditorEtiquetas.alinharElementoSelecionado('direita')"><i class="bi bi-align-end"></i></button>
                    </div>
                    <div class="btn-group btn-group-sm" role="group">
                        <button type="button" class="btn btn-outline-primary" onclick="EditorEtiquetas.alinharElementoSelecionado('topo')"><i class="bi bi-align-top"></i></button>
                        <button type="button" class="btn btn-outline-primary" onclick="EditorEtiquetas.alinharElementoSelecionado('centro-v')"><i class="bi bi-symmetry-vertical"></i></button>
                        <button type="button" class="btn btn-outline-primary" onclick="EditorEtiquetas.alinharElementoSelecionado('base')"><i class="bi bi-align-bottom"></i></button>
                    </div>
                </div>
                <div class="editor-panel-muted mt-2">Os campos <code>X</code> e <code>Y</code> usam o canto superior esquerdo do elemento. Para encostar no fim da etiqueta, use o botão de alinhar na base.</div>
            </div>

            ${elem.tipo !== 'barcode' && elem.tipo !== 'qrcode' && elem.tipo !== 'imagem' ? `
            <div class="editor-mini-section">
                <label class="form-label small">Alinhamento</label>
                <div class="btn-group w-100 mb-2" role="group">
                    <input type="radio" class="btn-check" name="alinhamento" id="align-esq" value="esquerda" ${elem.alinhamento === 'esquerda' ? 'checked' : ''}>
                    <label class="btn btn-outline-secondary btn-sm" for="align-esq"><i class="bi bi-text-left"></i></label>
                    <input type="radio" class="btn-check" name="alinhamento" id="align-centro" value="centro" ${elem.alinhamento === 'centro' ? 'checked' : ''}>
                    <label class="btn btn-outline-secondary btn-sm" for="align-centro"><i class="bi bi-text-center"></i></label>
                    <input type="radio" class="btn-check" name="alinhamento" id="align-dir" value="direita" ${elem.alinhamento === 'direita' ? 'checked' : ''}>
                    <label class="btn btn-outline-secondary btn-sm" for="align-dir"><i class="bi bi-text-right"></i></label>
                </div>
                <div class="d-grid gap-2">
                    <div class="btn-group btn-group-sm" role="group">
                        <button type="button" class="btn btn-outline-primary" onclick="EditorEtiquetas.alinharElementoSelecionado('esquerda')"><i class="bi bi-align-start"></i></button>
                        <button type="button" class="btn btn-outline-primary" onclick="EditorEtiquetas.alinharElementoSelecionado('centro-h')"><i class="bi bi-symmetry-horizontal"></i></button>
                        <button type="button" class="btn btn-outline-primary" onclick="EditorEtiquetas.alinharElementoSelecionado('direita')"><i class="bi bi-align-end"></i></button>
                    </div>
                    <div class="btn-group btn-group-sm" role="group">
                        <button type="button" class="btn btn-outline-primary" onclick="EditorEtiquetas.alinharElementoSelecionado('topo')"><i class="bi bi-align-top"></i></button>
                        <button type="button" class="btn btn-outline-primary" onclick="EditorEtiquetas.alinharElementoSelecionado('centro-v')"><i class="bi bi-symmetry-vertical"></i></button>
                        <button type="button" class="btn btn-outline-primary" onclick="EditorEtiquetas.alinharElementoSelecionado('base')"><i class="bi bi-align-bottom"></i></button>
                    </div>
                </div>
            </div>
            ` : ''}

            <ul class="nav nav-pills nav-fill editor-props-tabs mb-2" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link ${abaAtiva === 'prop-tab-layout' ? 'active' : ''}" data-bs-toggle="tab" data-bs-target="#prop-tab-layout" type="button" role="tab">Layout</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link ${abaAtiva === 'prop-tab-content' ? 'active' : ''}" data-bs-toggle="tab" data-bs-target="#prop-tab-content" type="button" role="tab">Conteúdo</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link ${abaAtiva === 'prop-tab-style' ? 'active' : ''}" data-bs-toggle="tab" data-bs-target="#prop-tab-style" type="button" role="tab">Estilo</button>
                </li>
            </ul>

            <div class="tab-content">
                <div class="tab-pane fade ${abaAtiva === 'prop-tab-layout' ? 'show active' : ''}" id="prop-tab-layout" role="tabpanel">
                    <div class="editor-tab-pane-compact">
                        <div class="editor-mini-section">
                            <div class="form-check form-switch mb-2">
                                <input class="form-check-input" type="checkbox" id="prop-bloqueado" ${elem.bloqueado ? 'checked' : ''}>
                                <label class="form-check-label small" for="prop-bloqueado">Travar campo</label>
                            </div>
                            <div class="btn-group btn-group-sm w-100" role="group">
                                <button type="button" class="btn btn-outline-secondary" onclick="EditorEtiquetas.moverCamadaSelecionada('tras')" title="Enviar para trás"><i class="bi bi-send-backward"></i></button>
                                <button type="button" class="btn btn-outline-secondary" onclick="EditorEtiquetas.moverCamadaSelecionada('frente')" title="Trazer para frente"><i class="bi bi-send-forward"></i></button>
                            </div>
                        </div>

                        <div class="editor-mini-section">
                            <div class="row g-2 mb-2">
                                <div class="col-6">
                                    <label class="form-label small">X (mm)</label>
                                    <input type="number" class="form-control form-control-sm" id="prop-x" value="${elem.x.toFixed(1)}" step="0.5">
                                </div>
                                <div class="col-6">
                                    <label class="form-label small">Y (mm)</label>
                                    <input type="number" class="form-control form-control-sm" id="prop-y" value="${elem.y.toFixed(1)}" step="0.5">
                                </div>
                            </div>
                            <div class="row g-2 mb-0">
                                <div class="col-6">
                                    <label class="form-label small">Largura</label>
                                    <input type="number" class="form-control form-control-sm" id="prop-largura" value="${elem.largura.toFixed(1)}" step="0.5" min="5">
                                </div>
                                <div class="col-6">
                                    <label class="form-label small">Altura</label>
                                    <input type="number" class="form-control form-control-sm" id="prop-altura" value="${elem.altura.toFixed(1)}" step="0.5" min="3">
                                </div>
                            </div>
                        </div>

                        <div class="editor-mini-section">
                            <div class="editor-panel-muted">Rotação visível no topo do painel para acesso rápido.</div>
                        </div>
                    </div>
                </div>

                <div class="tab-pane fade ${abaAtiva === 'prop-tab-content' ? 'show active' : ''}" id="prop-tab-content" role="tabpanel">
                    <div class="editor-tab-pane-compact">
                        ${elem.tipo === 'qrcode' ? `
                        <div class="editor-mini-section">
                            <label class="form-label small">Conteúdo do QR Code</label>
                            <select class="form-select form-select-sm" id="prop-qrcode-tipo">
                                <option value="automatico" ${elem.qrcode_tipo === 'automatico' ? 'selected' : ''}>Automático do sistema</option>
                                <option value="codigo_barras" ${elem.qrcode_tipo === 'codigo_barras' ? 'selected' : ''}>Código de Barras / GTIN</option>
                                <option value="gtin" ${elem.qrcode_tipo === 'gtin' ? 'selected' : ''}>GTIN</option>
                                <option value="codigo" ${elem.qrcode_tipo === 'codigo' ? 'selected' : ''}>Código interno</option>
                                <option value="nome" ${elem.qrcode_tipo === 'nome' ? 'selected' : ''}>Nome do produto</option>
                                <option value="url_edicao" ${elem.qrcode_tipo === 'url_edicao' ? 'selected' : ''}>Link interno do produto</option>
                                <option value="texto_livre" ${elem.qrcode_tipo === 'texto_livre' ? 'selected' : ''}>Texto / URL livre</option>
                            </select>
                        </div>
                        <div class="editor-mini-section ${elem.qrcode_tipo === 'texto_livre' ? '' : 'd-none'}" id="prop-valor-fixo-wrapper">
                            <label class="form-label small">Texto / URL</label>
                            <textarea class="form-control form-control-sm" id="prop-valor-fixo" rows="3" placeholder="https://... ou texto livre">${elem.valor_fixo || ''}</textarea>
                        </div>
                        ` : ''}

                        ${elem.tipo === 'barcode' ? `
                        <div class="editor-mini-section">
                            <label class="form-label small">Conteúdo do código de barras</label>
                            <select class="form-select form-select-sm" id="prop-barcode-tipo">
                                <option value="automatico" ${elem.barcode_tipo === 'automatico' ? 'selected' : ''}>Usar o campo atual</option>
                                <option value="codigo_barras" ${elem.barcode_tipo === 'codigo_barras' ? 'selected' : ''}>Código de barras do produto</option>
                                <option value="gtin" ${elem.barcode_tipo === 'gtin' ? 'selected' : ''}>GTIN / EAN do produto</option>
                                <option value="codigo" ${elem.barcode_tipo === 'codigo' ? 'selected' : ''}>Código interno do produto</option>
                                <option value="lote_codigo_barras" ${elem.barcode_tipo === 'lote_codigo_barras' ? 'selected' : ''}>Código de barras do lote</option>
                                <option value="lote_numero" ${elem.barcode_tipo === 'lote_numero' ? 'selected' : ''}>Número do lote</option>
                                <option value="nome" ${elem.barcode_tipo === 'nome' ? 'selected' : ''}>Nome do produto</option>
                                <option value="texto_livre" ${elem.barcode_tipo === 'texto_livre' ? 'selected' : ''}>Texto livre</option>
                            </select>
                        </div>
                        <div class="editor-mini-section ${elem.barcode_tipo === 'texto_livre' ? '' : 'd-none'}" id="prop-barcode-valor-fixo-wrapper">
                            <label class="form-label small">Texto do barcode</label>
                            <textarea class="form-control form-control-sm" id="prop-valor-fixo" rows="2" placeholder="Ex.: LT2025001 ou código interno do lote">${this.escaparHtml(elem.valor_fixo || '')}</textarea>
                        </div>
                        <div class="editor-mini-section">
                            <label class="form-label small">Formato do código de barras</label>
                            <select class="form-select form-select-sm" id="prop-barcode-formato">
                                <option value="automatico" ${elem.barcode_formato === 'automatico' ? 'selected' : ''}>Automático</option>
                                <option value="code128" ${elem.barcode_formato === 'code128' ? 'selected' : ''}>Code 128 (alfanumérico)</option>
                                <option value="ean13" ${elem.barcode_formato === 'ean13' ? 'selected' : ''}>EAN-13</option>
                                <option value="ean8" ${elem.barcode_formato === 'ean8' ? 'selected' : ''}>EAN-8</option>
                                <option value="upca" ${elem.barcode_formato === 'upca' ? 'selected' : ''}>UPC-A</option>
                                <option value="itf14" ${elem.barcode_formato === 'itf14' ? 'selected' : ''}>ITF-14</option>
                            </select>
                        </div>
                        <div class="editor-mini-section">
                            <label class="form-label small">Ajuste do código de barras</label>
                            <select class="form-select form-select-sm" id="prop-barcode-ajuste">
                                <option value="auto" ${elem.barcode_ajuste === 'auto' ? 'selected' : ''}>Automático</option>
                                <option value="expandir" ${elem.barcode_ajuste === 'expandir' ? 'selected' : ''}>Expandir para ocupar o campo</option>
                                <option value="expandir_sem_texto" ${elem.barcode_ajuste === 'expandir_sem_texto' ? 'selected' : ''}>Expandir sem texto embaixo</option>
                            </select>
                            <div class="editor-panel-muted mt-1">Use a largura/altura do campo para controlar o tamanho final na impressão.</div>
                            <button type="button" class="btn btn-outline-primary btn-sm mt-2 w-100" onclick="EditorEtiquetas.maximizarBarcodeSelecionado()">
                                <i class="bi bi-arrows-fullscreen"></i> Maximizar barcode na área livre
                            </button>
                        </div>
                        ` : ''}

                        ${elem.tipo === 'imagem' ? `
                        <div class="editor-mini-section">
                            <label class="form-label small">Origem da imagem</label>
                            <select class="form-select form-select-sm" id="prop-imagem-origem">
                                <option value="campo" ${elem.imagem_origem === 'campo' ? 'selected' : ''}>Imagem do sistema</option>
                                <option value="upload" ${elem.imagem_origem === 'upload' ? 'selected' : ''}>Imagem personalizada</option>
                                <option value="url_fixa" ${elem.imagem_origem === 'url_fixa' ? 'selected' : ''}>URL / Data URL</option>
                            </select>
                        </div>
                        <div class="editor-mini-section ${elem.imagem_origem === 'upload' ? '' : 'd-none'}" id="prop-upload-imagem-wrapper">
                            <label class="form-label small">Carregar imagem</label>
                            <input type="file" class="form-control form-control-sm" id="prop-imagem-upload" accept="image/*">
                        </div>
                        <div class="editor-mini-section ${elem.imagem_origem === 'url_fixa' ? '' : 'd-none'}" id="prop-valor-fixo-wrapper">
                            <label class="form-label small">URL ou Data URL</label>
                            <textarea class="form-control form-control-sm" id="prop-valor-fixo" rows="3" placeholder="https://... ou data:image/...">${this.escaparHtml(elem.valor_fixo || '')}</textarea>
                        </div>
                        <div class="editor-mini-section">
                            <label class="form-label small">Ajuste</label>
                            <select class="form-select form-select-sm" id="prop-imagem-ajuste">
                                <option value="contain" ${elem.imagem_ajuste === 'contain' ? 'selected' : ''}>Caber sem cortar</option>
                                <option value="cover" ${elem.imagem_ajuste === 'cover' ? 'selected' : ''}>Preencher o campo</option>
                                <option value="fill" ${elem.imagem_ajuste === 'fill' ? 'selected' : ''}>Esticar para ocupar tudo</option>
                            </select>
                        </div>
                        ` : ''}

                        ${elem.tipo !== 'barcode' && elem.tipo !== 'qrcode' && elem.tipo !== 'imagem' ? `
                        <div class="editor-mini-section">
                            ${elem.campo === 'texto.livre' ? `
                            <label class="form-label small">Conteúdo do texto livre</label>
                            <textarea class="form-control form-control-sm" id="prop-valor-fixo" rows="3" placeholder="Digite o texto fixo da etiqueta">${this.escaparHtml(elem.valor_fixo || '')}</textarea>
                            <div class="editor-panel-muted mt-1">Perfeito para observações, slogans, ofertas ou avisos fixos.</div>
                            ` : `
                            <label class="form-label small">Prefixo</label>
                            <input type="text" class="form-control form-control-sm" id="prop-prefixo" value="${elem.prefixo || ''}" placeholder="Ex: R$, Lote:">
                            `}
                        </div>
                        <div class="editor-mini-section">
                            <div class="form-check form-switch mb-1">
                                <input class="form-check-input" type="checkbox" id="prop-quebra-automatica" ${elem.quebra_automatica ? 'checked' : ''}>
                                <label class="form-check-label small" for="prop-quebra-automatica">Quebra automática de linha</label>
                            </div>
                            <div class="editor-panel-muted">Quando o texto ultrapassar a largura do campo, ele quebra em novas linhas até o limite da altura disponível.</div>
                        </div>
                        ` : '<div class="editor-mini-section"><div class="editor-panel-muted">Esse tipo de campo usa o conteúdo vindo do cadastro/dados de impressão.</div></div>'}
                    </div>
                </div>

                <div class="tab-pane fade ${abaAtiva === 'prop-tab-style' ? 'show active' : ''}" id="prop-tab-style" role="tabpanel">
                    <div class="editor-tab-pane-compact">
                        ${elem.tipo !== 'barcode' && elem.tipo !== 'qrcode' && elem.tipo !== 'imagem' ? `
                        <div class="editor-mini-section">
                            <label class="form-label small">Fonte</label>
                            <select class="form-select form-select-sm" id="prop-fonte">
                                <option value="Helvetica" ${elem.fonte === 'Helvetica' ? 'selected' : ''}>Helvetica</option>
                                <option value="Arial" ${elem.fonte === 'Arial' ? 'selected' : ''}>Arial</option>
                                <option value="Courier" ${elem.fonte === 'Courier' ? 'selected' : ''}>Courier</option>
                            </select>
                        </div>

                        <div class="editor-mini-section">
                            <div class="row g-2 mb-2">
                                <div class="col-6">
                                    <label class="form-label small">Tamanho</label>
                                    <input type="number" class="form-control form-control-sm" id="prop-tamanho" value="${elem.tamanho}" min="6" max="72">
                                </div>
                                <div class="col-6 d-flex align-items-end">
                                    <div class="form-check mb-1">
                                        <input class="form-check-input" type="checkbox" id="prop-negrito" ${elem.negrito ? 'checked' : ''}>
                                        <label class="form-check-label small" for="prop-negrito"><strong>Negrito</strong></label>
                                    </div>
                                </div>
                            </div>
                            <div class="editor-panel-muted">Alinhamento visível no topo do painel para acesso rápido.</div>
                        </div>
                        ` : '<div class="editor-mini-section"><div class="editor-panel-muted">Esse tipo de campo não possui ajustes de fonte/alinhamento textual.</div></div>'}
                    </div>
                </div>
            </div>

            <div class="editor-action-grid mt-2">
                <button class="btn btn-outline-secondary btn-sm" onclick="EditorEtiquetas.copiarElementosSelecionados()"><i class="bi bi-clipboard"></i> Copiar</button>
                <button class="btn btn-outline-secondary btn-sm" onclick="EditorEtiquetas.duplicarElementoSelecionado()"><i class="bi bi-copy"></i> Duplicar</button>
                <button class="btn btn-outline-danger btn-sm" onclick="EditorEtiquetas.removerElemento('${elem.id}')" style="grid-column:1 / -1;"><i class="bi bi-trash"></i> Remover campo</button>
            </div>
        `;
        
        // Eventos de alteração
        this.configurarEventosPropriedades();
    },
    
    // Configura eventos do painel de propriedades
    configurarEventosPropriedades() {
        if (this.getElementosSelecionados().length !== 1) {
            return;
        }

        document.querySelectorAll('.editor-props-tabs [data-bs-toggle="tab"]').forEach((btn) => {
            if (btn.dataset.boundPropsTab === 'true') return;
            btn.dataset.boundPropsTab = 'true';
            btn.addEventListener('shown.bs.tab', (event) => {
                const alvo = event.target?.getAttribute('data-bs-target') || '#prop-tab-layout';
                this.abaPropriedadesAtiva = alvo.replace('#', '');
            });
        });

        const inputs = ['x', 'y', 'largura', 'altura', 'tamanho', 'prefixo'];
        inputs.forEach(prop => {
            const input = document.getElementById('prop-' + prop);
            if (input) {
                input.addEventListener('change', () => {
                    if (this.elementoSelecionado) {
                        this.elementoSelecionado[prop] = prop === 'prefixo' ? input.value : parseFloat(input.value);
                        if (['x', 'y', 'largura', 'altura'].includes(prop) && this.tamanhoFixo.fixado) {
                            this.ajustarParaLimites(this.elementoSelecionado);
                        }
                        this.atualizarElementoVisual(this.elementoSelecionado.id);
                        this.mostrarPropriedades();
                        this.salvarHistorico();
                    }
                });
            }
        });
        
        const fonte = document.getElementById('prop-fonte');
        if (fonte) {
            fonte.addEventListener('change', () => {
                if (this.elementoSelecionado) {
                    this.elementoSelecionado.fonte = fonte.value;
                    this.atualizarElementoVisual(this.elementoSelecionado.id);
                    this.salvarHistorico();
                }
            });
        }
        
        const negrito = document.getElementById('prop-negrito');
        if (negrito) {
            negrito.addEventListener('change', () => {
                if (this.elementoSelecionado) {
                    this.elementoSelecionado.negrito = negrito.checked;
                    this.atualizarElementoVisual(this.elementoSelecionado.id);
                    this.salvarHistorico();
                }
            });
        }

        const bloqueado = document.getElementById('prop-bloqueado');
        if (bloqueado) {
            bloqueado.addEventListener('change', () => {
                if (this.elementoSelecionado) {
                    this.elementoSelecionado.bloqueado = bloqueado.checked;
                    this.atualizarElementoVisual(this.elementoSelecionado.id);
                    this.mostrarPropriedades();
                    this.salvarHistorico();
                }
            });
        }
        
        document.querySelectorAll('input[name="alinhamento"]').forEach(radio => {
            radio.addEventListener('change', () => {
                if (this.elementoSelecionado) {
                    this.elementoSelecionado.alinhamento = radio.value;
                    this.atualizarElementoVisual(this.elementoSelecionado.id);
                    this.salvarHistorico();
                }
            });
        });

        const rotacao = document.getElementById('prop-rotacao');
        const rotacaoValor = document.getElementById('rotacao-valor');
        if (rotacao) {
            rotacao.addEventListener('input', () => {
                if (rotacaoValor) {
                    rotacaoValor.textContent = rotacao.value + '°';
                }
                if (this.elementoSelecionado) {
                    this.elementoSelecionado.rotacao = parseInt(rotacao.value, 10) || 0;
                    if (this.tamanhoFixo.fixado) {
                        this.ajustarParaLimites(this.elementoSelecionado);
                    }
                    this.atualizarElementoVisual(this.elementoSelecionado.id);
                }
            });

            rotacao.addEventListener('change', () => {
                if (this.elementoSelecionado) {
                    this.mostrarPropriedades();
                    this.salvarHistorico();
                }
            });
        }

        const qrcodeTipo = document.getElementById('prop-qrcode-tipo');
        if (qrcodeTipo) {
            qrcodeTipo.addEventListener('change', () => {
                if (this.elementoSelecionado) {
                    this.elementoSelecionado.qrcode_tipo = qrcodeTipo.value;
                    if (qrcodeTipo.value !== 'texto_livre' && this.elementoSelecionado.campo === 'produto.qrcode') {
                        this.elementoSelecionado.valor_fixo = this.elementoSelecionado.valor_fixo || '';
                    }
                    this.mostrarPropriedades();
                    this.salvarHistorico();
                }
            });
        }

        const barcodeTipo = document.getElementById('prop-barcode-tipo');
        if (barcodeTipo) {
            barcodeTipo.addEventListener('change', () => {
                if (this.elementoSelecionado) {
                    this.elementoSelecionado.barcode_tipo = barcodeTipo.value;
                    this.atualizarElementoVisual(this.elementoSelecionado.id);
                    this.mostrarPropriedades();
                    this.salvarHistorico();
                }
            });
        }

        const barcodeFormato = document.getElementById('prop-barcode-formato');
        if (barcodeFormato) {
            barcodeFormato.addEventListener('change', () => {
                if (this.elementoSelecionado) {
                    this.elementoSelecionado.barcode_formato = barcodeFormato.value;
                    this.atualizarElementoVisual(this.elementoSelecionado.id);
                    this.salvarHistorico();
                }
            });
        }

        const barcodeAjuste = document.getElementById('prop-barcode-ajuste');
        if (barcodeAjuste) {
            barcodeAjuste.addEventListener('change', () => {
                if (this.elementoSelecionado) {
                    this.elementoSelecionado.barcode_ajuste = barcodeAjuste.value;
                    this.atualizarElementoVisual(this.elementoSelecionado.id);
                    this.salvarHistorico();
                }
            });
        }

        const imagemOrigem = document.getElementById('prop-imagem-origem');
        if (imagemOrigem) {
            imagemOrigem.addEventListener('change', () => {
                if (this.elementoSelecionado) {
                    this.elementoSelecionado.imagem_origem = imagemOrigem.value;
                    this.atualizarElementoVisual(this.elementoSelecionado.id);
                    this.mostrarPropriedades();
                    this.salvarHistorico();
                }
            });
        }

        const imagemUpload = document.getElementById('prop-imagem-upload');
        if (imagemUpload) {
            imagemUpload.addEventListener('change', () => this.processarUploadImagemPersonalizada(imagemUpload));
        }

        const imagemAjuste = document.getElementById('prop-imagem-ajuste');
        if (imagemAjuste) {
            imagemAjuste.addEventListener('change', () => {
                if (this.elementoSelecionado) {
                    this.elementoSelecionado.imagem_ajuste = imagemAjuste.value;
                    this.atualizarElementoVisual(this.elementoSelecionado.id);
                    this.salvarHistorico();
                }
            });
        }

        const valorFixo = document.getElementById('prop-valor-fixo');
        if (valorFixo) {
            valorFixo.addEventListener('change', () => {
                if (this.elementoSelecionado) {
                    this.elementoSelecionado.valor_fixo = valorFixo.value;
                    this.atualizarElementoVisual(this.elementoSelecionado.id);
                    this.mostrarPropriedades();
                    this.salvarHistorico();
                }
            });
        }

        const quebraAutomatica = document.getElementById('prop-quebra-automatica');
        if (quebraAutomatica) {
            quebraAutomatica.addEventListener('change', () => {
                if (this.elementoSelecionado) {
                    this.elementoSelecionado.quebra_automatica = quebraAutomatica.checked;
                    this.atualizarElementoVisual(this.elementoSelecionado.id);
                    this.salvarHistorico();
                }
            });
        }
    },
    
    // Atualiza visual de um elemento
    atualizarElementoVisual(id) {
        const div = document.getElementById(id);
        const elem = this.elementos.find(e => e.id === id);
        if (!div || !elem) return;
        const escalaVisual = this.getEscalaVisual();
        div.classList.toggle('bloqueado', !!elem.bloqueado);
        div.style.zIndex = String(this.elementos.findIndex(e => e.id === id) + 1);
        
        div.style.left = (elem.x * escalaVisual) + 'px';
        div.style.top = (elem.y * escalaVisual) + 'px';
        div.style.width = (elem.largura * escalaVisual) + 'px';
        div.style.height = (elem.altura * escalaVisual) + 'px';
        div.style.transform = `rotate(${elem.rotacao || 0}deg)`;
        div.style.transformOrigin = 'center center';
        
        const conteudo = div.querySelector('.elemento-conteudo');
        if (conteudo && elem.tipo === 'barcode') {
            this.renderizarPreviewBarcode(conteudo, elem, escalaVisual);
        }
        if (conteudo && elem.tipo === 'qrcode') {
            conteudo.innerHTML = '<i class="bi bi-qr-code" style="font-size: ' + (elem.altura * escalaVisual * 0.8) + 'px"></i>';
        }
        if (conteudo && elem.tipo === 'imagem') {
            const srcPreview = this.obterSrcPreviewImagem(elem);
            conteudo.innerHTML = srcPreview
                ? '<img src="' + srcPreview + '" alt="Imagem" style="width:100%;height:100%;object-fit:' + this.getObjectFitImagem(elem) + ';">'
                : '<i class="bi bi-image text-muted" style="font-size: ' + Math.max(12, elem.altura * escalaVisual * 0.6) + 'px"></i>';
        }
        if (conteudo && elem.tipo !== 'barcode' && elem.tipo !== 'qrcode') {
            conteudo.style.fontSize = (elem.tamanho * escalaVisual / 3) + 'px';
            conteudo.style.fontWeight = elem.negrito ? 'bold' : 'normal';
            conteudo.style.fontFamily = elem.fonte;
            conteudo.style.textAlign = elem.alinhamento;
            if (elem.tipo !== 'imagem') {
                this.aplicarEstiloTextoPreview(conteudo, elem);
                conteudo.textContent = this.obterValorPreviewElemento(elem);
            }
        }
        this.atualizarPreviewGradeFolha();
    },

    renderizarLayoutAtual() {
        this.canvas.innerHTML = '';
        this.elementos.forEach(elem => this.renderizarElemento(elem));
        this.mostrarGuiasAlinhamento();
        this.atualizarPreviewGradeFolha();

        const idsSelecionados = this.elementosSelecionados.filter(id => this.elementos.some(e => e.id === id));
        if (idsSelecionados.length) {
            this.elementosSelecionados = idsSelecionados;
            this.elementoSelecionado = this.elementos.find(e => e.id === idsSelecionados[idsSelecionados.length - 1]) || null;
            this.atualizarSelecaoVisual();
            this.mostrarPropriedades();
            return;
        }

        if (this.elementoSelecionado) {
            const selecionadoExiste = this.elementos.find(e => e.id === this.elementoSelecionado.id);
            if (selecionadoExiste) {
                this.elementosSelecionados = [selecionadoExiste.id];
                this.atualizarSelecaoVisual();
                this.mostrarPropriedades();
                return;
            }
        }

        this.limparSelecao();
    },
    
    // Inicia arrasto de elemento
    iniciarArrasto(e, id) {
        if (e.target.classList.contains('resize-handle')) {
            this.iniciarRedimensionamento(e, id, e.target.dataset.pos);
            return;
        }

        if (e.ctrlKey || e.metaKey || e.shiftKey) {
            this.selecionarElemento(id, true);
            return;
        }
        
        const elem = this.elementos.find(el => el.id === id);
        if (!elem) return;
        if (elem.bloqueado) {
            this.selecionarElemento(id);
            this.mostrarToast('Campo travado', 'Destrave o campo para mover ou redimensionar.', 'warning');
            return;
        }

        if (!this.elementosSelecionados.includes(id)) {
            this.selecionarElemento(id);
        }

        const selecionados = this.getElementosSelecionados();
        const destravados = selecionados.filter(item => !item.bloqueado);
        if (!destravados.length) {
            this.mostrarToast('Campo travado', 'Selecione ao menos um campo destravado para mover.', 'warning');
            return;
        }
        
        const startX = e.clientX;
        const startY = e.clientY;
        const origem = destravados.map(item => ({ id: item.id, x: item.x, y: item.y }));
        
        const mover = (e) => {
            const dx = (e.clientX - startX) / this.escala / this.zoom;
            const dy = (e.clientY - startY) / this.escala / this.zoom;

            destravados.forEach((item) => {
                const posOriginal = origem.find(orig => orig.id === item.id);
                item.x = Math.max(0, posOriginal.x + dx);
                item.y = Math.max(0, posOriginal.y + dy);
            });

            if (destravados.length === 1) {
                this.aplicarSnapMovimento(destravados[0]);
                if (this.tamanhoFixo.fixado && !this.validarElementoDentroLimites(destravados[0])) {
                    this.ajustarParaLimites(destravados[0]);
                }
            } else if (this.tamanhoFixo.fixado) {
                destravados.forEach((item) => this.ajustarParaLimites(item));
            }

            destravados.forEach((item) => this.atualizarElementoVisual(item.id));
            this.mostrarPropriedades();
        };
        
        const parar = () => {
            document.removeEventListener('mousemove', mover);
            document.removeEventListener('mouseup', parar);
            this.ocultarGuiasAlinhamento();
            this.salvarHistorico();
        };
        
        document.addEventListener('mousemove', mover);
        document.addEventListener('mouseup', parar);
    },
    
    // Inicia redimensionamento
    iniciarRedimensionamento(e, id, pos) {
        e.stopPropagation();
        
        const elem = this.elementos.find(el => el.id === id);
        if (!elem) return;
        if (elem.bloqueado) {
            this.mostrarToast('Campo travado', 'Destrave o campo para redimensionar.', 'warning');
            return;
        }
        
        const startX = e.clientX;
        const startY = e.clientY;
        const origW = elem.largura;
        const origH = elem.altura;
        
        const redimensionar = (e) => {
            const dx = (e.clientX - startX) / this.escala / this.zoom;
            const dy = (e.clientY - startY) / this.escala / this.zoom;

            this.ocultarGuiasAlinhamento();
            
            if (pos.includes('e')) {
                elem.largura = Math.max(5, origW + dx);
            }
            if (pos.includes('s')) {
                elem.altura = Math.max(3, origH + dy);
            }

            if (this.tamanhoFixo.fixado && !this.validarElementoDentroLimites(elem)) {
                this.ajustarParaLimites(elem);
            }
            
            this.atualizarElementoVisual(id);
            this.mostrarPropriedades();
        };
        
        const parar = () => {
            document.removeEventListener('mousemove', redimensionar);
            document.removeEventListener('mouseup', parar);
            this.ocultarGuiasAlinhamento();
            this.salvarHistorico();
        };
        
        document.addEventListener('mousemove', redimensionar);
        document.addEventListener('mouseup', parar);
    },
    
    // Remove elemento
    removerElemento(id) {
        if (this.elementosSelecionados.includes(id) && this.elementosSelecionados.length > 1) {
            this.removerElementosSelecionados();
            return;
        }

        const idx = this.elementos.findIndex(e => e.id === id);
        if (idx > -1) {
            this.elementos.splice(idx, 1);
            this.elementosSelecionados = this.elementosSelecionados.filter(selId => selId !== id);
            this.elementoSelecionado = null;
            this.renderizarLayoutAtual();
            this.salvarHistorico();
        }
    },
    
    // Configura eventos gerais
    configurarEventos() {
        // Clique fora deseleciona
        this.canvas.addEventListener('click', (e) => {
            if (e.target === this.canvas) {
                this.limparSelecao();
            }
        });
        
        // Tamanho da etiqueta
        document.getElementById('modelo-tamanho')?.addEventListener('change', (e) => {
            const option = e.target.selectedOptions[0];
            if (option.value === 'personalizado') {
                // Mantém os campos manuais sempre visíveis
            } else {
                document.getElementById('modelo-largura').value = option.dataset.largura;
                document.getElementById('modelo-altura').value = option.dataset.altura;
                this.sincronizarSeletorColunasPorLinha();
                this.atualizarTamanhoCanvas();
            }
            this.atualizarFluxoEtapas();
        });

        // Papel/Impressora
        document.getElementById('modelo-papel')?.addEventListener('change', (e) => {
            if (e.target.value === 'bobina80') {
                const selectTamanho = document.getElementById('modelo-tamanho');
                const opt80 = Array.from(selectTamanho.options).find(o => o.value === '80x30' || o.value === '80x40' || o.value === '80x50');
                if (opt80) {
                    selectTamanho.value = opt80.value;
                    selectTamanho.dispatchEvent(new Event('change'));
                } else {
                    document.getElementById('modelo-tamanho').value = 'personalizado';
                    document.getElementById('modelo-largura').value = 80;
                    document.getElementById('modelo-altura').value = 30;
                    this.atualizarTamanhoCanvas();
                }
            }
            this.sincronizarSeletorColunasPorLinha();
            this.atualizarPreviewGradeFolha();
            this.atualizarFluxoEtapas();
        });

        document.getElementById('modelo-colunas-por-linha')?.addEventListener('change', (e) => {
            e.target.dataset.configurada = '1';
            this.atualizarReguas();
            this.atualizarPreviewGradeFolha();
        });
        
        document.getElementById('modelo-largura')?.addEventListener('change', () => {
            this.sincronizarSeletorColunasPorLinha();
            this.atualizarTamanhoCanvas();
            this.atualizarFluxoEtapas();
        });
        document.getElementById('modelo-altura')?.addEventListener('change', () => {
            this.sincronizarSeletorColunasPorLinha();
            this.atualizarTamanhoCanvas();
            this.atualizarFluxoEtapas();
        });
        document.getElementById('modelo-nome')?.addEventListener('input', () => {
            this.sincronizarSeletorColunasPorLinha();
            this.atualizarPreviewGradeFolha();
            this.atualizarFluxoEtapas();
        });
        document.getElementById('modelo-orientacao')?.addEventListener('change', () => this.atualizarFluxoEtapas());
        document.getElementById('mostrar-guias')?.addEventListener('change', () => this.atualizarGuiasCanvas());
        document.getElementById('forca-snap')?.addEventListener('change', () => this.atualizarSnapTolerancia());
        document.getElementById('btn-aplicar-tamanho')?.addEventListener('click', () => {
            this.tamanhoFixo = {
                largura: parseFloat(document.getElementById('modelo-largura')?.value || 50),
                altura: parseFloat(document.getElementById('modelo-altura')?.value || 30),
                fixado: true
            };
            this.atualizarTamanhoCanvas();
            this.validarElementosDentroLimites();
            this.mostrarAvisoTamanhoFixo();
            this.atualizarFluxoEtapas();
            this.mostrarToast('Tamanho aplicado', 'Área de impressão definida com sucesso. Agora escolha a orientação e comece a montar.', 'success');
        });
        
        // Zoom
        document.getElementById('btn-zoom-in')?.addEventListener('click', () => {
            this.zoom = Math.min(2, this.zoom + 0.25);
            document.getElementById('zoom-nivel').textContent = (this.zoom * 100) + '%';
            this.atualizarTamanhoCanvas();
            this.renderizarLayoutAtual();
        });

        document.getElementById('btn-editor-focus')?.addEventListener('click', () => {
            document.body.classList.toggle('editor-focus-mode');
            const btn = document.getElementById('btn-editor-focus');
            const ativo = document.body.classList.contains('editor-focus-mode');
            if (btn) {
                btn.title = ativo ? 'Sair do modo foco' : 'Modo foco';
                btn.innerHTML = ativo
                    ? '<i class="bi bi-fullscreen-exit"></i>'
                    : '<i class="bi bi-arrows-fullscreen"></i>';
            }

            setTimeout(() => {
                this.atualizarTamanhoCanvas();
                this.renderizarLayoutAtual();
            }, 50);
        });
        
        document.getElementById('btn-zoom-out')?.addEventListener('click', () => {
            this.zoom = Math.max(0.5, this.zoom - 0.25);
            document.getElementById('zoom-nivel').textContent = (this.zoom * 100) + '%';
            this.atualizarTamanhoCanvas();
            this.renderizarLayoutAtual();
        });
        
        // Limpar
        document.getElementById('btn-limpar')?.addEventListener('click', () => {
            if (confirm('Limpar todos os campos da etiqueta?')) {
                this.elementos = [];
                this.canvas.innerHTML = '';
                this.limparSelecao();
                this.salvarHistorico();
            }
        });

        document.getElementById('btn-desfazer')?.addEventListener('click', () => this.desfazer());

        document.addEventListener('keydown', (e) => {
            if (this.isEditableTarget(e.target)) {
                return;
            }

            if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'd') {
                e.preventDefault();
                this.duplicarElementoSelecionado();
                return;
            }

            if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'c') {
                e.preventDefault();
                this.copiarElementosSelecionados();
                return;
            }

            if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'v') {
                e.preventDefault();
                this.colarElementos();
                return;
            }

            if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'l') {
                e.preventDefault();
                this.alternarBloqueioElementoSelecionado();
                return;
            }

            if ((e.ctrlKey || e.metaKey) && e.key === ']') {
                e.preventDefault();
                this.moverCamadaSelecionada('frente');
                return;
            }

            if ((e.ctrlKey || e.metaKey) && e.key === '[') {
                e.preventDefault();
                this.moverCamadaSelecionada('tras');
                return;
            }

            if (!this.getElementosSelecionados().length) {
                return;
            }

            if (e.key === 'Delete' || e.key === 'Backspace') {
                e.preventDefault();
                this.removerElementosSelecionados();
                return;
            }

            const passo = e.altKey ? 0.1 : (e.shiftKey ? 2 : 0.5);
            let moveX = 0;
            let moveY = 0;

            switch (e.key) {
                case 'ArrowLeft':
                    moveX = -passo;
                    break;
                case 'ArrowRight':
                    moveX = passo;
                    break;
                case 'ArrowUp':
                    moveY = -passo;
                    break;
                case 'ArrowDown':
                    moveY = passo;
                    break;
                default:
                    return;
            }

            e.preventDefault();
            if (this.moverElementoSelecionado(moveX, moveY)) {
                this.salvarHistorico();
            }
        });
        
        // Salvar
        document.getElementById('btn-salvar')?.addEventListener('click', () => this.salvarModelo());

        document.getElementById('btn-aplicar-preset')?.addEventListener('click', () => {
            const presetId = document.getElementById('preset-modelo')?.value;
            if (!presetId) {
                this.mostrarToast('Aviso', 'Selecione um modelo pronto para aplicar', 'warning');
                return;
            }
            window.aplicarPresetEtiqueta(presetId);
            this.atualizarFluxoEtapas();
        });

        document.getElementById('btn-exportar-modelo')?.addEventListener('click', () => {
            if (!this.modeloId) {
                this.mostrarToast('Aviso', 'Salve o modelo antes de exportar', 'warning');
                return;
            }
            window.open(`/api/etiquetas/modelo/${this.modeloId}/exportar`, '_blank');
        });

        const inputArquivoImportacao = document.getElementById('arquivo-importacao-modelo');
        document.getElementById('btn-importar-modelo')?.addEventListener('click', () => inputArquivoImportacao?.click());
        inputArquivoImportacao?.addEventListener('change', async (e) => {
            const arquivo = e.target.files?.[0];
            if (!arquivo) return;

            const formData = new FormData();
            formData.append('arquivo', arquivo);

            try {
                const response = await fetch('/api/etiquetas/modelo/importar', {
                    method: 'POST',
                    body: formData
                });
                const result = await response.json().catch(() => null);
                if (!response.ok || !result?.success) {
                    throw new Error(result?.message || 'Falha ao importar o modelo');
                }
                this.mostrarToast('Sucesso', result.message, 'success');
                if (result.modelo_id) {
                    setTimeout(() => {
                        window.location.href = `/relatorios/etiquetas/editor/${result.modelo_id}`;
                    }, 500);
                }
            } catch (err) {
                this.mostrarToast('Erro', err.message, 'danger');
            } finally {
                e.target.value = '';
            }
        });
        
        // Validar papel vs dimensões em tempo real
        document.getElementById('modelo-papel')?.addEventListener('change', (e) => {
            const papel = e.target.value;
            const largura = parseFloat(document.getElementById('modelo-largura').value);
            const altura = parseFloat(document.getElementById('modelo-altura').value);
            const limitesBobina = { bobina60: 60, bobina80: 80, bobina100: 100 };
            
            if (limitesBobina[papel] && largura > limitesBobina[papel]) {
                this.mostrarToast('Atenção', `O rolo selecionado suporta até ${limitesBobina[papel]}mm de largura. Ajuste as dimensões.`, 'warning');
            }
            if (papel === 'a4') {
                if (largura > 210 || altura > 297) {
                    this.mostrarToast('Atenção', 'Dimensões excedem limites A4 (210x297mm). Ajuste as dimensões.', 'warning');
                }
            }
        });
        
        // Validar dimensões em tempo real
        ['modelo-largura', 'modelo-altura'].forEach(id => {
            document.getElementById(id)?.addEventListener('change', () => {
                const largura = parseFloat(document.getElementById('modelo-largura').value);
                const altura = parseFloat(document.getElementById('modelo-altura').value);
                const papel = document.getElementById('modelo-papel')?.value || 'a4';
                const limitesBobina = { bobina60: 60, bobina80: 80, bobina100: 100 };
                this.atualizarFluxoEtapas();
                
                if (limitesBobina[papel] && largura > limitesBobina[papel]) {
                    this.mostrarToast('Atenção', `Largura excede limite do rolo (${limitesBobina[papel]}mm)`, 'warning');
                }
                if (papel === 'a4' && (largura > 210 || altura > 297)) {
                    this.mostrarToast('Atenção', 'Dimensões excedem limites A4 (210x297mm)', 'warning');
                }
            });
        });
        
        // Preview
        document.getElementById('btn-preview')?.addEventListener('click', () => this.preview());
        
        // Imprimir teste
        document.getElementById('btn-imprimir-teste')?.addEventListener('click', () => this.imprimirTeste());

        document.getElementById('btn-ir-impressao')?.addEventListener('click', () => this.irParaImpressao());
    },
    
    // Salva histórico para desfazer
    salvarHistorico() {
        const snapshot = JSON.stringify(this.elementos);
        if (this.historico[this.historico.length - 1] === snapshot) {
            return;
        }
        this.historico.push(snapshot);
        if (this.historico.length > 20) this.historico.shift();
        const btnDesfazer = document.getElementById('btn-desfazer');
        if (btnDesfazer) {
            btnDesfazer.disabled = this.historico.length <= 1;
        }
    },

    desfazer() {
        if (this.historico.length <= 1) {
            return;
        }

        this.historico.pop();
        const snapshotAnterior = this.historico[this.historico.length - 1];

        try {
            this.elementos = JSON.parse(snapshotAnterior || '[]').map((elem, idx) => this.normalizarElemento(elem, 'elem_hist_' + idx));
        } catch (e) {
            console.error('Erro ao restaurar histórico do editor:', e);
            this.mostrarToast('Erro', 'Não foi possível desfazer a última alteração', 'danger');
            return;
        }

        this.elementoSelecionado = null;
        this.elementosSelecionados = [];
        this.renderizarLayoutAtual();

        const btnDesfazer = document.getElementById('btn-desfazer');
        if (btnDesfazer) {
            btnDesfazer.disabled = this.historico.length <= 1;
        }
    },
    
    // Carrega layout existente
    carregarLayout() {
        {% if modelo %}
        try {
            const layout = {{ (modelo.layout if modelo else [])|tojson }};
            this.elementos = layout.map((elem, idx) => this.normalizarElemento(elem, 'elem_' + idx));
            this.elementoSelecionado = null;
            this.elementosSelecionados = [];
            this.renderizarLayoutAtual();
        } catch (e) {
            console.error('Erro ao carregar layout:', e);
        }
        {% endif %}
    },

    montarLayoutPayload() {
        const layout = this.elementos.map(e => ({
            campo: e.campo,
            tipo: e.tipo,
            x: e.x,
            y: e.y,
            largura: e.largura,
            altura: e.altura,
            fonte: e.fonte,
            tamanho: e.tamanho,
            negrito: e.negrito,
            alinhamento: e.alinhamento,
            prefixo: e.prefixo,
            rotacao: e.rotacao || 0,
            bloqueado: !!e.bloqueado,
            quebra_automatica: !!e.quebra_automatica,
            valor_fixo: e.valor_fixo || '',
            qrcode_tipo: e.qrcode_tipo || 'automatico',
            barcode_tipo: e.barcode_tipo || 'automatico',
            barcode_formato: e.barcode_formato || 'automatico',
            barcode_ajuste: e.barcode_ajuste || 'auto',
            imagem_origem: e.imagem_origem || 'campo',
            imagem_ajuste: e.imagem_ajuste || 'contain'
        }));

        return {
            layout: layout,
            largura: parseFloat(document.getElementById('modelo-largura').value),
            altura: parseFloat(document.getElementById('modelo-altura').value),
            config_impressao: {
                colunas_por_linha: this.obterColunasPorLinhaSelecionadas(),
            }
        };
    },
    
    // Salva modelo
    async salvarModelo() {
        if (this.salvando) {
            return;
        }

        const btnSalvar = document.getElementById('btn-salvar');
        const nome = document.getElementById('modelo-nome').value;
        const tipo = document.getElementById('modelo-tipo').value;
        const payload = this.montarLayoutPayload();
        
        // ========== VALIDAÇÕES FRONTEND ==========
        
        // Validar nome
        const nomeClean = nome.trim();
        if (!nomeClean) {
            this.mostrarToast('Erro', 'Nome do modelo é obrigatório', 'danger');
            document.getElementById('modelo-nome').focus();
            return;
        }
        if (nomeClean.length < 3) {
            this.mostrarToast('Erro', 'Nome deve ter no mínimo 3 caracteres', 'danger');
            document.getElementById('modelo-nome').focus();
            return;
        }
        if (nomeClean.length > 100) {
            this.mostrarToast('Erro', 'Nome muito longo (máximo 100 caracteres)', 'danger');
            document.getElementById('modelo-nome').focus();
            return;
        }
        
        // Validar dimensões
        if (payload.largura <= 0 || payload.altura <= 0) {
            this.mostrarToast('Erro', 'Dimensões devem ser maiores que zero', 'danger');
            return;
        }
        if (payload.largura < 10 || payload.altura < 10) {
            this.mostrarToast('Erro', 'Dimensões mínimas: 10mm', 'danger');
            return;
        }
        if (payload.largura > 300 || payload.altura > 300) {
            this.mostrarToast('Erro', 'Dimensões máximas: 300mm', 'danger');
            return;
        }
        
        // Validar layout não vazio
        if (!payload.layout || payload.layout.length === 0) {
            this.mostrarToast('Erro', 'Adicione pelo menos um campo na etiqueta', 'warning');
            return;
        }
        
        // Validar elementos dentro dos limites
        for (const elem of payload.layout) {
            const bounds = this.obterBoundsElemento(elem);
            if (bounds.left < 0 || bounds.right > payload.largura) {
                this.mostrarToast('Erro', `Campo "${elem.campo}" ultrapassa largura da etiqueta`, 'danger');
                return;
            }
            if (bounds.top < 0 || bounds.bottom > payload.altura) {
                this.mostrarToast('Erro', `Campo "${elem.campo}" ultrapassa altura da etiqueta`, 'danger');
                return;
            }
        }
        
        // Validar papel vs dimensões
        const papel = document.getElementById('modelo-papel')?.value || 'a4';
        const limitesBobina = { bobina60: 60, bobina80: 80, bobina100: 100 };
        if (limitesBobina[papel] && payload.largura > limitesBobina[papel]) {
            this.mostrarToast('Erro', `O rolo selecionado suporta no máximo ${limitesBobina[papel]}mm de largura`, 'danger');
            return;
        }
        if (papel === 'a4') {
            if (payload.largura > 210) {
                this.mostrarToast('Erro', 'Largura máxima para A4: 210mm', 'danger');
                return;
            }
            if (payload.altura > 297) {
                this.mostrarToast('Erro', 'Altura máxima para A4: 297mm', 'danger');
                return;
            }
        }
        
        const dados = {
            id: this.modeloId,
            nome: nomeClean,
            tipo: tipo,
            largura: payload.largura,
            altura: payload.altura,
            layout: payload.layout,
            config_impressao: payload.config_impressao,
            orientacao: document.getElementById('modelo-orientacao')?.value || 'retrato',
            validar_gtin: document.getElementById('validar-gtin').checked,
            validar_preco: document.getElementById('validar-preco').checked,
            validar_validade: document.getElementById('validar-validade').checked,
            formato_impressao: document.getElementById('formato-saida').value,
            papel: papel
        };

        this.salvando = true;
        if (btnSalvar) {
            btnSalvar.disabled = true;
            btnSalvar.dataset.originalHtml = btnSalvar.dataset.originalHtml || btnSalvar.innerHTML;
            btnSalvar.innerHTML = '<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span> Salvando...';
        }
        
        try {
            const response = await fetch('/api/etiquetas/modelo/salvar', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify(dados)
            });
            
            const result = await response.json().catch(() => null);
            if (!response.ok) {
                throw new Error(result?.message || `Falha ao salvar modelo (${response.status})`);
            }
            
            if (result.success) {
                this.modeloId = result.modelo_id;

                if (result.modelo_id) {
                    const url = new URL(window.location.href);
                    url.pathname = `/relatorios/etiquetas/editor/${result.modelo_id}`;
                    url.searchParams.delete('modelo_id');
                    window.history.replaceState({}, '', url.toString());
                }
                
                // Feedback melhorado
                let detalhes = '';
                if (result.detalhes) {
                    detalhes = `<br><small>${result.detalhes.tamanho} | ${result.detalhes.campos} campos | ${result.detalhes.orientacao}</small>`;
                }
                this.mostrarToast('Sucesso', result.message + detalhes, 'success');
            } else {
                this.mostrarToast('Erro', result?.message || 'Não foi possível salvar o modelo', 'danger');
            }
        } catch (e) {
            this.mostrarToast('Erro', 'Erro ao salvar: ' + e.message, 'danger');
        } finally {
            this.salvando = false;
            if (btnSalvar) {
                btnSalvar.disabled = false;
                btnSalvar.innerHTML = btnSalvar.dataset.originalHtml || '<i class="bi bi-save"></i> Salvar Modelo';
            }
        }
    },
    
    // Mostra toast de notificação
    mostrarToast(titulo, mensagem, tipo = 'info') {
        // Criar container de toasts se não existir
        let container = document.getElementById('toast-container');
        if (!container) {
            container = document.createElement('div');
            container.id = 'toast-container';
            container.className = 'toast-container position-fixed top-0 end-0 p-3';
            container.style.zIndex = '9999';
            document.body.appendChild(container);
        }
        
        // Mapear tipos para cores Bootstrap
        const cores = {
            'success': 'bg-success text-white',
            'danger': 'bg-danger text-white',
            'warning': 'bg-warning text-dark',
            'info': 'bg-info text-white'
        };
        
        const corClasse = cores[tipo] || cores['info'];
        
        // Criar toast
        const toastId = 'toast-' + Date.now();
        const toastHtml = `
            <div id="${toastId}" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="toast-header ${corClasse}">
                    <strong class="me-auto">${titulo}</strong>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Fechar"></button>
                </div>
                <div class="toast-body">
                    ${mensagem}
                </div>
            </div>
        `;
        
        container.insertAdjacentHTML('beforeend', toastHtml);
        
        const toastElement = document.getElementById(toastId);
        const toast = new bootstrap.Toast(toastElement, {
            autohide: true,
            delay: tipo === 'success' ? 3000 : 5000
        });
        
        toast.show();
        
        // Remover do DOM após fechar
        toastElement.addEventListener('hidden.bs.toast', function () {
            toastElement.remove();
        });
    },
    
    // Preview
    async preview() {
        if (this.elementos.length === 0) {
            alert('Adicione pelo menos um campo na etiqueta para visualizar o preview.');
            return;
        }

        const payload = this.montarLayoutPayload();
        const papel = document.getElementById('modelo-papel')?.value || 'a4';
        payload.formato = 'html';
        payload.orientacao = document.getElementById('modelo-orientacao')?.value || 'retrato';
        payload.papel = papel;

        try {
            const response = await fetch('/api/etiquetas/preview', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify(payload)
            });

            if (!response.ok) {
                const erro = await response.json().catch(() => null);
                alert('Erro: ' + (erro?.message || 'Falha ao gerar preview'));
                return;
            }

            const iframe = document.getElementById('preview-iframe');
            const modalEl = document.getElementById('modalPreview');
            const modal = new bootstrap.Modal(modalEl);

            if (payload.formato === 'html') {
                const html = await response.text();
                iframe.srcdoc = html;
            } else {
                const blob = await response.blob();
                const url = URL.createObjectURL(blob);
                iframe.src = url;

                modalEl.addEventListener('hidden.bs.modal', () => {
                    URL.revokeObjectURL(url);
                    iframe.src = '';
                }, { once: true });
            }

            modal.show();
        } catch (e) {
            alert('Erro ao gerar preview: ' + e.message);
        }
    },
    
    // Imprimir teste
    async imprimirTeste() {
        if (this.elementos.length === 0) {
            alert('Adicione pelo menos um campo na etiqueta para imprimir um teste.');
            return;
        }

        const payload = this.montarLayoutPayload();
        const papel = document.getElementById('modelo-papel')?.value || 'a4';
        payload.formato = (document.getElementById('formato-saida').value || 'pdf');
        payload.orientacao = document.getElementById('modelo-orientacao')?.value || 'retrato';
        payload.papel = papel;

        try {
            const response = await fetch('/api/etiquetas/preview', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify(payload)
            });

            if (!response.ok) {
                const erro = await response.json().catch(() => null);
                alert('Erro: ' + (erro?.message || 'Falha ao gerar impressão de teste'));
                return;
            }

            if (payload.formato === 'html') {
                const html = await response.text();
                const janela = window.open('', '_blank');
                if (janela) {
                    janela.document.open();
                    janela.document.write(html);
                    janela.document.close();
                }
            } else {
                const blob = await response.blob();
                const url = URL.createObjectURL(blob);

                const janela = window.open(url, '_blank');
                if (janela) {
                    janela.onload = () => {
                        if (payload.formato === 'pdf') {
                            janela.print();
                        }
                    };
                }

                setTimeout(() => URL.revokeObjectURL(url), 60000);
            }
        } catch (e) {
            alert('Erro ao imprimir teste: ' + e.message);
        }
    },

    irParaImpressao() {
        if (!this.modeloId) {
            this.mostrarToast('Salve primeiro', 'Salve o modelo antes de abrir a tela final de impressão.', 'warning');
            return;
        }

        const url = new URL('{{ url_for("etiquetas_imprimir") }}', window.location.origin);
        const formato = document.getElementById('formato-saida')?.value || 'pdf';
        const tabela1 = document.getElementById('select-tabela-editor-1')?.value || '';
        const tabela2 = document.getElementById('select-tabela-editor-2')?.value || '';

        url.searchParams.set('modelo', String(this.modeloId));
        url.searchParams.set('formato', formato);

        if (tabela1) {
            url.searchParams.set('tabela1', tabela1);
        }
        if (tabela2) {
            url.searchParams.set('tabela2', tabela2);
        }

        window.location.href = url.toString();
    }
};

// Inicializar ao carregar
document.addEventListener('DOMContentLoaded', () => {
    garantirOpcoesSelect();
    EditorEtiquetas.init();
});
</script>
{% endblock %}