{% extends "base.html" %}
{% block head %}
<style>
.row{display:flex;gap:12px;flex-wrap:wrap}
.card{border:1px solid #ddd;border-radius:10px;padding:12px;max-width:560px}
label{display:block;margin-top:10px;font-weight:600}
input,button,textarea,select{width:100%;padding:10px;font-size:16px;box-sizing:border-box}
button{cursor:pointer;margin-top:10px}
.imgbox{width:100%;aspect-ratio:1.8/1;border:1px solid #eee;border-radius:10px;overflow:hidden;background:#fafafa;display:flex;align-items:center;justify-content:center}
.imgbox img{width:100%;height:100%;object-fit:contain}
.muted{color:#666;font-size:14px}
.inline{display:flex;gap:10px;flex-wrap:wrap}
.inline>div{flex:1;min-width:180px}
.pill{display:inline-block;padding:6px 10px;border-radius:999px;background:#f2f2f2;font-size:14px}
</style>
{% endblock %}

{% block content %}
<h2>Metro Corrido - Estampas</h2>
<p class="muted">Digite o número da estampa (0 a 999). A busca tem um pequeno delay pra evitar bug de digitação rápida.</p>

<div class="row">
  <div class="card">
    <label>Cliente</label>
    <input id="cliente" placeholder="Nome do cliente"/>

    <label>Entrega (opcional)</label>
    <input id="entrega" type="date"/>

    <label>Número da estampa</label>
    <input id="numero" type="number" min="0" max="999" placeholder="Ex: 7"/>

    <div style="margin-top:10px"><div id="nomeEstampa" class="pill">Estampa ---</div></div>

    <label>Foto da estampa</label>
    <div class="imgbox">
      <img id="foto" src="/static/placeholder.png" alt="Foto da estampa"/>
    </div>

    <div class="inline">
      <div>
        <label>Metros</label>
        <input id="metros" type="number" min="0.1" step="0.1" placeholder="Ex: 2.5"/>
      </div>
      <div>
        <label>Tecido</label>
        <select id="tecido">
          <option value="Suede">Suede</option>
          <option value="Tecido 1">Tecido 1</option>
          <option value="Tecido 2">Tecido 2</option>
          <option value="Personalizado">Personalizado</option>
        </select>
      </div>
    </div>

    <div id="boxPersonalizado" style="display:none;">
      <label>Tecido personalizado</label>
      <input id="tecidoCustom" placeholder="Escreva o tecido"/>
    </div>

    <button id="btnAdd">Adicionar ao pedido</button>
    <button id="btnReview">Revisar pedido</button>
    <p id="status" class="muted"></p>
  </div>

  <div class="card" style="max-width:560px;">
    <h3>Itens adicionados (resumo)</h3>
    <div id="miniLista" class="muted">Nenhum item.</div>
    <button id="btnLimpar">Limpar pedido</button>
  </div>
</div>

<script>
const numero=document.getElementById("numero");
const nomeEstampa=document.getElementById("nomeEstampa");
const foto=document.getElementById("foto");
const metros=document.getElementById("metros");
const tecido=document.getElementById("tecido");
const tecidoCustom=document.getElementById("tecidoCustom");
const boxPersonalizado=document.getElementById("boxPersonalizado");
const status=document.getElementById("status");
const miniLista=document.getElementById("miniLista");
const cliente=document.getElementById("cliente");
const entrega=document.getElementById("entrega");

function pad3(n){return String(n).padStart(3,"0")}
function getCart(){try{return JSON.parse(localStorage.getItem("cart_estampas")||"[]")}catch{return[]}}
function setCart(c){localStorage.setItem("cart_estampas",JSON.stringify(c));renderMini()}
function renderMini(){
  const c=getCart();
  if(!c.length){ miniLista.textContent="Nenhum item."; return; }
  miniLista.innerHTML=c.map((x,i)=>{
    const mat=(x.tecido==="Personalizado" && x.tecido_custom)?x.tecido_custom:x.tecido;
    const nm=(x.name||"").trim();
    const label=nm?`ESTAMPA ${x.code} - ${nm}`:`ESTAMPA ${x.code}`;
    return `${i+1}) ${label} - ${x.metros} m - ${mat}`;
  }).join("<br>");
}
function updatePersonalizado(){
  if(tecido.value==="Personalizado"){ boxPersonalizado.style.display="block"; }
  else { boxPersonalizado.style.display="none"; tecidoCustom.value=""; }
}
tecido.addEventListener("change", updatePersonalizado);
updatePersonalizado();

let debounceTimer=null;
let lastCode=null;
let lastRegisteredName="";

async function loadEstampaDebounced(){
  clearTimeout(debounceTimer);

  const rawInput = (numero.value || "").trim();
  const raw = rawInput === "" ? "000" : rawInput;

  debounceTimer=setTimeout(async ()=>{
    const n=parseInt(raw,10);
    if(isNaN(n)||n<0||n>999){
      nomeEstampa.textContent="Estampa ---";
      foto.src="/static/placeholder.png";
      return;
    }

    const r=await fetch(`/api/estampa/${n}`);
    const j=await r.json();
    if(!j.ok) return;

    lastCode = j.code;
    lastRegisteredName = (j.registered_name || "").trim();

    if(lastRegisteredName){
      nomeEstampa.textContent = `Estampa ${lastCode} - ${lastRegisteredName}`;
    }else{
      nomeEstampa.textContent = `Estampa ${lastCode} - (sem nome)`;
    }

    const imageBase=j.image_base;
    const exts=[".jpg",".jpeg",".png"];
    let loaded=false;
    for(const ext of exts){
      const img=new Image();
      img.onload=()=>{ if(!loaded){ loaded=true; foto.src=imageBase+ext; } };
      img.src=imageBase+ext;
    }
    setTimeout(()=>{ if(!loaded) foto.src="/static/placeholder.png"; },350);
  },250);
}
numero.addEventListener("input", loadEstampaDebounced);

document.getElementById("btnAdd").onclick=()=>{
  const rawInput = (numero.value || "").trim();
  const raw = rawInput === "" ? "000" : rawInput;
  const n = parseInt(raw, 10);

  const m=parseFloat(metros.value);
  if(isNaN(n)||n<0||n>999){ status.textContent="Número de estampa inválido (0 a 999)."; return; }
  if(isNaN(m)||m<=0){ status.textContent="Metros inválidos. Ex: 2.5"; return; }

  const t=tecido.value;
  const tc=tecidoCustom.value.trim();
  if(t==="Personalizado" && !tc){ status.textContent="Informe o tecido personalizado."; return; }

  const c=getCart();
  const code=pad3(n);
  const name = lastRegisteredName || "";
  c.push({code:code, name:name, metros:m, tecido:t, tecido_custom:tc});

  setCart(c);

  status.textContent=`Adicionado: ESTAMPA ${pad3(n)} - ${m} m`;
  metros.value="";
  metros.focus();
};

document.getElementById("btnReview").onclick=()=>{
  localStorage.setItem("cliente_estampas", cliente.value || "");
  localStorage.setItem("entrega_estampas", entrega.value || "");
  window.location.href="/review";
};

document.getElementById("btnLimpar").onclick=()=>{
  if(!confirm("Limpar todos os itens do pedido?")) return;
  setCart([]);
  status.textContent="Pedido limpo.";
};

renderMini();

// estado inicial: campo vazio, mas considerar 000
lastCode = "000";
lastRegisteredName = "";
nomeEstampa.textContent = "Estampa 000";

// carrega nome/foto da 000 automaticamente (sem preencher o input)
loadEstampaDebounced();

cliente.value=localStorage.getItem("cliente_estampas")||"";
entrega.value=localStorage.getItem("entrega_estampas")||"";
</script>

{% endblock %}