/* global React */
const { useState, useEffect, useCallback } = React;
const { brl, intFmt } = window;

const _fmtDate = (iso) => {
  if (!iso) return '—';
  const d = new Date(iso);
  return d.toLocaleDateString('pt-BR') + ' · ' + d.toLocaleTimeString('pt-BR', { hour:'2-digit', minute:'2-digit' });
};

// =====================================================================
// MateriasPrimasView — aba principal
// =====================================================================
function MateriasPrimasView({ params, onShowToast, askConfirm, setLoading, disabled, onItemsChange }) {
  const [items, setItems] = useState([]);
  const [loaded, setLoaded] = useState(false);
  const [editing, setEditing] = useState(null); // {modo: 'novo'|'editar', dados: {...}}
  const [xmlOpen, setXmlOpen] = useState(false);
  const [xmlParsed, setXmlParsed] = useState(null);

  // Notifica o pai sempre que a lista mudar
  useEffect(() => {
    if (loaded && onItemsChange) onItemsChange(items);
  }, [items, loaded]);

  const recarregar = useCallback(async () => {
    if (disabled) return;
    setLoading?.({ text: 'Carregando matérias-primas…' });
    try {
      const data = await window.cloud.listMP();
      setItems(data || []);
      setLoaded(true);
      onShowToast(`${(data || []).length} matéria(s)-prima(s) carregada(s)`, 'ok');
    } catch (e) {
      onShowToast('Falha ao carregar: ' + e.message, 'err');
    } finally {
      setLoading?.(null);
    }
  }, [disabled, onShowToast, setLoading]);

  const novo = () => {
    setEditing({
      modo: 'novo',
      dados: {
        nome: '', ncm: '', fornecedor: '', cnpj_fornecedor: '',
        nf_valor: 0, nf_kg: 0,
        nf_icms: 18, nf_ipi: 0, nf_simples: false,
        nf_frete: 0, nf_seguro: 0, nf_outras: 0, nf_desconto: 0,
        nf_xml_info: null, notas: '',
      },
    });
  };

  const abrirParaEdicao = async (mpId) => {
    setLoading?.({ text: 'Carregando…' });
    try {
      const mp = await window.cloud.getMP(mpId);
      const N = (x) => { const n = parseFloat(x); return isNaN(n) ? 0 : n; };
      setEditing({
        modo: 'editar',
        dados: {
          ...mp,
          // garantir tipos numéricos (Postgres retorna strings para numeric)
          nf_valor: N(mp.nf_valor), nf_kg: N(mp.nf_kg),
          nf_icms: N(mp.nf_icms), nf_ipi: N(mp.nf_ipi),
          nf_frete: N(mp.nf_frete), nf_seguro: N(mp.nf_seguro),
          nf_outras: N(mp.nf_outras), nf_desconto: N(mp.nf_desconto),
          custo_kg: N(mp.custo_kg),
          nf_simples: !!mp.nf_simples,
        },
      });
    } catch (e) {
      onShowToast('Falha: ' + e.message, 'err');
    } finally {
      setLoading?.(null);
    }
  };

  const salvar = async () => {
    const d = editing.dados;
    if (!d.nome || !d.nome.trim()) {
      onShowToast('Informe o nome da matéria-prima', 'err');
      return;
    }
    if (!d.nf_kg || d.nf_kg <= 0) {
      onShowToast('Informe a quantidade em kg', 'err');
      return;
    }
    setLoading?.({ text: 'Salvando…' });
    try {
      const custoKg = window.cloud.calcularCustoKgMP(d, params);
      const payload = {
        ...d,
        custo_kg: custoKg,
        ultima_compra_em: new Date().toISOString(),
      };
      if (editing.modo === 'novo') {
        const saved = await window.cloud.createMP(payload);
        onShowToast(`MP #${String(saved.seq).padStart(4,'0')} criada · custo R$ ${custoKg.toFixed(4)}/kg`, 'ok');
      } else {
        await window.cloud.updateMP(d.id, payload);
        onShowToast(`MP atualizada · novo custo R$ ${custoKg.toFixed(4)}/kg`, 'ok');
      }
      setEditing(null);
      await recarregar();
    } catch (e) {
      onShowToast('Falha: ' + e.message, 'err');
    } finally {
      setLoading?.(null);
    }
  };

  const excluir = async (mp) => {
    const ok = await askConfirm({
      title: 'Excluir matéria-prima',
      message: `Excluir "${mp.nome}" (MP #${String(mp.seq).padStart(4,'0')})? Produtos vinculados perdem o link mas continuam funcionando com a NF embutida atual.`,
      okLabel: 'Excluir', danger: true,
    });
    if (!ok) return;
    setLoading?.({ text: 'Excluindo…' });
    try {
      await window.cloud.deleteMP(mp.id);
      setItems(prev => prev.filter(i => i.id !== mp.id));
      onShowToast('Matéria-prima excluída', 'ok');
    } catch (e) {
      onShowToast('Falha: ' + e.message, 'err');
    } finally {
      setLoading?.(null);
    }
  };

  // Importar XML cria nova MP (ou abre seleção de itens se múltiplos)
  const [xmlText, setXmlText] = useState('');
  const processarXmlMP = () => {
    const texto = (xmlText || '').trim();
    if (!texto) { onShowToast('Cole o XML da NF-e', 'err'); return; }
    const parsed = window.parseXmlNFe(texto);
    if (!parsed.ok) { onShowToast(parsed.erro || 'Falha', 'err'); return; }
    const grupos = window.agruparItensXml(parsed.itens);
    if (grupos.length === 1) {
      aplicarXmlNovaMP(window.calcularSelecaoXml(grupos, parsed), parsed);
    } else {
      setXmlParsed(parsed);
      setXmlOpen(true);
    }
  };

  const aplicarXmlNovaMP = (selecao, parsed) => {
    // Cria editor preenchido a partir do XML
    setXmlText('');
    setXmlOpen(false);
    setXmlParsed(null);
    setEditing({
      modo: 'novo',
      dados: {
        nome: selecao.descricoes?.[0] || parsed.fornecedor || 'Nova matéria-prima',
        ncm: selecao.ncms?.[0] || '',
        fornecedor: parsed.fornecedor || '',
        cnpj_fornecedor: parsed.cnpj || '',
        descricao_xml: selecao.descricoes?.join(' / ') || '',
        nf_valor: +selecao.valor.toFixed(2),
        nf_kg: selecao.isKg ? +selecao.qtd.toFixed(3) : 0,
        nf_icms: +selecao.aliqICMS.toFixed(2),
        nf_ipi: +selecao.aliqIPI.toFixed(2),
        nf_simples: parsed.isSimples,
        nf_frete: +(selecao.frete || 0).toFixed(2),
        nf_seguro: +(selecao.seguro || 0).toFixed(2),
        nf_outras: +(selecao.outras || 0).toFixed(2),
        nf_desconto: +(selecao.desconto || 0).toFixed(2),
        nf_xml_info: {
          fornecedor: parsed.fornecedor, cnpj: parsed.cnpj,
          descricoes: selecao.descricoes, ncms: selecao.ncms,
          qtdItens: selecao.qtdItens, unidade: selecao.unidade,
          isKg: selecao.isKg, qtdOriginal: selecao.qtd,
          totalItensNF: parsed.itens.length,
          importadoEm: new Date().toISOString(),
        },
        notas: !selecao.isKg ? `⚠ Unidade do XML era "${selecao.unidade}", preencha kg manualmente.` : '',
      },
    });
    let msg = `XML lido: ${selecao.qtdItens} item(s). Revise e salve.`;
    if (selecao.hasST) msg += ' · ⚠ contém ICMS-ST';
    if (!selecao.isKg) msg += ` · ⚠ unidade ${selecao.unidade} — informe kg`;
    onShowToast(msg, selecao.hasST || !selecao.isKg ? 'warn' : 'ok');
  };

  // Renderiza editor (modal) se houver
  if (editing) {
    return <MPEditor
      editing={editing}
      setEditing={setEditing}
      params={params}
      onSalvar={salvar}
      onCancelar={() => setEditing(null)}
    />;
  }

  return (
    <>
      <div className="hist-toolbar">
        <h1>Matérias-primas</h1>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          <span className="meta">{loaded ? `${items.length} cadastradas` : 'Não carregado'}</span>
          <button className="btn btn-ghost btn-sm" onClick={recarregar} disabled={disabled}>
            <window.Icons.IcoRefresh size={12} /> Atualizar
          </button>
          <button className="btn btn-primary btn-sm" onClick={novo} disabled={disabled}>
            <window.Icons.IcoPlus size={12} /> Nova
          </button>
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <div className="h-title">
            <span className="h-num">XML</span>
            <span className="h-label">Importar matéria-prima a partir de NF-e</span>
          </div>
        </div>
        <div className="card-body">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 12, alignItems: 'end' }}>
            <div className="field">
              <textarea
                placeholder="Cole o XML da NF-e da compra…"
                value={xmlText}
                onChange={(e) => setXmlText(e.target.value)}
                rows={5}
                style={{ width: '100%', fontFamily: 'var(--font-mono)', fontSize: 11 }}
              />
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <button className="btn btn-primary" onClick={processarXmlMP} disabled={disabled}>
                <window.Icons.IcoFile size={12} /> Importar XML
              </button>
              <button className="btn btn-sm btn-ghost" onClick={() => setXmlText('')} disabled={!xmlText}>
                Limpar
              </button>
            </div>
          </div>
        </div>
      </div>

      {!loaded && (
        <div className="banner banner-info">
          <window.Icons.IcoStack size={14} />
          <div>Clique em <strong>Atualizar</strong> para carregar o catálogo, ou em <strong>Nova</strong> para criar manualmente.</div>
        </div>
      )}

      {loaded && items.length === 0 && (
        <div className="banner banner-info">
          <window.Icons.IcoStack size={14} />
          <div>Nenhuma matéria-prima cadastrada. Crie uma <strong>Nova</strong> ou cole o XML acima.</div>
        </div>
      )}

      {loaded && items.length > 0 && (
        <div className="hist-table">
          <div className="hist-row head" style={{ gridTemplateColumns: '70px 1fr 120px 110px 110px 130px 100px' }}>
            <div>ID</div>
            <div>Nome</div>
            <div>NCM</div>
            <div className="num" style={{ textAlign: 'right' }}>NF valor</div>
            <div className="num" style={{ textAlign: 'right' }}>Custo/kg</div>
            <div>Última compra</div>
            <div style={{ textAlign: 'right' }}>Ações</div>
          </div>
          {items.map(mp => (
            <div className="hist-row" key={mp.id} style={{ gridTemplateColumns: '70px 1fr 120px 110px 110px 130px 100px' }}>
              <div><span className="seq">MP#{String(mp.seq).padStart(4,'0')}</span></div>
              <div style={{ overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>
                {mp.nome}
                {mp.fornecedor && <div style={{ fontSize: 11, color: 'var(--text-3)' }}>{mp.fornecedor}</div>}
              </div>
              <div style={{ fontFamily: 'var(--font-mono)', color: 'var(--text-3)', fontSize: 11.5 }}>
                {mp.ncm || '—'}
              </div>
              <div className="num">{brl(mp.nf_valor)}</div>
              <div className="num" style={{ color: 'var(--accent)', fontWeight: 600 }}>
                {brl(mp.custo_kg, 4)}
              </div>
              <div style={{ fontSize: 11.5, color: 'var(--text-3)' }}>{_fmtDate(mp.ultima_compra_em)}</div>
              <div className="actions">
                <button onClick={() => abrirParaEdicao(mp.id)} title="Editar / atualizar compra">
                  <window.Icons.IcoEye size={11} /> Editar
                </button>
                <button className="del" onClick={() => excluir(mp)} title="Excluir">
                  <window.Icons.IcoTrash size={11} />
                </button>
              </div>
            </div>
          ))}
        </div>
      )}

      {/* Modal de seleção de itens do XML (múltiplos) */}
      <window.XmlSelectModal
        open={xmlOpen}
        parsed={xmlParsed}
        onCancel={() => { setXmlOpen(false); setXmlParsed(null); }}
        onConfirm={({ selecao, parsed }) => aplicarXmlNovaMP(selecao, parsed)}
      />
    </>
  );
}

