<%- include('partials/head', {
  title,
  pageTitle: isNew ? 'Novo produto' : 'Editar produto',
  sectionLabel: 'Catálogo',
  active: 'products'
}) %>

<%
  const fieldClass = (key) => errors && errors[key] ? 'field has-error' : 'field';
  const formAction = isNew ? '/admin/produtos/novo' : '/admin/produtos/' + product.id;
  const images = product.imagens || [];
%>

<div class="admin-section-head">
  <div>
    <h2><%= isNew ? 'Cadastre um novo item na vitrine' : 'Atualize as informações do produto' %></h2>
    <p>Os campos marcados com * são obrigatórios. As alterações aparecem no site imediatamente.</p>
  </div>
  <div class="admin-section-head__actions">
    <a class="btn btn--outline btn--sm" href="<%= url('/admin/produtos') %>"><%- icon('arrow-left') %> Voltar</a>
    <% if (!isNew) { %>
    <a class="btn btn--outline btn--sm" href="<%= url('/varejo/produto/' + product.slug) %>" target="_blank" rel="noopener">Ver no site <%- icon('external-link') %></a>
    <% } %>
  </div>
</div>

<form class="admin-form" action="<%= formAction %>" method="post" enctype="multipart/form-data">
  <input type="hidden" name="_csrf" value="<%= csrfToken %>">
  <input type="hidden" name="imagensAtuais" value="<%= JSON.stringify(images) %>">

  <section class="panel">
    <div class="panel__head"><h2>Informações principais</h2></div>
    <div class="panel__body">
      <div class="form-grid">
        <div class="<%= fieldClass('nome') %> field--full">
          <label for="nome">Nome do produto <span class="req">*</span></label>
          <input id="nome" name="nome" type="text" value="<%= product.nome || '' %>" maxlength="120" required>
          <% if (errors.nome) { %><span class="field__error"><%= errors.nome %></span><% } %>
        </div>

        <div class="<%= fieldClass('sku') %>">
          <label for="sku">Código / SKU <span class="req">*</span></label>
          <input id="sku" name="sku" type="text" value="<%= product.sku || '' %>" maxlength="30" placeholder="Ex.: UD-1001" required>
          <% if (errors.sku) { %><span class="field__error"><%= errors.sku %></span><% } else { %><small class="hint">Aparece no card e ajuda o cliente a identificar o item.</small><% } %>
        </div>

        <div class="<%= fieldClass('categoria') %>">
          <label for="categoria">Categoria <span class="req">*</span></label>
          <select id="categoria" name="categoria" required>
            <option value="">Selecione</option>
            <% categories.forEach(function(category) { %>
            <option value="<%= category.slug %>" <%= product.categoria === category.slug ? 'selected' : '' %>><%= category.nome %></option>
            <% }); %>
          </select>
          <% if (errors.categoria) { %><span class="field__error"><%= errors.categoria %></span><% } %>
        </div>
      </div>

      <div class="field-row">
        <label class="check">
          <input type="checkbox" name="ativo" <%= product.ativo === false ? '' : 'checked' %>>
          <span><strong>Produto ativo</strong><small>Visível no catálogo público</small></span>
        </label>
        <label class="check">
          <input type="checkbox" name="destaque" <%= product.destaque ? 'checked' : '' %>>
          <span><strong>Produto em destaque</strong><small>Recebe o selo dourado e prioridade na vitrine</small></span>
        </label>
      </div>
    </div>
  </section>

  <section class="panel">
    <div class="panel__head"><h2>Descrições</h2></div>
    <div class="panel__body">
      <div class="<%= fieldClass('descricaoCurta') %>">
        <label for="descricaoCurta">Descrição curta <span class="req">*</span></label>
        <textarea id="descricaoCurta" name="descricaoCurta" rows="3" maxlength="180" required><%= product.descricaoCurta || '' %></textarea>
        <% if (errors.descricaoCurta) { %><span class="field__error"><%= errors.descricaoCurta %></span><% } else { %><small class="hint">Entre 10 e 180 caracteres. Aparece no card do produto.</small><% } %>
      </div>

      <div class="<%= fieldClass('descricaoCompleta') %>">
        <label for="descricaoCompleta">Descrição completa <span class="req">*</span></label>
        <textarea id="descricaoCompleta" name="descricaoCompleta" rows="7" maxlength="2500" required><%= product.descricaoCompleta || '' %></textarea>
        <% if (errors.descricaoCompleta) { %><span class="field__error"><%= errors.descricaoCompleta %></span><% } else { %><small class="hint">Aparece na página do produto, abaixo da galeria.</small><% } %>
      </div>
    </div>
  </section>

  <section class="panel">
    <div class="panel__head"><h2>Preços e condições</h2></div>
    <div class="panel__body">
      <div class="form-grid form-grid--3">
        <div class="<%= fieldClass('precoVarejo') %>">
          <label for="precoVarejo">Preço no varejo (R$) <span class="req">*</span></label>
          <input id="precoVarejo" name="precoVarejo" type="text" inputmode="decimal" value="<%= product.precoVarejo ?? '' %>" placeholder="Ex.: 89,90" required>
          <% if (errors.precoVarejo) { %><span class="field__error"><%= errors.precoVarejo %></span><% } %>
        </div>

        <div class="<%= fieldClass('precoAtacado') %>">
          <label for="precoAtacado">Preço no atacado (R$) <span class="req">*</span></label>
          <input id="precoAtacado" name="precoAtacado" type="text" inputmode="decimal" value="<%= product.precoAtacado ?? '' %>" placeholder="Ex.: 62,90" required>
          <% if (errors.precoAtacado) { %><span class="field__error"><%= errors.precoAtacado %></span><% } %>
        </div>

        <div class="<%= fieldClass('minimoAtacado') %>">
          <label for="minimoAtacado">Pedido mínimo no atacado <span class="req">*</span></label>
          <input id="minimoAtacado" name="minimoAtacado" type="number" min="1" max="999" value="<%= product.minimoAtacado || 6 %>" required>
          <% if (errors.minimoAtacado) { %><span class="field__error"><%= errors.minimoAtacado %></span><% } else { %><small class="hint">Quantidade mínima de unidades.</small><% } %>
        </div>
      </div>
    </div>
  </section>

  <section class="panel">
    <div class="panel__head"><h2>Imagens</h2></div>
    <div class="panel__body">
      <% if (errors.imagens) { %><span class="field__error"><%= errors.imagens %></span><% } %>

      <div class="image-manager" data-image-manager>
        <% if (images.length) { %>
        <div class="image-manager__current">
          <% images.forEach(function(image, index) { %>
          <div class="image-item">
            <img src="<%= url(image) %>" alt="Imagem <%= index + 1 %> do produto" loading="lazy" width="240" height="240">
            <div class="image-item__tools">
              <label>
                <input type="radio" name="imagemPrincipal" value="<%= image %>" data-primary-image <%= index === 0 ? 'checked' : '' %>>
                Principal
              </label>
              <label>
                <input type="checkbox" name="removerImagem" value="<%= image %>" data-image-remove>
                Remover
              </label>
            </div>
          </div>
          <% }); %>
        </div>
        <% } else { %>
        <p class="hint">Nenhuma imagem cadastrada ainda. Envie a primeira foto abaixo.</p>
        <% } %>

        <label class="upload-box">
          <%- icon('upload') %>
          <strong data-upload-label>Adicionar fotos</strong>
          <small>JPG, PNG ou WebP · até 8 MB cada · máximo de 10 imagens por produto</small>
          <span class="upload-box__cta">Escolher arquivos</span>
          <input type="file" name="novasImagens" accept="image/jpeg,image/png,image/webp,image/gif" multiple>
        </label>
      </div>
    </div>
  </section>

  <section class="panel">
    <div class="panel__head"><h2>Detalhes extras</h2></div>
    <div class="panel__body">
      <div class="form-grid">
        <div class="<%= fieldClass('video') %> field--full">
          <label for="video">Vídeo do produto (opcional)</label>
          <input id="video" name="video" type="url" value="<%= product.video || '' %>" placeholder="https://www.youtube.com/watch?v=...">
          <% if (errors.video) { %><span class="field__error"><%= errors.video %></span><% } else { %><small class="hint">Aceita links do YouTube e Vimeo.</small><% } %>
        </div>

        <div class="field field--full">
          <label for="caracteristicas">Características</label>
          <textarea id="caracteristicas" name="caracteristicas" rows="5" placeholder="Uma característica por linha"><%= (product.caracteristicas || []).join('\n') %></textarea>
          <small class="hint">Uma característica por linha. Máximo de 10 itens.</small>
        </div>
      </div>
    </div>
  </section>

  <div class="form-actions">
    <a class="btn btn--outline" href="<%= url('/admin/produtos') %>">Cancelar</a>
    <button class="btn btn--green" type="submit">
      <%- icon('check') %>
      <%= isNew ? 'Cadastrar produto' : 'Salvar alterações' %>
    </button>
  </div>
</form>

<%- include('partials/foot') %>
