// Telas: Pedidos, Detalhe, Fila 3D, Envios, Novo Pedido — paleta neon

const { useState: uS, useMemo: uM, useEffect: uE } = React;

function PedidosLista({ pedidos, onAbrir }) {
  const [filtro, setFiltro] = uS('todos');
  const [tagsFiltro, setTagsFiltro] = uS([]);
  const filtros = [
    { id:'todos',    lbl:'Todos',         cor:'var(--text-2)' },
    { id:'orcamento',lbl:'Orçamentos',    cor:'var(--accent)' },
    { id:'producao', lbl:'Em produção',   cor:'#9b6cff' },
    { id:'pronto',   lbl:'Prontos',       cor:'var(--accent)' },
    { id:'transito', lbl:'A caminho',     cor:'#9b6cff' },
    { id:'entregue', lbl:'Entregues',     cor:'var(--accent)' },
    { id:'falha',    lbl:'Atenção',       cor:'var(--bad)' },
  ];

  // Pedidos cancelados não aparecem em nenhum filtro principal
  const naoCancelados = pedidos.filter(p => p.statusImpressao !== 'Cancelado');

  const list = uM(() => naoCancelados.filter(p => {
    // 1. filtro por status (uma das opções acima)
    let passaStatus = true;
    if (filtro==='orcamento') passaStatus = ['Orçamento','Em aprovação'].includes(p.statusImpressao);
    else if (filtro==='producao') passaStatus = ['Fila','Imprimindo','Fatiando','Pos-processamento'].includes(p.statusImpressao);
    else if (filtro==='pronto')   passaStatus = p.statusImpressao==='Pronto' && p.statusEntrega==='Pendente';
    else if (filtro==='transito') passaStatus = p.statusEntrega==='Em trânsito';
    else if (filtro==='entregue') passaStatus = p.statusEntrega==='Entregue';
    else if (filtro==='falha')    passaStatus = p.statusImpressao==='Falhou' || p.statusPagamento==='Aguardando';
    if (!passaStatus) return false;

    // 2. filtro por tags (AND lógico — pedido precisa ter TODAS as tags selecionadas)
    if (tagsFiltro.length > 0) {
      const tagsP = p.tags || [];
      return tagsFiltro.every(tid => tagsP.includes(tid));
    }
    return true;
  }), [naoCancelados, filtro, tagsFiltro]);

  const toggleTagFiltro = (tid) =>
    setTagsFiltro(ts => ts.includes(tid) ? ts.filter(t => t !== tid) : [...ts, tid]);

  // Tags com contagem (apenas as que aparecem em pelo menos 1 pedido não-cancelado)
  const tagsDisponiveis = (window.OBS_TAGS || [])
    .map(t => ({ ...t, count: naoCancelados.filter(p => (p.tags || []).includes(t.id)).length }))
    .filter(t => t.count > 0 || tagsFiltro.includes(t.id));

  return (
    <div style={{ padding:28, display:'flex', flexDirection:'column', gap:18 }}>
      <div style={{ display:'flex', gap:8, flexWrap:'wrap' }}>
        {filtros.map(f => {
          const ativo = filtro === f.id;
          const count = f.id==='todos' ? naoCancelados.length :
            f.id==='orcamento' ? naoCancelados.filter(p=>['Orçamento','Em aprovação'].includes(p.statusImpressao)).length :
            f.id==='producao' ? naoCancelados.filter(p=>['Fila','Imprimindo','Fatiando','Pos-processamento'].includes(p.statusImpressao)).length :
            f.id==='pronto' ? naoCancelados.filter(p=>p.statusImpressao==='Pronto'&&p.statusEntrega==='Pendente').length :
            f.id==='transito' ? naoCancelados.filter(p=>p.statusEntrega==='Em trânsito').length :
            f.id==='entregue' ? naoCancelados.filter(p=>p.statusEntrega==='Entregue').length :
            naoCancelados.filter(p=>p.statusImpressao==='Falhou'||p.statusPagamento==='Aguardando').length;
          return (
            <button key={f.id} onClick={() => setFiltro(f.id)} style={{
              display:'flex', alignItems:'center', gap:8,
              padding:'9px 14px', borderRadius:999,
              background: ativo ? 'var(--primary)' : 'rgba(255,255,255,0.04)',
              color: ativo ? '#fff' : 'var(--text-2)',
              border:'1px solid '+(ativo ? 'var(--primary)' : 'var(--line)'),
              fontSize:13, fontWeight:600, cursor:'pointer',
              boxShadow: ativo ? '0 0 14px rgba(255,46,154,0.4)' : 'none',
            }}>
              {f.lbl}
              <span style={{ fontFamily:'var(--font-mono)', fontSize:10,
                background: ativo ? 'rgba(255,255,255,0.25)' : 'rgba(255,255,255,0.06)',
                padding:'2px 7px', borderRadius:999, fontWeight:700 }}>{count}</span>
            </button>
          );
        })}
      </div>

      {tagsDisponiveis.length > 0 && (
        <div style={{ display:'flex', alignItems:'center', gap:10, flexWrap:'wrap' }}>
          <span style={{ fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'0.16em', color:'var(--text-3)', textTransform:'uppercase' }}>
            Tags:
          </span>
          {tagsDisponiveis.map(t => {
            const sel = tagsFiltro.includes(t.id);
            return (
              <button key={t.id} onClick={() => toggleTagFiltro(t.id)} style={{
                fontSize:11, fontWeight:600, padding:'5px 10px', borderRadius:999, cursor:'pointer',
                background: sel ? `${t.cor}33` : 'rgba(255,255,255,0.04)',
                color: sel ? t.cor : 'var(--text-3)',
                border:'1px solid '+(sel ? t.cor : 'var(--line)'),
                boxShadow: sel ? `0 0 8px ${t.cor}55` : 'none',
                display:'inline-flex', alignItems:'center', gap:6,
              }}>
                {sel ? '✓ ' : ''}{t.label}
                <span style={{ fontFamily:'var(--font-mono)', fontSize:10, opacity:0.7 }}>{t.count}</span>
              </button>
            );
          })}
          {tagsFiltro.length > 0 && (
            <button onClick={() => setTagsFiltro([])} style={{
              fontSize:11, padding:'5px 10px', borderRadius:999, cursor:'pointer',
              background:'transparent', color:'var(--text-3)', border:'1px dashed var(--line)',
            }}>limpar filtro</button>
          )}
        </div>
      )}

      <div style={{ background:'var(--bg-card)', border:'1px solid var(--line)', borderRadius:14, overflow:'hidden' }}>
        <div style={{
          display:'grid', gridTemplateColumns:'90px 1.6fr 1fr 110px 110px 130px',
          padding:'12px 18px', gap:14,
          fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'0.16em', color:'var(--text-3)', textTransform:'uppercase',
          borderBottom:'1px solid var(--line)', background:'rgba(255,255,255,0.02)',
        }}>
          <div>Pedido</div><div>Produto / Cliente</div><div>Canal</div><div style={{textAlign:'right'}}>Total</div><div style={{textAlign:'right'}}>Lucro</div><div>Status</div>
        </div>
        {list.map(p => (
          <button key={p.id} onClick={() => onAbrir(p)} style={{
            display:'grid', gridTemplateColumns:'90px 1.6fr 1fr 110px 110px 130px', gap:14,
            padding:'14px 18px', alignItems:'center',
            background:'none', border:'none', borderTop:'1px solid var(--line)',
            cursor:'pointer', textAlign:'left', width:'100%', color:'var(--text)',
          }}
          onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.03)'}
          onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
            <div style={{ fontFamily:'var(--font-mono)', fontSize:11, color:'var(--text-3)', fontWeight:600 }}>{p.id.split('-').pop()}</div>
            <div style={{ minWidth:0 }}>
              <div style={{ fontSize:13, fontWeight:600, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{p.produto}</div>
              <div style={{ fontSize:11, color:'var(--text-3)', marginTop:2 }}>{p.cliente} · {fmtData(p.data)}</div>
              {(p.tags || []).length > 0 && (
                <div style={{ display:'flex', gap:4, flexWrap:'wrap', marginTop:5 }}>
                  {(p.tags || []).slice(0,3).map(tid => {
                    const t = (window.OBS_TAGS || []).find(x => x.id === tid);
                    if (!t) return null;
                    return (
                      <span key={tid} style={{
                        fontSize:9, fontWeight:600, padding:'1px 6px', borderRadius:999,
                        background:`${t.cor}22`, color:t.cor, border:`1px solid ${t.cor}44`,
                        whiteSpace:'nowrap',
                      }}>{t.label}</span>
                    );
                  })}
                  {(p.tags || []).length > 3 && (
                    <span style={{ fontSize:9, color:'var(--text-3)', alignSelf:'center' }}>+{(p.tags || []).length - 3}</span>
                  )}
                </div>
              )}
            </div>
            <div style={{ fontSize:12, color:'var(--text-2)' }}>{p.canal}</div>
            <div style={{ textAlign:'right', fontFamily:'var(--font-mono)', fontSize:13, fontWeight:600 }}>{fmtBRL(calcTotalPago(p))}</div>
            <div style={{ textAlign:'right', fontFamily:'var(--font-mono)', fontSize:13, fontWeight:600, color: calcLucro(p)>=0 ? 'var(--accent)' : 'var(--bad)' }}>{fmtBRL(calcLucro(p))}</div>
            <div><StatusBadge status={p.statusImpressao} palette={STATUS_IMP_COR}/></div>
          </button>
        ))}
        {list.length===0 && <div style={{ padding:40, textAlign:'center', color:'var(--text-3)', fontSize:13 }}>Nenhum pedido neste filtro.</div>}
      </div>
    </div>
  );
}

function PedidoDetalhe({ pedido, onFechar, onUpdate, onRemover, perfil }) {
  const total = calcTotalPago(pedido), custo = calcCustoTotal(pedido), lucro = calcLucro(pedido), margem = calcMargem(pedido);
  const setStatus = (campo, valor) => onUpdate({ ...pedido, [campo]: valor });
  const tags = pedido.tags || [];
  const toggleTag = (tagId) => {
    const novasTags = tags.includes(tagId) ? tags.filter(t => t !== tagId) : [...tags, tagId];
    onUpdate({ ...pedido, tags: novasTags });
  };
  const handleExcluir = () => {
    if (confirm(`Excluir definitivamente o pedido ${pedido.id} (${pedido.produto})?\n\nEsta ação não pode ser desfeita.`)) {
      onRemover && onRemover(pedido.id);
    }
  };

  // Permissões — defensivo: se perfil ausente OU helper não carregado, permite (não bloqueia).
  // Boolean explícito p/ evitar undefined virar disabled=true.
  const checkPerm = (acao) => {
    if (!perfil) return true;
    if (typeof window.pode !== 'function') return true;
    return window.pode(perfil, acao) === true;
  };
  const podeImpressao  = checkPerm('editar:impressao');
  const podePagamento  = checkPerm('editar:pagamento');
  const podeFormaPgto  = checkPerm('editar:formaPagamento');
  const podeEntrega    = checkPerm('editar:entrega');
  const podeTagsEditar = checkPerm('editar:tags');
  const podeExcluir    = !perfil ? true : (perfil.role === 'admin');

  return (
    <div style={{ position:'fixed', inset:0, background:'rgba(11,5,24,0.7)', backdropFilter:'blur(4px)', zIndex:50, display:'flex', justifyContent:'flex-end' }} onClick={onFechar}>
      <div onClick={e => e.stopPropagation()} style={{
        width:560, height:'100%', background:'var(--bg-pane)',
        display:'flex', flexDirection:'column', overflow:'hidden',
        boxShadow:'-20px 0 60px rgba(0,0,0,0.5)', borderLeft:'1px solid var(--line-2)',
      }}>
        <div style={{ padding:'20px 24px', borderBottom:'1px solid var(--line)', background:'var(--bg-card)' }}>
          <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:10 }}>
            <div style={{ fontFamily:'var(--font-mono)', fontSize:11, color:'var(--accent)', letterSpacing:'0.14em' }}>{pedido.id}</div>
            <div style={{ display:'flex', alignItems:'center', gap:6 }}>
              {onRemover && podeExcluir && (
                <button
                  onClick={handleExcluir}
                  title="Excluir pedido definitivamente"
                  aria-label="Excluir pedido"
                  style={{
                    width:32, height:32, borderRadius:8, padding:0,
                    background:'rgba(255,77,106,0.10)', border:'1px solid rgba(255,77,106,0.3)',
                    color:'var(--bad)', cursor:'pointer',
                    display:'flex', alignItems:'center', justifyContent:'center',
                    transition:'all .15s',
                  }}
                  onMouseEnter={e => { e.currentTarget.style.background = 'var(--bad)'; e.currentTarget.style.color = '#fff'; }}
                  onMouseLeave={e => { e.currentTarget.style.background = 'rgba(255,77,106,0.10)'; e.currentTarget.style.color = 'var(--bad)'; }}
                ><Icon.trash size={14}/></button>
              )}
              <button onClick={onFechar} style={{ background:'none', border:'none', cursor:'pointer', fontSize:22, color:'var(--text-3)', padding:'0 4px' }}>×</button>
            </div>
          </div>
          <div style={{ fontFamily:'var(--font-display)', fontSize:20, fontWeight:700, color:'var(--text)' }}>{pedido.produto}</div>
          <div style={{ fontSize:13, color:'var(--text-3)', marginTop:4 }}>{pedido.cliente} · {pedido.contato}</div>
          {tags.length > 0 && (
            <div style={{ display:'flex', gap:6, flexWrap:'wrap', marginTop:10 }}>
              {tags.map(tid => {
                const t = (window.OBS_TAGS || []).find(x => x.id === tid);
                if (!t) return null;
                return (
                  <span key={tid} style={{
                    fontSize:10, fontWeight:600, padding:'3px 8px', borderRadius:999,
                    background: `${t.cor}22`, color: t.cor, border:`1px solid ${t.cor}55`,
                  }}>{t.label}</span>
                );
              })}
            </div>
          )}
        </div>

        <div style={{ flex:1, overflow:'auto', padding:24, display:'flex', flexDirection:'column', gap:20 }}>
          <div style={{ background:'linear-gradient(135deg, rgba(255,46,154,0.15), rgba(43,230,240,0.08))', border:'1px solid var(--line-2)', borderRadius:14, padding:18 }}>
            <div style={{ fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'0.16em', color:'var(--text-3)', textTransform:'uppercase', marginBottom:10 }}>Lucro líquido</div>
            <div style={{ fontFamily:'var(--font-display)', fontSize:32, fontWeight:800, color: lucro>=0 ? 'var(--accent)' : 'var(--bad)', letterSpacing:'-0.02em', textShadow:'0 0 16px currentColor' }}>{fmtBRL(lucro)}</div>
            <div style={{ fontFamily:'var(--font-mono)', fontSize:11, color:'var(--text-2)', marginTop:4 }}>margem · {margem.toFixed(1)}%</div>
            <div style={{ height:1, background:'var(--line)', margin:'14px -18px' }}/>
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:12, fontSize:11 }}>
              <div><div style={{ color:'var(--text-3)', marginBottom:3 }}>Total cliente</div><div style={{ fontFamily:'var(--font-mono)', fontWeight:600, fontSize:13 }}>{fmtBRL(total)}</div></div>
              <div><div style={{ color:'var(--text-3)', marginBottom:3 }}>Custo total</div><div style={{ fontFamily:'var(--font-mono)', fontWeight:600, fontSize:13 }}>{fmtBRL(custo)}</div></div>
              <div><div style={{ color:'var(--text-3)', marginBottom:3 }}>Qtd</div><div style={{ fontFamily:'var(--font-mono)', fontWeight:600, fontSize:13 }}>{pedido.qtd}× un</div></div>
            </div>
          </div>

          <div>
            <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:10 }}>
              <div style={{ fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'0.16em', color:'var(--text-3)', textTransform:'uppercase' }}>
                Status da impressão {podeImpressao ? '· clique para mudar' : ''}
              </div>
              {!podeImpressao && <span style={{ fontSize:9, color:'var(--text-3)', fontFamily:'var(--font-mono)', letterSpacing:'0.1em' }}>🔒 Apenas Produção</span>}
            </div>
            <div style={{ display:'flex', gap:6, flexWrap:'wrap' }}>
              {['Orçamento','Em aprovação','Fila','Imprimindo','Pos-processamento','Pronto','Falhou','Cancelado'].map(s => {
                const sel = pedido.statusImpressao === s;
                const c = STATUS_IMP_COR[s];
                return (
                  <button key={s} onClick={() => podeImpressao && setStatus('statusImpressao', s)} disabled={!podeImpressao} title={!podeImpressao ? 'Sem permissão — perfil não pode mudar status de impressão' : ''} style={{
                    padding:'8px 12px', borderRadius:999,
                    background: sel ? c.dot : 'rgba(255,255,255,0.04)',
                    color: sel ? '#0b0518' : c.fg,
                    border:'1px solid '+(sel ? c.dot : 'var(--line)'),
                    fontSize:12, fontWeight:600,
                    cursor: podeImpressao ? 'pointer' : 'not-allowed',
                    opacity: podeImpressao ? 1 : 0.5,
                    boxShadow: sel ? `0 0 12px ${c.dot}80` : 'none',
                  }}>{s === 'Cancelado' ? '✕ Cancelado' : s}</button>
                );
              })}
            </div>
            {pedido.statusImpressao === 'Falhou' && (
              <div style={{ marginTop:8, fontSize:11, color:'var(--bad)', fontStyle:'italic' }}>
                Este pedido aparece nas notificações. Marque com uma nova definição (Reimprimir = "Fila" ou cancele) para limpar o alerta.
              </div>
            )}
            {pedido.statusImpressao === 'Cancelado' && (
              <div style={{ marginTop:8, fontSize:11, color:'var(--text-3)', fontStyle:'italic' }}>
                Pedido cancelado — não aparece mais na fila nem em envios.
              </div>
            )}
          </div>

          <div>
            <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:10 }}>
              <div style={{ fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'0.16em', color:'var(--text-3)', textTransform:'uppercase' }}>
                Forma de pagamento
              </div>
              {!podeFormaPgto && <span style={{ fontSize:9, color:'var(--text-3)', fontFamily:'var(--font-mono)', letterSpacing:'0.1em' }}>🔒 Apenas Atendimento</span>}
            </div>
            <div style={{ display:'flex', gap:6, flexWrap:'wrap' }}>
              {[
                { id:'PIX',              emoji:'⚡', cor:'#FFB300' },
                { id:'Transf. bancária', emoji:'🏦', cor:'#2BE6F0' },
                { id:'Dinheiro',         emoji:'💵', cor:'#9b6cff' },
              ].map(f => {
                const sel = pedido.formaPagamento === f.id;
                return (
                  <button key={f.id} onClick={() => podeFormaPgto && setStatus('formaPagamento', f.id)} disabled={!podeFormaPgto} title={!podeFormaPgto ? 'Sem permissão — perfil não pode mudar forma de pagamento' : ''} style={{
                    padding:'8px 12px', borderRadius:999,
                    background: sel ? `${f.cor}33` : 'rgba(255,255,255,0.04)',
                    color: sel ? f.cor : 'var(--text-2)',
                    border:'1px solid '+(sel ? f.cor : 'var(--line)'),
                    fontSize:12, fontWeight:600,
                    cursor: podeFormaPgto ? 'pointer' : 'not-allowed',
                    opacity: podeFormaPgto ? 1 : 0.5,
                    boxShadow: sel ? `0 0 8px ${f.cor}66` : 'none',
                    display:'inline-flex', alignItems:'center', gap:6,
                  }}>{f.emoji} {f.id}</button>
                );
              })}
            </div>
          </div>

          <div>
            <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:10 }}>
              <div style={{ fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'0.16em', color:'var(--text-3)', textTransform:'uppercase' }}>
                Status do pagamento
              </div>
              {!podePagamento && <span style={{ fontSize:9, color:'var(--text-3)', fontFamily:'var(--font-mono)', letterSpacing:'0.1em' }}>🔒 Apenas Atendimento</span>}
            </div>
            <div style={{ display:'flex', gap:6, flexWrap:'wrap' }}>
              {['Aguardando','Pago'].map(s => {
                const sel = pedido.statusPagamento === s;
                const c = (STATUS_PAG_COR && STATUS_PAG_COR[s]) || (s==='Pago'
                  ? { dot:'#2BE6F0', fg:'#2BE6F0' }
                  : { dot:'#FFB300', fg:'#FFB300' });
                return (
                  <button key={s} onClick={() => podePagamento && setStatus('statusPagamento', s)} disabled={!podePagamento} title={!podePagamento ? 'Sem permissão — perfil não pode mudar status de pagamento' : ''} style={{
                    padding:'8px 12px', borderRadius:999,
                    background: sel ? c.dot : 'rgba(255,255,255,0.04)',
                    color: sel ? '#0b0518' : c.fg,
                    border:'1px solid '+(sel ? c.dot : 'var(--line)'),
                    fontSize:12, fontWeight:600,
                    cursor: podePagamento ? 'pointer' : 'not-allowed',
                    opacity: podePagamento ? 1 : 0.5,
                    boxShadow: sel ? `0 0 12px ${c.dot}80` : 'none',
                  }}>{s === 'Pago' ? '✓ Pago' : '⏳ Aguardando'}</button>
                );
              })}
            </div>
            {pedido.statusPagamento === 'Aguardando' && (
              <div style={{ marginTop:8, fontSize:11, color:'var(--warn)', fontStyle:'italic' }}>
                Este pedido aparece nas notificações. Marque como "Pago" para limpar o alerta.
              </div>
            )}
          </div>

          <div>
            <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:10 }}>
              <div style={{ fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'0.16em', color:'var(--text-3)', textTransform:'uppercase' }}>
                Status da entrega
              </div>
              {!podeEntrega && <span style={{ fontSize:9, color:'var(--text-3)', fontFamily:'var(--font-mono)', letterSpacing:'0.1em' }}>🔒 Apenas Atendimento</span>}
            </div>
            {(() => {
              // Pré-condições: impressão precisa estar 'Pronto' E pagamento 'Pago'
              const impressaoOK = pedido.statusImpressao === 'Pronto';
              const pagamentoOK = pedido.statusPagamento === 'Pago';
              const condicoesOK = impressaoOK && pagamentoOK;
              const habilitado = podeEntrega && condicoesOK;

              const motivoBloqueio = !podeEntrega
                ? 'Sem permissão — perfil não pode mudar status de entrega'
                : !condicoesOK
                  ? `Bloqueado: ${!impressaoOK ? 'impressão precisa estar "Pronto"' : ''}${!impressaoOK && !pagamentoOK ? ' e ' : ''}${!pagamentoOK ? 'pagamento precisa estar "Pago"' : ''}.`
                  : '';

              return (
                <>
                  <div style={{ display:'flex', gap:6, flexWrap:'wrap' }}>
                    {['Pendente','Em trânsito','Entregue'].map(s => {
                      const sel = pedido.statusEntrega === s;
                      const c = STATUS_ENT_COR[s];
                      return (
                        <button key={s} onClick={() => habilitado && setStatus('statusEntrega', s)} disabled={!habilitado} title={motivoBloqueio} style={{
                          padding:'8px 12px', borderRadius:999,
                          background: sel ? c.dot : 'rgba(255,255,255,0.04)',
                          color: sel ? '#0b0518' : c.fg,
                          border:'1px solid '+(sel ? c.dot : 'var(--line)'),
                          fontSize:12, fontWeight:600,
                          cursor: habilitado ? 'pointer' : 'not-allowed',
                          opacity: habilitado ? 1 : 0.5,
                          boxShadow: sel ? `0 0 12px ${c.dot}80` : 'none',
                        }}>{s}</button>
                      );
                    })}
                  </div>
                  {podeEntrega && !condicoesOK && (
                    <div style={{ marginTop:10, padding:'8px 12px', background:'rgba(255,179,0,0.08)', border:'1px solid rgba(255,179,0,0.3)', borderRadius:8, fontSize:11, color:'#ffd166', lineHeight:1.5 }}>
                      ⚠️ Liberado só quando <strong>impressão = "Pronto"</strong> e <strong>pagamento = "Pago"</strong>.
                      {!impressaoOK && <div>· Impressão atual: <strong style={{ color:'#fff' }}>{pedido.statusImpressao}</strong></div>}
                      {!pagamentoOK && <div>· Pagamento atual: <strong style={{ color:'#fff' }}>{pedido.statusPagamento}</strong></div>}
                    </div>
                  )}
                </>
              );
            })()}
          </div>

          <div style={{ background:'var(--bg-card)', border:'1px solid var(--line)', borderRadius:12, padding:16 }}>
            <div style={{ fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'0.16em', color:'var(--text-3)', textTransform:'uppercase', marginBottom:12 }}>Especificações</div>
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12, fontSize:13 }}>
              <Spec lbl="Filamento" val={pedido.filamento}/>
              <Spec lbl="Cor / acabamento" val={pedido.cor}/>
              <Spec lbl="Gramas" val={`${pedido.gramas}g`}/>
              <Spec lbl="Tempo impressão" val={`${pedido.tempoImpressao}h`}/>
              <Spec lbl="Arquivo" val={pedido.arquivo}/>
              <Spec lbl="Prazo" val={fmtData(pedido.prazoPrometido)}/>
            </div>
          </div>

          <div style={{ background:'var(--bg-card)', border:'1px solid var(--line)', borderRadius:12, padding:16 }}>
            <div style={{ fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'0.16em', color:'var(--text-3)', textTransform:'uppercase', marginBottom:6 }}>Observações · clique para marcar</div>
            <div style={{ fontSize:11, color:'var(--text-3)', marginBottom:12, lineHeight:1.4 }}>
              Selecione o que se aplica a este pedido. Tags aparecem no topo do painel.
            </div>
            <div style={{ display:'flex', flexWrap:'wrap', gap:6 }}>
              {(window.OBS_TAGS || []).map(t => {
                const sel = tags.includes(t.id);
                return (
                  <button
                    key={t.id}
                    onClick={() => podeTagsEditar && toggleTag(t.id)}
                    disabled={!podeTagsEditar}
                    title={!podeTagsEditar ? 'Sem permissão para editar tags' : ''}
                    style={{
                      padding:'7px 12px', borderRadius:999,
                      fontSize:12, fontWeight:600,
                      background: sel ? `${t.cor}33` : 'rgba(255,255,255,0.04)',
                      color: sel ? t.cor : 'var(--text-2)',
                      border: '1px solid ' + (sel ? t.cor : 'var(--line)'),
                      boxShadow: sel ? `0 0 8px ${t.cor}66` : 'none',
                      transition:'all .12s',
                      cursor: podeTagsEditar ? 'pointer' : 'not-allowed',
                      opacity: podeTagsEditar || sel ? 1 : 0.5,
                    }}
                  >{sel ? '✓ ' : '+ '}{t.label}</button>
                );
              })}
            </div>
            {tags.length === 0 && (
              <div style={{ marginTop:10, fontSize:11, color:'var(--text-3)', fontStyle:'italic' }}>
                Nenhuma observação marcada.
              </div>
            )}
          </div>

          {(pedido.historico || []).length > 0 && (
            <div style={{ background:'var(--bg-card)', border:'1px solid var(--line)', borderRadius:12, padding:16 }}>
              <div style={{ fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'0.16em', color:'var(--text-3)', textTransform:'uppercase', marginBottom:12 }}>
                Histórico de mudanças
              </div>
              <div style={{ display:'flex', flexDirection:'column', gap:0 }}>
                {[...(pedido.historico || [])].reverse().slice(0, 10).map((h, i) => (
                  <HistoricoItem key={i} h={h}/>
                ))}
                {(pedido.historico || []).length > 10 && (
                  <div style={{ fontSize:11, color:'var(--text-3)', fontStyle:'italic', marginTop:8, textAlign:'center' }}>
                    + {(pedido.historico || []).length - 10} entradas anteriores
                  </div>
                )}
              </div>
            </div>
          )}

          <div style={{ background:'var(--bg-card)', border:'1px solid var(--line)', borderRadius:12, padding:16 }}>
            <div style={{ fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'0.16em', color:'var(--text-3)', textTransform:'uppercase', marginBottom:12 }}>Detalhamento</div>
            <Linha lbl={`Produto · ${pedido.qtd}× ${fmtBRL(pedido.precoVenda)}`} val={fmtBRL(pedido.precoVenda * pedido.qtd)}/>
            <Linha lbl="Frete cobrado" val={fmtBRL(pedido.freteCobrado)}/>
            <Linha lbl="Total cliente" val={fmtBRL(total)} bold/>
            <div style={{ height:1, background:'var(--line)', margin:'10px 0' }}/>
            <Linha lbl={`Custo produção · ${pedido.qtd}× ${fmtBRL(pedido.custoProducao)}`} val={'−'+fmtBRL(pedido.custoProducao*pedido.qtd)} neg/>
            <Linha lbl="Frete pago" val={'−'+fmtBRL(pedido.freteCusto)} neg/>
            {pedido.taxaPlataforma > 0 && <Linha lbl={`Taxa ${pedido.canal}`} val={'−'+fmtBRL(pedido.taxaPlataforma)} neg/>}
            <div style={{ height:1, background:'var(--line)', margin:'10px 0' }}/>
            <Linha lbl="Lucro líquido" val={fmtBRL(lucro)} bold accent={lucro>=0 ? 'var(--accent)' : 'var(--bad)'}/>
          </div>
        </div>
      </div>
    </div>
  );
}
function Spec({ lbl, val }) { return <div><div style={{ fontSize:10, color:'var(--text-3)', textTransform:'uppercase', letterSpacing:'0.1em', marginBottom:3 }}>{lbl}</div><div style={{ fontWeight:600, color:'var(--text)' }}>{val}</div></div>; }

