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


function MLogistica({ onNav }) {
  const [postagens, setPostagens] = React.useState([]);
  const [triangulacoes, setTriangulacoes] = React.useState([]);
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    let mounted = true;
    Promise.all([
      window.dataApi.listPostagens(),
      window.dataApi.listTriangulacoes(),
    ]).then(([p, t]) => {
      if (!mounted) return;
      setPostagens(p);
      setTriangulacoes(t);
      setLoading(false);
    }).catch(() => { if (mounted) setLoading(false); });
    return () => { mounted = false; };
  }, []);

  const [postagem, setPostagem] = React.useState(null);
  const [postagemTab, setPostagemTab] = React.useState('rastreio');
  const [triang, setTriang] = React.useState(null);
  const [triangTab, setTriangTab] = React.useState('det');
  const [updating, setUpdating] = React.useState(false);
  const [toast, setToast] = React.useState(null);
  const [prePost, setPrePost] = React.useState({ empenho: '2026NE000847', peso: '12,50 kg', volumes: '4', modal: 'SEDEX' });
  const [gerandoEtiqueta, setGerandoEtiqueta] = React.useState(false);
  const [showColetaReversa, setShowColetaReversa] = React.useState(false);
  const showToast = (msg, ms = 4000) => { setToast(msg); setTimeout(() => setToast(null), ms); };

  const handleUpdateRastreios = () => {
    if (updating) return;
    setUpdating(true);
    setTimeout(() => {
      setUpdating(false);
      const atualizadas = Math.floor(Math.random() * 4) + 2;
      showToast(`${postagens.length} postagens consultadas · ${atualizadas} ${atualizadas === 1 ? 'rastreio atualizado' : 'rastreios atualizados'} · Correios + SSW`);
    }, 1800);
  };

  const handleNovaPrePostagem = () => {
    // Foca no campo de empenho do card lateral
    showToast('Use o card "Pré-postagem rápida" ao lado para gerar a etiqueta. Preencha os dados e clique em "Gerar etiqueta + código".');
    setTimeout(() => {
      const el = document.querySelector('#pre-post-empenho');
      if (el) { el.focus(); el.select(); }
    }, 100);
  };

  const setP = (k, v) => setPrePost({ ...prePost, [k]: v });

  const handleGerarEtiqueta = () => {
    if (gerandoEtiqueta) return;
    if (!prePost.empenho) {
      showToast('Informe o número do empenho antes de gerar a etiqueta');
      return;
    }
    setGerandoEtiqueta(true);
    setTimeout(() => {
      setGerandoEtiqueta(false);
      const cod = 'BR' + String(Math.floor(Math.random() * 9000000) + 1000000) + 'BR';
      showToast(`Etiqueta ${cod} gerada · ${prePost.modal} · ${prePost.empenho} · pronta para impressão`);
    }, 1500);
  };

  return (
    <>
      <Ticker />
      <div className="page">
        <div className="page-header">
          <div>
            <div className="eyebrow"><span>Gestão Logística e Triangulação</span><span className="chip">M06</span></div>
            <h1 className="page-title">Logística · Correios · SSW · Triangulação</h1>
            <p className="page-sub">Pré-postagem, etiqueta, rastreio, comprovante de entrega e <strong>Logística Reversa</strong>. Triangulação separada do estoque físico — não passa pela gestão de estoque.</p>
          </div>
          <div className="flex items-center gap-3">
            <button className="btn" onClick={handleUpdateRastreios} disabled={updating}>
              {updating ? <span className="spinner"></span> : <Icon name="refresh" />}
              {updating ? 'Atualizando...' : 'Atualizar rastreios'}
            </button>
            <button className="btn btn-primary" onClick={handleNovaPrePostagem}><Icon name="plus" /> Nova pré-postagem</button>
          </div>
        </div>

        <div className="grid-4" style={{ marginBottom: 14 }}>
          <KpiSmall l="POSTAGENS HOJE" v="8" sub="6 Correios + 2 SSW" />
          <KpiSmall l="EM TRÂNSITO" v={postagens.filter(p => !['entregue'].includes(p.status)).length} sub="rastreio ativo" cls="cyan" />
          <KpiSmall l="ENTREGUES (30d)" v="62" sub="98.4% no prazo" cls="lime" />
          <KpiSmall l="LOG. REVERSA" v={postagens.filter(p => p.reverso).length} sub="aguardando coleta" cls="amber" />
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 380px', gap: 14 }}>
          <div className="card">
            <div className="card-head">
              <Icon name="truck" />
              <div className="t">Postagens · {postagens.length} ativas</div>
              <div className="s">clique em uma linha para detalhe</div>
            </div>
            <table className="tbl">
              <thead>
                <tr>
                  <th>Rastreio</th>
                  <th>Empenho</th>
                  <th>Destino</th>
                  <th>Modal</th>
                  <th>Postado</th>
                  <th>Status</th>
                  <th style={{ width: 32 }}></th>
                </tr>
              </thead>
              <tbody>
                {postagens.map(t => (
                  <tr key={t.rastreio} onClick={() => { setPostagem(t); setPostagemTab('rastreio'); }} style={{ cursor: 'pointer' }}>
                    <td className="mono" style={{ color: t.reverso ? 'var(--amber)' : 'var(--cyan)' }}>{t.rastreio}</td>
                    <td className="mono">{t.empenho}</td>
                    <td>{t.dest}</td>
                    <td className="mono" style={{ fontSize: 11 }}>{t.modal}</td>
                    <td className="mono">{t.postado}</td>
                    <td><span className={`badge badge-${t.sCls}`}>{t.statusLabel}</span></td>
                    <td><Icon name="chevR" size={11} style={{ color: 'var(--fg-3)' }} /></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div className="card">
              <div className="card-head"><Icon name="truck" /><div className="t">Pré-postagem rápida</div></div>
              <div style={{ padding: 14, display: 'flex', flexDirection: 'column', gap: 10 }}>
                <div>
                  <div className="field-label">EMPENHO</div>
                  <input id="pre-post-empenho" className="input mono" value={prePost.empenho} onChange={e => setP('empenho', e.target.value)} placeholder="2026NE000XXX" />
                </div>
                <div>
                  <div className="field-label">DESTINATÁRIO (auto do empenho)</div>
                  <div style={{ fontSize: 12, padding: '6px 10px', background: 'var(--bg-2)', borderRadius: 4 }}>
                    Prefeitura Mun. de Niterói<br />
                    <span style={{ color: 'var(--fg-3)', fontFamily: 'IBM Plex Mono', fontSize: 10.5 }}>R. V. de Sepetiba, 987 · 24020-200</span>
                  </div>
                </div>
                <div className="grid-2">
                  <div><div className="field-label">PESO</div><input className="input mono" value={prePost.peso} onChange={e => setP('peso', e.target.value)} /></div>
                  <div><div className="field-label">VOLUMES</div><input className="input mono" value={prePost.volumes} onChange={e => setP('volumes', e.target.value)} /></div>
                </div>
                <div>
                  <div className="field-label">MODAL</div>
                  <div className="segmented">
                    {['SEDEX', 'PAC', 'JADLOG', 'SSW'].map(m => (
                      <div key={m} className={`seg${prePost.modal === m ? ' active' : ''}`} onClick={() => setP('modal', m)}>{m}</div>
                    ))}
                  </div>
                </div>
                <div className="alert-banner alert-lime">
                  <Icon name="check" size={13} /> Frete CIF cotado ({prePost.modal}): <strong>R$ {prePost.modal === 'SEDEX' ? '312,40' : prePost.modal === 'PAC' ? '198,60' : prePost.modal === 'JADLOG' ? '254,80' : '218,40'}</strong> · entrega prevista {prePost.modal === 'PAC' ? '5' : prePost.modal === 'JADLOG' ? '4' : '3'} dias úteis
                </div>
                <button className="btn btn-primary" style={{ justifyContent: 'center' }} onClick={handleGerarEtiqueta} disabled={gerandoEtiqueta}>
                  {gerandoEtiqueta ? <><span className="spinner"></span> Gerando...</> : <>Gerar etiqueta + código</>}
                </button>
              </div>
            </div>

            <div className="card">
              <div className="card-head"><Icon name="warn" /><div className="t">Logística Reversa</div></div>
              <div style={{ padding: 14 }}>
                {postagens.filter(p => p.reverso).map(p => (
                  <div key={p.rastreio} className="clickable alert-banner alert-amber" onClick={() => { setPostagem(p); setPostagemTab('rastreio'); }}>
                    <Icon name="warn" size={13} />
                    <div>
                      <strong>{p.empenho}</strong> · {p.motivoReverso?.split('.')[0]}.
                      <div style={{ fontSize: 10.5, color: 'var(--fg-3)', marginTop: 2, fontFamily: 'IBM Plex Mono' }}>{p.rastreio} · clique para detalhes</div>
                    </div>
                  </div>
                ))}
                <button className="btn" style={{ marginTop: 10, width: '100%', justifyContent: 'center' }} onClick={() => setShowColetaReversa(true)}>
                  <Icon name="truck" /> Agendar nova coleta reversa
                </button>
              </div>
            </div>

            <div className="card">
              <div className="card-head">
                <Icon name="package" />
                <div className="t">Triangulação · {triangulacoes.length} ativas</div>
                <div className="s">clique para detalhe</div>
              </div>
              <div style={{ padding: 14, display: 'flex', flexDirection: 'column', gap: 8, fontSize: 11.5 }}>
                {triangulacoes.map(t => (
                  <div key={t.id} className="clickable" onClick={() => { setTriang(t); setTriangTab('det'); }} style={{
                    display: 'grid', gridTemplateColumns: '1fr 80px', gap: 8, padding: '8px 10px',
                    background: 'var(--bg-2)', borderRadius: 4,
                    borderLeft: t.inner ? '2px solid var(--amber)' : '2px solid var(--lime)',
                  }}>
                    <div>
                      <div className="mono" style={{ fontSize: 10.5, color: 'var(--fg-3)' }}>{t.id} · {t.pedidoCompra}</div>
                      <div style={{ fontSize: 12 }}>{t.forn} → {t.dest}</div>
                      {t.inner && <div style={{ fontSize: 10, color: 'var(--amber)', fontFamily: 'IBM Plex Mono' }}>⚠ INNER · +{t.sobra} un sobra</div>}
                    </div>
                    <div className="mono" style={{ textAlign: 'right', color: 'var(--lime)', fontSize: 11.5 }}>{BRL(t.val).replace('R$ ', '')}</div>
                  </div>
                ))}
                <div style={{ fontSize: 10.5, color: 'var(--fg-3)', marginTop: 4, fontStyle: 'italic' }}>Triangulação não passa pelo estoque físico — mantém integridade.</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {postagem && <PostagemDrawer postagem={postagem} onClose={() => setPostagem(null)} tab={postagemTab} onTab={setPostagemTab} onNav={onNav} />}
      {triang && <TriangulacaoDrawer triang={triang} onClose={() => setTriang(null)} tab={triangTab} onTab={setTriangTab} onNav={onNav} />}
      {showColetaReversa && <ColetaReversaModal onClose={() => setShowColetaReversa(false)} onAgendar={(emp) => { setShowColetaReversa(false); showToast(`Coleta reversa agendada para ${emp} · Correios notificado · prazo de coleta 2-3 dias úteis`); }} />}
      {toast && (
        <div className="alert-banner alert-lime" style={{ position: 'fixed', bottom: 22, right: 22, zIndex: 300, maxWidth: 480, boxShadow: '0 12px 32px rgba(0,0,0,0.5)', animation: 'drawer-fade 0.18s ease-out' }}>
          <Icon name="check" size={14} />
          <div style={{ flex: 1 }}>{toast}</div>
          <button className="btn btn-ghost btn-sm" onClick={() => setToast(null)}><Icon name="x" size={11} /></button>
        </div>
      )}
    </>
  );
}

function ColetaReversaModal({ onClose, onAgendar }) {
  const [form, setForm] = React.useState({
    empenho: '',
    motivo: 'defeito',
    qtd: '',
    descricao: '',
    enderecoColeta: '',
  });
  const [erro, setErro] = React.useState(null);
  const set = (k, v) => setForm({ ...form, [k]: v });

  const submit = () => {
    if (!form.empenho || !form.qtd || !form.enderecoColeta) {
      setErro('Preencha Empenho, Quantidade e Endereço de coleta');
      return;
    }
    onAgendar(form.empenho);
  };

  return (
    <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.7)', display: 'grid', placeItems: 'center', zIndex: 200, backdropFilter: 'blur(2px)' }} onClick={onClose}>
      <div style={{ background: 'var(--bg-1)', border: '1px solid var(--line-2)', borderRadius: 10, width: 580, maxHeight: '85vh', overflow: 'auto' }} onClick={e => e.stopPropagation()}>
        <div className="card-head">
          <Icon name="truck" />
          <div className="t">Agendar coleta reversa</div>
          <button className="tb-btn" style={{ marginLeft: 'auto' }} onClick={onClose}><Icon name="x" /></button>
        </div>
        <div style={{ padding: 22, display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div className="alert-banner alert-amber">
            <Icon name="warn" size={13} />
            <div>
              <strong>Devolução pelo cliente</strong>
              <div style={{ fontSize: 11.5, color: 'var(--fg-2)', marginTop: 2 }}>
                Solicita coleta dos Correios no endereço do cliente. A mercadoria voltará para o almoxarifado da BTM em 2-3 dias úteis. Use para devoluções por defeito, troca ou divergência.
              </div>
            </div>
          </div>

          <div className="grid-2">
            <div>
              <div className="field-label">EMPENHO ORIGEM <span style={{ color: 'var(--red)' }}>*</span></div>
              <input className="input mono" value={form.empenho} onChange={e => set('empenho', e.target.value)} placeholder="2026NE000XXX" />
            </div>
            <div>
              <div className="field-label">QTD A COLETAR <span style={{ color: 'var(--red)' }}>*</span></div>
              <input className="input mono" type="number" value={form.qtd} onChange={e => set('qtd', e.target.value)} placeholder="12" />
            </div>
          </div>

          <div>
            <div className="field-label">MOTIVO</div>
            <div className="segmented">
              {[
                { id: 'defeito', l: 'DEFEITO' },
                { id: 'troca', l: 'TROCA' },
                { id: 'diverg', l: 'DIVERGÊNCIA' },
                { id: 'cancel', l: 'CANCELAMENTO' },
              ].map(o => (
                <div key={o.id} className={`seg${form.motivo === o.id ? ' active' : ''}`} onClick={() => set('motivo', o.id)}>{o.l}</div>
              ))}
            </div>
          </div>

          <div>
            <div className="field-label">DESCRIÇÃO DO PROBLEMA</div>
            <textarea className="input" value={form.descricao} onChange={e => set('descricao', e.target.value)} style={{ resize: 'none', minHeight: 60 }} placeholder="Ex: 12 unidades de Pasta AZ com lacre rompido na entrega" />
          </div>

          <div>
            <div className="field-label">ENDEREÇO DE COLETA <span style={{ color: 'var(--red)' }}>*</span></div>
            <textarea className="input" value={form.enderecoColeta} onChange={e => set('enderecoColeta', e.target.value)} style={{ resize: 'none', minHeight: 50 }} placeholder="Endereço completo onde o objeto será coletado" />
          </div>

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

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

/* ── POSTAGEM DRAWER ───────────────────────────────────────── */
function PostagemDrawer({ postagem, onClose, tab, onTab, onNav }) {
  return (
    <Drawer
      open={true}
      onClose={onClose}
      eyebrow={<><span>{postagem.reverso ? 'Logística Reversa' : 'Postagem'}</span><span className="chip">M06</span><span className={`badge badge-${postagem.sCls}`}>{postagem.statusLabel}</span></>}
      title={<span className="mono" style={{ fontWeight: 600 }}>{postagem.rastreio}</span>}
      subtitle={`${postagem.modal} · ${postagem.dest} · postado ${postagem.postado}`}
      headRight={
        <div style={{ textAlign: 'right' }}>
          <div className="mono" style={{ fontSize: 10.5, color: 'var(--fg-3)' }}>VALOR</div>
          <div className="mono" style={{ fontSize: 14, fontWeight: 600, color: 'var(--lime)' }}>{BRL(postagem.valor)}</div>
        </div>
      }
      tabs={[
        { id: 'rastreio', label: 'Rastreio', count: postagem.eventos.filter(e => e.done).length + '/' + postagem.eventos.length },
        { id: 'empenho', label: 'Empenho vinculado' },
        { id: 'acoes', label: 'Ações & docs' },
      ]}
      activeTab={tab}
      onTabChange={onTab}
      footer={
        <>
          <button className="btn"><Icon name="download" /> Etiqueta PDF</button>
          <button className="btn"><Icon name="link" /> Link público</button>
          {postagem.reverso && postagem.status === 'reverso' && (
            <button className="btn btn-primary" style={{ flex: 1, justifyContent: 'center' }}>
              <Icon name="truck" /> Agendar coleta
            </button>
          )}
          {!postagem.reverso && postagem.status !== 'entregue' && (
            <button className="btn btn-primary" style={{ flex: 1, justifyContent: 'center' }}>
              <Icon name="refresh" /> Atualizar rastreio
            </button>
          )}
          {postagem.status === 'entregue' && (
            <button className="btn btn-primary" style={{ flex: 1, justifyContent: 'center' }} onClick={() => onNav('financeiro')}>
              <Icon name="dollar" /> Faturar entrega
            </button>
          )}
        </>
      }
    >
      {tab === 'rastreio' && <PostagemRastreio postagem={postagem} />}
      {tab === 'empenho' && <PostagemEmpenho postagem={postagem} onNav={onNav} />}
      {tab === 'acoes' && <PostagemAcoes postagem={postagem} />}
    </Drawer>
  );
}

function PostagemRastreio({ postagem }) {
  return (
    <div style={{ padding: 18 }}>
      {postagem.reverso && (
        <div className="alert-banner alert-amber" style={{ marginBottom: 18 }}>
          <Icon name="warn" size={13} />
          <div>
            <strong>Motivo da coleta reversa</strong>
            <div style={{ fontSize: 11.5, color: 'var(--fg-2)', marginTop: 2 }}>{postagem.motivoReverso}</div>
          </div>
        </div>
      )}

      <div className="field-label" style={{ marginBottom: 8 }}>DESTINATÁRIO</div>
      <div style={{ padding: 12, background: 'var(--bg-2)', borderRadius: 6, border: '1px solid var(--line-1)', fontSize: 12, marginBottom: 18, fontFamily: 'IBM Plex Mono' }}>
        {postagem.destFull}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10, marginBottom: 18 }}>
        <Field label="PESO" value={postagem.peso.toFixed(2) + ' kg'} mono />
        <Field label="VOLUMES" value={postagem.volumes} mono />
        <Field label="FRETE" value={BRL(postagem.frete)} valueClass="text-lime" />
      </div>

      <div className="field-label" style={{ marginBottom: 10 }}>EVENTOS DO RASTREIO</div>
      <div className="timeline">
        {postagem.eventos.map((s, i) => (
          <div key={i} className="timeline-item">
            <div className={`timeline-dot ${s.done ? (s.current ? 'cyan' : 'lime') : ''}`}></div>
            <div className="timeline-content">
              <div className="t">{s.ev}</div>
              <div className="when">{s.t}</div>
              {s.loc && s.loc !== '—' && <div className="d">{s.loc}</div>}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function PostagemEmpenho({ postagem, onNav }) {
  return (
    <div style={{ padding: 18 }}>
      <div style={{ padding: 14, background: 'var(--bg-2)', borderRadius: 6, border: '1px solid var(--line-1)', marginBottom: 18 }}>
        <div className="flex items-center justify-between" style={{ marginBottom: 8 }}>
          <div className="mono" style={{ fontSize: 13, fontWeight: 600, color: 'var(--fg-0)' }}>{postagem.empenho}</div>
          <button className="btn btn-sm" onClick={() => onNav('empenhos')}><Icon name="arrowR" size={11} /> Abrir empenho</button>
        </div>
        <div style={{ fontSize: 12, color: 'var(--fg-2)' }}>{postagem.destFull.split('·')[0]}</div>
        <div style={{ fontSize: 11, color: 'var(--fg-3)', fontFamily: 'IBM Plex Mono', marginTop: 6 }}>Valor da NF: <span style={{ color: 'var(--lime)' }}>{BRL(postagem.valor)}</span></div>
      </div>

      <div className="field-label" style={{ marginBottom: 8 }}>ITENS DESTA POSTAGEM</div>
      <table className="tbl">
        <thead>
          <tr>
            <th>Descrição</th>
            <th>Cod</th>
            <th style={{ textAlign: 'right' }}>Qtd</th>
            <th style={{ textAlign: 'right' }}>Peso</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Papel A4 75g — Resma 500 fls</td>
            <td className="mono">BTM-PA-001</td>
            <td className="num-col">{NUM(2400)}</td>
            <td className="num-col mono">8.4 kg</td>
          </tr>
          <tr>
            <td>Caneta esferográfica azul</td>
            <td className="mono">BTM-CN-014</td>
            <td className="num-col">{NUM(4800)}</td>
            <td className="num-col mono">2.1 kg</td>
          </tr>
          <tr>
            <td>Pasta AZ ofício preta</td>
            <td className="mono">BTM-PT-052</td>
            <td className="num-col">{NUM(240)}</td>
            <td className="num-col mono">2.0 kg</td>
          </tr>
        </tbody>
        <tfoot>
          <tr style={{ background: 'var(--bg-2)' }}>
            <td colSpan={3} style={{ textAlign: 'right', padding: 8, fontFamily: 'IBM Plex Mono' }}>Total:</td>
            <td className="num-col mono" style={{ fontWeight: 600 }}>{postagem.peso.toFixed(1)} kg</td>
          </tr>
        </tfoot>
      </table>
    </div>
  );
}

function PostagemAcoes({ postagem }) {
  const docs = [
    { nome: `Etiqueta_${postagem.rastreio}.pdf`, ext: 'pdf', tamanho: '52 KB' },
    { nome: `Romaneio_${postagem.empenho}.pdf`, ext: 'pdf', tamanho: '76 KB' },
    ...(postagem.status === 'entregue' ? [{ nome: `Comprovante_Entrega_${postagem.rastreio}.pdf`, ext: 'pdf', tamanho: '184 KB' }] : []),
  ];
  return (
    <div style={{ padding: 18 }}>
      <div className="field-label" style={{ marginBottom: 10 }}>DOCUMENTOS</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 22 }}>
        {docs.map((d, i) => (
          <div key={i} className="clickable" style={{ display: 'grid', gridTemplateColumns: '40px 1fr 80px 80px', gap: 12, alignItems: 'center', padding: '10px 12px', background: 'var(--bg-2)', border: '1px solid var(--line-1)', borderRadius: 6 }}>
            <div style={{ width: 32, height: 38, background: 'var(--bg-3)', borderRadius: 4, display: 'grid', placeItems: 'center', fontFamily: 'IBM Plex Mono', fontSize: 9.5, fontWeight: 700, color: 'var(--red)' }}>{d.ext.toUpperCase()}</div>
            <div>
              <div style={{ fontSize: 12.5, color: 'var(--fg-0)' }}>{d.nome}</div>
              <div style={{ fontSize: 10.5, color: 'var(--fg-3)', fontFamily: 'IBM Plex Mono' }}>{d.tamanho}</div>
            </div>
            <button className="btn btn-ghost btn-sm" onClick={e => e.stopPropagation()}><Icon name="eye" size={11} /> Ver</button>
            <button className="btn btn-ghost btn-sm" onClick={e => e.stopPropagation()}><Icon name="download" size={11} /> Baixar</button>
          </div>
        ))}
      </div>

      <div className="field-label" style={{ marginBottom: 10 }}>AÇÕES OPERACIONAIS</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        <button className="btn" style={{ justifyContent: 'flex-start', padding: 10 }}><Icon name="refresh" /> Atualizar rastreio manualmente</button>
        <button className="btn" style={{ justifyContent: 'flex-start', padding: 10 }}><Icon name="users" /> Avisar cliente sobre o status</button>
        <button className="btn" style={{ justifyContent: 'flex-start', padding: 10 }}><Icon name="print" /> Reimprimir etiqueta</button>
        <button className="btn btn-danger" style={{ justifyContent: 'flex-start', padding: 10 }}><Icon name="warn" /> Abrir reclamação no transportador</button>
      </div>
    </div>
  );
}

/* ── TRIANGULACAO DRAWER ───────────────────────────────────── */
function TriangulacaoDrawer({ triang, onClose, tab, onTab, onNav }) {
  const statusInfo = {
    'aprovado': { label: 'APROVADO', cls: 'badge-lime' },
    'em-andamento': { label: 'EM ANDAMENTO', cls: 'badge-cyan' },
    'pendente': { label: 'PENDÊNCIA INNER', cls: 'badge-amber' },
  }[triang.status];

  return (
    <Drawer
      open={true}
      onClose={onClose}
      eyebrow={<><span>Triangulação</span><span className="chip">M06</span><span className={`badge ${statusInfo.cls}`}>{statusInfo.label}</span>{triang.inner && <span className="badge badge-amber">INNER · +{triang.sobra} sobra</span>}</>}
      title={<span style={{ fontWeight: 600 }}>{triang.id} · {triang.forn}</span>}
      subtitle={`Destino: ${triang.dest} · ${triang.pedidoCompra} · emitido em ${triang.emitido}`}
      headRight={
        <div style={{ textAlign: 'right' }}>
          <div className="mono" style={{ fontSize: 10.5, color: 'var(--fg-3)' }}>VALOR</div>
          <div className="mono" style={{ fontSize: 14, fontWeight: 600, color: 'var(--lime)' }}>{BRL(triang.val)}</div>
        </div>
      }
      tabs={[
        { id: 'det', label: 'Detalhes' },
        { id: 'itens', label: 'Itens', count: triang.itens.length },
        { id: 'doc', label: 'Pedido de Compras' },
      ]}
      activeTab={tab}
      onTabChange={onTab}
      footer={
        <>
          <button className="btn"><Icon name="mail" /> E-mail fornecedor</button>
          <button className="btn"><Icon name="refresh" /> Solicitar confirmação</button>
          <button className="btn btn-primary" style={{ flex: 1, justifyContent: 'center' }} onClick={() => onNav('empenhos')}>
            <Icon name="arrowR" /> Abrir empenho destino
          </button>
        </>
      }
    >
      {tab === 'det' && <TriangDet triang={triang} />}
      {tab === 'itens' && <TriangItens triang={triang} />}
      {tab === 'doc' && <TriangDoc triang={triang} />}
    </Drawer>
  );
}

function TriangDet({ triang }) {
  const total = triang.itens.reduce((a, i) => a + i.qtdComprar * i.custo, 0);
  return (
    <div style={{ padding: 18 }}>
      <div className="field-label" style={{ marginBottom: 10 }}>FLUXO</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 24px 1fr 24px 1fr', gap: 8, alignItems: 'center', marginBottom: 22 }}>
        <div style={{ padding: 12, background: 'var(--bg-2)', borderRadius: 6, border: '1px solid var(--line-1)', textAlign: 'center' }}>
          <div className="field-label">FORNECEDOR</div>
          <div style={{ fontSize: 13, fontWeight: 600, marginTop: 4 }}>{triang.forn}</div>
        </div>
        <Icon name="arrowR" size={14} style={{ color: 'var(--fg-3)' }} />
        <div style={{ padding: 12, background: 'var(--lime-soft)', borderRadius: 6, border: '1px solid var(--lime-border)', textAlign: 'center' }}>
          <div className="field-label">BTM (intermediação)</div>
          <div style={{ fontSize: 13, fontWeight: 600, marginTop: 4, color: 'var(--lime)' }}>NF + Faturamento</div>
        </div>
        <Icon name="arrowR" size={14} style={{ color: 'var(--fg-3)' }} />
        <div style={{ padding: 12, background: 'var(--bg-2)', borderRadius: 6, border: '1px solid var(--line-1)', textAlign: 'center' }}>
          <div className="field-label">DESTINATÁRIO</div>
          <div style={{ fontSize: 13, fontWeight: 600, marginTop: 4 }}>{triang.dest}</div>
        </div>
      </div>

      <div className="field-label" style={{ marginBottom: 10 }}>DADOS DA OPERAÇÃO</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10, marginBottom: 22 }}>
        <Field label="EMPENHO DESTINO" value={triang.destEmpenho} mono />
        <Field label="PEDIDO DE COMPRAS" value={triang.pedidoCompra} mono />
        <Field label="EMITIDO EM" value={triang.emitido} />
        <Field label="PREVISÃO ENTREGA" value={triang.previsao} valueClass="text-cyan" />
        <Field label="VALOR DE COMPRA" value={BRL(total)} />
        <Field label="VALOR FATURADO" value={BRL(triang.val)} valueClass="text-lime" />
      </div>

      {triang.inner && (
        <div className="alert-banner alert-amber" style={{ marginBottom: 14 }}>
          <Icon name="warn" size={13} />
          <div>
            <strong>Pendência INNER: +{triang.sobra} unidades de sobra</strong>
            <div style={{ fontSize: 11.5, color: 'var(--fg-2)', marginTop: 2 }}>
              O fornecedor exige caixas/inners mínimos, gerando sobra de mercadoria que não vai para o destinatário. Estoque interno ficará com {triang.sobra} unidades — verificar absorção ou venda direta.
            </div>
          </div>
        </div>
      )}

      <div className="alert-banner alert-cyan">
        <Icon name="info" size={13} />
        <div>
          <strong>Triangulação não passa pelo estoque físico da BTM</strong>
          <div style={{ fontSize: 11.5, color: 'var(--fg-2)', marginTop: 2 }}>
            A mercadoria sai diretamente do fornecedor para o destinatário. A BTM apenas intermedia: emite NF de venda e recebe a NF de compra do fornecedor. Mantém a integridade do estoque.
          </div>
        </div>
      </div>
    </div>
  );
}

function TriangItens({ triang }) {
  return (
    <div>
      <table className="tbl">
        <thead>
          <tr>
            <th>Descrição</th>
            <th>Cod</th>
            <th style={{ textAlign: 'right' }}>Qtd ed.</th>
            <th style={{ textAlign: 'right' }}>Inner</th>
            <th style={{ textAlign: 'right' }}>A comprar</th>
            <th style={{ textAlign: 'right' }}>Sobra</th>
            <th style={{ textAlign: 'right' }}>Custo un.</th>
            <th style={{ textAlign: 'right' }}>Total</th>
          </tr>
        </thead>
        <tbody>
          {triang.itens.map((it, i) => (
            <tr key={i} style={{ background: it.sobra > 0 ? 'rgba(245,181,68,0.04)' : undefined }}>
              <td>{it.desc}</td>
              <td className="mono">{it.cod}</td>
              <td className="num-col">{NUM(it.qtd)}</td>
              <td className="num-col" style={{ background: 'var(--bg-2)', borderRadius: 3 }}>
                <span style={{ color: 'var(--cyan)', fontWeight: 600 }}>{it.inner}</span>
              </td>
              <td className="num-col">{NUM(it.qtdComprar)}</td>
              <td className="num-col" style={{ color: it.sobra > 0 ? 'var(--amber)' : 'var(--fg-3)' }}>
                {it.sobra > 0 ? `+${it.sobra}` : '—'}
              </td>
              <td className="num-col">{BRL(it.custo).replace('R$ ', '')}</td>
              <td className="num-col" style={{ color: 'var(--lime)', fontWeight: 500 }}>{BRL(it.qtdComprar * it.custo)}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function TriangDoc({ triang }) {
  return (
    <div style={{ padding: 18 }}>
      <div className="field-label" style={{ marginBottom: 10 }}>PEDIDO DE COMPRAS · {triang.pedidoCompra}</div>
      <div style={{ padding: 16, background: '#f5f4f0', color: '#0a0a0b', fontFamily: "'IBM Plex Serif', serif", fontSize: 11, lineHeight: 1.55, borderRadius: 6, marginBottom: 18, boxShadow: '0 4px 16px rgba(0,0,0,0.4)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingBottom: 10, borderBottom: '1.5px solid #0a0a0b', marginBottom: 10 }}>
          <div style={{ width: 32, height: 32, background: '#0a0a0b', color: '#d4f752', display: 'grid', placeItems: 'center', fontWeight: 700, fontFamily: 'IBM Plex Mono', fontSize: 13, borderRadius: 4 }}>BTM</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 11, fontWeight: 700 }}>BTM SERVIÇOS E COMÉRCIO LTDA</div>
            <div style={{ fontSize: 9 }}>CNPJ 33.804.351/0001-04</div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontSize: 13, fontWeight: 700 }}>{triang.pedidoCompra}</div>
            <div style={{ fontSize: 9 }}>{triang.emitido}/2026</div>
          </div>
        </div>
        <div style={{ textAlign: 'center', fontWeight: 700, fontSize: 12 }}>PEDIDO DE COMPRAS · TRIANGULAÇÃO</div>
        <div style={{ marginTop: 10 }}>
          <strong>Fornecedor:</strong> {triang.forn}
        </div>
        <div>
          <strong>Entrega direta ao destinatário:</strong> {triang.dest}
        </div>
        <div>
          <strong>Pedido vinculado ao empenho:</strong> {triang.destEmpenho}
        </div>
        <table style={{ width: '100%', marginTop: 14, fontSize: 9, borderCollapse: 'collapse' }}>
          <thead>
            <tr style={{ background: '#0a0a0b', color: '#f5f4f0' }}>
              <th style={{ padding: 4, textAlign: 'left' }}>Descrição</th>
              <th style={{ padding: 4, textAlign: 'right' }}>Qtd</th>
              <th style={{ padding: 4, textAlign: 'right' }}>Unit</th>
              <th style={{ padding: 4, textAlign: 'right' }}>Total</th>
            </tr>
          </thead>
          <tbody>
            {triang.itens.map((it, i) => (
              <tr key={i} style={{ borderBottom: '1px solid #d8d6cf' }}>
                <td style={{ padding: 3 }}>{it.desc}</td>
                <td style={{ padding: 3, textAlign: 'right' }}>{NUM(it.qtdComprar)}</td>
                <td style={{ padding: 3, textAlign: 'right' }}>{it.custo.toFixed(2)}</td>
                <td style={{ padding: 3, textAlign: 'right', fontWeight: 600 }}>{(it.qtdComprar * it.custo).toLocaleString('pt-BR', { minimumFractionDigits: 2 })}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div style={{ display: 'flex', gap: 8 }}>
        <button className="btn btn-primary" style={{ flex: 1, justifyContent: 'center' }}><Icon name="download" /> Baixar PDF</button>
        <button className="btn"><Icon name="mail" /> Enviar ao fornecedor</button>
        <button className="btn"><Icon name="print" /> Imprimir</button>
      </div>
    </div>
  );
}

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

window.MLogistica = MLogistica;