// =====================================================================
// MPEditor — formulário de criação/edição de uma matéria-prima
// =====================================================================
function MPEditor({ editing, setEditing, params, onSalvar, onCancelar }) {
  const d = editing.dados;
  // setD usa callback para sempre aplicar o patch sobre o estado mais recente.
  // Isso evita perda de dados quando vários inputs disparam updates em sequência.
  const NUM_FIELDS = ['nf_valor','nf_kg','nf_icms','nf_ipi','nf_frete','nf_seguro','nf_outras','nf_desconto'];
  const coerceNum = (v, fallback = 0) => {
    if (v && typeof v === 'object' && v.target && 'value' in v.target) {
      return coerceNum(v.target.value, fallback);
    }
    if (typeof v === 'number' && isFinite(v)) return v;
    if (typeof window.__parseLocaleNumber === 'function') {
      const parsed = window.__parseLocaleNumber(v);
      return parsed === null ? fallback : parsed;
    }
    const n = parseFloat(String(v ?? '').replace(',', '.'));
    return isNaN(n) ? fallback : n;
  };
  const setD = (patch) => {
    setEditing(prev => {
      const limpo = { ...patch };
      for (const k of NUM_FIELDS) {
        if (k in limpo) limpo[k] = coerceNum(limpo[k], prev.dados[k] ?? 0);
      }
      return { ...prev, dados: { ...prev.dados, ...limpo } };
    });
  };

  // Recalcula custo/kg em tempo real
  const custoKg = window.cloud.calcularCustoKgMP(d, params);

  return (
    <>
      <div className="hist-toolbar">
        <h1>{editing.modo === 'novo' ? 'Nova matéria-prima' : `Editando "${d.nome}"`}</h1>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="btn btn-ghost btn-sm" onClick={onCancelar}>← Voltar</button>
        </div>
      </div>

      {editing.modo === 'editar' && (
        <div className="banner banner-info">
          <window.Icons.IcoRefresh size={14} />
          <div>
            <strong>Atualização sobrescreve a última compra.</strong> Os dados anteriores não são preservados (use Histórico para auditar).
            Produtos vinculados continuam usando o snapshot capturado no momento que vincularam.
          </div>
        </div>
      )}

      <div className="card">
        <div className="card-head">
          <div className="h-title">
            <span className="h-num">01</span>
            <span className="h-label">Identificação</span>
          </div>
        </div>
        <div className="card-body">
          <div className="grid grid-3">
            <div className="field">
              <label className="field-label">Nome da matéria-prima</label>
              <input type="text" value={d.nome || ''} onChange={(e) => setD({ nome: e.target.value })}
                placeholder="ex: BOPP 30mc metalizado" />
            </div>
            <div className="field">
              <label className="field-label">NCM</label>
              <input type="text" value={d.ncm || ''} onChange={(e) => setD({ ncm: e.target.value })}
                placeholder="ex: 39202019" />
            </div>
            <div className="field">
              <label className="field-label">Fornecedor</label>
              <input type="text" value={d.fornecedor || ''} onChange={(e) => setD({ fornecedor: e.target.value })}
                placeholder="ex: Aicrag Embalagens" />
            </div>
            <div className="field">
              <label className="field-label">CNPJ do fornecedor</label>
              <input type="text" value={d.cnpj_fornecedor || ''} onChange={(e) => setD({ cnpj_fornecedor: e.target.value })}
                placeholder="apenas dígitos ou formatado" />
            </div>
            <div className="field" style={{ gridColumn: 'span 2' }}>
              <label className="field-label">Notas (opcional)</label>
              <input type="text" value={d.notas || ''} onChange={(e) => setD({ notas: e.target.value })}
                placeholder="anotações livres" />
            </div>
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <div className="h-title">
            <span className="h-num">02</span>
            <span className="h-label">Dados da última compra</span>
          </div>
        </div>
        <div className="card-body">
          <div className="grid grid-4">
            <div className="field">
              <label className="field-label">Valor total NF (R$)</label>
              <window.NumInput value={d.nf_valor} onChange={(n) => setD({ nf_valor: n })} />
            </div>
            <div className="field">
              <label className="field-label">Quantidade (kg)</label>
              <window.NumInput value={d.nf_kg} onChange={(n) => setD({ nf_kg: n })} />
            </div>
            <div className="field">
              <label className="field-label">ICMS destacado (%)</label>
              <window.NumInput value={d.nf_icms} onChange={(n) => setD({ nf_icms: n })} />
            </div>
            <div className="field">
              <label className="field-label">IPI (%)</label>
              <window.NumInput value={d.nf_ipi} onChange={(n) => setD({ nf_ipi: n })} />
            </div>
            <div className="field">
              <label className="field-label">
                Fornecedor Simples?
                <window.Tooltip text="Se Sim, não há crédito de PIS/COFINS (apenas ICMS via pCredSN)." />
              </label>
              <window.Segmented
                value={d.nf_simples ? 'SIM' : 'NAO'}
                onChange={(v) => setD({ nf_simples: v === 'SIM' })}
                options={[{ value: 'SIM', label: 'Sim' }, { value: 'NAO', label: 'Não' }]}
              />
            </div>
            <div className="field">
              <label className="field-label">Frete (R$)</label>
              <window.NumInput value={d.nf_frete} onChange={(n) => setD({ nf_frete: n })} />
            </div>
            <div className="field">
              <label className="field-label">Seguro (R$)</label>
              <window.NumInput value={d.nf_seguro} onChange={(n) => setD({ nf_seguro: n })} />
            </div>
            <div className="field">
              <label className="field-label">Outras despesas (R$)</label>
              <window.NumInput value={d.nf_outras} onChange={(n) => setD({ nf_outras: n })} />
            </div>
            <div className="field">
              <label className="field-label">Desconto (R$)</label>
              <window.NumInput value={d.nf_desconto} onChange={(n) => setD({ nf_desconto: n })} />
            </div>
          </div>

          <div className="subhead">Custo calculado</div>
          <div className="grid grid-4">
            <div className="field">
              <label className="field-label">Custo líquido por kg</label>
              <div className="computed accent" style={{ fontSize: 16, fontWeight: 700 }}>
                {brl(custoKg, 4)}
              </div>
            </div>
            <div className="field">
              <label className="field-label">Custo bruto (sem créditos)</label>
              <div className="computed">
                {brl(d.nf_kg > 0 ? d.nf_valor / d.nf_kg : 0, 4)}
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="save-bar">
        <span className="hint">
          {editing.modo === 'novo'
            ? 'Após salvar, esta MP estará disponível em "Matéria-prima" no cadastro de produtos.'
            : 'Salvar sobrescreve os dados anteriores. Use somente para registrar a nova compra mais recente.'}
        </span>
        <button className="btn btn-ghost" onClick={onCancelar}>Cancelar</button>
        <button className="btn btn-primary btn-lg" onClick={onSalvar}>
          <window.Icons.IcoSave size={13} /> {editing.modo === 'novo' ? 'Criar MP' : 'Atualizar compra'}
        </button>
      </div>
    </>
  );
}

