/* global React, Icon, BRL, NUM, Ticker, Drawer */

function MPdv({ onNav }) {
  const [tab, setTab] = React.useState('pdv');
  const [sku, setSku] = React.useState(null);
  const [skuTab, setSkuTab] = React.useState('det');
  const [caixaAberto, setCaixaAberto] = React.useState(true);
  const [showEncerrar, setShowEncerrar] = React.useState(false);
  const [produtoForm, setProdutoForm] = React.useState(null); // { mode: 'add' } | { mode: 'edit', produto }
  const [produtoToDelete, setProdutoToDelete] = React.useState(null);
  const [fornecedorForm, setFornecedorForm] = React.useState(null);
  const [fornecedorToDelete, setFornecedorToDelete] = React.useState(null);
  const [clientes, setClientes] = React.useState([]);
  const [loadingClientes, setLoadingClientes] = React.useState(true);
  const [clienteForm, setClienteForm] = React.useState(null);
  const [clienteToDelete, setClienteToDelete] = React.useState(null);
  const [clienteOpen, setClienteOpen] = React.useState(null);
  const [clienteTab, setClienteTab] = React.useState('det');
  const [toast, setToast] = React.useState(null);
  const [produtos, setProdutos] = React.useState([]);
  const [fornecedores, setFornecedores] = React.useState([]);
  const [loadingProdutos, setLoadingProdutos] = React.useState(true);
  const [loadingFornecedores, setLoadingFornecedores] = React.useState(true);
  const [loadError, setLoadError] = React.useState(null);
  const showToast = (msg, ms = 4000) => { setToast(msg); setTimeout(() => setToast(null), ms); };

  const reloadProdutos = React.useCallback(async () => {
    try {
      setLoadError(null);
      const rows = await window.dataApi.listProdutos();
      setProdutos(rows);
    } catch (e) {
      setLoadError(e?.message || 'Falha ao carregar produtos');
    } finally {
      setLoadingProdutos(false);
    }
  }, []);

  const reloadFornecedores = React.useCallback(async () => {
    try {
      const rows = await window.dataApi.listFornecedores();
      setFornecedores(rows);
    } catch (e) {
      // ignora silencioso (já há erro de produtos)
    } finally {
      setLoadingFornecedores(false);
    }
  }, []);

  const reloadClientes = React.useCallback(async () => {
    try {
      const rows = await window.dataApi.listClientes();
      setClientes(rows);
    } catch (e) {
      // ignora
    } finally {
      setLoadingClientes(false);
    }
  }, []);

  React.useEffect(() => {
    reloadProdutos();
    reloadFornecedores();
    reloadClientes();
  }, [reloadProdutos, reloadFornecedores, reloadClientes]);

  const handleSaveProduto = async (form) => {
    const editing = produtoForm?.mode === 'edit';
    try {
      if (editing) {
        await window.dataApi.updateProduto(produtoForm.produto.id, form);
        await reloadProdutos();
        setProdutoForm(null);
        showToast(`Produto ${form.cod} atualizado`);
      } else {
        const created = await window.dataApi.insertProduto(form);
        await reloadProdutos();
        setProdutoForm(null);
        showToast(`Produto ${created.cod} cadastrado · ${created.desc}`);
      }
    } catch (e) {
      const msg = e?.message || String(e);
      if (/duplicate|unique/i.test(msg)) throw new Error('Já existe um produto com este código.');
      throw e;
    }
  };

  const handleDeleteProduto = async () => {
    await window.dataApi.deleteProduto(produtoToDelete.id);
    await reloadProdutos();
    const cod = produtoToDelete.cod;
    setProdutoToDelete(null);
    showToast(`Produto ${cod} excluído`);
  };

  const handleSaveFornecedor = async (form) => {
    const editing = fornecedorForm?.mode === 'edit';
    try {
      if (editing) {
        await window.dataApi.updateFornecedor(fornecedorForm.fornecedor.id, form);
        await reloadFornecedores();
        setFornecedorForm(null);
        showToast(`Fornecedor ${form.nome} atualizado`);
      } else {
        const created = await window.dataApi.insertFornecedor(form);
        await reloadFornecedores();
        setFornecedorForm(null);
        showToast(`Fornecedor ${created.nome} cadastrado`);
      }
    } catch (e) {
      const msg = e?.message || String(e);
      if (/duplicate|unique/i.test(msg)) throw new Error('Já existe um fornecedor com este CNPJ.');
      throw e;
    }
  };

  const handleSaveCliente = async (form) => {
    const editing = clienteForm?.mode === 'edit';
    try {
      if (editing) {
        await window.dataApi.updateCliente(clienteForm.cliente.id, form);
        await reloadClientes();
        setClienteForm(null);
        showToast(`Cliente ${form.nome} atualizado`);
      } else {
        const created = await window.dataApi.insertCliente(form);
        await reloadClientes();
        setClienteForm(null);
        showToast(`Cliente ${created.nome} cadastrado`);
      }
    } catch (e) {
      const msg = e?.message || String(e);
      if (/duplicate|unique/i.test(msg)) throw new Error('Já existe um cliente com este CNPJ.');
      throw e;
    }
  };

  const handleDeleteCliente = async () => {
    await window.dataApi.deleteCliente(clienteToDelete.id);
    await reloadClientes();
    const nome = clienteToDelete.nome;
    setClienteToDelete(null);
    showToast(`Cliente ${nome} excluído`);
  };

  const handleDeleteFornecedor = async () => {
    try {
      await window.dataApi.deleteFornecedor(fornecedorToDelete.id);
      await reloadFornecedores();
      await reloadProdutos(); // pode ter mexido em fornecedor_principal_id de produtos
      const nome = fornecedorToDelete.nome;
      setFornecedorToDelete(null);
      showToast(`Fornecedor ${nome} excluído`);
    } catch (e) {
      throw e;
    }
  };

  return (
    <>
      <Ticker />
      <div className="page">
        <div className="page-header">
          <div>
            <div className="eyebrow"><span>Operação Loja Física</span><span className="chip">M11</span></div>
            <h1 className="page-title">PDV · Estoque · NF Manual</h1>
            <p className="page-sub">BTM Serviços e Comércio LTDA · CNPJ 33.804.351/0001-04 · operação varejo + emissão NF-e por produto/cliente cadastrado.</p>
          </div>
          <div className="flex items-center gap-3">
            <span className={`badge ${caixaAberto ? 'badge-lime' : 'badge-red'}`}>
              {caixaAberto ? `CAIXA ABERTO · ${(window.sglUser?.displayName || 'OPERADOR').toUpperCase()}` : 'CAIXA FECHADO'}
            </span>
            <button className="btn" onClick={() => setTab('fech')}><Icon name="print" /> Fechamento</button>
          </div>
        </div>
        {loadError && (
          <div className="alert-banner alert-red" style={{ marginBottom: 12 }}>
            <Icon name="warn" size={13} />
            <div style={{ flex: 1 }}>Falha ao carregar produtos: {loadError}</div>
            <button className="btn btn-ghost btn-sm" onClick={reload}>Tentar novamente</button>
          </div>
        )}
        <div className="tabs" style={{ marginBottom: 14 }}>
          <div className={`tab ${tab === 'pdv' ? 'active' : ''}`} onClick={() => setTab('pdv')}>PDV (Venda)</div>
          <div className={`tab ${tab === 'est' ? 'active' : ''}`} onClick={() => setTab('est')}>Estoque <span className="count">{loadingProdutos ? '...' : produtos.length}</span></div>
          <div className={`tab ${tab === 'forn' ? 'active' : ''}`} onClick={() => setTab('forn')}>Fornecedores <span className="count">{loadingFornecedores ? '...' : fornecedores.length}</span></div>
          <div className={`tab ${tab === 'cli' ? 'active' : ''}`} onClick={() => setTab('cli')}>Clientes <span className="count">{loadingClientes ? '...' : clientes.length}</span></div>
          <div className={`tab ${tab === 'nf' ? 'active' : ''}`} onClick={() => setTab('nf')}>NF Manual</div>
          <div className={`tab ${tab === 'fech' ? 'active' : ''}`} onClick={() => setTab('fech')}>Fechamento de Caixa</div>
        </div>
        {tab === 'pdv' && <PDVView produtos={produtos} />}
        {tab === 'est' && <EstoqueView produtos={produtos} loading={loadingProdutos}
          onOpen={s => { setSku(s); setSkuTab('det'); }}
          onAdd={() => setProdutoForm({ mode: 'add' })}
          onEdit={(p) => setProdutoForm({ mode: 'edit', produto: p })}
          onDelete={(p) => setProdutoToDelete(p)} />}
        {tab === 'forn' && <FornecedoresView fornecedores={fornecedores} loading={loadingFornecedores}
          onAdd={() => setFornecedorForm({ mode: 'add' })}
          onEdit={(f) => setFornecedorForm({ mode: 'edit', fornecedor: f })}
          onDelete={(f) => setFornecedorToDelete(f)} />}
        {tab === 'cli' && <ClientesView clientes={clientes} loading={loadingClientes}
          onAdd={() => setClienteForm({ mode: 'add' })}
          onOpen={(c) => { setClienteOpen(c); setClienteTab('det'); }}
          onEdit={(c) => setClienteForm({ mode: 'edit', cliente: c })}
          onDelete={(c) => setClienteToDelete(c)} />}
        {tab === 'nf' && <NFManualView />}
        {tab === 'fech' && <FechView caixaAberto={caixaAberto} onEncerrar={() => setShowEncerrar(true)} />}
      </div>

      {sku && <SkuDrawer sku={sku} onClose={() => setSku(null)} tab={skuTab} onTab={setSkuTab} onNav={onNav} onReload={reloadProdutos} showToast={showToast} />}
      {produtoForm && (
        <ProdutoFormModal
          produto={produtoForm.mode === 'edit' ? produtoForm.produto : null}
          fornecedores={fornecedores}
          onClose={() => setProdutoForm(null)}
          onSave={handleSaveProduto}
        />
      )}
      {produtoToDelete && (
        <ConfirmDeleteProduto
          produto={produtoToDelete}
          onClose={() => setProdutoToDelete(null)}
          onConfirm={handleDeleteProduto}
        />
      )}
      {fornecedorForm && (
        <FornecedorFormModal
          fornecedor={fornecedorForm.mode === 'edit' ? fornecedorForm.fornecedor : null}
          onClose={() => setFornecedorForm(null)}
          onSave={handleSaveFornecedor}
        />
      )}
      {fornecedorToDelete && (
        <ConfirmDeleteFornecedor
          fornecedor={fornecedorToDelete}
          onClose={() => setFornecedorToDelete(null)}
          onConfirm={handleDeleteFornecedor}
        />
      )}
      {clienteForm && (
        <ClienteFormModal
          cliente={clienteForm.mode === 'edit' ? clienteForm.cliente : null}
          onClose={() => setClienteForm(null)}
          onSave={handleSaveCliente}
        />
      )}
      {clienteToDelete && (
        <ConfirmDeleteCliente
          cliente={clienteToDelete}
          onClose={() => setClienteToDelete(null)}
          onConfirm={handleDeleteCliente}
        />
      )}
      {clienteOpen && (
        <ClienteDrawer
          cliente={clienteOpen}
          tab={clienteTab}
          onTab={setClienteTab}
          onClose={() => setClienteOpen(null)}
          onNav={onNav}
          onEdit={() => { setClienteForm({ mode: 'edit', cliente: clienteOpen }); setClienteOpen(null); }}
          onDelete={() => { setClienteToDelete(clienteOpen); setClienteOpen(null); }}
        />
      )}
      {showEncerrar && (
        <ConfirmModal
          titulo="Encerrar caixa?"
          texto="Esta ação encerra o turno da Maria, gera o relatório do dia (R$ 4.671,60 · 48 vendas) e bloqueia novas vendas até a próxima abertura. Tem certeza?"
          confirmLabel="Sim, encerrar"
          danger={true}
          onClose={() => setShowEncerrar(false)}
          onConfirm={() => {
            setShowEncerrar(false);
            setCaixaAberto(false);
            showToast('Caixa encerrado · relatório do dia gerado · sangria de R$ 487,30 protocolada · turno Maria fechado às ' + new Date().toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' }));
          }}
        />
      )}
      {toast && (
        <div className="alert-banner alert-lime" style={{ position: 'fixed', bottom: 22, right: 22, zIndex: 300, maxWidth: 500, boxShadow: '0 12px 32px rgba(0,0,0,0.5)', animation: 'drawer-fade 0.18s ease-out' }}>
          <Icon name="check" size={14} />
          <div style={{ flex: 1 }}>{toast}</div>
          <button className="btn btn-ghost btn-sm" onClick={() => setToast(null)}><Icon name="x" size={11} /></button>
        </div>
      )}
    </>
  );
}

function ConfirmModal({ titulo, texto, confirmLabel, danger, onClose, onConfirm }) {
  return (
    <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.7)', display: 'grid', placeItems: 'center', zIndex: 200, backdropFilter: 'blur(2px)' }} onClick={onClose}>
      <div style={{ background: 'var(--bg-1)', border: '1px solid var(--line-2)', borderRadius: 10, width: 460 }} onClick={e => e.stopPropagation()}>
        <div className="card-head">
          <Icon name={danger ? 'warn' : 'check'} style={{ color: danger ? 'var(--red)' : 'var(--lime)' }} />
          <div className="t">{titulo}</div>
          <button className="tb-btn" style={{ marginLeft: 'auto' }} onClick={onClose}><Icon name="x" /></button>
        </div>
        <div style={{ padding: 22, fontSize: 13, lineHeight: 1.55, color: 'var(--fg-1)' }}>
          {texto}
        </div>
        <div style={{ padding: 14, borderTop: '1px solid var(--line-1)', display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
          <button className="btn" onClick={onClose}>Cancelar</button>
          <button className={danger ? 'btn btn-danger' : 'btn btn-primary'} onClick={onConfirm}>
            <Icon name={danger ? 'warn' : 'check'} /> {confirmLabel}
          </button>
        </div>
      </div>
    </div>
  );
}

function PDVView({ produtos }) {
  const [cart, setCart] = React.useState([]);
  const [busca, setBusca] = React.useState('');
  const total = cart.reduce((s, i) => s + i.qt * i.vu, 0);
  const inputRef = React.useRef(null);

  const handleBuscar = (e) => {
    if (e.key !== 'Enter' || !busca.trim()) return;
    const q = busca.trim().toLowerCase();
    const p = produtos.find(x =>
      (x.ean && x.ean.toLowerCase() === q) ||
      x.cod.toLowerCase() === q ||
      x.desc.toLowerCase().includes(q)
    );
    if (!p) return;
    setCart(prev => {
      const idx = prev.findIndex(it => it.sku === p.sku);
      if (idx >= 0) {
        const nx = [...prev];
        nx[idx] = { ...nx[idx], qt: nx[idx].qt + 1 };
        return nx;
      }
      return [...prev, { sku: p.sku, desc: p.desc, qt: 1, vu: p.preco || p.custo }];
    });
    setBusca('');
    inputRef.current?.focus();
  };
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 420px', gap: 14, height: 'calc(100vh - 280px)' }}>
      <div className="card" style={{ display: 'flex', flexDirection: 'column' }}>
        <div className="card-head"><Icon name="search" /><div className="t">Buscar produto · código de barras ou descrição</div></div>
        <div style={{ padding: 14, borderBottom: '1px solid var(--line-1)' }}>
          <input
            ref={inputRef}
            className="input"
            placeholder="Leia o código de barras ou digite o código/descrição e pressione Enter..."
            value={busca}
            onChange={e => setBusca(e.target.value)}
            onKeyDown={handleBuscar}
            style={{ fontSize: 14, padding: '10px 12px' }}
            autoFocus
          />
        </div>
        <div style={{ flex: 1, overflowY: 'auto' }}>
          {cart.length === 0 && (
            <div style={{ padding: 48, textAlign: 'center', color: 'var(--fg-3)' }}>
              <Icon name="search" size={28} style={{ opacity: 0.4, marginBottom: 8 }} />
              <div style={{ fontSize: 13 }}>Carrinho vazio</div>
              <div style={{ fontSize: 11.5, marginTop: 4 }}>Use o leitor de código de barras ou busque um produto acima.</div>
            </div>
          )}
          {cart.length > 0 && (
          <table className="tbl">
            <thead><tr><th>SKU</th><th>Descrição</th><th style={{ textAlign: 'center' }}>Qtd</th><th style={{ textAlign: 'right' }}>Vl.Un.</th><th style={{ textAlign: 'right' }}>Subtotal</th><th></th></tr></thead>
            <tbody>
              {cart.map((it, i) => (
                <tr key={i}>
                  <td className="mono">{it.sku}</td>
                  <td>{it.desc}</td>
                  <td style={{ textAlign: 'center' }} className="mono">{it.qt}</td>
                  <td className="num-col">{BRL(it.vu)}</td>
                  <td className="num-col">{BRL(it.qt * it.vu)}</td>
                  <td><button className="btn btn-sm btn-ghost" onClick={() => setCart(cart.filter((_, j) => j !== i))}><Icon name="x" size={11} /></button></td>
                </tr>
              ))}
            </tbody>
          </table>
          )}
        </div>
        <div style={{ padding: 12, borderTop: '1px solid var(--line-1)', display: 'flex', gap: 8 }}>
          <button className="btn"><Icon name="plus" /> Item manual</button>
          <button className="btn">Desconto</button>
          <button className="btn">Cancelar item</button>
          <button className="btn btn-ghost" style={{ marginLeft: 'auto' }} onClick={() => setCart([])}>Cancelar venda</button>
        </div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        <div className="card" style={{ padding: 18, textAlign: 'right' }}>
          <div className="field-label">TOTAL</div>
          <div className="mono" style={{ fontSize: 42, fontWeight: 600, color: 'var(--lime)', lineHeight: 1 }}>{BRL(total)}</div>
          <div className="mono" style={{ fontSize: 11, color: 'var(--fg-3)', marginTop: 6 }}>{cart.length} itens · {cart.reduce((s, i) => s + i.qt, 0)} un.</div>
        </div>
        <div className="card">
          <div className="card-head"><Icon name="dollar" /><div className="t">Forma de pagamento</div></div>
          <div style={{ padding: 14, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8 }}>
            {[
              { i: 'dollar', l: 'Dinheiro' },
              { i: 'dollar', l: 'PIX' },
              { i: 'dollar', l: 'Débito' },
              { i: 'dollar', l: 'Crédito' },
            ].map(p => (
              <button key={p.l} className="btn" style={{ flexDirection: 'column', padding: 14, height: 64 }}>
                <Icon name={p.i} size={18} />
                <span style={{ marginTop: 4 }}>{p.l}</span>
              </button>
            ))}
          </div>
          <div style={{ padding: '0 14px 14px' }}>
            <button className="btn btn-primary" style={{ width: '100%', padding: 14, fontSize: 13 }}><Icon name="check" /> Finalizar venda · F10</button>
          </div>
        </div>
        <div className="card">
          <div className="card-head"><Icon name="file" /><div className="t">Cupom / NFC-e</div></div>
          <div style={{ padding: 14, display: 'flex', flexDirection: 'column', gap: 6 }}>
            <label className="flex items-center gap-2" style={{ fontSize: 12 }}><input type="checkbox" /> CPF na nota</label>
            <input className="input" placeholder="CPF/CNPJ (opcional)" />
            <label className="flex items-center gap-2" style={{ fontSize: 12 }}><input type="checkbox" defaultChecked /> Emitir NFC-e ao finalizar</label>
          </div>
        </div>
      </div>
    </div>
  );
}

function EstoqueView({ produtos, loading, onOpen, onAdd, onEdit, onDelete }) {
  const [busca, setBusca] = React.useState('');
  const filtrados = React.useMemo(() => {
    if (!busca.trim()) return produtos;
    const q = busca.trim().toLowerCase();
    return produtos.filter(p =>
      (p.sku && p.sku.toLowerCase().includes(q)) ||
      p.cod.toLowerCase().includes(q) ||
      p.desc.toLowerCase().includes(q) ||
      (p.cat && p.cat.toLowerCase().includes(q))
    );
  }, [produtos, busca]);

  const abaixoMin = produtos.filter(s => s.st < s.min).length;
  const valorEstoque = produtos.reduce((a, s) => a + s.st * s.custo, 0);
  const giroMedio = produtos.length > 0
    ? Math.round(produtos.reduce((a, s) => a + (s.giro || 0), 0) / produtos.length)
    : 0;

  return (
    <div>
      <div className="grid-4" style={{ marginBottom: 14 }}>
        <KpiSmall l="PRODUTOS ATIVOS" v={loading ? '...' : NUM(produtos.length)} sub="catálogo BTM" />
        <KpiSmall l="GIRO MÉDIO" v={loading ? '...' : (giroMedio + ' d')} sub="histórico mov." cls="lime" />
        <KpiSmall l="ABAIXO DO MÍN." v={loading ? '...' : (abaixoMin + ' / ' + produtos.length)} sub="reposição urgente" cls={abaixoMin > 0 ? 'amber' : 'lime'} />
        <KpiSmall l="VALOR ESTOQUE" v={loading ? '...' : BRL(valorEstoque)} sub="custo médio" />
      </div>
      <div className="card">
        <div className="card-head">
          <Icon name="box" />
          <div className="t">Estoque por SKU</div>
          <div className="s">clique para detalhes</div>
          <div style={{ marginLeft: 'auto', display: 'flex', gap: 6 }}>
            <input
              className="input"
              placeholder="Buscar SKU, código ou descrição..."
              value={busca}
              onChange={e => setBusca(e.target.value)}
              style={{ width: 240 }}
            />
            <button className="btn btn-sm"><Icon name="filter" size={11} /> Filtros</button>
            <button className="btn btn-sm btn-primary" onClick={onAdd}><Icon name="plus" size={11} /> Novo produto</button>
          </div>
        </div>
        <table className="tbl">
          <thead>
            <tr>
              <th>SKU</th>
              <th>Descrição</th>
              <th>Categoria</th>
              <th style={{ textAlign: 'right' }}>Estoque</th>
              <th style={{ textAlign: 'right' }}>Mínimo</th>
              <th>Movim. 30d</th>
              <th>Status</th>
              <th style={{ width: 96, textAlign: 'right' }}>Ações</th>
            </tr>
          </thead>
          <tbody>
            {loading && (
              <tr><td colSpan={8} style={{ padding: 32, textAlign: 'center', color: 'var(--fg-3)' }}>
                <span className="spinner" style={{ marginRight: 8 }}></span> Carregando produtos do Supabase...
              </td></tr>
            )}
            {!loading && filtrados.length === 0 && (
              <tr><td colSpan={8} style={{ padding: 32, textAlign: 'center', color: 'var(--fg-3)' }}>
                {produtos.length === 0
                  ? 'Nenhum produto cadastrado. Use o cadastro de produtos para começar.'
                  : 'Nenhum produto encontrado para a busca.'}
              </td></tr>
            )}
            {!loading && filtrados.map(r => {
              const baixo = r.st < r.min;
              const atencao = r.st < r.min * 1.5;
              return (
                <tr key={r.id} onClick={() => onOpen(r)} style={{ cursor: 'pointer' }}>
                  <td className="mono">{r.sku}</td>
                  <td>
                    <div>{r.desc}</div>
                    <div style={{ fontSize: 10.5, color: 'var(--fg-3)', fontFamily: 'IBM Plex Mono' }}>{r.cod}</div>
                  </td>
                  <td><span className="badge">{r.cat}</span></td>
                  <td className="num-col" style={{ color: baixo ? 'var(--red)' : 'var(--fg-0)', fontWeight: baixo ? 600 : 400 }}>{NUM(r.st)}</td>
                  <td className="num-col">{r.min}</td>
                  <td className="mono" style={{ fontSize: 11 }}>
                    <span style={{ color: 'var(--lime)' }}>+{r.mov30.entr}</span>
                    <span style={{ color: 'var(--fg-3)' }}> / </span>
                    <span style={{ color: 'var(--red)' }}>-{r.mov30.said}</span>
                  </td>
                  <td>{baixo ? <span className="badge badge-red">REPOR</span> : atencao ? <span className="badge badge-amber">ATENÇÃO</span> : <span className="badge badge-lime">OK</span>}</td>
                  <td style={{ textAlign: 'right' }} onClick={e => e.stopPropagation()}>
                    <button className="btn btn-sm btn-ghost" title="Editar" onClick={() => onEdit(r)}><Icon name="edit" size={12} /></button>
                    <button className="btn btn-sm btn-ghost" title="Excluir" onClick={() => onDelete(r)} style={{ marginLeft: 4 }}><Icon name="x" size={12} /></button>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function KpiSmall({ l, v, sub, cls }) {
  return (
    <div className="card" style={{ padding: 12 }}>
      <div className="field-label">{l}</div>
      <div className="mono" style={{ fontSize: 22, fontWeight: 600, marginTop: 4, color: cls === 'amber' ? 'var(--amber)' : cls === 'lime' ? 'var(--lime)' : 'var(--fg-0)' }}>{v}</div>
      <div style={{ fontSize: 10.5, color: 'var(--fg-3)', fontFamily: 'IBM Plex Mono', marginTop: 2 }}>{sub}</div>
    </div>
  );
}

function NFManualView() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
      <div className="card">
        <div className="card-head"><Icon name="file" /><div className="t">Emissão NF-e Manual</div></div>
        <div style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 12 }}>
          <div><div className="field-label">CLIENTE (CNPJ/CPF)</div><input className="input" placeholder="00.000.000/0000-00 ou nome..." /></div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            <div><div className="field-label">NATUREZA OPERAÇÃO</div><select className="input"><option>Venda</option><option>Devolução</option><option>Bonificação</option></select></div>
            <div><div className="field-label">CFOP</div><input className="input" defaultValue="5102" /></div>
          </div>
          <div><div className="field-label">PRODUTO</div><input className="input" placeholder="SKU ou descrição..." /></div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10 }}>
            <div><div className="field-label">QTD</div><input className="input" defaultValue="1" /></div>
            <div><div className="field-label">VL.UN</div><input className="input" defaultValue="0,00" /></div>
            <div><div className="field-label">DESCONTO</div><input className="input" defaultValue="0,00" /></div>
          </div>
          <button className="btn"><Icon name="plus" /> Adicionar item</button>
        </div>
      </div>
      <div className="card">
        <div className="card-head"><Icon name="check" /><div className="t">Preview da NF-e</div></div>
        <div style={{ padding: 18, background: 'var(--bg-1)' }}>
          <div className="mono" style={{ fontSize: 11, color: 'var(--fg-3)' }}>BTM SERVIÇOS E COMÉRCIO LTDA — CNPJ 33.804.351/0001-04</div>
          <div style={{ marginTop: 12, padding: 12, background: 'var(--bg-2)', border: '1px solid var(--line-1)' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}><span style={{ fontSize: 11, color: 'var(--fg-3)' }}>NÚMERO</span><span className="mono" style={{ fontWeight: 600 }}>002848</span></div>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 4 }}><span style={{ fontSize: 11, color: 'var(--fg-3)' }}>SÉRIE</span><span className="mono">1</span></div>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 4 }}><span style={{ fontSize: 11, color: 'var(--fg-3)' }}>CHAVE</span><span className="mono" style={{ fontSize: 9.5 }}>3526 0512 3456 7800 0190</span></div>
          </div>
          <div style={{ marginTop: 14, padding: 14, background: 'var(--bg-2)' }}>
            <div className="field-label">VALORES</div>
            <div style={{ marginTop: 8, display: 'flex', flexDirection: 'column', gap: 4 }}>
              <Row k="Subtotal" v="R$ 0,00" />
              <Row k="Desconto" v="R$ 0,00" />
              <Row k="ICMS (18%)" v="R$ 0,00" />
              <Row k="Total NF" v="R$ 0,00" bold />
            </div>
          </div>
          <button className="btn btn-primary" style={{ width: '100%', marginTop: 14 }}><Icon name="check" /> Transmitir SEFAZ</button>
        </div>
      </div>
    </div>
  );
}

