/* Mini-form [+ Novo produto] — Piso ou Material. Usado dentro da Entrada e nos Cadastros. */

const PALETA_MAPA = [
  '#6E7A92', '#DCC08F', '#9C6B42', '#C7A97E', '#ECEAE2', '#8C8782',
  '#B7B2A8', '#A98E6B', '#7E96A8', '#C49A9A', '#9AA88C', '#5E6B7A',
];

function corEscura(hex) {
  const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
  return (r * 299 + g * 587 + b * 114) / 1000 < 150;
}

/* Redimensiona uma foto (ex.: câmera de tablet, 5-8MB) pro lado maior caber em
   maxLado, reexportando como JPEG — evita subir arquivo gigante pro Storage. */
function redimensionarFoto(file, maxLado, qualidade) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    const url = URL.createObjectURL(file);
    img.onload = () => {
      let { width, height } = img;
      if (width > height && width > maxLado) { height = Math.round(height * maxLado / width); width = maxLado; }
      else if (height >= width && height > maxLado) { width = Math.round(width * maxLado / height); height = maxLado; }
      const canvas = document.createElement('canvas');
      canvas.width = width; canvas.height = height;
      canvas.getContext('2d').drawImage(img, 0, 0, width, height);
      canvas.toBlob((blob) => {
        URL.revokeObjectURL(url);
        blob ? resolve(blob) : reject(new Error('Não foi possível processar a imagem'));
      }, 'image/jpeg', qualidade);
    };
    img.onerror = () => { URL.revokeObjectURL(url); reject(new Error('Não foi possível ler a imagem')); };
    img.src = url;
  });
}

/* Combobox creatable de marca — sugestões + "Usar '<texto>'" */
function MarcaCombobox({ value, onChange, sugestoes }) {
  const { useState } = React;
  const [open, setOpen] = useState(false);
  const [q, setQ] = useState('');
  const termo = q.trim();
  const lista = sugestoes.filter((m) => !termo || m.toLowerCase().includes(termo.toLowerCase()));
  const exato = sugestoes.some((m) => m.toLowerCase() === termo.toLowerCase());
  function pick(m) { onChange(m); setQ(''); setOpen(false); }
  return (
    <div className="combobox">
      <button type="button" className={'combo-field' + (open ? ' open' : '') + (value ? '' : ' ph')} onClick={() => setOpen(!open)}>
        <span>{value || 'Selecionar ou digitar marca'}</span>
        <EIcon name="chevR" size={18} style={{ transform: 'rotate(90deg)', color: 'var(--gray-500)' }} />
      </button>
      {open && (
        <React.Fragment>
          <div className="combo-back" onClick={() => setOpen(false)}></div>
          <div className="combo-pop">
            <div className="combo-search">
              <EIcon name="search" size={18} />
              <input autoFocus value={q} onChange={(e) => setQ(e.target.value)} placeholder="Buscar ou criar marca…" />
            </div>
            <div className="combo-list">
              {lista.map((m) => (
                <button key={m} type="button" className={'combo-opt' + (value === m ? ' on' : '')} onClick={() => pick(m)}>
                  {m}{value === m && <EIcon name="check" size={17} />}
                </button>
              ))}
              {termo && !exato && (
                <button type="button" className="combo-opt criar" onClick={() => pick(termo)}>
                  <EIcon name="plus" size={16} strokeWidth={2.2} /> Usar "{termo}"
                </button>
              )}
              {!lista.length && !termo && <div className="combo-vazio">Digite para criar uma marca nova</div>}
            </div>
          </div>
        </React.Fragment>
      )}
    </div>
  );
}