// Formata distância de tempo relativa (ex: "há 2 min", "há 3 horas", "ontem", "12/05/26")
function relativaTempo(iso) {
  if (!iso) return '—';
  const ms = Date.now() - new Date(iso).getTime();
  if (ms < 0) return 'agora';
  const seg = Math.floor(ms / 1000);
  if (seg < 60)         return seg <= 5 ? 'agora' : `há ${seg}s`;
  const min = Math.floor(seg / 60);
  if (min < 60)         return `há ${min} min`;
  const hr = Math.floor(min / 60);
  if (hr < 24)          return `há ${hr}h`;
  const dias = Math.floor(hr / 24);
  if (dias === 1)       return 'ontem';
  if (dias < 7)         return `há ${dias} dias`;
  return new Date(iso).toLocaleDateString('pt-BR');
}

function HistoricoItem({ h }) {
  const corCampo = {
    statusImpressao: '#9b6cff',
    statusPagamento: '#FFB300',
    statusEntrega:   '#2BE6F0',
    tags:            '#FF2E9A',
  };
  const cor = corCampo[h.campo] || 'var(--text-3)';
  const tagsLabel = (idsStr) => {
    if (!idsStr) return '';
    return idsStr.split(/,\s*/).map(s => {
      const sinal = s.charAt(0);
      const id = s.slice(1);
      const t = (window.OBS_TAGS || []).find(x => x.id === id);
      return (sinal === '−' ? 'remover ' : 'adicionar ') + (t ? t.label : id);
    }).join(' · ');
  };
  return (
    <div style={{ display:'flex', gap:10, padding:'8px 0', borderTop:'1px dashed var(--line)' }}>
      <div style={{ width:8, height:8, borderRadius:999, background:cor, marginTop:6, flexShrink:0, boxShadow:`0 0 6px ${cor}` }}/>
      <div style={{ flex:1, minWidth:0 }}>
        <div style={{ fontSize:12, color:'var(--text)', lineHeight:1.4 }}>
          {h.campo === 'tags' ? (
            <span>
              {h.depois && <span style={{ color:'var(--accent)' }}>{tagsLabel(h.depois)}</span>}
              {h.depois && h.antes && ' · '}
              {h.antes && <span style={{ color:'var(--bad)' }}>{tagsLabel(h.antes)}</span>}
            </span>
          ) : (
            <span>
              <span style={{ color:'var(--text-3)' }}>{h.label}: </span>
              <span style={{ color:'var(--text-3)', textDecoration:'line-through' }}>{h.antes || '—'}</span>
              {' → '}
              <span style={{ color:cor, fontWeight:600 }}>{h.depois || '—'}</span>
            </span>
          )}
        </div>
        <div style={{ fontSize:10, color:'var(--text-3)', marginTop:3, fontFamily:'var(--font-mono)' }}>
          {h.quem || '—'} · {relativaTempo(h.quando)}
        </div>
      </div>
    </div>
  );
}
function Linha({ lbl, val, bold, neg, accent }) {
  return (
    <div style={{ display:'flex', justifyContent:'space-between', padding:'5px 0', fontSize:13 }}>
      <span style={{ color: bold ? 'var(--text)' : 'var(--text-2)', fontWeight: bold ? 600 : 400 }}>{lbl}</span>
      <span style={{ fontFamily:'var(--font-mono)', fontWeight: bold ? 700 : 500, color: accent || (neg ? 'var(--text-3)' : 'var(--text)') }}>{val}</span>
    </div>
  );
}