window.MateriasPrimasView = MateriasPrimasView;

// =====================================================================
// MPSeletor — bloco que aparece na ProdutoView para vincular MP do catálogo
// =====================================================================
function MPSeletor({ produto, setProduto, onShowToast }) {
  const [mps, setMps] = useState([]);
  const [carregando, setCarregando] = useState(false);
  const [carregado, setCarregado] = useState(false);
  const [mostraSeletor, setMostraSeletor] = useState(false);

  // Vínculo armazenado em produto.nf.materiaPrimaId (e snapshot em .materiaPrimaSnapshot)
  const mpId = produto.nf.materiaPrimaId;
  const snapshot = produto.nf.materiaPrimaSnapshot;

  const carregarLista = async () => {
    setCarregando(true);
    try {
      const data = await window.cloud.listMP();
      setMps(data || []);
      setCarregado(true);
    } catch (e) {
      onShowToast('Falha ao carregar matérias-primas: ' + e.message, 'err');
    } finally {
      setCarregando(false);
    }
  };

  const abrirSeletor = async () => {
    if (!carregado) await carregarLista();
    setMostraSeletor(true);
  };

  const escolherMP = async (mpResumo) => {
    setMostraSeletor(false);
    setCarregando(true);
    try {
      // Busca dados completos da MP escolhida (lista só traz campos resumidos)
      const mp = await window.cloud.getMP(mpResumo.id);
      const N = (x) => { const n = parseFloat(x); return isNaN(n) ? 0 : n; };
      // Aplica no produto: preenche NF a partir da MP e guarda vínculo + snapshot
      setProduto({
        ...produto,
        nf: {
          ...produto.nf,
          valor: N(mp.nf_valor),
          kg: N(mp.nf_kg),
          icms: N(mp.nf_icms),
          ipi: N(mp.nf_ipi),
          simples: mp.nf_simples ? 'SIM' : 'NAO',
          frete: N(mp.nf_frete),
          seguro: N(mp.nf_seguro),
          outras: N(mp.nf_outras),
          desconto: N(mp.nf_desconto),
          xmlInfo: mp.nf_xml_info,
          // Vínculo:
          materiaPrimaId: mp.id,
          materiaPrimaSnapshot: {
            id: mp.id,
            seq: mp.seq,
            nome: mp.nome,
            ncm: mp.ncm,
            fornecedor: mp.fornecedor,
            custoKgCalculado: N(mp.custo_kg),
            ultimaCompraEm: mp.ultima_compra_em,
            vinculadoEm: new Date().toISOString(),
          },
        },
      });
      onShowToast(`MP "${mp.nome}" vinculada · custo R$ ${N(mp.custo_kg).toFixed(4)}/kg`, 'ok');
    } catch (e) {
      onShowToast('Falha: ' + e.message, 'err');
    } finally {
      setCarregando(false);
    }
  };

  const desvincular = () => {
    // Remove vínculo MAS preserva os campos de NF (B2: produto continua funcionando)
    const { materiaPrimaId, materiaPrimaSnapshot, ...rest } = produto.nf;
    setProduto({ ...produto, nf: rest });
    onShowToast('Vínculo removido. NF embutida preservada.', 'ok');
  };

  return (
    <div className="card">
      <div className="card-head">
        <div className="h-title">
          <span className="h-num">MP</span>
          <span className="h-label">Matéria-prima do catálogo</span>
        </div>
        <span className="h-sub">Opcional. Vincule a uma MP cadastrada para preencher automaticamente.</span>
      </div>
      <div className="card-body">
        {mpId && snapshot ? (
          <div className="banner banner-accent" style={{ marginBottom: 0 }}>
            <window.Icons.IcoStack size={14} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <strong>Vinculado a MP #{String(snapshot.seq).padStart(4,'0')} · {snapshot.nome}</strong>
              <div style={{ fontSize: 11.5, color: 'var(--text-3)', marginTop: 2 }}>
                Fornecedor: {snapshot.fornecedor || '—'} ·
                Custo: {brl(snapshot.custoKgCalculado || 0, 4)}/kg ·
                Última compra: {_fmtDate(snapshot.ultimaCompraEm)}
              </div>
              <div style={{ fontSize: 11, color: 'var(--text-4)', marginTop: 4 }}>
                Vinculado em {_fmtDate(snapshot.vinculadoEm)}. Edite a MP em "Matérias-primas" e revincule aqui para atualizar.
              </div>
            </div>
            <div style={{ display: 'flex', gap: 6, flexDirection: 'column' }}>
              <button className="btn btn-ghost btn-sm" onClick={abrirSeletor}>
                <window.Icons.IcoRefresh size={11} /> Trocar
              </button>
              <button className="btn btn-ghost btn-sm" onClick={desvincular} style={{ color: 'var(--negative)' }}>
                Desvincular
              </button>
            </div>
          </div>
        ) : (
          <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
            <div style={{ flex: 1, fontSize: 12.5, color: 'var(--text-3)' }}>
              Sem MP vinculada. A NF abaixo é editada manualmente (ou via XML).
            </div>
            <button className="btn btn-primary btn-sm" onClick={abrirSeletor} disabled={carregando}>
              <window.Icons.IcoStack size={12} /> {carregando ? 'Carregando…' : 'Vincular MP'}
            </button>
          </div>
        )}

        {mostraSeletor && (
          <MPSeletorModal
            mps={mps}
            onPick={escolherMP}
            onClose={() => setMostraSeletor(false)}
            onReload={carregarLista}
            carregando={carregando}
          />
        )}
      </div>
    </div>
  );
}

