/* Editor de mapa (gestor) — desenha as `zonas` reais em metros e aplica no
   Mapa operacional. Gate por PIN (mesmo padrão de Cadastros.jsx). O motor de
   desenho é vanilla JS (estoque/editor-mapa-core.js, ver comentário lá em
   cima do porquê) — este componente só monta/desmonta ele e fala com o
   Supabase (editar_zona → aplicar_layout → editar_galpao_edges). */

function EditorMapaView({ db, onClose, onSaved, sessaoInicial, onAutenticado }) {
  const { useState, useRef, useEffect } = React;
  const [autorizado, setAutorizado] = useState(!!sessaoInicial);
  const [gestor, setGestor] = useState(sessaoInicial ? sessaoInicial.operador : null);
  const [pin, setPin] = useState(sessaoInicial ? sessaoInicial.pin : null);

  const galIds = Object.keys(db.galpoes).map(Number).sort((a, b) => a - b);
  const [galId, setGalId] = useState(galIds[0]);
  const [carregando, setCarregando] = useState(false);
  const [erro, setErro] = useState(null);
  const [dirty, setDirty] = useState(false);
  const [salvando, setSalvando] = useState(false);
  const [salvoMsg, setSalvoMsg] = useState(null);

  const hostRef = useRef(null);
  const editorRef = useRef(null);

  useEffect(() => {
    if (!autorizado) return;
    editorRef.current = window.EditorMapaCore.montar(hostRef.current, { onDirty: () => setDirty(true) });
    return () => { editorRef.current.destruir(); editorRef.current = null; };
  }, [autorizado]);

  useEffect(() => {
    if (!autorizado || !editorRef.current) return;
    setCarregando(true); setErro(null); setSalvoMsg(null); setDirty(false);
    ESTQ.carregarZonas(galId)
      .then((data) => { editorRef.current.carregar(data); setCarregando(false); })
      .catch((e) => { setErro(e.message); setCarregando(false); });
  }, [autorizado, galId]);

  function trocarGalpao(g) {
    if (g === galId) return;
    if (dirty && !confirm('Descartar alterações não salvas neste galpão?')) return;
    setGalId(g);
  }

  async function salvar() {
    const { edges, upserts, deletes } = editorRef.current.obterParaSalvar();
    setSalvando(true); setErro(null);
    try {
      for (const zonaId of deletes) {
        await ESTQ.chamarRpc('editar_zona', {
          p_pin: pin, p_acao: 'delete', p_zona_id: zonaId,
          p_galpao_id: galId, p_tipo: 'fixed', p_label: '', p_x: 0, p_y: 0, p_w: 1, p_h: 1,
        });
      }
      for (const u of upserts) {
        await ESTQ.chamarRpc('editar_zona', {
          p_pin: pin, p_acao: 'upsert', p_zona_id: u.zonaId,
          p_galpao_id: galId, p_tipo: u.tipo, p_label: u.label,
          p_x: u.x, p_y: u.y, p_w: u.w, p_h: u.h,
          p_orientation: u.orientation, p_levels: u.levels,
          p_produto_id: u.produtoId, p_fixed_infra: u.fixedInfra,
          p_texto: u.texto, p_ordem: u.ordem,
        });
      }
      await ESTQ.chamarRpc('aplicar_layout', { p_pin: pin, p_galpao_id: galId });
      await ESTQ.chamarRpc('editar_galpao_edges', {
        p_pin: pin, p_galpao_id: galId,
        p_edge_top: edges.top, p_edge_right: edges.right, p_edge_bottom: edges.bottom, p_edge_left: edges.left,
      });
      const fresh = await ESTQ.carregarZonas(galId);
      editorRef.current.carregar(fresh);
      setDirty(false);
      if (onSaved) await onSaved();
      setSalvoMsg('Mapa salvo — células do Mapa já atualizadas. Pallets que ficaram sem posição foram para o Rascunho como "fora de posição".');
    } catch (e) {
      setErro(e.message);
    } finally {
      setSalvando(false);
    }
  }

  if (!autorizado) {
    return (
      <div className="cadastros-view" data-screen-label="Editor de mapa — PIN">
        <div className="cad-pin-gate">
          <div className="cad-pin-card">
            <div className="cpg-ic"><EIcon name="lock" size={30} /></div>
            <h2>Editar mapa</h2>
            <p>Área restrita ao gestor. Informe seu PIN para continuar.</p>
            <PinPad onValidado={(op, p) => { setGestor(op); setPin(p); setAutorizado(true); onAutenticado && onAutenticado(op, p); }}
              permite={(op) => op.papel === 'gestor'} acaoLabel="editar o mapa" />
            <button className="btn-cancelar" style={{ margin: '8px auto 0' }} onClick={onClose}>Voltar</button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="cadastros-view" data-screen-label={'Editor de mapa G' + galId}>
      <div className="tab-abas cad">
        {galIds.map((g) => (
          <button key={g} className={'tab-aba' + (g === galId ? ' on' : '')} onClick={() => trocarGalpao(g)}>
            G{g}
          </button>
        ))}
        <span className="cad-gestor">Gestor: {gestor.nome.split(' ')[0]}</span>
        <button className="btn-wz-confirmar" style={{ width: 'auto', marginLeft: 'auto' }} disabled={!dirty || salvando} onClick={salvar}>
          <EIcon name="check" size={20} /> {salvando ? 'Salvando…' : 'Salvar e aplicar ao mapa'}
        </button>
        <button className="btn-fechar-sheet" onClick={onClose}><EIcon name="x" size={19} /> Fechar</button>
      </div>

      {carregando && <div style={{ padding: '10px 24px', color: 'var(--gray-500)' }}>Carregando zonas…</div>}
      {erro && <div className="aviso-resumo erro" style={{ margin: '10px 24px' }}><EIcon name="alert" size={18} /> {erro}</div>}
      {salvoMsg && <div className="aviso-resumo navy" style={{ margin: '10px 24px' }}><EIcon name="check" size={18} /> {salvoMsg}</div>}

      <div ref={hostRef}></div>
    </div>
  );
}

window.EditorMapaView = EditorMapaView;