function FilaKanban({ pedidos, onAbrir, onUpdate }) {
  const cols = ['Fila','Imprimindo','Pos-processamento','Pronto'];
  const grupos = cols.map(c => ({ status:c, items: pedidos.filter(p => p.statusImpressao === c) }));
  const mover = (p, dir) => {
    const idx = cols.indexOf(p.statusImpressao);
    const novo = cols[Math.max(0, Math.min(cols.length-1, idx + dir))];
    onUpdate({ ...p, statusImpressao: novo });
  };
  return (
    <div style={{ padding:28 }}>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:14, height:'calc(100vh - 130px)' }}>
        {grupos.map(g => {
          const c = STATUS_IMP_COR[g.status];
          return (
            <div key={g.status} style={{ background:'var(--bg-card)', border:'1px solid var(--line)', borderRadius:14, display:'flex', flexDirection:'column', overflow:'hidden' }}>
              <div style={{ padding:'14px 14px 10px', borderBottom:'1px solid var(--line)' }}>
                <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between' }}>
                  <div style={{ display:'flex', alignItems:'center', gap:8 }}>
                    <span style={{ width:8, height:8, borderRadius:999, background: c.dot, boxShadow:`0 0 8px ${c.dot}` }}/>
                    <span style={{ fontSize:13, fontWeight:700, color:'var(--text)' }}>{g.status}</span>
                  </div>
                  <span style={{ fontFamily:'var(--font-mono)', fontSize:11, color:'var(--text-3)', background:'rgba(255,255,255,0.04)', padding:'2px 8px', borderRadius:999 }}>{g.items.length}</span>
                </div>
              </div>
              <div style={{ padding:10, display:'flex', flexDirection:'column', gap:8, overflow:'auto', flex:1 }}>
                {g.items.map(p => (
                  <div key={p.id} style={{
                    background:'rgba(255,255,255,0.03)', border:'1px solid var(--line)', borderRadius:10,
                    padding:10, cursor:'pointer',
                  }} onClick={() => onAbrir(p)}>
                    <div style={{ fontFamily:'var(--font-mono)', fontSize:9, color:'var(--text-3)', letterSpacing:'0.1em', marginBottom:4 }}>{p.id.split('-').pop()} · {p.tempoImpressao}h</div>
                    <div style={{ fontSize:13, fontWeight:600, lineHeight:1.3, marginBottom:8, color:'var(--text)' }}>{p.produto}</div>
                    <div style={{ fontSize:11, color:'var(--text-3)', marginBottom:10 }}>{p.cor} · {p.gramas}g</div>
                    <div style={{ display:'flex', gap:6 }}>
                      {cols.indexOf(g.status) > 0 && <button onClick={e => { e.stopPropagation(); mover(p, -1); }} style={miniBtn}>← voltar</button>}
                      {cols.indexOf(g.status) < cols.length - 1 && <button onClick={e => { e.stopPropagation(); mover(p, 1); }} style={{...miniBtn, background:'var(--primary)', color:'#fff', borderColor:'var(--primary)'}}>avançar →</button>}
                    </div>
                  </div>
                ))}
                {g.items.length === 0 && <div style={{ padding:16, textAlign:'center', fontSize:12, color:'var(--text-3)' }}>vazio</div>}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}
const miniBtn = { flex:1, padding:'6px 8px', fontSize:11, fontWeight:600, background:'rgba(255,255,255,0.04)', border:'1px solid var(--line)', borderRadius:6, cursor:'pointer', color:'var(--text-2)' };

function Envios({ pedidos, onAbrir, onUpdate }) {
  const prontos = pedidos.filter(p => p.statusImpressao==='Pronto' && p.statusEntrega==='Pendente');
  const transito = pedidos.filter(p => p.statusEntrega==='Em trânsito');
  return (
    <div style={{ padding:28, display:'flex', flexDirection:'column', gap:18 }}>
      <Secao titulo="Prontos para despachar" cor="var(--primary)" lista={prontos} onAbrir={onAbrir}
        acao={(p) => <button onClick={e => { e.stopPropagation(); onUpdate({ ...p, statusEntrega:'Em trânsito', rastreio:'BR'+Math.floor(Math.random()*1e9)+'BR' }); }} style={{
          padding:'8px 14px', background:'var(--primary)', color:'#fff', border:'none', borderRadius:8,
          fontSize:12, fontWeight:600, cursor:'pointer', display:'flex', alignItems:'center', gap:6,
          boxShadow:'0 0 12px rgba(255,46,154,0.4)',
        }}><Icon.truck size={13}/> Despachar</button>}/>
      <Secao titulo="Em trânsito" cor="#9b6cff" lista={transito} onAbrir={onAbrir}
        acao={(p) => <button onClick={e => { e.stopPropagation(); onUpdate({ ...p, statusEntrega:'Entregue' }); }} style={{
          padding:'8px 14px', background:'rgba(43,230,240,0.10)', color:'var(--accent)', border:'1px solid var(--accent)', borderRadius:8,
          fontSize:12, fontWeight:600, cursor:'pointer', display:'flex', alignItems:'center', gap:6,
        }}><Icon.check size={13}/> Marcar entregue</button>}/>
    </div>
  );
}
function Secao({ titulo, cor, lista, onAbrir, acao }) {
  return (
    <div style={{ background:'var(--bg-card)', border:'1px solid var(--line)', borderRadius:14, overflow:'hidden' }}>
      <div style={{ padding:'14px 18px', borderBottom:'1px solid var(--line)', display:'flex', alignItems:'center', gap:8 }}>
        <span style={{ width:8, height:8, borderRadius:999, background:cor, boxShadow:`0 0 8px ${cor}` }}/>
        <span style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:14, color:'var(--text)' }}>{titulo}</span>
        <span style={{ fontFamily:'var(--font-mono)', fontSize:11, color:'var(--text-3)', marginLeft:'auto' }}>{lista.length}</span>
      </div>
      {lista.map(p => (
        <button key={p.id} onClick={() => onAbrir(p)} style={{
          display:'flex', alignItems:'center', gap:14, padding:'14px 18px', width:'100%',
          background:'none', border:'none', borderTop:'1px solid var(--line)', cursor:'pointer', textAlign:'left', color:'var(--text)',
        }}
        onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.03)'}
        onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
          <div style={{ fontFamily:'var(--font-mono)', fontSize:11, color:'var(--text-3)', minWidth:50 }}>{p.id.split('-').pop()}</div>
          <div style={{ flex:1, minWidth:0 }}>
            <div style={{ fontSize:13, fontWeight:600, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{p.produto}</div>
            <div style={{ fontSize:11, color:'var(--text-3)', marginTop:2 }}>{p.cliente} · prazo {fmtData(p.prazoPrometido)} {p.rastreio && `· ${p.rastreio}`}</div>
          </div>
          {acao && acao(p)}
        </button>
      ))}
      {lista.length === 0 && <div style={{ padding:26, textAlign:'center', color:'var(--text-3)', fontSize:13 }}>nada por aqui ✨</div>}
    </div>
  );
}

const CATALOGO = [
  { id:'action', nome:'Action Figure', emoji:'🎮', preco:189, custo:55, gramas:120, horas:8 },
  { id:'vaso',   nome:'Vaso / Decoração', emoji:'🌵', preco:89,  custo:18, gramas:160, horas:5 },
  { id:'chav',   nome:'Chaveiro',       emoji:'🔑', preco:25,  custo:3,  gramas:12,  horas:0.5 },
  { id:'lumi',   nome:'Luminária',      emoji:'💡', preco:159, custo:38, gramas:280, horas:11 },
  { id:'cofre',  nome:'Cofre / Pote',   emoji:'🪙', preco:119, custo:22, gramas:190, horas:7 },
  { id:'sup',    nome:'Suporte',        emoji:'🎧', preco:139, custo:30, gramas:240, horas:9 },
  { id:'mini',   nome:'Miniatura',      emoji:'🦖', preco:69,  custo:15, gramas:40,  horas:3.5 },
  { id:'placa',  nome:'Placa',          emoji:'🪧', preco:79,  custo:14, gramas:90,  horas:4 },
  { id:'custom', nome:'Personalizado',  emoji:'✨', preco:0,   custo:0,  gramas:0,   horas:0 },
];
const CANAIS = [ {id:'WhatsApp',emoji:'💬'},{id:'Instagram',emoji:'📷'},{id:'Site',emoji:'🌐'},{id:'Loja',emoji:'🏪'} ];

function NovoPedido({ onSalvar, onCancelar, clientes = [], onAddCliente }) {
  const [passo, setP] = uS(0);
  const [d, setD] = uS({ produto:null, qtd:1, canal:null, cliente:null, pgto:null });
  const [criandoCliente, setCriandoCliente] = uS(false);
  const [buscaCliente, setBuscaCliente] = uS('');

  const clientesFiltrados = clientes.filter(c => {
    if (!buscaCliente.trim()) return true;
    const q = buscaCliente.toLowerCase();
    return [c.nome, c.telefone, c.email, c.instagram].some(v => (v || '').toLowerCase().includes(q));
  });

  const podeAvancar = () => {
    if (passo===0) return d.produto;
    if (passo===1) return d.canal;
    if (passo===2) return !!d.cliente;
    if (passo===3) return d.pgto;
  };
  const finalizar = () => {
    const c = d.produto;
    const cli = d.cliente;
    onSalvar({
      id:'DK-2026-0' + (143 + Math.floor(Math.random()*99)),
      data:'2026-05-04',
      cliente: cli?.nome || '',
      contato: clienteContatoStr(cli),
      canal: d.canal,
      produto: c.nome + (c.id==='custom' ? ' (Personalizado)' : ''),
      qtd: d.qtd, arquivo: c.id+'.stl', cor:'A definir', filamento:'PLA',
      gramas: c.gramas, tempoImpressao: c.horas,
      precoVenda: c.preco, custoProducao: c.custo,
      freteCusto:19.5, freteCobrado:22, taxaPlataforma: 0,
      formaPagamento: d.pgto, statusPagamento: d.pgto==='Aguardando' ? 'Aguardando' : 'Pago',
      statusImpressao: c.id === 'custom' ? 'Orçamento' : 'Fila',
      statusEntrega:'Pendente',
      prazoPrometido:'2026-05-12', rastreio:'',
      tags: d.pgto==='Aguardando' ? ['aguard-pgto'] : (c.id === 'custom' ? ['custom'] : []),
    });
  };

  const cardSel = (sel) => ({
    padding:14, borderRadius:12, cursor:'pointer',
    background: sel ? 'rgba(255,46,154,0.12)' : 'rgba(255,255,255,0.03)',
    border:'2px solid '+(sel ? 'var(--primary)' : 'var(--line)'),
    boxShadow: sel ? '0 0 16px rgba(255,46,154,0.3)' : 'none',
    color:'var(--text)',
  });

  return (
    <div style={{ position:'fixed', inset:0, background:'rgba(11,5,24,0.7)', backdropFilter:'blur(4px)', zIndex:50, display:'flex', alignItems:'center', justifyContent:'center' }} onClick={onCancelar}>
      <div onClick={e => e.stopPropagation()} style={{
        width:720, maxHeight:'85vh', background:'var(--bg-pane)', borderRadius:18,
        display:'flex', flexDirection:'column', overflow:'hidden',
        boxShadow:'0 30px 80px rgba(0,0,0,0.6)', border:'1px solid var(--line-2)',
      }}>
        <div style={{ padding:'18px 24px', borderBottom:'1px solid var(--line)', background:'var(--bg-card)', display:'flex', alignItems:'center', gap:14 }}>
          <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:16, color:'var(--text)' }}>Novo pedido</div>
          <div style={{ flex:1, display:'flex', gap:6 }}>
            {['Produto','Canal','Cliente','Pagamento'].map((l, i) => (
              <div key={l} style={{ flex:1, display:'flex', flexDirection:'column', gap:4, opacity: i<=passo ? 1 : 0.4 }}>
                <div style={{ height:4, borderRadius:999, background: i<=passo ? 'var(--primary)' : 'var(--line)', boxShadow: i<=passo ? '0 0 8px var(--primary)' : 'none' }}/>
                <div style={{ fontSize:10, color:'var(--text-3)', fontFamily:'var(--font-mono)', letterSpacing:'0.12em', textTransform:'uppercase' }}>{i+1}. {l}</div>
              </div>
            ))}
          </div>
          <button onClick={onCancelar} style={{ background:'none', border:'none', cursor:'pointer', fontSize:22, color:'var(--text-3)' }}>×</button>
        </div>

        <div style={{ flex:1, overflow:'auto', padding:24 }}>
          {passo === 0 && (
            <div>
              <H2>Qual produto?</H2>
              <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:10 }}>
                {CATALOGO.map(c => {
                  const sel = d.produto?.id === c.id;
                  return (
                    <button key={c.id} onClick={() => setD({...d, produto:c})} style={{...cardSel(sel), display:'flex', flexDirection:'column', alignItems:'center', gap:6 }}>
                      <div style={{ fontSize:32 }}>{c.emoji}</div>
                      <div style={{ fontSize:12, fontWeight:600 }}>{c.nome}</div>
                      <div style={{ fontFamily:'var(--font-mono)', fontSize:10, color:'var(--text-3)' }}>{c.preco>0 ? fmtBRL(c.preco) : 'a definir'}</div>
                    </button>
                  );
                })}
              </div>
              {d.produto && (
                <div style={{ marginTop:18 }}>
                  <H2>Quantidade?</H2>
                  <div style={{ display:'flex', gap:8 }}>
                    {[1,2,3,5,10].map(n => (
                      <button key={n} onClick={() => setD({...d, qtd:n})} style={{
                        width:52, height:52, borderRadius:12, cursor:'pointer',
                        background: d.qtd===n ? 'var(--primary)' : 'rgba(255,255,255,0.04)',
                        color: d.qtd===n ? '#fff' : 'var(--text)',
                        border:'2px solid '+(d.qtd===n ? 'var(--primary)' : 'var(--line)'),
                        fontFamily:'var(--font-display)', fontWeight:700, fontSize:18,
                        boxShadow: d.qtd===n ? '0 0 12px rgba(255,46,154,0.4)' : 'none',
                      }}>{n}×</button>
                    ))}
                  </div>
                </div>
              )}
            </div>
          )}

          {passo === 1 && (
            <div>
              <H2>De onde veio o pedido?</H2>
              <div style={{ display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap:10 }}>
                {CANAIS.map(c => {
                  const sel = d.canal === c.id;
                  return (
                    <button key={c.id} onClick={() => setD({...d, canal:c.id})} style={{...cardSel(sel), padding:'18px 12px', display:'flex', flexDirection:'column', alignItems:'center', gap:8 }}>
                      <div style={{ fontSize:28 }}>{c.emoji}</div>
                      <div style={{ fontSize:13, fontWeight:600 }}>{c.id}</div>
                    </button>
                  );
                })}
              </div>
            </div>
          )}

          {passo === 2 && (
            <div>
              <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:14 }}>
                <H2>Cliente</H2>
                <button onClick={() => setCriandoCliente(true)} style={{
                  padding:'8px 14px', background:'rgba(255,46,154,0.12)', color:'var(--primary)',
                  border:'1px solid var(--primary)', borderRadius:8,
                  fontSize:12, fontWeight:600, cursor:'pointer',
                  display:'flex', alignItems:'center', gap:6,
                }}><Icon.plus size={13}/> Novo cliente</button>
              </div>

              <div style={{ display:'flex', alignItems:'center', gap:10, background:'rgba(255,255,255,0.04)', border:'1px solid var(--line)', borderRadius:10, padding:'10px 12px', marginBottom:12 }}>
                <Icon.search size={14} style={{ color:'var(--text-3)' }}/>
                <input
                  value={buscaCliente}
                  onChange={e => setBuscaCliente(e.target.value)}
                  placeholder="Buscar cliente..."
                  style={{ flex:1, background:'none', border:'none', outline:'none', color:'var(--text)', fontSize:13, fontFamily:'var(--font-body)' }}
                />
              </div>

              {clientesFiltrados.length === 0 && (
                <div style={{ padding:'24px 16px', textAlign:'center', background:'rgba(255,255,255,0.03)', border:'1px dashed var(--line)', borderRadius:12, color:'var(--text-3)', fontSize:13 }}>
                  {clientes.length === 0
                    ? 'Nenhum cliente cadastrado. Clique em "Novo cliente" para criar.'
                    : 'Nenhum cliente encontrado. Tente outro termo ou crie um novo.'}
                </div>
              )}

              {clientesFiltrados.length > 0 && (
                <div style={{ display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:8, maxHeight:340, overflow:'auto' }}>
                  {clientesFiltrados.map(c => {
                    const sel = d.cliente?.id === c.id;
                    return (
                      <button key={c.id} onClick={() => setD({...d, cliente:c})} style={{...cardSel(sel), padding:12, display:'flex', alignItems:'center', gap:10, textAlign:'left' }}>
                        <div style={{ width:32, height:32, borderRadius:8, background:'rgba(255,255,255,0.06)', display:'flex', alignItems:'center', justifyContent:'center', fontWeight:700, color:'var(--text-2)' }}>{(c.nome||'?')[0].toUpperCase()}</div>
                        <div style={{ flex:1, minWidth:0 }}>
                          <div style={{ fontSize:13, fontWeight:600, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{c.nome}</div>
                          <div style={{ fontSize:11, color:'var(--text-3)', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{clienteContatoStr(c)}</div>
                        </div>
                      </button>
                    );
                  })}
                </div>
              )}

              {criandoCliente && (
                <ClienteForm
                  cliente={null}
                  onCancelar={() => setCriandoCliente(false)}
                  onSalvar={async (c) => {
                    try {
                      const salvo = onAddCliente ? await onAddCliente(c) : c;
                      setD({...d, cliente: salvo});
                      setCriandoCliente(false);
                    } catch (err) {
                      // upsertCliente já mostra alert em erro; não fecha o form
                    }
                  }}
                />
              )}
            </div>
          )}

          {passo === 3 && (
            <div>
              <H2>Como ele pagou?</H2>
              <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:10 }}>
                {[
                  {id:'PIX',emoji:'⚡',sub:'sem taxa'},
                  {id:'Transf. bancária',emoji:'🏦',sub:'sem taxa'},
                  {id:'Dinheiro',emoji:'💵',sub:'na entrega'},
                  {id:'Aguardando',emoji:'⏳',sub:'a confirmar'},
                ].map(p => {
                  const sel = d.pgto === p.id;
                  return (
                    <button key={p.id} onClick={() => setD({...d, pgto:p.id})} style={{...cardSel(sel), padding:'18px 12px', display:'flex', flexDirection:'column', alignItems:'center', gap:6 }}>
                      <div style={{ fontSize:28 }}>{p.emoji}</div>
                      <div style={{ fontSize:13, fontWeight:600 }}>{p.id}</div>
                      <div style={{ fontSize:10, color:'var(--text-3)' }}>{p.sub}</div>
                    </button>
                  );
                })}
              </div>
              {d.produto && d.pgto && (
                <div style={{ marginTop:24, padding:16, background:'linear-gradient(135deg, rgba(255,46,154,0.15), rgba(43,230,240,0.10))', border:'1px solid var(--line-2)', borderRadius:12 }}>
                  <div style={{ fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'0.16em', color:'var(--text-3)', textTransform:'uppercase', marginBottom:8 }}>Resumo</div>
                  <div style={{ fontSize:14, color:'var(--text)' }}>{d.qtd}× {d.produto.nome} · {d.cliente?.nome || '—'} · {d.canal} · {d.pgto}</div>
                  <div style={{ fontFamily:'var(--font-display)', fontSize:24, fontWeight:800, color:'var(--accent)', marginTop:8, textShadow:'0 0 12px rgba(43,230,240,0.5)' }}>{fmtBRL(d.produto.preco * d.qtd + 22)}</div>
                </div>
              )}
            </div>
          )}
        </div>

        <div style={{ padding:'16px 24px', borderTop:'1px solid var(--line)', background:'var(--bg-card)', display:'flex', justifyContent:'space-between', gap:10 }}>
          {passo > 0 ? <button onClick={() => setP(passo-1)} style={btnSec}>← voltar</button> : <button onClick={onCancelar} style={btnSec}>cancelar</button>}
          {passo < 3
            ? <button onClick={() => setP(passo+1)} disabled={!podeAvancar()} style={{...btnPri, opacity: podeAvancar() ? 1 : 0.4, cursor: podeAvancar() ? 'pointer' : 'not-allowed' }}>continuar →</button>
            : <button onClick={finalizar} disabled={!podeAvancar()} style={{...btnPri, opacity: podeAvancar() ? 1 : 0.4 }}>✓ criar pedido</button>}
        </div>
      </div>
    </div>
  );
}
function H2({ children }) { return <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:18, marginBottom:14, color:'var(--text)' }}>{children}</div>; }
const btnSec = { padding:'10px 18px', background:'rgba(255,255,255,0.04)', color:'var(--text-2)', border:'1px solid var(--line)', borderRadius:10, fontSize:13, fontWeight:600, cursor:'pointer' };
const btnPri = { padding:'10px 22px', background:'var(--primary)', color:'#fff', border:'none', borderRadius:10, fontSize:13, fontWeight:700, cursor:'pointer', boxShadow:'0 0 14px rgba(255,46,154,0.4)' };