// Modal de seleção (lista) — reusa estilos do XmlSelectModal
function MPSeletorModal({ mps, onPick, onClose, onReload, carregando }) {
  const [filtro, setFiltro] = useState('');
  const filtradas = !filtro ? mps : mps.filter(m =>
    (m.nome || '').toLowerCase().includes(filtro.toLowerCase()) ||
    (m.fornecedor || '').toLowerCase().includes(filtro.toLowerCase()) ||
    (m.ncm || '').includes(filtro)
  );

  return (
    <div className="xml-modal-overlay" onClick={onClose}>
      <div className="xml-modal-card" onClick={(e) => e.stopPropagation()}>
        <div className="xml-modal-head">
          <div>
            <div className="xml-modal-title">Selecionar matéria-prima</div>
            <div className="xml-modal-sub">{mps.length} cadastradas — escolha uma para vincular ao produto</div>
          </div>
          <button className="xml-modal-close" onClick={onClose}>×</button>
        </div>

        <div className="xml-modal-toolbar">
          <input
            type="text"
            value={filtro}
            onChange={(e) => setFiltro(e.target.value)}
            placeholder="Filtrar por nome, fornecedor ou NCM…"
            style={{ flex: 1, padding: '6px 10px', fontSize: 12.5 }}
          />
          <button className="btn btn-ghost btn-sm" onClick={onReload} disabled={carregando}>
            <window.Icons.IcoRefresh size={11} /> Atualizar
          </button>
        </div>

        <div className="xml-modal-list">
          {filtradas.length === 0 && (
            <div style={{ padding: 30, textAlign: 'center', color: 'var(--text-3)', fontSize: 12.5 }}>
              {mps.length === 0
                ? 'Nenhuma MP cadastrada. Crie em "Matérias-primas" no menu.'
                : 'Nenhuma MP corresponde ao filtro.'}
            </div>
          )}
          {filtradas.map((mp) => (
            <div key={mp.id} className="xml-item" onClick={() => onPick(mp)} style={{ cursor: 'pointer' }}>
              <div className="xml-item-body">
                <div className="xml-item-title">
                  MP#{String(mp.seq).padStart(4,'0')} · {mp.nome}
                </div>
                <div className="xml-item-meta">
                  {mp.fornecedor && <span>{mp.fornecedor} · </span>}
                  {mp.ncm && <span>NCM {mp.ncm} · </span>}
                  <span>NF {brl(mp.nf_valor)} · {intFmt(mp.nf_kg)} kg</span>
                </div>
              </div>
              <div className="xml-item-value" style={{ color: 'var(--accent)' }}>
                {brl(mp.custo_kg, 4)}/kg
              </div>
            </div>
          ))}
        </div>

        <div className="xml-modal-foot">
          <button className="btn btn-ghost" onClick={onClose}>Cancelar</button>
        </div>
      </div>
    </div>
  );
}

window.MPSeletor = MPSeletor;