function NovoProdutoSheet({ produtoExistente, onSalvar, onCancelar }) {
  const { useState, useRef } = React;
  const ed = produtoExistente || null;
  const [cat, setCat] = useState(ed ? ed.cat : null);
  const [nome, setNome] = useState(ed ? ed.nome : '');
  const [marca, setMarca] = useState(ed ? ed.marca : '');
  const [formato, setFormato] = useState(ed && ed.formato || '');
  const [m2cx, setM2cx] = useState(ed && ed.m2cx ? String(ed.m2cx).replace('.', ',') : '');
  const [limite, setLimite] = useState(ed && ed.limitePonta ? String(ed.limitePonta) : '20');
  const [codigo, setCodigo] = useState(ed && ed.codigo || '');
  const [unidade, setUnidade] = useState(ed && ed.unidade || '');
  const [unidadeOutro, setUnidadeOutro] = useState('');
  const [cor, setCor] = useState(ed ? ed.cor : PALETA_MAPA[0]);
  const [salvando, setSalvando] = useState(false);
  const [erro, setErro] = useState(null);
  const [fotoBlob, setFotoBlob] = useState(null); // Blob novo, pendente de upload (ainda não enviado)
  const [fotoPreview, setFotoPreview] = useState(ed && ed.foto || null);
  const [fotoErro, setFotoErro] = useState(null);
  const [enviandoFoto, setEnviandoFoto] = useState(false);
  const fotoInputRef = useRef(null);

  const UNIDADES = ['saco 20kg', 'saco 50kg', 'saco 5kg', 'un'];
  const unidadeFinal = unidade === 'outro' ? unidadeOutro : unidade;
  const sugestoesMarca = Array.from(new Set(ESTQ.MARCAS_SUGERIDAS.concat(Object.values(ESTQ.PRODUTOS).map((p) => p.marca))));

  const valido = cat && nome.trim() && marca.trim() && (
    cat === 'piso' ? (formato.trim() && m2cx.trim() && codigo.trim()) : !!unidadeFinal.trim()
  );

  async function escolherFoto(e) {
    const file = e.target.files[0];
    e.target.value = '';
    if (!file) return;
    setFotoErro(null);
    try {
      const blob = await redimensionarFoto(file, 1000, 0.8);
      setFotoBlob(blob);
      setFotoPreview(URL.createObjectURL(blob));
    } catch (err) {
      setFotoErro(err.message);
    }
  }

  async function salvar() {
    if (!valido) return;
    setErro(null); setSalvando(true);
    let fotoUrl = ed ? ed.foto : null;
    if (fotoBlob) {
      setEnviandoFoto(true);
      try {
        fotoUrl = await ESTQ.uploadFotoProduto(fotoBlob);
      } catch (e) {
        setEnviandoFoto(false); setErro(e.message); setSalvando(false);
        return;
      }
      setEnviandoFoto(false);
    }
    const base = { id: ed ? ed.id : null, cat, nome: nome.trim(), codigo: codigo.trim(), marca: marca.trim(), cor, fotoUrl };
    const prod = cat === 'piso'
      ? Object.assign(base, { formato: formato.trim(), m2cx: parseFloat(m2cx.replace(',', '.')) || 0, limitePonta: parseInt(limite, 10) || 20 })
      : Object.assign(base, { unidade: unidadeFinal.trim() });
    Promise.resolve(onSalvar(prod))
      .catch((e) => { setErro(e.message); setSalvando(false); });
  }

  return (
    <div className="scrim center" onClick={onCancelar}>
      <div className="novo-prod-sheet" data-screen-label="Novo produto" onClick={(e) => e.stopPropagation()}>
        <div className="np-head">
          <h2>{ed ? 'Editar produto' : 'Novo produto'}</h2>
          <button className="btn-fechar-sheet" onClick={onCancelar}><EIcon name="x" size={19} /> Fechar</button>
        </div>

        <div className="np-body">
          {/* 1 · Categoria */}
          <div className="np-sec">Categoria</div>
          <div className="cat-cards">
            <button className={'cat-card' + (cat === 'piso' ? ' on' : '')} disabled={!!ed} onClick={() => setCat('piso')}>
              <EIcon name="brick" size={34} />
              <span className="cc-t">Piso</span>
              <span className="cc-d">Tonalidade, bitola, m²</span>
            </button>
            <button className={'cat-card' + (cat === 'material' ? ' on' : '')} disabled={!!ed} onClick={() => setCat('material')}>
              <EIcon name="tools" size={34} />
              <span className="cc-t">Material</span>
              <span className="cc-d">Unidade, validade</span>
            </button>
          </div>

          {cat && (
            <React.Fragment>
              <div className="np-grid">
                <div className="np-field">
                  <label>Nome</label>
                  <input value={nome} onChange={(e) => setNome(e.target.value)} placeholder={cat === 'piso' ? 'Ex.: Porcelanato Calacatta' : 'Ex.: Argamassa ACIII'} />
                </div>
                <div className="np-field">
                  <label>Código {cat === 'piso' ? <span className="obrig-mini">obrigatório</span> : <span className="op">opcional</span>}</label>
                  <input value={codigo} onChange={(e) => setCodigo(e.target.value)} placeholder="Ex.: 61023" inputMode="numeric" />
                  <span className="np-hint">Código do fabricante — igual ao da nota</span>
                </div>
                <div className="np-field span2">
                  <label>Marca</label>
                  <MarcaCombobox value={marca} onChange={setMarca} sugestoes={sugestoesMarca} />
                </div>

                {cat === 'piso' ? (
                  <React.Fragment>
                    <div className="np-field">
                      <label>Formato</label>
                      <input value={formato} onChange={(e) => setFormato(e.target.value)} placeholder="60×60" />
                    </div>
                    <div className="np-field">
                      <label>m² por caixa</label>
                      <input value={m2cx} onChange={(e) => setM2cx(e.target.value)} placeholder="2,32" inputMode="decimal" />
                    </div>
                    <div className="np-field">
                      <label>Limite de ponta</label>
                      <div className="np-input-suffix">
                        <input value={limite} onChange={(e) => setLimite(e.target.value.replace(/\D/g, ''))} inputMode="numeric" />
                        <span>m²</span>
                      </div>
                      <span className="np-hint">Recomendado: 20 m²</span>
                    </div>
                  </React.Fragment>
                ) : (
                  <div className="np-field span2">
                    <label>Unidade</label>
                    <div className="chips-recentes">
                      {UNIDADES.map((u) => (
                        <button key={u} className={'chip-rec' + (unidade === u ? ' on' : '')} onClick={() => setUnidade(u)}>{u}</button>
                      ))}
                      <button className={'chip-rec' + (unidade === 'outro' ? ' on' : '')} onClick={() => setUnidade('outro')}>outro…</button>
                    </div>
                    {unidade === 'outro' && (
                      <input style={{ marginTop: 8 }} value={unidadeOutro} onChange={(e) => setUnidadeOutro(e.target.value)} placeholder="Ex.: balde 18L" />
                    )}
                  </div>
                )}
              </div>

              {/* Cor no mapa */}
              <div className="np-sec">Cor no mapa</div>
              <div className="paleta">
                {PALETA_MAPA.map((c) => (
                  <button key={c} className={'paleta-sw' + (cor === c ? ' on' : '')} style={{ background: c }} onClick={() => setCor(c)}>
                    {cor === c && <EIcon name="check" size={18} strokeWidth={2.6} style={{ color: corEscura(c) ? '#fff' : 'var(--navy-900)' }} />}
                  </button>
                ))}
              </div>

              {/* Foto opcional */}
              <div className="np-sec">Foto <span className="op">opcional</span></div>
              <input ref={fotoInputRef} type="file" accept="image/*" capture="environment" style={{ display: 'none' }} onChange={escolherFoto} />
              <button type="button" className={'np-foto-slot' + (fotoPreview ? ' tem-foto' : '')} onClick={() => fotoInputRef.current.click()}>
                {fotoPreview ? (
                  <React.Fragment>
                    <img className="np-foto-preview" src={fotoPreview} alt="" />
                    <span>Toque para trocar a foto</span>
                  </React.Fragment>
                ) : (
                  <React.Fragment>
                    <EIcon name="inbox" size={26} style={{ color: 'var(--gray-400)' }} />
                    <span>Toque para escolher uma foto do produto</span>
                  </React.Fragment>
                )}
              </button>
              {fotoErro && <div className="aviso-resumo erro"><EIcon name="alert" size={18} /> {fotoErro}</div>}
            </React.Fragment>
          )}
          {erro && <div className="aviso-resumo erro"><EIcon name="alert" size={18} /> Não foi possível salvar: {erro}</div>}
        </div>

        <div className="np-foot">
          <button className="btn-cancelar" onClick={onCancelar}>Cancelar</button>
          <button className="btn-wz-confirmar np-salvar" disabled={!valido || salvando} onClick={salvar}>
            <EIcon name="check" size={20} /> {enviandoFoto ? 'Enviando foto…' : salvando ? 'Salvando…' : (ed ? 'Salvar' : 'Salvar e usar')}
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { NovoProdutoSheet, MarcaCombobox, PALETA_MAPA, corEscura });