function Row({ k, v, bold }) {
  return <div style={{ display: 'flex', justifyContent: 'space-between' }}><span style={{ fontSize: 11.5, color: 'var(--fg-3)' }}>{k}</span><span className="mono" style={{ fontWeight: bold ? 600 : 400, fontSize: bold ? 14 : 12, color: bold ? 'var(--lime)' : 'var(--fg-0)' }}>{v}</span></div>;
}

function FechView({ caixaAberto, onEncerrar }) {
  return (
    <div className="card">
      <div className="card-head">
        <Icon name="dollar" />
        <div className="t">Fechamento de Caixa · {new Date().toLocaleDateString('pt-BR')} · {window.sglUser?.displayName || 'Operador'}</div>
        <span className={`badge ${caixaAberto ? 'badge-lime' : 'badge-red'}`} style={{ marginLeft: 'auto' }}>{caixaAberto ? 'CAIXA ABERTO' : 'CAIXA FECHADO'}</span>
      </div>
      <div style={{ padding: 18, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
        <div>
          <div className="field-label">MOVIMENTAÇÃO POR FORMA</div>
          <div style={{ marginTop: 10, display: 'flex', flexDirection: 'column', gap: 6 }}>
            <Row k="Dinheiro" v="R$ 487,30" />
            <Row k="PIX" v="R$ 1.248,90" />
            <Row k="Débito" v="R$ 842,40" />
            <Row k="Crédito à vista" v="R$ 1.480,20" />
            <Row k="Crédito parcelado" v="R$ 612,80" />
            <div style={{ borderTop: '1px solid var(--line-1)', paddingTop: 8, marginTop: 4 }}><Row k="TOTAL DIA" v="R$ 4.671,60" bold /></div>
          </div>
          <div style={{ marginTop: 18, display: 'flex', gap: 8 }}>
            <button className="btn btn-sm" style={{ flex: 1, justifyContent: 'center' }}><Icon name="print" size={11} /> Imprimir relatório</button>
            <button className="btn btn-sm" style={{ flex: 1, justifyContent: 'center' }}><Icon name="download" size={11} /> Exportar XLSX</button>
          </div>
        </div>
        <div>
          <div className="field-label">RESUMO OPERACIONAL</div>
          <div style={{ marginTop: 10, display: 'flex', flexDirection: 'column', gap: 6 }}>
            <Row k="Vendas (cupons)" v="48" />
            <Row k="NFC-e emitidas" v="48" />
            <Row k="NF-e emitidas" v="3" />
            <Row k="Cancelamentos" v="1" />
            <Row k="Tícket médio" v="R$ 97,30" />
            <Row k="Sangria/troco" v="R$ 150,00" />
          </div>
          {caixaAberto ? (
            <button className="btn btn-primary" style={{ marginTop: 18, width: '100%', justifyContent: 'center' }} onClick={onEncerrar}>
              <Icon name="check" /> Encerrar caixa
            </button>
          ) : (
            <div className="alert-banner alert-lime" style={{ marginTop: 18 }}>
              <Icon name="check" size={13} />
              <div>
                <strong>Caixa encerrado</strong>
                <div style={{ fontSize: 11.5, color: 'var(--fg-2)', marginTop: 2 }}>
                  Relatório do turno gerado · sangria protocolada · operadora deslogada. Para reabrir, use o login do PDV.
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

/* ── FORNECEDORES VIEW ─────────────────────────────────────── */
function FornecedoresView({ fornecedores, loading, onAdd, onEdit, onDelete }) {
  const [busca, setBusca] = React.useState('');
  const filtrados = React.useMemo(() => {
    if (!busca.trim()) return fornecedores;
    const q = busca.trim().toLowerCase();
    return fornecedores.filter(f =>
      f.nome.toLowerCase().includes(q) ||
      (f.cnpj && f.cnpj.toLowerCase().includes(q)) ||
      (f.email && f.email.toLowerCase().includes(q))
    );
  }, [fornecedores, busca]);

  return (
    <div className="card">
      <div className="card-head">
        <Icon name="users" />
        <div className="t">Fornecedores cadastrados</div>
        <div className="s">{loading ? '...' : `${fornecedores.length} registros · ${fornecedores.filter(f => f.ativo).length} ativos`}</div>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 6 }}>
          <input
            className="input"
            placeholder="Buscar nome, CNPJ ou e-mail..."
            value={busca}
            onChange={e => setBusca(e.target.value)}
            style={{ width: 260 }}
          />
          <button className="btn btn-sm btn-primary" onClick={onAdd}><Icon name="plus" size={11} /> Novo fornecedor</button>
        </div>
      </div>
      <table className="tbl">
        <thead>
          <tr>
            <th>Nome</th>
            <th>CNPJ</th>
            <th>E-mail</th>
            <th>Telefone</th>
            <th>Status</th>
            <th>Cadastrado em</th>
            <th style={{ width: 96, textAlign: 'right' }}>Ações</th>
          </tr>
        </thead>
        <tbody>
          {loading && (
            <tr><td colSpan={7} style={{ padding: 32, textAlign: 'center', color: 'var(--fg-3)' }}>
              <span className="spinner" style={{ marginRight: 8 }}></span> Carregando fornecedores...
            </td></tr>
          )}
          {!loading && filtrados.length === 0 && (
            <tr><td colSpan={7} style={{ padding: 32, textAlign: 'center', color: 'var(--fg-3)' }}>
              {fornecedores.length === 0
                ? 'Nenhum fornecedor cadastrado. Clique em "Novo fornecedor" para começar.'
                : 'Nenhum resultado para a busca.'}
            </td></tr>
          )}
          {!loading && filtrados.map(f => (
            <tr key={f.id}>
              <td style={{ fontWeight: 500 }}>{f.nome}</td>
              <td className="mono" style={{ fontSize: 11.5 }}>{f.cnpj || '—'}</td>
              <td style={{ fontSize: 12 }}>{f.email || '—'}</td>
              <td className="mono" style={{ fontSize: 11.5 }}>{f.telefone || '—'}</td>
              <td>{f.ativo ? <span className="badge badge-lime">ATIVO</span> : <span className="badge">INATIVO</span>}</td>
              <td className="mono" style={{ fontSize: 11 }}>{new Date(f.created_at).toLocaleDateString('pt-BR')}</td>
              <td style={{ textAlign: 'right' }}>
                <button className="btn btn-sm btn-ghost" title="Editar" onClick={() => onEdit(f)}><Icon name="edit" size={12} /></button>
                <button className="btn btn-sm btn-ghost" title="Excluir" onClick={() => onDelete(f)} style={{ marginLeft: 4 }}><Icon name="x" size={12} /></button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

/* ── CLIENTES VIEW ─────────────────────────────────────────── */
function ClientesView({ clientes, loading, onAdd, onOpen, onEdit, onDelete }) {
  const [busca, setBusca] = React.useState('');
  const filtrados = React.useMemo(() => {
    if (!busca.trim()) return clientes;
    const q = busca.trim().toLowerCase();
    return clientes.filter(c =>
      c.nome.toLowerCase().includes(q) ||
      (c.nome_fantasia && c.nome_fantasia.toLowerCase().includes(q)) ||
      (c.cnpj && c.cnpj.toLowerCase().includes(q)) ||
      (c.cidade && c.cidade.toLowerCase().includes(q))
    );
  }, [clientes, busca]);

  return (
    <div className="card">
      <div className="card-head">
        <Icon name="users" />
        <div className="t">Clientes cadastrados · órgãos públicos e privados</div>
        <div className="s">{loading ? '...' : `${clientes.length} registros · ${clientes.filter(c => c.ativo).length} ativos`}</div>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 6 }}>
          <input className="input" placeholder="Buscar nome, CNPJ ou cidade..." value={busca} onChange={e => setBusca(e.target.value)} style={{ width: 260 }} />
          <button className="btn btn-sm btn-primary" onClick={onAdd}><Icon name="plus" size={11} /> Novo cliente</button>
        </div>
      </div>
      <table className="tbl">
        <thead>
          <tr>
            <th>Nome / Razão social</th>
            <th>Tipo</th>
            <th>CNPJ</th>
            <th>Cidade/UF</th>
            <th>Contato</th>
            <th>Status</th>
            <th style={{ width: 96, textAlign: 'right' }}>Ações</th>
          </tr>
        </thead>
        <tbody>
          {loading && (
            <tr><td colSpan={7} style={{ padding: 32, textAlign: 'center', color: 'var(--fg-3)' }}>
              <span className="spinner" style={{ marginRight: 8 }}></span> Carregando clientes...
            </td></tr>
          )}
          {!loading && filtrados.length === 0 && (
            <tr><td colSpan={7} style={{ padding: 32, textAlign: 'center', color: 'var(--fg-3)' }}>
              {clientes.length === 0
                ? 'Nenhum cliente cadastrado. Clique em "Novo cliente" para começar.'
                : 'Nenhum resultado para a busca.'}
            </td></tr>
          )}
          {!loading && filtrados.map(c => (
            <tr key={c.id} onClick={() => onOpen(c)} style={{ cursor: 'pointer' }}>
              <td>
                <div style={{ fontWeight: 500 }}>{c.nome}</div>
                {c.nome_fantasia && <div style={{ fontSize: 10.5, color: 'var(--fg-3)' }}>{c.nome_fantasia}</div>}
              </td>
              <td><span className={`badge ${c.tipo === 'publico' ? 'badge-cyan' : c.tipo === 'misto' ? 'badge-amber' : ''}`}>{(c.tipo || 'publico').toUpperCase()}</span></td>
              <td className="mono" style={{ fontSize: 11.5 }}>{c.cnpj || '—'}</td>
              <td style={{ fontSize: 12 }}>{c.cidade ? `${c.cidade}/${c.uf || '—'}` : '—'}</td>
              <td style={{ fontSize: 11.5 }}>
                {c.email && <div>{c.email}</div>}
                {c.telefone && <div className="mono" style={{ fontSize: 10.5, color: 'var(--fg-3)' }}>{c.telefone}</div>}
              </td>
              <td>{c.ativo ? <span className="badge badge-lime">ATIVO</span> : <span className="badge">INATIVO</span>}</td>
              <td style={{ textAlign: 'right' }} onClick={e => e.stopPropagation()}>
                <button className="btn btn-sm btn-ghost" title="Editar" onClick={() => onEdit(c)}><Icon name="edit" size={12} /></button>
                <button className="btn btn-sm btn-ghost" title="Excluir" onClick={() => onDelete(c)} style={{ marginLeft: 4 }}><Icon name="x" size={12} /></button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

/* ── CLIENTE FORM MODAL (Add e Edit) ───────────────────────── */
function ClienteFormModal({ cliente, onClose, onSave }) {
  const editing = !!cliente;
  const [form, setForm] = React.useState({
    nome: cliente?.nome || '',
    nome_fantasia: cliente?.nome_fantasia || '',
    cnpj: cliente?.cnpj || '',
    tipo: cliente?.tipo || 'publico',
    email: cliente?.email || '',
    telefone: cliente?.telefone || '',
    endereco: cliente?.endereco || '',
    cidade: cliente?.cidade || '',
    uf: cliente?.uf || '',
    cep: cliente?.cep || '',
    contato_responsavel: cliente?.contato_responsavel || '',
    observacoes: cliente?.observacoes || '',
    ativo: cliente ? !!cliente.ativo : true,
  });
  const [erro, setErro] = React.useState(null);
  const [saving, setSaving] = React.useState(false);
  const set = (k, v) => setForm({ ...form, [k]: v });

  const submit = async () => {
    if (!form.nome.trim()) { setErro('Nome / razão social é obrigatório'); return; }
    setErro(null);
    setSaving(true);
    try { await onSave(form); }
    catch (e) { setErro(e?.message || 'Falha ao salvar'); setSaving(false); }
  };

  return (
    <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.7)', display: 'grid', placeItems: 'center', zIndex: 200, backdropFilter: 'blur(2px)' }} onClick={onClose}>
      <div style={{ background: 'var(--bg-1)', border: '1px solid var(--line-2)', borderRadius: 10, width: 640, maxHeight: '90vh', overflow: 'auto' }} onClick={e => e.stopPropagation()}>
        <div className="card-head">
          <Icon name={editing ? 'edit' : 'plus'} />
          <div className="t">{editing ? 'Editar cliente' : 'Cadastrar novo cliente'}</div>
          <div className="s">M11 · órgão público ou privado</div>
          <button className="tb-btn" style={{ marginLeft: 'auto' }} onClick={onClose}><Icon name="x" /></button>
        </div>
        <div style={{ padding: 22, display: 'flex', flexDirection: 'column', gap: 12 }}>
          <div>
            <div className="field-label">NOME / RAZÃO SOCIAL <span style={{ color: 'var(--red)' }}>*</span></div>
            <input className="input" value={form.nome} onChange={e => set('nome', e.target.value)} placeholder="Ex: Prefeitura Municipal de Niterói" autoFocus />
          </div>
          <div className="grid-2">
            <div>
              <div className="field-label">NOME FANTASIA / SIGLA</div>
              <input className="input" value={form.nome_fantasia} onChange={e => set('nome_fantasia', e.target.value)} placeholder="Ex: Pref. Niterói" />
            </div>
            <div>
              <div className="field-label">TIPO</div>
              <select className="input" value={form.tipo} onChange={e => set('tipo', e.target.value)}>
                <option value="publico">Órgão público</option>
                <option value="privado">Empresa privada</option>
                <option value="misto">Sociedade de economia mista</option>
              </select>
            </div>
          </div>
          <div>
            <div className="field-label">CNPJ</div>
            <input className="input mono" value={form.cnpj} onChange={e => set('cnpj', e.target.value)} placeholder="00.000.000/0000-00" />
          </div>
          <div className="grid-2">
            <div>
              <div className="field-label">E-MAIL</div>
              <input className="input" type="email" value={form.email} onChange={e => set('email', e.target.value)} placeholder="compras@orgao.gov.br" />
            </div>
            <div>
              <div className="field-label">TELEFONE</div>
              <input className="input mono" value={form.telefone} onChange={e => set('telefone', e.target.value)} placeholder="(00) 0000-0000" />
            </div>
          </div>
          <div>
            <div className="field-label">CONTATO RESPONSÁVEL</div>
            <input className="input" value={form.contato_responsavel} onChange={e => set('contato_responsavel', e.target.value)} placeholder="Setor de Compras / Nome do responsável" />
          </div>

          <div className="field-label" style={{ marginTop: 6 }}>ENDEREÇO DE ENTREGA PADRÃO</div>
          <div>
            <input className="input" value={form.endereco} onChange={e => set('endereco', e.target.value)} placeholder="Rua, número, complemento, bairro" />
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: 10 }}>
            <div>
              <div className="field-label">CIDADE</div>
              <input className="input" value={form.cidade} onChange={e => set('cidade', e.target.value)} />
            </div>
            <div>
              <div className="field-label">UF</div>
              <select className="input" value={form.uf} onChange={e => set('uf', e.target.value)}>
                <option value="">—</option>
                {['AC','AL','AM','AP','BA','CE','DF','ES','GO','MA','MG','MS','MT','PA','PB','PE','PI','PR','RJ','RN','RO','RR','RS','SC','SE','SP','TO'].map(u => <option key={u}>{u}</option>)}
              </select>
            </div>
            <div>
              <div className="field-label">CEP</div>
              <input className="input mono" value={form.cep} onChange={e => set('cep', e.target.value)} placeholder="00000-000" />
            </div>
          </div>

          <div>
            <div className="field-label">OBSERVAÇÕES</div>
            <textarea className="input" value={form.observacoes} onChange={e => set('observacoes', e.target.value)} placeholder="Histórico de pagamento, perfil de compras, observações operacionais..." rows={3} style={{ resize: 'vertical', fontFamily: 'inherit' }} />
          </div>

          {editing && (
            <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12.5, paddingTop: 4 }}>
              <input type="checkbox" checked={form.ativo} onChange={e => set('ativo', e.target.checked)} />
              <span>Cliente ativo</span>
              <span style={{ fontSize: 11, color: 'var(--fg-3)' }}>· quando inativo, não aparece em sugestões</span>
            </label>
          )}

          {erro && (
            <div className="alert-banner alert-red"><Icon name="warn" size={13} />{erro}</div>
          )}
        </div>
        <div style={{ padding: 14, borderTop: '1px solid var(--line-1)', display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
          <button className="btn" onClick={onClose} disabled={saving}>Cancelar</button>
          <button className="btn btn-primary" onClick={submit} disabled={saving}>
            {saving ? <><span className="spinner"></span> Salvando...</> : <><Icon name="check" /> {editing ? 'Salvar alterações' : 'Cadastrar cliente'}</>}
          </button>
        </div>
      </div>
    </div>
  );
}

/* ── CONFIRM DELETE CLIENTE ────────────────────────────────── */
function ConfirmDeleteCliente({ cliente, onClose, onConfirm }) {
  const [deleting, setDeleting] = React.useState(false);
  const [erro, setErro] = React.useState(null);
  const run = async () => {
    setDeleting(true); setErro(null);
    try { await onConfirm(); }
    catch (e) { setErro(e?.message || 'Falha ao excluir'); setDeleting(false); }
  };
  return (
    <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.7)', display: 'grid', placeItems: 'center', zIndex: 250, backdropFilter: 'blur(2px)' }} onClick={onClose}>
      <div style={{ background: 'var(--bg-1)', border: '1px solid var(--line-2)', borderRadius: 10, width: 480 }} onClick={e => e.stopPropagation()}>
        <div className="card-head">
          <Icon name="warn" style={{ color: 'var(--red)' }} />
          <div className="t">Excluir cliente?</div>
          <button className="tb-btn" style={{ marginLeft: 'auto' }} onClick={onClose}><Icon name="x" /></button>
        </div>
        <div style={{ padding: 22, fontSize: 13, lineHeight: 1.55, color: 'var(--fg-1)' }}>
          Você está prestes a excluir <strong style={{ color: 'var(--fg-0)' }}>{cliente.nome}</strong>{cliente.cnpj ? ` (${cliente.cnpj})` : ''}.
          <div className="alert-banner alert-amber" style={{ marginTop: 14 }}>
            <Icon name="warn" size={13} />
            <div>
              <strong>Editais e empenhos NÃO são apagados</strong> — eles continuam mostrando o nome do órgão como texto. Se quiser preservar o cadastro, prefira <em>desativar</em> pelo botão Editar.
            </div>
          </div>
          {erro && <div className="alert-banner alert-red" style={{ marginTop: 14 }}><Icon name="warn" size={13} />{erro}</div>}
        </div>
        <div style={{ padding: 14, borderTop: '1px solid var(--line-1)', display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
          <button className="btn" onClick={onClose} disabled={deleting}>Cancelar</button>
          <button className="btn btn-danger" onClick={run} disabled={deleting}>
            {deleting ? <><span className="spinner"></span> Excluindo...</> : <><Icon name="x" /> Sim, excluir</>}
          </button>
        </div>
      </div>
    </div>
  );
}

/* ── CLIENTE DRAWER ────────────────────────────────────────── */
function ClienteDrawer({ cliente, tab, onTab, onClose, onNav, onEdit, onDelete }) {
  const [relations, setRelations] = React.useState(null);

  React.useEffect(() => {
    let mounted = true;
    if (!cliente?.id) return;
    window.dataApi.listClienteRelations(cliente)
      .then(r => { if (mounted) setRelations(r); })
      .catch(() => { if (mounted) setRelations({ editais: [], empenhos: [], titulos: [] }); });
    return () => { mounted = false; };
  }, [cliente?.id]);

  const totalCarteira = (relations?.titulos || []).filter(t => t.status !== 'pago').reduce((s, t) => s + t.valor, 0);
  const aberto = (relations?.titulos || []).filter(t => t.status === 'aberto' || t.status === 'venc-hoje').length;
  const atraso = (relations?.titulos || []).filter(t => t.status === 'atraso').length;

  const tipoBadge = cliente.tipo === 'publico' ? 'badge-cyan' : cliente.tipo === 'misto' ? 'badge-amber' : '';

  return (
    <Drawer
      open={true}
      onClose={onClose}
      eyebrow={<><span>Cliente · {(cliente.tipo || 'publico') === 'publico' ? 'Órgão Público' : (cliente.tipo === 'misto' ? 'Soc. Mista' : 'Privado')}</span><span className="chip">M11</span><span className={`badge ${tipoBadge}`}>{(cliente.tipo || 'publico').toUpperCase()}</span>{cliente.ativo === false && <span className="badge">INATIVO</span>}</>}
      title={<span style={{ fontWeight: 600 }}>{cliente.nome}</span>}
      subtitle={`${cliente.nome_fantasia ? cliente.nome_fantasia + ' · ' : ''}${cliente.cidade ? cliente.cidade + '/' + (cliente.uf || '—') : ''}${cliente.cnpj ? ' · CNPJ ' + cliente.cnpj : ''}`}
      headRight={
        <div style={{ textAlign: 'right' }}>
          <div className="mono" style={{ fontSize: 10.5, color: 'var(--fg-3)' }}>EM CARTEIRA</div>
          <div className="mono" style={{ fontSize: 18, fontWeight: 600, color: 'var(--lime)' }}>{BRL(totalCarteira)}</div>
        </div>
      }
      tabs={[
        { id: 'det', label: 'Detalhes' },
        { id: 'ed',  label: 'Editais',   count: relations?.editais?.length ?? '…' },
        { id: 'emp', label: 'Empenhos',  count: relations?.empenhos?.length ?? '…' },
        { id: 'fin', label: 'Financeiro', count: relations?.titulos?.length ?? '…' },
      ]}
      activeTab={tab}
      onTabChange={onTab}
      footer={
        <>
          <button className="btn btn-danger" onClick={onDelete}><Icon name="x" /> Excluir</button>
          <button className="btn btn-primary" style={{ flex: 1, justifyContent: 'center' }} onClick={onEdit}>
            <Icon name="edit" /> Editar cadastro
          </button>
        </>
      }
    >
      {tab === 'det' && (
        <div style={{ padding: 18 }}>
          <div className="field-label" style={{ marginBottom: 10 }}>DADOS CADASTRAIS</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 22 }}>
            <Field label="RAZÃO SOCIAL" value={cliente.nome} />
            <Field label="NOME FANTASIA / SIGLA" value={cliente.nome_fantasia || '—'} />
            <Field label="CNPJ" value={cliente.cnpj || '—'} mono />
            <Field label="TIPO" value={(cliente.tipo || 'publico').toUpperCase()} />
            <Field label="E-MAIL" value={cliente.email || '—'} />
            <Field label="TELEFONE" value={cliente.telefone || '—'} mono />
            <Field label="CONTATO RESPONSÁVEL" value={cliente.contato_responsavel || '—'} />
            <Field label="CADASTRADO EM" value={cliente.created_at ? new Date(cliente.created_at).toLocaleDateString('pt-BR') : '—'} mono />
          </div>

          <div className="field-label" style={{ marginBottom: 10 }}>ENDEREÇO DE ENTREGA PADRÃO</div>
          <div style={{ padding: 14, background: 'var(--bg-2)', border: '1px solid var(--line-1)', borderRadius: 6, marginBottom: 22, fontSize: 12.5, lineHeight: 1.55 }}>
            {cliente.endereco || cliente.cidade ? (
              <>
                <div>{cliente.endereco || '—'}</div>
                <div className="mono" style={{ color: 'var(--fg-3)', marginTop: 4 }}>
                  {cliente.cidade || '—'}{cliente.uf ? '/' + cliente.uf : ''}{cliente.cep ? ' · ' + cliente.cep : ''}
                </div>
              </>
            ) : (
              <span style={{ color: 'var(--fg-3)' }}>Nenhum endereço cadastrado.</span>
            )}
          </div>

          <div className="field-label" style={{ marginBottom: 10 }}>RESUMO FINANCEIRO</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginBottom: 22 }}>
            <Field label="EM ABERTO" value={relations === null ? '…' : aberto} valueClass="text-lime" />
            <Field label="EM ATRASO" value={relations === null ? '…' : atraso} valueClass={atraso > 0 ? 'text-red' : ''} />
            <Field label="TOTAL CARTEIRA" value={relations === null ? '…' : BRL(totalCarteira)} valueClass="text-lime" />
          </div>

          {cliente.observacoes && (
            <>
              <div className="field-label" style={{ marginBottom: 8 }}>OBSERVAÇÕES</div>
              <div style={{ padding: 14, background: 'var(--bg-2)', border: '1px solid var(--line-1)', borderRadius: 6, fontSize: 12.5, lineHeight: 1.55 }}>
                {cliente.observacoes}
              </div>
            </>
          )}
        </div>
      )}

      {tab === 'ed' && (
        <div>
          <div style={{ padding: '12px 18px', background: 'var(--bg-2)', borderBottom: '1px solid var(--line-1)', fontSize: 11.5, color: 'var(--fg-3)' }}>
            Match por nome do órgão (ILIKE). Pode incluir registros de outras unidades com nome similar.
          </div>
          <table className="tbl">
            <thead>
              <tr>
                <th>Edital</th>
                <th>Órgão</th>
                <th>UF</th>
                <th>Abertura</th>
                <th style={{ textAlign: 'right' }}>Valor</th>
                <th>Status</th>
              </tr>
            </thead>
            <tbody>
              {relations === null && (
                <tr><td colSpan={6} style={{ padding: 24, textAlign: 'center', color: 'var(--fg-3)' }}>
                  <span className="spinner" style={{ marginRight: 8 }}></span> Buscando editais...
                </td></tr>
              )}
              {relations && relations.editais.length === 0 && (
                <tr><td colSpan={6} style={{ padding: 24, textAlign: 'center', color: 'var(--fg-3)' }}>
                  Nenhum edital encontrado para este cliente.
                </td></tr>
              )}
              {relations && relations.editais.map(e => (
                <tr key={e.id} onClick={() => onNav('prospeccao')} style={{ cursor: 'pointer' }}>
                  <td className="mono" style={{ color: 'var(--fg-0)', fontWeight: 500 }}>{e.numero}</td>
                  <td style={{ fontSize: 12 }}>{e.orgao}</td>
                  <td><span className="badge">{e.uf}</span></td>
                  <td className="mono" style={{ fontSize: 11.5 }}>{new Date(e.abertura).toLocaleDateString('pt-BR')}</td>
                  <td className="num-col" style={{ color: 'var(--lime)' }}>{BRL(e.valor)}</td>
                  <td><span className="badge">{(e.status || '').toUpperCase()}</span></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {tab === 'emp' && (
        <div>
          <div style={{ padding: '12px 18px', background: 'var(--bg-2)', borderBottom: '1px solid var(--line-1)', fontSize: 11.5, color: 'var(--fg-3)' }}>
            Empenhos do cliente em todas as fases.
          </div>
          <table className="tbl">
            <thead>
              <tr>
                <th>Empenho</th>
                <th>Órgão</th>
                <th>Recebido</th>
                <th>NF</th>
                <th style={{ textAlign: 'right' }}>Valor</th>
                <th>Status</th>
              </tr>
            </thead>
            <tbody>
              {relations === null && (
                <tr><td colSpan={6} style={{ padding: 24, textAlign: 'center', color: 'var(--fg-3)' }}>
                  <span className="spinner" style={{ marginRight: 8 }}></span> Buscando empenhos...
                </td></tr>
              )}
              {relations && relations.empenhos.length === 0 && (
                <tr><td colSpan={6} style={{ padding: 24, textAlign: 'center', color: 'var(--fg-3)' }}>
                  Nenhum empenho encontrado para este cliente.
                </td></tr>
              )}
              {relations && relations.empenhos.map(e => (
                <tr key={e.id} onClick={() => onNav('empenhos')} style={{ cursor: 'pointer' }}>
                  <td className="mono" style={{ color: 'var(--fg-0)', fontWeight: 500 }}>{e.numero}</td>
                  <td style={{ fontSize: 12 }}>{e.orgao}</td>
                  <td className="mono" style={{ fontSize: 11.5 }}>{e.recebido_em ? new Date(e.recebido_em).toLocaleDateString('pt-BR') : '—'}</td>
                  <td className="mono" style={{ fontSize: 11 }}>{e.nf_numero || '—'}</td>
                  <td className="num-col" style={{ color: 'var(--lime)' }}>{BRL(e.valor)}</td>
                  <td><span className="badge">{(e.status || '').toUpperCase()}</span></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {tab === 'fin' && (
        <div>
          <div style={{ padding: '12px 18px', background: 'var(--bg-2)', borderBottom: '1px solid var(--line-1)', fontSize: 11.5, color: 'var(--fg-3)' }}>
            Títulos a receber (CAR) — {cliente.cnpj ? 'match por CNPJ' : 'match por nome'}.
          </div>
          <table className="tbl">
            <thead>
              <tr>
                <th>Título</th>
                <th>Descrição</th>
                <th>Vencimento</th>
                <th style={{ textAlign: 'right' }}>Valor</th>
                <th>Status</th>
              </tr>
            </thead>
            <tbody>
              {relations === null && (
                <tr><td colSpan={5} style={{ padding: 24, textAlign: 'center', color: 'var(--fg-3)' }}>
                  <span className="spinner" style={{ marginRight: 8 }}></span> Buscando títulos...
                </td></tr>
              )}
              {relations && relations.titulos.length === 0 && (
                <tr><td colSpan={5} style={{ padding: 24, textAlign: 'center', color: 'var(--fg-3)' }}>
                  Nenhum título a receber para este cliente.
                </td></tr>
              )}
              {relations && relations.titulos.map(t => (
                <tr key={t.realId || t.id} onClick={() => onNav('financeiro')} style={{ cursor: 'pointer' }}>
                  <td className="mono" style={{ color: 'var(--fg-0)', fontWeight: 500 }}>{t.id}</td>
                  <td style={{ fontSize: 12 }}>{t.desc}</td>
                  <td className="mono" style={{ fontSize: 11.5 }}>{t.vcto}</td>
                  <td className="num-col" style={{ color: 'var(--lime)' }}>{BRL(t.valor)}</td>
                  <td><span className={`badge ${t.status === 'atraso' ? 'badge-red' : t.status === 'venc-hoje' ? 'badge-amber' : t.status === 'pago' ? 'badge-lime' : ''}`}>{(t.status || '').toUpperCase()}</span></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </Drawer>
  );
}

/* ── PRODUTO FORM MODAL (Add e Edit) ───────────────────────── */
function ProdutoFormModal({ produto, fornecedores, onClose, onSave }) {
  const editing = !!produto;
  const initial = produto ? {
    cod: produto.cod || '',
    ean: produto.ean || '',
    descricao: produto.desc || '',
    categoria: produto.cat && produto.cat !== '—' ? produto.cat : '',
    ncm: produto.ncm && produto.ncm !== '—' ? produto.ncm : '',
    custo: produto.custo != null ? String(produto.custo) : '',
    preco_venda: produto.preco > 0 ? String(produto.preco) : '',
    inner_minimo: String(produto.inner ?? 1),
    estoque: String(produto.st ?? 0),
    estoque_minimo: String(produto.min ?? 0),
    estoque_maximo: produto._raw?.estoque_maximo != null ? String(produto._raw.estoque_maximo) : '',
    fornecedor_principal_id: produto.fornecedor_id || '',
    ativo: produto._raw?.ativo !== false,
  } : {
    cod: 'BTM-', ean: '', descricao: '', categoria: '', ncm: '',
    custo: '', preco_venda: '', inner_minimo: '1',
    estoque: '0', estoque_minimo: '0', estoque_maximo: '',
    fornecedor_principal_id: '',
    ativo: true,
  };
  const [form, setForm] = React.useState(initial);
  const [erro, setErro] = React.useState(null);
  const [saving, setSaving] = React.useState(false);
  const set = (k, v) => setForm({ ...form, [k]: v });

  const submit = async () => {
    if (!form.cod.trim() || !form.descricao.trim() || !form.custo) {
      setErro('Preencha os campos obrigatórios (Código, Descrição, Custo)');
      return;
    }
    setErro(null);
    setSaving(true);
    try { await onSave(form); }
    catch (e) { setErro(e?.message || 'Falha ao salvar'); setSaving(false); }
  };

  return (
    <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.7)', display: 'grid', placeItems: 'center', zIndex: 200, backdropFilter: 'blur(2px)' }} onClick={onClose}>
      <div style={{ background: 'var(--bg-1)', border: '1px solid var(--line-2)', borderRadius: 10, width: 680, maxHeight: '90vh', overflow: 'auto' }} onClick={e => e.stopPropagation()}>
        <div className="card-head">
          <Icon name={editing ? 'edit' : 'plus'} />
          <div className="t">{editing ? 'Editar produto' : 'Cadastrar novo produto'}</div>
          <div className="s">M11 · catálogo BTM</div>
          <button className="tb-btn" style={{ marginLeft: 'auto' }} onClick={onClose}><Icon name="x" /></button>
        </div>
        <div style={{ padding: 22, display: 'flex', flexDirection: 'column', gap: 12 }}>
          <div className="grid-2">
            <div>
              <div className="field-label">CÓDIGO INTERNO <span style={{ color: 'var(--red)' }}>*</span></div>
              <input className="input mono" value={form.cod} onChange={e => set('cod', e.target.value)} placeholder="BTM-XX-000" />
            </div>
            <div>
              <div className="field-label">CÓDIGO DE BARRAS (EAN)</div>
              <input className="input mono" value={form.ean} onChange={e => set('ean', e.target.value)} placeholder="7891000000000" />
            </div>
          </div>

          <div>
            <div className="field-label">DESCRIÇÃO <span style={{ color: 'var(--red)' }}>*</span></div>
            <input className="input" value={form.descricao} onChange={e => set('descricao', e.target.value)} placeholder="Ex: Papel A4 75g — Resma 500 fls" />
          </div>

          <div className="grid-2">
            <div>
              <div className="field-label">CATEGORIA</div>
              <input className="input" value={form.categoria} onChange={e => set('categoria', e.target.value)} placeholder="Escritório, Papelaria, Escolar..." list="cat-options" />
              <datalist id="cat-options">
                <option>Escritório</option><option>Papelaria</option><option>Escolar</option><option>Arquivamento</option><option>Limpeza</option><option>EPI</option>
              </datalist>
            </div>
            <div>
              <div className="field-label">NCM</div>
              <input className="input mono" value={form.ncm} onChange={e => set('ncm', e.target.value)} placeholder="9608.10.00" />
            </div>
          </div>

          <div className="grid-2">
            <div>
              <div className="field-label">CUSTO (R$) <span style={{ color: 'var(--red)' }}>*</span></div>
              <input className="input mono" type="number" step="0.01" value={form.custo} onChange={e => set('custo', e.target.value)} placeholder="0.00" />
            </div>
            <div>
              <div className="field-label">PREÇO DE VENDA (R$)</div>
              <input className="input mono" type="number" step="0.01" value={form.preco_venda} onChange={e => set('preco_venda', e.target.value)} placeholder="0.00" />
            </div>
          </div>

          <div className="grid-2">
            <div>
              <div className="field-label">FORNECEDOR PRINCIPAL</div>
              <select className="input" value={form.fornecedor_principal_id} onChange={e => set('fornecedor_principal_id', e.target.value)}>
                <option value="">— Selecione —</option>
                {fornecedores.map(f => (
                  <option key={f.id} value={f.id}>{f.nome}{f.cnpj ? ` · ${f.cnpj}` : ''}</option>
                ))}
              </select>
            </div>
            <div>
              <div className="field-label">INNER (un por caixa fechada)</div>
              <input className="input mono" type="number" value={form.inner_minimo} onChange={e => set('inner_minimo', e.target.value)} placeholder="1" />
            </div>
          </div>

          <div className="field-label" style={{ marginTop: 6 }}>NÍVEIS DE ESTOQUE</div>
          {editing && (
            <div className="alert-banner alert-cyan">
              <Icon name="info" size={13} />
              <div style={{ fontSize: 11.5 }}>O <strong>estoque atual</strong> só é modificado via "Ajustar inventário" no drawer do produto — para manter rastreabilidade.</div>
            </div>
          )}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10 }}>
            <div>
              <div className="field-label">ATUAL</div>
              <input className="input mono" type="number" value={form.estoque} onChange={e => set('estoque', e.target.value)} placeholder="0" disabled={editing} style={editing ? { opacity: 0.5 } : undefined} />
            </div>
            <div>
              <div className="field-label">MÍNIMO</div>
              <input className="input mono" type="number" value={form.estoque_minimo} onChange={e => set('estoque_minimo', e.target.value)} placeholder="0" />
            </div>
            <div>
              <div className="field-label">MÁXIMO</div>
              <input className="input mono" type="number" value={form.estoque_maximo} onChange={e => set('estoque_maximo', e.target.value)} placeholder="opcional" />
            </div>
          </div>

          {editing && (
            <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12.5, paddingTop: 4 }}>
              <input type="checkbox" checked={form.ativo} onChange={e => set('ativo', e.target.checked)} />
              <span>Produto ativo</span>
              <span style={{ fontSize: 11, color: 'var(--fg-3)' }}>· quando desativado, não aparece em PDV nem estoque</span>
            </label>
          )}

          {erro && (
            <div className="alert-banner alert-red">
              <Icon name="warn" size={13} />
              {erro}
            </div>
          )}
        </div>
        <div style={{ padding: 14, borderTop: '1px solid var(--line-1)', display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
          <button className="btn" onClick={onClose} disabled={saving}>Cancelar</button>
          <button className="btn btn-primary" onClick={submit} disabled={saving}>
            {saving ? <><span className="spinner"></span> Salvando...</> : <><Icon name="check" /> {editing ? 'Salvar alterações' : 'Cadastrar produto'}</>}
          </button>
        </div>
      </div>
    </div>
  );
}

/* ── CONFIRM DELETE PRODUTO ────────────────────────────────── */
function ConfirmDeleteProduto({ produto, onClose, onConfirm }) {
  const [deleting, setDeleting] = React.useState(false);
  const [erro, setErro] = React.useState(null);
  const run = async () => {
    setDeleting(true); setErro(null);
    try { await onConfirm(); }
    catch (e) {
      const msg = e?.message || String(e);
      if (/violates foreign key|movimentos_estoque/i.test(msg)) {
        setErro('Este produto tem movimentações de estoque registradas — não pode ser excluído permanentemente. Use Editar e desmarque "Produto ativo" para escondê-lo do sistema.');
      } else {
        setErro(msg);
      }
      setDeleting(false);
    }
  };
  return (
    <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.7)', display: 'grid', placeItems: 'center', zIndex: 250, backdropFilter: 'blur(2px)' }} onClick={onClose}>
      <div style={{ background: 'var(--bg-1)', border: '1px solid var(--line-2)', borderRadius: 10, width: 480 }} onClick={e => e.stopPropagation()}>
        <div className="card-head">
          <Icon name="warn" style={{ color: 'var(--red)' }} />
          <div className="t">Excluir produto?</div>
          <button className="tb-btn" style={{ marginLeft: 'auto' }} onClick={onClose}><Icon name="x" /></button>
        </div>
        <div style={{ padding: 22, fontSize: 13, lineHeight: 1.55, color: 'var(--fg-1)' }}>
          Você está prestes a excluir <strong style={{ color: 'var(--fg-0)' }}>{produto.cod} · {produto.desc}</strong>.
          <div className="alert-banner alert-amber" style={{ marginTop: 14 }}>
            <Icon name="warn" size={13} />
            <div>
              <strong>Exclusão permanente:</strong>
              <ul style={{ margin: '6px 0 0 18px', fontSize: 11.5, color: 'var(--fg-2)', lineHeight: 1.6 }}>
                <li>Não pode ser excluído se houver <strong>movimentações de estoque</strong> registradas.</li>
                <li>Se houver, prefira <em>desativar</em> (Editar → desmarque "Produto ativo").</li>
                <li>Vínculos com fornecedores alternativos serão removidos.</li>
              </ul>
            </div>
          </div>
          {erro && <div className="alert-banner alert-red" style={{ marginTop: 14 }}><Icon name="warn" size={13} />{erro}</div>}
        </div>
        <div style={{ padding: 14, borderTop: '1px solid var(--line-1)', display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
          <button className="btn" onClick={onClose} disabled={deleting}>Cancelar</button>
          <button className="btn btn-danger" onClick={run} disabled={deleting}>
            {deleting ? <><span className="spinner"></span> Excluindo...</> : <><Icon name="x" /> Sim, excluir</>}
          </button>
        </div>
      </div>
    </div>
  );
}

/* ── FORNECEDOR FORM MODAL (Add e Edit) ────────────────────── */
function FornecedorFormModal({ fornecedor, onClose, onSave }) {
  const editing = !!fornecedor;
  const [form, setForm] = React.useState({
    nome: fornecedor?.nome || '',
    cnpj: fornecedor?.cnpj || '',
    email: fornecedor?.email || '',
    telefone: fornecedor?.telefone || '',
    observacoes: fornecedor?.observacoes || '',
    ativo: fornecedor ? !!fornecedor.ativo : true,
  });
  const [erro, setErro] = React.useState(null);
  const [saving, setSaving] = React.useState(false);
  const set = (k, v) => setForm({ ...form, [k]: v });

  const submit = async () => {
    if (!form.nome.trim()) {
      setErro('O nome do fornecedor é obrigatório');
      return;
    }
    setErro(null);
    setSaving(true);
    try { await onSave(form); }
    catch (e) { setErro(e?.message || 'Falha ao salvar'); setSaving(false); }
  };

  return (
    <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.7)', display: 'grid', placeItems: 'center', zIndex: 200, backdropFilter: 'blur(2px)' }} onClick={onClose}>
      <div style={{ background: 'var(--bg-1)', border: '1px solid var(--line-2)', borderRadius: 10, width: 560 }} onClick={e => e.stopPropagation()}>
        <div className="card-head">
          <Icon name={editing ? 'edit' : 'plus'} />
          <div className="t">{editing ? 'Editar fornecedor' : 'Cadastrar novo fornecedor'}</div>
          <div className="s">M11 · cadastro base</div>
          <button className="tb-btn" style={{ marginLeft: 'auto' }} onClick={onClose}><Icon name="x" /></button>
        </div>
        <div style={{ padding: 22, display: 'flex', flexDirection: 'column', gap: 12 }}>
          <div>
            <div className="field-label">NOME / RAZÃO SOCIAL <span style={{ color: 'var(--red)' }}>*</span></div>
            <input className="input" value={form.nome} onChange={e => set('nome', e.target.value)} placeholder="Ex: Suzano Distribuição" autoFocus />
          </div>
          <div className="grid-2">
            <div>
              <div className="field-label">CNPJ</div>
              <input className="input mono" value={form.cnpj} onChange={e => set('cnpj', e.target.value)} placeholder="00.000.000/0000-00" />
            </div>
            <div>
              <div className="field-label">TELEFONE</div>
              <input className="input mono" value={form.telefone} onChange={e => set('telefone', e.target.value)} placeholder="(11) 0000-0000" />
            </div>
          </div>
          <div>
            <div className="field-label">E-MAIL</div>
            <input className="input" type="email" value={form.email} onChange={e => set('email', e.target.value)} placeholder="contato@empresa.com.br" />
          </div>
          <div>
            <div className="field-label">OBSERVAÇÕES</div>
            <textarea className="input" value={form.observacoes} onChange={e => set('observacoes', e.target.value)} placeholder="Condições de pagamento, prazo de entrega típico, etc." rows={3} style={{ resize: 'vertical', fontFamily: 'inherit' }} />
          </div>

          {editing && (
            <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12.5, paddingTop: 4 }}>
              <input type="checkbox" checked={form.ativo} onChange={e => set('ativo', e.target.checked)} />
              <span>Fornecedor ativo</span>
              <span style={{ fontSize: 11, color: 'var(--fg-3)' }}>· quando desativado, não aparece em sugestões de compra</span>
            </label>
          )}

          {erro && (
            <div className="alert-banner alert-red">
              <Icon name="warn" size={13} />
              {erro}
            </div>
          )}
        </div>
        <div style={{ padding: 14, borderTop: '1px solid var(--line-1)', display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
          <button className="btn" onClick={onClose} disabled={saving}>Cancelar</button>
          <button className="btn btn-primary" onClick={submit} disabled={saving}>
            {saving ? <><span className="spinner"></span> Salvando...</> : <><Icon name="check" /> {editing ? 'Salvar alterações' : 'Cadastrar fornecedor'}</>}
          </button>
        </div>
      </div>
    </div>
  );
}

/* ── CONFIRM DELETE FORNECEDOR ─────────────────────────────── */
function ConfirmDeleteFornecedor({ fornecedor, onClose, onConfirm }) {
  const [deleting, setDeleting] = React.useState(false);
  const [erro, setErro] = React.useState(null);
  const run = async () => {
    setDeleting(true); setErro(null);
    try { await onConfirm(); }
    catch (e) { setErro(e?.message || 'Falha ao excluir'); setDeleting(false); }
  };
  return (
    <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.7)', display: 'grid', placeItems: 'center', zIndex: 250, backdropFilter: 'blur(2px)' }} onClick={onClose}>
      <div style={{ background: 'var(--bg-1)', border: '1px solid var(--line-2)', borderRadius: 10, width: 480 }} onClick={e => e.stopPropagation()}>
        <div className="card-head">
          <Icon name="warn" style={{ color: 'var(--red)' }} />
          <div className="t">Excluir fornecedor?</div>
          <button className="tb-btn" style={{ marginLeft: 'auto' }} onClick={onClose}><Icon name="x" /></button>
        </div>
        <div style={{ padding: 22, fontSize: 13, lineHeight: 1.55, color: 'var(--fg-1)' }}>
          Você está prestes a excluir <strong style={{ color: 'var(--fg-0)' }}>{fornecedor.nome}</strong>{fornecedor.cnpj ? ` (${fornecedor.cnpj})` : ''}.
          <div className="alert-banner alert-amber" style={{ marginTop: 14 }}>
            <Icon name="warn" size={13} />
            <div>
              <strong>O que acontece:</strong>
              <ul style={{ margin: '6px 0 0 18px', fontSize: 11.5, color: 'var(--fg-2)', lineHeight: 1.6 }}>
                <li>Produtos cujo fornecedor principal era este passam a ter <code>fornecedor = null</code> (não são apagados).</li>
                <li>Vínculos em "Fornecedores alternativos" deste fornecedor são removidos.</li>
                <li>Histórico de movimentações <em>permanece</em> (registro auditável).</li>
              </ul>
              <div style={{ fontSize: 11.5, marginTop: 6, color: 'var(--fg-2)' }}>Se quiser preservar o cadastro, prefira <em>desativar</em> pelo botão Editar.</div>
            </div>
          </div>
          {erro && <div className="alert-banner alert-red" style={{ marginTop: 14 }}><Icon name="warn" size={13} />{erro}</div>}
        </div>
        <div style={{ padding: 14, borderTop: '1px solid var(--line-1)', display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
          <button className="btn" onClick={onClose} disabled={deleting}>Cancelar</button>
          <button className="btn btn-danger" onClick={run} disabled={deleting}>
            {deleting ? <><span className="spinner"></span> Excluindo...</> : <><Icon name="x" /> Sim, excluir</>}
          </button>
        </div>
      </div>
    </div>
  );
}

/* ── SKU DRAWER ────────────────────────────────────────────── */
function SkuDrawer({ sku, onClose, tab, onTab, onNav, onReload, showToast }) {
  const [movimentos, setMovimentos] = React.useState(null);
  const [forns, setForns] = React.useState(null);
  const [showAjuste, setShowAjuste] = React.useState(false);
  const [showPreco, setShowPreco] = React.useState(false);

  React.useEffect(() => {
    if (tab === 'mov' && movimentos === null && sku.id) {
      window.dataApi.listMovimentosByProduto(sku.id).then(setMovimentos).catch(() => setMovimentos([]));
    }
    if (tab === 'forn' && forns === null && sku.id) {
      window.dataApi.listFornecedoresByProduto(sku.id).then(setForns).catch(() => setForns([]));
    }
  }, [tab, sku.id, movimentos, forns]);

  const handleAjuste = async (qtdReal, obs) => {
    await window.dataApi.insertAjusteEstoque(sku.id, qtdReal, obs);
    await onReload?.();
    setShowAjuste(false);
    showToast?.(`Inventário ajustado · ${sku.cod} agora com ${qtdReal} un`);
    onClose();
  };

  const handleAtualizarPreco = async (novoPreco) => {
    await window.dataApi.updateProdutoPreco(sku.id, novoPreco);
    await onReload?.();
    setShowPreco(false);
    showToast?.(`Preço de ${sku.cod} atualizado para ${BRL(novoPreco)}`);
    onClose();
  };

  const handlePrintEtiqueta = () => {
    const win = window.open('', '_blank', 'width=480,height=360');
    if (!win) {
      alert('Pop-up bloqueado pelo navegador. Permita pop-ups deste site para imprimir etiquetas.');
      return;
    }
    const html = `<!doctype html><html><head><meta charset="utf-8"><title>Etiqueta ${sku.cod}</title>
<style>
@page { size: 60mm 40mm; margin: 2mm; }
body { font-family: 'Helvetica Neue', Arial, sans-serif; margin: 0; padding: 6px; color: #000; }
.brand { font-size: 8px; letter-spacing: 0.1em; color: #666; }
.desc { font-size: 11px; font-weight: 600; margin: 3px 0; line-height: 1.15; max-height: 26px; overflow: hidden; }
.row { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 4px; }
.preco { font-size: 18px; font-weight: 700; }
.cod, .ean { font-family: monospace; font-size: 9px; color: #444; }
.barcode { font-family: 'Libre Barcode 39', monospace; font-size: 28px; letter-spacing: 1px; text-align: center; margin-top: 2px; }
</style></head><body>
<div class="brand">BTM SIGMA · ${sku.cat || ''}</div>
<div class="desc">${sku.desc}</div>
<div class="row">
  <div>
    <div class="cod">${sku.cod}</div>
    ${sku.ean ? `<div class="ean">${sku.ean}</div>` : ''}
  </div>
  <div class="preco">${sku.preco > 0 ? BRL(sku.preco) : '—'}</div>
</div>
<script>setTimeout(function(){window.print();window.close();},250);</script>
</body></html>`;
    win.document.write(html);
    win.document.close();
  };

  const baixo = sku.st < sku.min;
  const atencao = sku.st < sku.min * 1.5;
  const statusCls = baixo ? 'badge-red' : atencao ? 'badge-amber' : 'badge-lime';
  const statusLabel = baixo ? 'REPOR' : atencao ? 'ATENÇÃO' : 'OK';
  const margem = sku.preco > 0 ? ((sku.preco - sku.custo) / sku.preco * 100).toFixed(1) : '0.0';

  return (
    <>
    <Drawer
      open={true}
      onClose={onClose}
      eyebrow={<><span>SKU · Estoque</span><span className="chip">M11</span><span className={`badge ${statusCls}`}>{statusLabel}</span></>}
      title={<span style={{ fontWeight: 600 }}>{sku.desc}</span>}
      subtitle={`${sku.cod} · SKU ${sku.sku} · NCM ${sku.ncm} · ${sku.cat}`}
      headRight={
        <div style={{ textAlign: 'right' }}>
          <div className="mono" style={{ fontSize: 10.5, color: 'var(--fg-3)' }}>ESTOQUE ATUAL</div>
          <div className="mono" style={{ fontSize: 18, fontWeight: 600, color: baixo ? 'var(--red)' : 'var(--lime)' }}>{NUM(sku.st)} un</div>
        </div>
      }
      tabs={[
        { id: 'det', label: 'Detalhes' },
        { id: 'mov', label: 'Movimentações' },
        { id: 'forn', label: 'Fornecedores' },
        { id: 'rep', label: 'Reposição' },
      ]}
      activeTab={tab}
      onTabChange={onTab}
      footer={
        <>
          <button className="btn" onClick={() => setShowAjuste(true)}><Icon name="edit" /> Ajustar inventário</button>
          <button className="btn" onClick={handlePrintEtiqueta}><Icon name="print" /> Imprimir etiqueta</button>
          {baixo ? (
            <button className="btn btn-primary" style={{ flex: 1, justifyContent: 'center' }} onClick={() => onNav('logistica')}>
              <Icon name="package" /> Solicitar reposição
            </button>
          ) : (
            <button className="btn btn-primary" style={{ flex: 1, justifyContent: 'center' }} onClick={() => setShowPreco(true)}>
              <Icon name="check" /> Atualizar preço
            </button>
          )}
        </>
      }
    >
      {tab === 'det' && (
        <div style={{ padding: 18 }}>
          <div className="field-label" style={{ marginBottom: 10 }}>NÍVEIS DE ESTOQUE</div>
          <div style={{ padding: 14, background: 'var(--bg-2)', border: '1px solid var(--line-1)', borderRadius: 6, marginBottom: 22 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 10 }}>
              <span className="mono" style={{ fontSize: 11, color: 'var(--fg-3)', minWidth: 60 }}>MÍN {sku.min}</span>
              <div style={{ flex: 1, height: 8, background: 'var(--bg-3)', borderRadius: 4, overflow: 'hidden', position: 'relative' }}>
                <div style={{ width: `${(sku.st / sku.max) * 100}%`, height: '100%', background: baixo ? 'var(--red)' : atencao ? 'var(--amber)' : 'var(--lime)' }}></div>
                <div style={{ position: 'absolute', left: `${(sku.min / sku.max) * 100}%`, top: -2, bottom: -2, width: 2, background: 'var(--amber)' }}></div>
              </div>
              <span className="mono" style={{ fontSize: 11, color: 'var(--fg-3)', minWidth: 60, textAlign: 'right' }}>MAX {sku.max}</span>
            </div>
            <div className="flex items-center gap-3" style={{ justifyContent: 'space-between' }}>
              <span className="mono" style={{ fontSize: 11, color: 'var(--fg-3)' }}>ATUAL</span>
              <span className="mono" style={{ fontSize: 18, fontWeight: 600, color: baixo ? 'var(--red)' : 'var(--lime)' }}>{NUM(sku.st)} un</span>
            </div>
          </div>

          <div className="field-label" style={{ marginBottom: 10 }}>PREÇO E MARGEM</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10, marginBottom: 22 }}>
            <Field label="CUSTO" value={BRL(sku.custo)} />
            <Field label="PREÇO VENDA" value={BRL(sku.preco)} valueClass="text-lime" />
            <Field label="MARGEM" value={margem + '%'} valueClass={margem >= 35 ? 'text-lime' : 'text-amber'} />
            <Field label="FORNECEDOR PRINCIPAL" value={sku.fornecedor} />
            <Field label="INNER MÍNIMO" value={sku.inner + ' un'} valueClass="text-cyan" />
            <Field label="GIRO MÉDIO" value={sku.giro + ' dias'} />
          </div>

          <div className="field-label" style={{ marginBottom: 10 }}>MOVIMENTAÇÕES (30D)</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10, marginBottom: 14 }}>
            <Field label="ENTRADAS" value={'+' + sku.mov30.entr + ' un'} valueClass="text-lime" />
            <Field label="SAÍDAS" value={'-' + sku.mov30.said + ' un'} valueClass="text-red" />
            <Field label="SALDO" value={(sku.mov30.entr - sku.mov30.said >= 0 ? '+' : '') + (sku.mov30.entr - sku.mov30.said) + ' un'} />
          </div>

          {baixo && (
            <div className="alert-banner alert-red">
              <Icon name="warn" size={13} />
              <div>
                <strong>Estoque abaixo do mínimo · reposição urgente</strong>
                <div style={{ fontSize: 11.5, color: 'var(--fg-2)', marginTop: 2 }}>
                  Faltam {sku.min - sku.st} unidades para atingir o estoque mínimo. Veja sugestão de reposição na aba dedicada.
                </div>
              </div>
            </div>
          )}
        </div>
      )}

      {tab === 'mov' && (
        <div>
          <table className="tbl">
            <thead>
              <tr>
                <th>Data</th>
                <th>Tipo</th>
                <th style={{ textAlign: 'right' }}>Qtd</th>
                <th>Documento</th>
              </tr>
            </thead>
            <tbody>
              {movimentos === null && (
                <tr><td colSpan={4} style={{ padding: 22, textAlign: 'center', color: 'var(--fg-3)' }}>
                  <span className="spinner" style={{ marginRight: 8 }}></span> Carregando movimentações...
                </td></tr>
              )}
              {movimentos && movimentos.length === 0 && (
                <tr><td colSpan={4} style={{ padding: 22, textAlign: 'center', color: 'var(--fg-3)' }}>Sem movimentações registradas para este produto.</td></tr>
              )}
              {movimentos && movimentos.map((m) => (
                <tr key={m.id}>
                  <td className="mono">{new Date(m.ocorrido_em).toLocaleDateString('pt-BR')}</td>
                  <td>
                    <span className={`badge ${m.tipo === 'entrada' ? 'badge-lime' : m.tipo === 'saida' ? 'badge-amber' : 'badge-cyan'}`}>
                      {m.tipo === 'entrada' ? '↓ ENTRADA' : m.tipo === 'saida' ? '↑ SAÍDA' : '= AJUSTE'}
                    </span>
                  </td>
                  <td className="num-col" style={{ color: m.tipo === 'entrada' ? 'var(--lime)' : m.tipo === 'saida' ? 'var(--red)' : 'var(--cyan)', fontWeight: 600 }}>
                    {m.tipo === 'entrada' ? '+' : m.tipo === 'saida' ? '-' : ''}{m.quantidade}
                  </td>
                  <td className="mono" style={{ fontSize: 11 }}>{m.documento || '—'}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {tab === 'forn' && (
        <div style={{ padding: 18 }}>
          <div className="field-label" style={{ marginBottom: 10 }}>FORNECEDORES CADASTRADOS PARA ESTE PRODUTO</div>
          {forns === null && (
            <div style={{ padding: 22, textAlign: 'center', color: 'var(--fg-3)' }}>
              <span className="spinner" style={{ marginRight: 8 }}></span> Carregando fornecedores...
            </div>
          )}
          {forns && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {/* Fornecedor principal sempre mostrado */}
              <div style={{ padding: 14, background: 'var(--bg-2)', border: '1px solid var(--line-1)', borderLeft: '3px solid var(--lime)', borderRadius: 6 }}>
                <div className="flex items-center justify-between" style={{ marginBottom: 8 }}>
                  <span style={{ fontSize: 13, fontWeight: 600 }}>{sku.fornecedor}</span>
                  <span className="badge badge-lime">PRINCIPAL</span>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10 }}>
                  <Field label="CUSTO" value={BRL(sku.custo)} />
                  <Field label="INNER" value={sku.inner + ' un'} valueClass="text-cyan" />
                  <Field label="ÚLT. COMPRA" value="—" />
                </div>
              </div>
              {/* Fornecedores alternativos (produto_fornecedores) */}
              {forns.map((f) => (
                <div key={f.id} style={{ padding: 14, background: 'var(--bg-2)', border: '1px solid var(--line-1)', borderLeft: f.ativo ? '3px solid var(--cyan)' : '3px solid var(--fg-4)', borderRadius: 6 }}>
                  <div className="flex items-center justify-between" style={{ marginBottom: 8 }}>
                    <span style={{ fontSize: 13, fontWeight: 600 }}>{f.fornecedor?.nome || '—'}</span>
                    {f.ativo ? <span className="badge">ALTERNATIVO</span> : <span className="badge">INATIVO</span>}
                  </div>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10 }}>
                    <Field label="CUSTO" value={f.custo != null ? BRL(parseFloat(f.custo)) : '—'} />
                    <Field label="INNER" value={f.inner_minimo ? f.inner_minimo + ' un' : '—'} valueClass="text-cyan" />
                    <Field label="ÚLT. COMPRA" value={f.ultima_compra_at ? new Date(f.ultima_compra_at).toLocaleDateString('pt-BR') : '—'} />
                  </div>
                </div>
              ))}
              {forns.length === 0 && (
                <div className="alert-banner alert-cyan">
                  <Icon name="info" size={13} />
                  Nenhum fornecedor alternativo cadastrado. Adicione opções para reduzir risco de ruptura.
                </div>
              )}
            </div>
          )}
        </div>
      )}

      {tab === 'rep' && (
        <div style={{ padding: 18 }}>
          {baixo ? (
            <>
              <div className="alert-banner alert-red" style={{ marginBottom: 18 }}>
                <Icon name="warn" size={13} />
                <div>
                  <strong>Necessário repor {sku.min - sku.st} un para atingir o mínimo · {sku.max - sku.st} un para o máximo</strong>
                  <div style={{ fontSize: 11.5, color: 'var(--fg-2)', marginTop: 2 }}>
                    Sugestão calculada conforme INNER do fornecedor ({sku.inner} un/caixa).
                  </div>
                </div>
              </div>

              <div className="field-label" style={{ marginBottom: 10 }}>SUGESTÃO DE PEDIDO DE COMPRAS</div>
              <div style={{ padding: 14, background: 'var(--bg-2)', border: '1px solid var(--line-1)', borderRadius: 6, marginBottom: 18 }}>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10, marginBottom: 14 }}>
                  <Field label="QTD A COMPRAR" value={Math.ceil((sku.max - sku.st) / sku.inner) * sku.inner + ' un'} valueClass="text-lime" />
                  <Field label="INNERS" value={Math.ceil((sku.max - sku.st) / sku.inner) + ' caixas'} />
                  <Field label="FORNECEDOR" value={sku.fornecedor} />
                  <Field label="CUSTO TOTAL" value={BRL(Math.ceil((sku.max - sku.st) / sku.inner) * sku.inner * sku.custo)} valueClass="text-lime" />
                  <Field label="PRAZO ESTIMADO" value="3-5 dias úteis" mono />
                  <Field label="GIRO PROJETADO" value={sku.giro + ' dias'} />
                </div>
                <button className="btn btn-primary" style={{ width: '100%', justifyContent: 'center' }} onClick={() => onNav('logistica')}>
                  <Icon name="check" /> Gerar pedido de compras para {sku.fornecedor}
                </button>
              </div>

              <div className="alert-banner alert-cyan">
                <Icon name="cpu" size={13} />
                <div>
                  <strong>IA sugere também:</strong>
                  <div style={{ fontSize: 11.5, color: 'var(--fg-2)', marginTop: 2 }}>
                    Comparar com fornecedores alternativos pode reduzir custo. Diferença média histórica: 4-8%.
                  </div>
                </div>
              </div>
            </>
          ) : (
            <div style={{ padding: 32, textAlign: 'center' }}>
              <div style={{ display: 'inline-grid', placeItems: 'center', width: 56, height: 56, borderRadius: '50%', background: 'var(--lime-soft)', border: '1px solid var(--lime-border)', marginBottom: 14 }}>
                <Icon name="check" size={22} style={{ color: 'var(--lime)' }} />
              </div>
              <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 4 }}>Reposição não necessária</div>
              <div style={{ fontSize: 12, color: 'var(--fg-3)', maxWidth: 360, margin: '0 auto' }}>
                Estoque atual ({NUM(sku.st)} un) está acima do mínimo ({sku.min} un). Próxima reposição estimada em {Math.max(0, sku.giro - 14)} dias.
              </div>
            </div>
          )}
        </div>
      )}
    </Drawer>
    {showAjuste && <AjusteInventarioModal sku={sku} onClose={() => setShowAjuste(false)} onConfirm={handleAjuste} />}
    {showPreco && <AtualizarPrecoModal sku={sku} onClose={() => setShowPreco(false)} onConfirm={handleAtualizarPreco} />}
    </>
  );
}

/* ── AJUSTE INVENTÁRIO MODAL ───────────────────────────────── */
function AjusteInventarioModal({ sku, onClose, onConfirm }) {
  const [qtd, setQtd] = React.useState(String(sku.st));
  const [obs, setObs] = React.useState('');
  const [erro, setErro] = React.useState(null);
  const [saving, setSaving] = React.useState(false);

  const novaQtd = parseInt(qtd, 10);
  const diff = isNaN(novaQtd) ? 0 : novaQtd - sku.st;

  const submit = async () => {
    if (isNaN(novaQtd) || novaQtd < 0) {
      setErro('Informe uma quantidade válida (≥ 0)');
      return;
    }
    setErro(null);
    setSaving(true);
    try { await onConfirm(novaQtd, obs); }
    catch (e) { setErro(e?.message || 'Falha ao salvar ajuste'); setSaving(false); }
  };

  return (
    <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.7)', display: 'grid', placeItems: 'center', zIndex: 250, backdropFilter: 'blur(2px)' }} onClick={onClose}>
      <div style={{ background: 'var(--bg-1)', border: '1px solid var(--line-2)', borderRadius: 10, width: 520 }} onClick={e => e.stopPropagation()}>
        <div className="card-head">
          <Icon name="edit" />
          <div className="t">Ajustar inventário</div>
          <div className="s">{sku.cod} · {sku.desc}</div>
          <button className="tb-btn" style={{ marginLeft: 'auto' }} onClick={onClose}><Icon name="x" /></button>
        </div>
        <div style={{ padding: 22, display: 'flex', flexDirection: 'column', gap: 12 }}>
          <div className="alert-banner alert-cyan">
            <Icon name="info" size={13} />
            <div>
              <strong>Quando usar isso</strong>
              <div style={{ fontSize: 11.5, color: 'var(--fg-2)', marginTop: 2 }}>
                Após contagem física, informe a quantidade real em estoque. O sistema registra um movimento do tipo "ajuste" e atualiza o saldo do produto.
              </div>
            </div>
          </div>

          <div className="grid-2">
            <div>
              <div className="field-label">SALDO ATUAL (SISTEMA)</div>
              <div className="mono" style={{ fontSize: 22, fontWeight: 600, color: 'var(--fg-2)' }}>{NUM(sku.st)} un</div>
            </div>
            <div>
              <div className="field-label">SALDO REAL (CONTAGEM) <span style={{ color: 'var(--red)' }}>*</span></div>
              <input className="input mono" type="number" min="0" value={qtd} onChange={e => setQtd(e.target.value)} style={{ fontSize: 18, fontWeight: 600 }} autoFocus />
            </div>
          </div>

          {!isNaN(novaQtd) && diff !== 0 && (
            <div style={{ padding: 10, background: diff > 0 ? 'var(--lime-soft)' : 'rgba(255,93,93,0.1)', border: `1px solid ${diff > 0 ? 'var(--lime-border)' : 'rgba(255,93,93,0.3)'}`, borderRadius: 6 }}>
              <div className="mono" style={{ fontSize: 12, color: diff > 0 ? 'var(--lime)' : 'var(--red)' }}>
                <strong>Diferença: {diff > 0 ? '+' : ''}{diff} un</strong> · {diff > 0 ? 'sobra encontrada' : 'falta encontrada'}
              </div>
            </div>
          )}

          <div>
            <div className="field-label">OBSERVAÇÕES</div>
            <textarea className="input" value={obs} onChange={e => setObs(e.target.value)} placeholder="Motivo do ajuste (ex: contagem mensal, produto avariado, divergência inventário)" rows={3} style={{ resize: 'vertical', fontFamily: 'inherit' }} />
          </div>

          {erro && (
            <div className="alert-banner alert-red">
              <Icon name="warn" size={13} />
              {erro}
            </div>
          )}
        </div>
        <div style={{ padding: 14, borderTop: '1px solid var(--line-1)', display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
          <button className="btn" onClick={onClose} disabled={saving}>Cancelar</button>
          <button className="btn btn-primary" onClick={submit} disabled={saving}>
            {saving ? <><span className="spinner"></span> Salvando...</> : <><Icon name="check" /> Confirmar ajuste</>}
          </button>
        </div>
      </div>
    </div>
  );
}

/* ── ATUALIZAR PREÇO MODAL ─────────────────────────────────── */
function AtualizarPrecoModal({ sku, onClose, onConfirm }) {
  const [preco, setPreco] = React.useState(sku.preco > 0 ? String(sku.preco) : '');
  const [erro, setErro] = React.useState(null);
  const [saving, setSaving] = React.useState(false);

  const novo = parseFloat(preco);
  const margem = !isNaN(novo) && novo > 0 ? ((novo - sku.custo) / novo * 100).toFixed(1) : null;

  const submit = async () => {
    if (isNaN(novo) || novo <= 0) {
      setErro('Informe um preço válido (maior que zero)');
      return;
    }
    if (novo < sku.custo) {
      setErro(`Preço (${BRL(novo)}) está abaixo do custo (${BRL(sku.custo)}) — margem negativa. Confirme se isso é intencional editando novamente.`);
    }
    setSaving(true);
    try { await onConfirm(novo); }
    catch (e) { setErro(e?.message || 'Falha ao atualizar preço'); setSaving(false); }
  };

  return (
    <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.7)', display: 'grid', placeItems: 'center', zIndex: 250, backdropFilter: 'blur(2px)' }} onClick={onClose}>
      <div style={{ background: 'var(--bg-1)', border: '1px solid var(--line-2)', borderRadius: 10, width: 480 }} onClick={e => e.stopPropagation()}>
        <div className="card-head">
          <Icon name="dollar" />
          <div className="t">Atualizar preço de venda</div>
          <div className="s">{sku.cod} · {sku.desc}</div>
          <button className="tb-btn" style={{ marginLeft: 'auto' }} onClick={onClose}><Icon name="x" /></button>
        </div>
        <div style={{ padding: 22, display: 'flex', flexDirection: 'column', gap: 12 }}>
          <div className="grid-2">
            <div>
              <div className="field-label">CUSTO</div>
              <div className="mono" style={{ fontSize: 16, fontWeight: 500 }}>{BRL(sku.custo)}</div>
            </div>
            <div>
              <div className="field-label">PREÇO ATUAL</div>
              <div className="mono" style={{ fontSize: 16, fontWeight: 500, color: 'var(--fg-2)' }}>{sku.preco > 0 ? BRL(sku.preco) : '—'}</div>
            </div>
          </div>

          <div>
            <div className="field-label">NOVO PREÇO DE VENDA (R$) <span style={{ color: 'var(--red)' }}>*</span></div>
            <input className="input mono" type="number" step="0.01" min="0" value={preco} onChange={e => setPreco(e.target.value)} style={{ fontSize: 20, fontWeight: 600 }} autoFocus />
          </div>

          {margem !== null && (
            <div style={{ padding: 10, background: novo >= sku.custo ? 'var(--lime-soft)' : 'rgba(255,93,93,0.1)', border: `1px solid ${novo >= sku.custo ? 'var(--lime-border)' : 'rgba(255,93,93,0.3)'}`, borderRadius: 6 }}>
              <div className="mono" style={{ fontSize: 12, color: novo >= sku.custo ? 'var(--lime)' : 'var(--red)' }}>
                <strong>Margem: {margem}%</strong> · {novo >= sku.custo ? `lucro de ${BRL(novo - sku.custo)}/un` : `prejuízo de ${BRL(sku.custo - novo)}/un`}
              </div>
            </div>
          )}

          {erro && (
            <div className={`alert-banner ${novo < sku.custo && !isNaN(novo) ? 'alert-amber' : 'alert-red'}`}>
              <Icon name="warn" size={13} />
              {erro}
            </div>
          )}
        </div>
        <div style={{ padding: 14, borderTop: '1px solid var(--line-1)', display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
          <button className="btn" onClick={onClose} disabled={saving}>Cancelar</button>
          <button className="btn btn-primary" onClick={submit} disabled={saving}>
            {saving ? <><span className="spinner"></span> Salvando...</> : <><Icon name="check" /> Salvar novo preço</>}
          </button>
        </div>
      </div>
    </div>
  );
}

function Field({ label, value, valueClass, mono }) {
  return (
    <div>
      <div className="field-label">{label}</div>
      <div className={`${valueClass || ''} ${mono ? 'mono' : ''}`} style={{ fontSize: 13, fontWeight: 500 }}>{value}</div>
    </div>
  );
}

window.MPdv = MPdv;