// ─── Tela: Cancelados ───────────────────────────────────────
function CanceladosLista({ pedidos, onAbrir, onUpdate, onRemover }) {
  const cancelados = pedidos.filter(p => p.statusImpressao === 'Cancelado');
  const restaurar = (p) => {
    if (confirm(`Restaurar ${p.id} para a Fila?`)) {
      onUpdate({ ...p, statusImpressao: 'Fila' });
    }
  };
  const excluir = (p) => {
    if (confirm(`Excluir definitivamente ${p.id}?\n\nEsta ação não pode ser desfeita.`)) {
      onRemover(p.id);
    }
  };
  const limparTodos = () => {
    if (cancelados.length === 0) return;
    if (confirm(`Excluir definitivamente TODOS os ${cancelados.length} pedidos cancelados?\n\nEsta ação não pode ser desfeita.`)) {
      cancelados.forEach(p => onRemover(p.id));
    }
  };

  return (
    <div style={{ padding:28, display:'flex', flexDirection:'column', gap:18 }}>
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between' }}>
        <div style={{ fontSize:13, color:'var(--text-3)' }}>
          Pedidos cancelados ficam aqui pra histórico. Você pode <strong style={{ color:'var(--accent)' }}>restaurar</strong> pra fila ou <strong style={{ color:'var(--bad)' }}>excluir definitivamente</strong>.
        </div>
        {cancelados.length > 0 && (
          <button onClick={limparTodos} style={{
            padding:'8px 14px', background:'rgba(255,77,106,0.10)', color:'var(--bad)',
            border:'1px solid rgba(255,77,106,0.4)', borderRadius:10,
            fontSize:12, fontWeight:600, cursor:'pointer',
            display:'inline-flex', alignItems:'center', gap:6,
          }}><Icon.trash size={13}/> Limpar todos ({cancelados.length})</button>
        )}
      </div>

      {cancelados.length === 0 && (
        <div style={{ padding:'48px 24px', textAlign:'center', background:'var(--bg-card)', border:'1px solid var(--line)', borderRadius:14, color:'var(--text-3)' }}>
          <div style={{ fontSize:48, marginBottom:8 }}>✨</div>
          <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:16, color:'var(--text)', marginBottom:6 }}>
            Nenhum pedido cancelado
          </div>
          <div style={{ fontSize:13 }}>Quando você cancelar um pedido, ele aparece aqui.</div>
        </div>
      )}

      {cancelados.length > 0 && (
        <div style={{ background:'var(--bg-card)', border:'1px solid var(--line)', borderRadius:14, overflow:'hidden' }}>
          {cancelados.map((p, i) => (
            <div key={p.id} style={{
              display:'grid', gridTemplateColumns:'90px 1fr 140px 200px',
              padding:'14px 18px', gap:14, alignItems:'center',
              borderTop: i === 0 ? 'none' : '1px solid var(--line)',
              opacity:0.78,
            }}>
              <div style={{ fontFamily:'var(--font-mono)', fontSize:11, color:'var(--text-3)', fontWeight:600 }}>
                {p.id.split('-').pop()}
              </div>
              <button onClick={() => onAbrir(p)} style={{
                background:'none', border:'none', textAlign:'left', cursor:'pointer', minWidth:0, padding:0, color:'var(--text)',
              }}>
                <div style={{ fontSize:13, fontWeight:600, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis', textDecoration:'line-through', color:'var(--text-2)' }}>
                  {p.produto}
                </div>
                <div style={{ fontSize:11, color:'var(--text-3)', marginTop:2 }}>
                  {p.cliente} · {fmtData(p.data)} · {fmtBRL(calcTotalPago(p))}
                </div>
              </button>
              <div><StatusBadge status="Cancelado" palette={STATUS_IMP_COR}/></div>
              <div style={{ display:'flex', gap:6, justifyContent:'flex-end' }}>
                <button onClick={() => restaurar(p)} title="Restaurar para fila" style={{
                  padding:'6px 10px', background:'rgba(43,230,240,0.10)', color:'var(--accent)',
                  border:'1px solid rgba(43,230,240,0.4)', borderRadius:8,
                  fontSize:11, fontWeight:600, cursor:'pointer', display:'inline-flex', alignItems:'center', gap:5,
                }}>↻ Restaurar</button>
                <button onClick={() => excluir(p)} title="Excluir definitivamente" style={{
                  padding:'6px 10px', background:'rgba(255,77,106,0.10)', color:'var(--bad)',
                  border:'1px solid rgba(255,77,106,0.4)', borderRadius:8,
                  fontSize:11, fontWeight:600, cursor:'pointer', display:'inline-flex', alignItems:'center', gap:5,
                }}><Icon.trash size={11}/> Excluir</button>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

// ─── Tela: Clientes ─────────────────────────────────────────
function ClientesLista({ clientes, pedidos, onEditar, onRemover, onNovo }) {
  const [busca, setBusca] = uS('');
  const lista = clientes.filter(c => {
    if (!busca.trim()) return true;
    const q = busca.toLowerCase();
    return [c.nome, c.telefone, c.email, c.instagram].some(v => (v || '').toLowerCase().includes(q));
  });
  const pedidosPorCliente = (nome) => pedidos.filter(p => p.cliente === nome);

  return (
    <div style={{ padding:28, display:'flex', flexDirection:'column', gap:18 }}>
      <div style={{ display:'flex', alignItems:'center', gap:12, background:'var(--bg-card)', border:'1px solid var(--line)', borderRadius:12, padding:'10px 14px' }}>
        <Icon.search size={16} style={{ color:'var(--text-3)' }}/>
        <input
          value={busca}
          onChange={e => setBusca(e.target.value)}
          placeholder="Buscar por nome, telefone, email, @instagram"
          style={{ flex:1, background:'none', border:'none', outline:'none', color:'var(--text)', fontSize:14, fontFamily:'var(--font-body)' }}
        />
        <span style={{ fontFamily:'var(--font-mono)', fontSize:11, color:'var(--text-3)' }}>{lista.length} de {clientes.length}</span>
      </div>

      {lista.length === 0 && (
        <div style={{ padding:'48px 24px', textAlign:'center', background:'var(--bg-card)', border:'1px solid var(--line)', borderRadius:14, color:'var(--text-3)' }}>
          <div style={{ fontSize:48, marginBottom:8 }}>👥</div>
          <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:16, color:'var(--text)', marginBottom:6 }}>
            {clientes.length === 0 ? 'Nenhum cliente ainda' : 'Nada encontrado'}
          </div>
          <div style={{ fontSize:13, marginBottom:14 }}>
            {clientes.length === 0 ? 'Cadastre o primeiro cliente para reutilizar em pedidos.' : 'Tente outro termo de busca.'}
          </div>
          {clientes.length === 0 && (
            <button onClick={onNovo} style={{
              padding:'10px 18px', background:'var(--primary)', color:'#fff', border:'none', borderRadius:10,
              fontSize:13, fontWeight:600, cursor:'pointer', display:'inline-flex', alignItems:'center', gap:7,
            }}><Icon.plus size={14}/> Novo cliente</button>
          )}
        </div>
      )}

      {lista.length > 0 && (
        <div style={{ background:'var(--bg-card)', border:'1px solid var(--line)', borderRadius:14, overflow:'hidden' }}>
          {lista.map((c, i) => {
            const peds = pedidosPorCliente(c.nome);
            return (
              <div key={c.id} style={{
                display:'grid', gridTemplateColumns:'40px 1fr 220px 100px 84px',
                gap:14, padding:'14px 18px',
                borderTop: i === 0 ? 'none' : '1px solid var(--line)',
                alignItems:'center',
              }}>
                <div style={{
                  width:38, height:38, borderRadius:10, background:'rgba(255,46,154,0.12)',
                  border:'1px solid rgba(255,46,154,0.3)', color:'var(--primary)',
                  display:'flex', alignItems:'center', justifyContent:'center',
                  fontFamily:'var(--font-display)', fontWeight:700, fontSize:14,
                }}>{(c.nome || '?')[0].toUpperCase()}</div>
                <div style={{ minWidth:0 }}>
                  <div style={{ fontSize:14, fontWeight:600, color:'var(--text)', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{c.nome}</div>
                  <div style={{ fontSize:11, color:'var(--text-3)', marginTop:2, fontFamily:'var(--font-mono)' }}>{c.id}</div>
                </div>
                <div style={{ fontSize:12, color:'var(--text-2)', display:'flex', flexDirection:'column', gap:2, minWidth:0 }}>
                  {c.instagram && <div style={{ whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>📷 {c.instagram}</div>}
                  {c.telefone &&  <div style={{ whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>📱 {c.telefone}</div>}
                  {c.email &&     <div style={{ whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>✉️ {c.email}</div>}
                  {!c.instagram && !c.telefone && !c.email && <div style={{ color:'var(--text-3)', fontStyle:'italic' }}>sem contato</div>}
                </div>
                <div style={{ textAlign:'center' }}>
                  <div style={{ fontFamily:'var(--font-mono)', fontWeight:700, fontSize:16, color:'var(--accent)' }}>{peds.length}</div>
                  <div style={{ fontSize:10, color:'var(--text-3)', textTransform:'uppercase', letterSpacing:'0.1em' }}>pedidos</div>
                </div>
                <div style={{ display:'flex', gap:6, justifyContent:'flex-end' }}>
                  <button onClick={() => onEditar(c)} title="Editar" aria-label="Editar cliente" style={iconBtn}><Icon.edit size={14}/></button>
                  <button onClick={() => {
                    if (peds.length > 0) { alert(`Não é possível remover: cliente tem ${peds.length} pedido(s).`); return; }
                    if (confirm(`Remover ${c.nome}?`)) onRemover(c.id);
                  }} title="Remover" aria-label="Remover cliente" style={{...iconBtn, color:'var(--bad)'}}><Icon.trash size={14}/></button>
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}
const iconBtn = {
  width:32, height:32, borderRadius:8,
  background:'rgba(255,255,255,0.04)', border:'1px solid var(--line)',
  cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center',
  color:'var(--text-2)', transition:'all .15s',
};

// ─── Modal: Cliente form (criar/editar) ─────────────────────
function ClienteForm({ cliente, onCancelar, onSalvar }) {
  const [nome, setNome] = uS(cliente?.nome || '');
  const [telefone, setTelefone] = uS(cliente?.telefone || '');
  const [email, setEmail] = uS(cliente?.email || '');
  const [instagram, setInstagram] = uS(cliente?.instagram || '');
  const [endereco, setEndereco] = uS(cliente?.endereco || '');
  const [erro, setErro] = uS('');

  const submit = () => {
    const nomeT = nome.trim();
    if (nomeT.length < 2) { setErro('Nome é obrigatório (min. 2 caracteres).'); return; }
    const tel = telefone.trim();
    const em = email.trim();
    const ig = instagram.trim();
    const endT = endereco.trim();
    if (!tel && !em && !ig) {
      setErro('Informe pelo menos um meio de contato (telefone, email ou Instagram).');
      return;
    }
    onSalvar({
      id: cliente?.id,
      nome: nomeT,
      telefone: tel,
      email: em,
      instagram: ig.startsWith('@') || !ig ? ig : '@'+ig,
      endereco: endT,
    });
  };

  return (
    <div style={{ position:'fixed', inset:0, background:'rgba(11,5,24,0.7)', backdropFilter:'blur(4px)', zIndex:60, display:'flex', alignItems:'center', justifyContent:'center' }} onClick={onCancelar}>
      <div onClick={e => e.stopPropagation()} style={{
        width:520, maxHeight:'90vh', background:'var(--bg-pane)', borderRadius:18,
        display:'flex', flexDirection:'column', overflow:'hidden',
        boxShadow:'0 30px 80px rgba(0,0,0,0.6)', border:'1px solid var(--line-2)',
      }}>
        <div style={{ padding:'18px 24px', borderBottom:'1px solid var(--line)', background:'var(--bg-card)', display:'flex', alignItems:'center', justifyContent:'space-between' }}>
          <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:16, color:'var(--text)' }}>
            {cliente ? 'Editar cliente' : 'Novo cliente'}
          </div>
          <button onClick={onCancelar} style={{ background:'none', border:'none', cursor:'pointer', fontSize:22, color:'var(--text-3)' }}>×</button>
        </div>

        <div style={{ flex:1, overflow:'auto', padding:24, display:'flex', flexDirection:'column', gap:14 }}>
          <Field label="Nome" required>
            <input autoFocus value={nome} onChange={e => { setNome(e.target.value); setErro(''); }} placeholder="Nome completo" style={inp}/>
          </Field>

          <div style={{ height:1, background:'var(--line)', margin:'4px 0' }}/>
          <div style={{ fontSize:11, color:'var(--text-3)', fontFamily:'var(--font-mono)', letterSpacing:'0.1em', textTransform:'uppercase' }}>
            Pelo menos um meio de contato
          </div>

          <Field label="Telefone">
            <input value={telefone} onChange={e => { setTelefone(e.target.value); setErro(''); }} placeholder="(11) 98765-4321" style={inp} inputMode="tel"/>
          </Field>
          <Field label="Email">
            <input value={email} onChange={e => { setEmail(e.target.value); setErro(''); }} placeholder="cliente@email.com" style={inp} type="email" inputMode="email"/>
          </Field>
          <Field label="Instagram">
            <input value={instagram} onChange={e => { setInstagram(e.target.value); setErro(''); }} placeholder="@usuario" style={inp}/>
          </Field>

          <div style={{ height:1, background:'var(--line)', margin:'4px 0' }}/>
          <div style={{ fontSize:11, color:'var(--text-3)', fontFamily:'var(--font-mono)', letterSpacing:'0.1em', textTransform:'uppercase' }}>
            Entrega (opcional)
          </div>
          <Field label="Endereço">
            <textarea
              value={endereco}
              onChange={e => setEndereco(e.target.value)}
              placeholder="Rua, número, complemento, bairro, cidade, CEP..."
              rows={3}
              style={{ ...inp, resize:'vertical', minHeight:64, fontFamily:'var(--font-body)', lineHeight:1.4 }}
            />
          </Field>

          {erro && (
            <div style={{ padding:'10px 12px', background:'rgba(255,77,106,0.10)', border:'1px solid rgba(255,77,106,0.4)', borderRadius:8, fontSize:12, color:'var(--bad)' }}>
              {erro}
            </div>
          )}
        </div>

        <div style={{ padding:'16px 24px', borderTop:'1px solid var(--line)', background:'var(--bg-card)', display:'flex', justifyContent:'flex-end', gap:10 }}>
          <button onClick={onCancelar} style={btnSec}>cancelar</button>
          <button onClick={submit} style={btnPri}>{cliente ? '✓ salvar' : '✓ criar cliente'}</button>
        </div>
      </div>
    </div>
  );
}
function Field({ label, required, children }) {
  return (
    <label style={{ display:'flex', flexDirection:'column', gap:6 }}>
      <span style={{ fontSize:11, color:'var(--text-3)', fontFamily:'var(--font-mono)', letterSpacing:'0.1em', textTransform:'uppercase' }}>
        {label}{required && <span style={{ color:'var(--primary)', marginLeft:4 }}>*</span>}
      </span>
      {children}
    </label>
  );
}
const inp = {
  width:'100%', padding:'12px 14px', borderRadius:10, border:'1px solid var(--line)',
  fontSize:14, outline:'none', background:'rgba(255,255,255,0.04)', color:'var(--text)',
  fontFamily:'var(--font-body)',
};

// ─── Catálogo (rev-0.6) ──────────────────────────────────────
// CRUD completo de produtos vinda do Supabase.
// Lista paginada + filtros + criar/editar/esgotar/excluir.
function Catalogo() {
  const [rows, setRows] = uS([]);
  const [total, setTotal] = uS(0);
  const [page, setPage] = uS(1);
  const [limit] = uS(50);
  const [categorias, setCategorias] = uS([]);
  const [filtroCategoria, setFiltroCategoria] = uS('');
  const [filtroDisponivel, setFiltroDisponivel] = uS('todos'); // 'todos' | 'true' | 'false'
  const [busca, setBusca] = uS('');
  const [buscaDebounced, setBuscaDebounced] = uS('');
  const [loading, setLoading] = uS(false);
  const [erro, setErro] = uS('');
  const [editing, setEditing] = uS(null); // null | 'novo' | produto
  const [flash, setFlash] = uS(null); // { type: 'success'|'error', msg }
  const [refreshKey, setRefreshKey] = uS(0);

  // Toast inline some sozinho em 2.5s
  uE(() => {
    if (!flash) return;
    const t = setTimeout(() => setFlash(null), 2500);
    return () => clearTimeout(t);
  }, [flash]);

  // Debounce da busca (300ms)
  uE(() => {
    const t = setTimeout(() => setBuscaDebounced(busca), 300);
    return () => clearTimeout(t);
  }, [busca]);

  // Carrega categorias (recarrega após operações que podem mudar conjunto)
  uE(() => {
    if (!window.ProductsAPI) return;
    window.ProductsAPI.listCategorias().then(setCategorias).catch(e => console.warn('listCategorias:', e));
  }, [refreshKey]);

  // Reset de página ao mudar filtros
  uE(() => { setPage(1); }, [filtroCategoria, filtroDisponivel, buscaDebounced]);

  // Fetch da lista quando filtros/página/refreshKey mudam
  uE(() => {
    if (!window.ProductsAPI) return;
    setLoading(true);
    setErro('');
    const opts = { page, limit };
    if (filtroCategoria) opts.categoria = filtroCategoria;
    if (filtroDisponivel === 'true') opts.disponivel = true;
    if (filtroDisponivel === 'false') opts.disponivel = false;
    if (buscaDebounced.trim()) opts.busca = buscaDebounced.trim();

    window.ProductsAPI.listProducts(opts)
      .then(res => { setRows(res.rows); setTotal(res.total); })
      .catch(e => { setErro(e.message || 'Falha ao carregar'); setRows([]); setTotal(0); })
      .finally(() => setLoading(false));
  }, [page, limit, filtroCategoria, filtroDisponivel, buscaDebounced, refreshKey]);

  const reload = () => setRefreshKey(k => k + 1);

  // Toggle otimista de disponível: muda UI imediatamente, reverte se erro
  const toggleDisponivel = async (produto) => {
    const novoValor = !produto.disponivel;
    setRows(rs => rs.map(r => r.id === produto.id ? { ...r, disponivel: novoValor } : r));
    try {
      await window.ProductsAPI.setDisponivel(produto.id, novoValor);
      setFlash({ type:'success', msg: novoValor ? `"${produto.produto}" marcado como ATIVO` : `"${produto.produto}" marcado como ESGOTADO` });
    } catch (e) {
      // Reverte
      setRows(rs => rs.map(r => r.id === produto.id ? { ...r, disponivel: produto.disponivel } : r));
      setFlash({ type:'error', msg: e.message || 'Falha ao atualizar' });
    }
  };

  const onExcluir = async (produto) => {
    const ok = window.confirm(`Excluir "${produto.produto}" definitivamente?\n\nEsta ação não pode ser desfeita. Se quiser apenas ocultar do site, use o toggle Esgotado.`);
    if (!ok) return;
    try {
      await window.ProductsAPI.deleteProduct(produto.id);
      setFlash({ type:'success', msg: `"${produto.produto}" excluído` });
      reload();
    } catch (e) {
      setFlash({ type:'error', msg: e.message || 'Falha ao excluir' });
    }
  };

  const onSalvarForm = async (input, idExistente) => {
    try {
      if (idExistente) {
        await window.ProductsAPI.updateProduct(idExistente, input);
        setFlash({ type:'success', msg: `"${input.produto}" atualizado` });
      } else {
        await window.ProductsAPI.createProduct(input);
        setFlash({ type:'success', msg: `"${input.produto}" criado` });
      }
      setEditing(null);
      reload();
    } catch (e) {
      setFlash({ type:'error', msg: e.message || 'Falha ao salvar' });
    }
  };

  const totalPages = Math.max(1, Math.ceil(total / limit));
  const inicio = total === 0 ? 0 : (page - 1) * limit + 1;
  const fim = Math.min(page * limit, total);

  const inputStyle = {
    background:'rgba(255,255,255,0.04)',
    border:'1px solid var(--line)',
    borderRadius: 10,
    padding:'9px 12px',
    color:'var(--text)',
    fontSize: 13,
    fontFamily:'var(--font-body)',
    outline:'none',
  };

  return (
    <div style={{ padding: 24 }}>
      {/* KPI summary + Novo produto */}
      <div style={{
        display:'flex', alignItems:'center', gap: 18, flexWrap:'wrap',
        marginBottom: 18,
      }}>
        <div style={{
          display:'flex', alignItems:'center', gap: 10,
          padding:'8px 14px', borderRadius: 999,
          background:'rgba(43,230,240,0.08)',
          border:'1px solid rgba(43,230,240,0.3)',
          color:'var(--accent)',
          fontFamily:'var(--font-mono)', fontSize: 11, letterSpacing:'0.1em', textTransform:'uppercase',
        }}>
          <Icon.package size={14}/> {total} produto{total === 1 ? '' : 's'}
          {(filtroCategoria || filtroDisponivel !== 'todos' || buscaDebounced) && ' (filtrado)'}
        </div>
        <div style={{ fontSize: 11, color:'var(--text-3)', fontFamily:'var(--font-mono)' }}>
          Fonte: Supabase · Tabela <code style={{ color:'var(--accent)' }}>products</code>
        </div>
        <div style={{ marginLeft:'auto' }}>
          <button onClick={() => setEditing('novo')} style={{
            padding:'9px 16px', background:'var(--primary)', color:'#fff', border:'none', borderRadius: 10,
            fontSize: 13, fontWeight: 600, cursor:'pointer',
            display:'flex', alignItems:'center', gap: 7,
            boxShadow:'0 0 14px rgba(255,46,154,0.4)',
          }}><Icon.plus size={15}/> Novo produto</button>
        </div>
      </div>

      {/* Flash inline */}
      {flash && (
        <div style={{
          padding:'10px 14px', marginBottom: 14,
          background: flash.type === 'error' ? 'rgba(255,77,106,0.10)' : 'rgba(43,230,240,0.10)',
          border:'1px solid ' + (flash.type === 'error' ? 'rgba(255,77,106,0.4)' : 'rgba(43,230,240,0.4)'),
          borderRadius: 10,
          color: flash.type === 'error' ? 'var(--bad)' : 'var(--accent)',
          fontSize: 13, fontFamily:'var(--font-body)',
          display:'flex', alignItems:'center', gap: 8,
        }}>
          {flash.type === 'error' ? '⚠' : '✓'} {flash.msg}
        </div>
      )}

      {/* Filtros */}
      <div style={{
        display:'flex', alignItems:'center', gap: 10, flexWrap:'wrap',
        padding: 14, marginBottom: 16,
        background:'var(--bg-card)',
        border:'1px solid var(--line)',
        borderRadius: 14,
      }}>
        <div style={{ flex: '1 1 220px', position:'relative' }}>
          <Icon.search size={14} style={{ position:'absolute', left: 12, top: '50%', transform:'translateY(-50%)', color:'var(--text-3)' }}/>
          <input
            type="text"
            placeholder="Buscar por nome, categoria, tipo ou tema…"
            value={busca}
            onChange={(e) => setBusca(e.target.value)}
            style={{ ...inputStyle, paddingLeft: 34, width: '100%' }}
          />
        </div>
        <select
          value={filtroCategoria}
          onChange={(e) => setFiltroCategoria(e.target.value)}
          style={{ ...inputStyle, minWidth: 180, cursor:'pointer' }}
        >
          <option value="">Todas as categorias</option>
          {categorias.map(c => <option key={c} value={c}>{c}</option>)}
        </select>
        <select
          value={filtroDisponivel}
          onChange={(e) => setFiltroDisponivel(e.target.value)}
          style={{ ...inputStyle, minWidth: 140, cursor:'pointer' }}
        >
          <option value="todos">Todos</option>
          <option value="true">Disponíveis</option>
          <option value="false">Esgotados</option>
        </select>
        {(filtroCategoria || filtroDisponivel !== 'todos' || busca) && (
          <button
            onClick={() => { setFiltroCategoria(''); setFiltroDisponivel('todos'); setBusca(''); }}
            style={{
              background:'transparent', border:'1px solid var(--line)',
              color:'var(--text-2)', padding:'9px 12px', borderRadius: 10,
              fontSize: 12, cursor:'pointer', fontFamily:'var(--font-body)',
            }}
          >Limpar</button>
        )}
      </div>

      {/* Erro */}
      {erro && (
        <div style={{
          padding: 14, marginBottom: 14,
          background:'rgba(255,77,106,0.1)',
          border:'1px solid rgba(255,77,106,0.4)',
          borderRadius: 12, color:'var(--bad)',
          fontSize: 13,
        }}>⚠ {erro}</div>
      )}

      {/* Tabela */}
      <div style={{
        background:'var(--bg-card)',
        border:'1px solid var(--line)',
        borderRadius: 14,
        overflow:'hidden',
      }}>
        <div style={{
          display:'grid',
          gridTemplateColumns:'minmax(180px, 2fr) minmax(140px, 1fr) 110px 100px 110px 110px',
          padding:'12px 16px',
          background:'rgba(255,255,255,0.03)',
          borderBottom:'1px solid var(--line)',
          fontSize: 11, fontWeight: 700, color:'var(--text-3)',
          textTransform:'uppercase', letterSpacing:'0.12em',
          fontFamily:'var(--font-mono)',
        }}>
          <div>Produto</div>
          <div>Categoria</div>
          <div style={{ textAlign:'right' }}>Preço</div>
          <div style={{ textAlign:'center' }}>Status</div>
          <div>Tempo</div>
          <div style={{ textAlign:'right' }}>Ações</div>
        </div>

        {loading && (
          <div style={{ padding: 40, textAlign:'center', color:'var(--text-3)', fontSize: 13 }}>
            Carregando produtos…
          </div>
        )}

        {!loading && rows.length === 0 && !erro && (
          <div style={{ padding: 40, textAlign:'center', color:'var(--text-3)', fontSize: 13 }}>
            Nenhum produto encontrado com esses filtros.
          </div>
        )}

        {!loading && rows.map(p => (
          <div key={p.id} style={{
            display:'grid',
            gridTemplateColumns:'minmax(180px, 2fr) minmax(140px, 1fr) 110px 100px 110px 110px',
            padding:'12px 16px',
            borderBottom:'1px solid var(--line)',
            fontSize: 13, alignItems:'center',
            transition:'background .12s',
          }}
          onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(255,46,154,0.04)'; }}
          onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}
          >
            <div style={{ minWidth: 0 }}>
              <div style={{ fontWeight: 600, color:'var(--text)', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>
                {p.produto}
              </div>
              {p.tema && (
                <div style={{ fontSize: 11, color:'var(--text-3)', marginTop: 2, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>
                  {p.tema}{p.tipo && p.tipo !== p.tema ? ' · ' + p.tipo : ''}
                </div>
              )}
            </div>
            <div style={{ color:'var(--text-2)', fontSize: 12 }}>{p.categoria}</div>
            <div style={{ textAlign:'right', fontFamily:'var(--font-mono)', color:'var(--accent)', fontWeight: 600 }}>
              {fmtBRL(Number(p.preco))}
            </div>
            <div style={{ textAlign:'center' }}>
              <button
                onClick={() => toggleDisponivel(p)}
                title={p.disponivel ? 'Clique para marcar como esgotado' : 'Clique para reativar'}
                style={{
                  cursor:'pointer', border:'none',
                  padding:'3px 10px', borderRadius: 999,
                  background: p.disponivel ? 'rgba(43,230,240,0.15)' : 'rgba(126,114,163,0.15)',
                  color: p.disponivel ? '#7af0fa' : '#9b91bf',
                  fontSize: 10, fontWeight: 700, letterSpacing:'0.08em',
                  fontFamily:'var(--font-mono)', textTransform:'uppercase',
                  transition:'all .15s',
                }}
                onMouseEnter={(e) => { e.currentTarget.style.transform='scale(1.05)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.transform='scale(1)'; }}
              >{p.disponivel ? 'Ativo' : 'Esgotado'}</button>
            </div>
            <div style={{ color:'var(--text-3)', fontSize: 12, fontFamily:'var(--font-mono)' }}>
              {p.tempo || '—'}
            </div>
            <div style={{ display:'flex', justifyContent:'flex-end', gap: 6 }}>
              <button
                onClick={() => setEditing(p)}
                title="Editar"
                style={catActionBtn('var(--text-2)')}
              ><Icon.edit size={14}/></button>
              <button
                onClick={() => onExcluir(p)}
                title="Excluir"
                style={catActionBtn('var(--bad)')}
              ><Icon.trash size={14}/></button>
            </div>
          </div>
        ))}
      </div>

      {/* Modal de criar/editar */}
      {editing && (
        <ProdutoForm
          produto={editing === 'novo' ? null : editing}
          categoriasExistentes={categorias}
          onCancelar={() => setEditing(null)}
          onSalvar={(input) => onSalvarForm(input, editing === 'novo' ? null : editing.id)}
        />
      )}

      {/* Paginação */}
      {!loading && total > 0 && (
        <div style={{
          display:'flex', alignItems:'center', justifyContent:'space-between',
          marginTop: 14, padding:'12px 4px',
          fontSize: 12, color:'var(--text-2)',
        }}>
          <div style={{ fontFamily:'var(--font-mono)', color:'var(--text-3)' }}>
            {inicio}–{fim} de {total}
          </div>
          <div style={{ display:'flex', alignItems:'center', gap: 6 }}>
            <button
              onClick={() => setPage(1)}
              disabled={page === 1}
              style={pagBtn(page === 1)}
            >«</button>
            <button
              onClick={() => setPage(p => Math.max(1, p - 1))}
              disabled={page === 1}
              style={pagBtn(page === 1)}
            >‹</button>
            <span style={{
              padding:'7px 14px', minWidth: 70, textAlign:'center',
              background:'rgba(255,46,154,0.12)', borderRadius: 8,
              color:'var(--text)', fontFamily:'var(--font-mono)', fontSize: 12,
            }}>{page} / {totalPages}</span>
            <button
              onClick={() => setPage(p => Math.min(totalPages, p + 1))}
              disabled={page === totalPages}
              style={pagBtn(page === totalPages)}
            >›</button>
            <button
              onClick={() => setPage(totalPages)}
              disabled={page === totalPages}
              style={pagBtn(page === totalPages)}
            >»</button>
          </div>
        </div>
      )}
    </div>
  );
}

function pagBtn(disabled) {
  return {
    padding:'7px 11px',
    background:'rgba(255,255,255,0.04)',
    border:'1px solid var(--line)',
    borderRadius: 8,
    color: disabled ? 'var(--text-3)' : 'var(--text)',
    fontSize: 13,
    cursor: disabled ? 'not-allowed' : 'pointer',
    opacity: disabled ? 0.4 : 1,
    fontFamily:'var(--font-mono)',
  };
}

function catActionBtn(color) {
  return {
    width: 30, height: 30,
    display:'inline-flex', alignItems:'center', justifyContent:'center',
    background:'rgba(255,255,255,0.04)',
    border:'1px solid var(--line)',
    borderRadius: 8,
    color: color || 'var(--text-2)',
    cursor:'pointer', transition:'all .12s',
    padding: 0,
  };
}

// ─── ProdutoForm — modal de criar/editar produto ──────────────
function ProdutoForm({ produto, categoriasExistentes, onCancelar, onSalvar }) {
  const isEdit = !!produto;
  const [campos, setCampos] = uS({
    produto:    produto?.produto    || '',
    categoria:  produto?.categoria  || '',
    tipo:       produto?.tipo       || '',
    tema:       produto?.tema       || '',
    tempo:      produto?.tempo      || '',
    medidas:    produto?.medidas    || '',
    preco:      produto?.preco != null ? String(produto.preco) : '',
    disponivel: produto?.disponivel != null ? produto.disponivel : true,
  });
  const [categoriaModo, setCategoriaModo] = uS(
    produto && !categoriasExistentes.includes(produto.categoria) ? 'nova' : 'existente'
  );
  const [erro, setErro] = uS('');
  const [salvando, setSalvando] = uS(false);

  const set = (k, v) => { setCampos(c => ({ ...c, [k]: v })); setErro(''); };

  const submit = async () => {
    if (salvando) return;
    const produtoNome = campos.produto.trim();
    const categoria = campos.categoria.trim();
    if (produtoNome.length < 2) return setErro('Nome do produto é obrigatório (min. 2 caracteres).');
    if (!categoria) return setErro('Categoria é obrigatória.');
    const preco = Number(String(campos.preco).replace(',', '.'));
    if (!isFinite(preco) || preco <= 0) return setErro('Preço precisa ser um número maior que zero.');

    const payload = {
      produto: produtoNome,
      categoria: categoria,
      tipo: campos.tipo.trim() || null,
      tema: campos.tema.trim() || null,
      tempo: campos.tempo.trim() || null,
      medidas: campos.medidas.trim() || null,
      preco: preco,
      disponivel: !!campos.disponivel,
    };
    setSalvando(true);
    try {
      await onSalvar(payload);
    } finally {
      setSalvando(false);
    }
  };

  return (
    <div style={{ position:'fixed', inset:0, background:'rgba(11,5,24,0.7)', backdropFilter:'blur(4px)', zIndex:60, display:'flex', alignItems:'center', justifyContent:'center' }} onClick={onCancelar}>
      <div onClick={e => e.stopPropagation()} style={{
        width:560, maxHeight:'92vh', background:'var(--bg-pane)', borderRadius:18,
        display:'flex', flexDirection:'column', overflow:'hidden',
        boxShadow:'0 30px 80px rgba(0,0,0,0.6)', border:'1px solid var(--line-2)',
      }}>
        <div style={{ padding:'18px 24px', borderBottom:'1px solid var(--line)', background:'var(--bg-card)', display:'flex', alignItems:'center', justifyContent:'space-between' }}>
          <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:16, color:'var(--text)' }}>
            {isEdit ? 'Editar produto' : 'Novo produto'}
          </div>
          <button onClick={onCancelar} style={{ background:'none', border:'none', cursor:'pointer', fontSize:22, color:'var(--text-3)' }}>×</button>
        </div>

        <div style={{ flex:1, overflow:'auto', padding:24, display:'flex', flexDirection:'column', gap:14 }}>
          <Field label="Nome do produto" required>
            <input autoFocus value={campos.produto} onChange={e => set('produto', e.target.value)} placeholder="Ex: Naipes" style={inp}/>
          </Field>

          <Field label="Categoria" required>
            {categoriaModo === 'existente' ? (
              <div style={{ display:'flex', gap:8 }}>
                <select
                  value={campos.categoria}
                  onChange={e => set('categoria', e.target.value)}
                  style={{ ...inp, cursor:'pointer', flex:1 }}
                >
                  <option value="">— escolher —</option>
                  {categoriasExistentes.map(c => <option key={c} value={c}>{c}</option>)}
                </select>
                <button
                  type="button"
                  onClick={() => { setCategoriaModo('nova'); set('categoria', ''); }}
                  style={{ ...btnSec, padding:'10px 14px', whiteSpace:'nowrap' }}
                >+ nova</button>
              </div>
            ) : (
              <div style={{ display:'flex', gap:8 }}>
                <input value={campos.categoria} onChange={e => set('categoria', e.target.value)} placeholder="Ex: Action Figure" style={{ ...inp, flex:1 }}/>
                <button
                  type="button"
                  onClick={() => { setCategoriaModo('existente'); set('categoria', ''); }}
                  style={{ ...btnSec, padding:'10px 14px', whiteSpace:'nowrap' }}
                >escolher</button>
              </div>
            )}
          </Field>

          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:14 }}>
            <Field label="Tipo">
              <input value={campos.tipo} onChange={e => set('tipo', e.target.value)} placeholder="Ex: Carteado" style={inp}/>
            </Field>
            <Field label="Tema">
              <input value={campos.tema} onChange={e => set('tema', e.target.value)} placeholder="Ex: Baralho" style={inp}/>
            </Field>
          </div>

          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:14 }}>
            <Field label="Tempo de impressão">
              <input value={campos.tempo} onChange={e => set('tempo', e.target.value)} placeholder="Ex: 4h44m" style={inp}/>
            </Field>
            <Field label="Preço (R$)" required>
              <input
                value={campos.preco}
                onChange={e => set('preco', e.target.value)}
                placeholder="Ex: 69,90"
                style={inp}
                inputMode="decimal"
              />
            </Field>
          </div>

          <Field label="Medidas (mm)">
            <input value={campos.medidas} onChange={e => set('medidas', e.target.value)} placeholder="Ex: 109x109x16" style={inp}/>
          </Field>

          <label style={{
            display:'flex', alignItems:'center', gap:10, cursor:'pointer',
            padding:'12px 14px', borderRadius:10,
            background:'rgba(255,255,255,0.04)', border:'1px solid var(--line)',
          }}>
            <input
              type="checkbox"
              checked={!!campos.disponivel}
              onChange={e => set('disponivel', e.target.checked)}
              style={{ width:16, height:16, cursor:'pointer', accentColor:'var(--primary)' }}
            />
            <div style={{ flex:1 }}>
              <div style={{ fontSize:13, fontWeight:600, color:'var(--text)' }}>Disponível no site público</div>
              <div style={{ fontSize:11, color:'var(--text-3)', marginTop:2 }}>
                Desmarque pra ocultar do catálogo (manter no banco como esgotado).
              </div>
            </div>
          </label>

          {erro && (
            <div style={{ padding:'10px 12px', background:'rgba(255,77,106,0.10)', border:'1px solid rgba(255,77,106,0.4)', borderRadius:8, fontSize:12, color:'var(--bad)' }}>
              {erro}
            </div>
          )}
        </div>

        <div style={{ padding:'16px 24px', borderTop:'1px solid var(--line)', background:'var(--bg-card)', display:'flex', justifyContent:'flex-end', gap:10 }}>
          <button onClick={onCancelar} style={btnSec} disabled={salvando}>cancelar</button>
          <button onClick={submit} style={btnPri} disabled={salvando}>
            {salvando ? 'salvando…' : (isEdit ? '✓ salvar' : '✓ criar produto')}
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PedidosLista, PedidoDetalhe, FilaKanban, Envios, NovoPedido, ClientesLista, ClienteForm, CanceladosLista, Catalogo, ProdutoForm });