/* global React, Icon, Button, Badge, Card, Drawer, Field, brl, BLANK_EMPRESA, EMPRESA_CORES, REGIMES_TRIBUTARIOS, NATUREZAS_OPERACAO, MODALIDADES_FRETE, formatCNPJ, EmpresaBadge, NFStatusBadge */
// ─── NF Forms — Drawer forms for Empresa Emissora and NF Emission ────────

const { useState: useNffState, useEffect: useNffEffect, useCallback: useNffCb, useRef: useNffRef } = React;

// ─── Section label helper ───────────────────────────────────────────────────

const SectionLabel = ({ children }) => (
  <div style={{
    fontSize: 11, fontWeight: 600, textTransform: 'uppercase',
    letterSpacing: '0.08em', color: 'var(--tm-fg-4)',
    marginTop: 20, marginBottom: 10,
  }}>{children}</div>
);

// ─── UF options ─────────────────────────────────────────────────────────────

const UF_LIST = [
  'AC','AL','AM','AP','BA','CE','DF','ES','GO','MA','MG','MS','MT',
  'PA','PB','PE','PI','PR','RJ','RN','RO','RR','RS','SC','SE','SP','TO',
];

// ═════════════════════════════════════════════════════════════════════════════
// 1. EmpresaEmissoraForm
// ═════════════════════════════════════════════════════════════════════════════

function EmpresaEmissoraForm({ open, empresa, setEmpresa, onSave, onCancel, saving }) {
  if (!empresa) return null;

  const set = (field, value) => setEmpresa({ ...empresa, [field]: value });
  const setEnd = (field, value) => setEmpresa({
    ...empresa,
    endereco: { ...empresa.endereco, [field]: value },
  });

  return (
    <Drawer
      open={open}
      onClose={onCancel}
      title={empresa.id ? 'Editar empresa emissora' : 'Nova empresa emissora'}
      width={540}
      footer={
        <>
          <Button variant="secondary" size="sm" onClick={onCancel}>Cancelar</Button>
          <Button variant="primary" size="sm" icon="check" onClick={onSave} disabled={saving}>
            {saving ? 'Salvando...' : 'Salvar'}
          </Button>
        </>
      }
    >
      {/* ── Dados básicos ── */}
      <SectionLabel>Dados básicos</SectionLabel>
      <div className="form-grid">
        <div className="field">
          <label style={{ fontSize: 12, color: 'var(--tm-fg-3)' }}>Razão social *</label>
          <input className="input" value={empresa.razaoSocial || empresa.razao_social || ''}
            onChange={e => set('razaoSocial', e.target.value)} />
        </div>
        <div className="field">
          <label style={{ fontSize: 12, color: 'var(--tm-fg-3)' }}>Nome fantasia</label>
          <input className="input" value={empresa.nomeFantasia || empresa.nome_fantasia || ''}
            onChange={e => set('nomeFantasia', e.target.value)} />
        </div>
        <div className="field">
          <label style={{ fontSize: 12, color: 'var(--tm-fg-3)' }}>CNPJ *</label>
          <input className="input" placeholder="00.000.000/0001-00"
            value={empresa.cnpj || ''}
            onChange={e => set('cnpj', e.target.value)} />
        </div>
        <div className="field">
          <label style={{ fontSize: 12, color: 'var(--tm-fg-3)' }}>Inscrição Estadual</label>
          <input className="input" value={empresa.ie || empresa.inscricao_estadual || ''}
            onChange={e => set('ie', e.target.value)} />
        </div>
        <div className="field">
          <label style={{ fontSize: 12, color: 'var(--tm-fg-3)' }}>Inscrição Municipal</label>
          <input className="input" value={empresa.im || empresa.inscricao_municipal || ''}
            onChange={e => set('im', e.target.value)} />
        </div>
      </div>

      {/* ── Configuração fiscal ── */}
      <SectionLabel>Configuração fiscal</SectionLabel>
      <div className="form-grid">
        <div className="field">
          <label style={{ fontSize: 12, color: 'var(--tm-fg-3)' }}>Regime tributário</label>
          <select className="input" value={empresa.regimeTributario || empresa.regime_tributario || ''}
            onChange={e => set('regimeTributario', e.target.value)}>
            {REGIMES_TRIBUTARIOS.map(r => <option key={r} value={r}>{r}</option>)}
          </select>
        </div>
        <div className="field">
          <label style={{ fontSize: 12, color: 'var(--tm-fg-3)' }}>Ambiente</label>
          <select className="input" value={empresa.ambiente || 'homologacao'}
            onChange={e => set('ambiente', e.target.value)}>
            <option value="homologacao">Homologação</option>
            <option value="producao">Produção</option>
          </select>
        </div>
        <div className="field">
          <label style={{ fontSize: 12, color: 'var(--tm-fg-3)' }}>Série NF-e</label>
          <input className="input" type="number" min={1}
            value={empresa.serieNfe || empresa.serie_nfe || 1}
            onChange={e => set('serieNfe', parseInt(e.target.value, 10) || 1)} />
        </div>
      </div>

      {/* ── Endereço ── */}
      <SectionLabel>Endereço</SectionLabel>
      <div className="form-grid">
        <div className="field" style={{ gridColumn: 'span 2' }}>
          <label style={{ fontSize: 12, color: 'var(--tm-fg-3)' }}>Logradouro</label>
          <input className="input" value={(empresa.endereco || {}).logradouro || ''}
            onChange={e => setEnd('logradouro', e.target.value)} />
        </div>
        <div className="field">
          <label style={{ fontSize: 12, color: 'var(--tm-fg-3)' }}>Número</label>
          <input className="input" value={(empresa.endereco || {}).numero || ''}
            onChange={e => setEnd('numero', e.target.value)} />
        </div>
        <div className="field">
          <label style={{ fontSize: 12, color: 'var(--tm-fg-3)' }}>Complemento</label>
          <input className="input" value={(empresa.endereco || {}).complemento || ''}
            onChange={e => setEnd('complemento', e.target.value)} />
        </div>
        <div className="field">
          <label style={{ fontSize: 12, color: 'var(--tm-fg-3)' }}>Bairro</label>
          <input className="input" value={(empresa.endereco || {}).bairro || ''}
            onChange={e => setEnd('bairro', e.target.value)} />
        </div>
        <div className="field">
          <label style={{ fontSize: 12, color: 'var(--tm-fg-3)' }}>Cidade</label>
          <input className="input" value={(empresa.endereco || {}).cidade || ''}
            onChange={e => setEnd('cidade', e.target.value)} />
        </div>
        <div className="field">
          <label style={{ fontSize: 12, color: 'var(--tm-fg-3)' }}>UF</label>
          <select className="input" value={(empresa.endereco || {}).uf || 'SP'}
            onChange={e => setEnd('uf', e.target.value)}>
            {UF_LIST.map(uf => <option key={uf} value={uf}>{uf}</option>)}
          </select>
        </div>
        <div className="field">
          <label style={{ fontSize: 12, color: 'var(--tm-fg-3)' }}>CEP</label>
          <input className="input" value={(empresa.endereco || {}).cep || ''}
            onChange={e => setEnd('cep', e.target.value)} />
        </div>
      </div>

      {/* ── Contato ── */}
      <SectionLabel>Contato</SectionLabel>
      <div className="form-grid">
        <div className="field">
          <label style={{ fontSize: 12, color: 'var(--tm-fg-3)' }}>Telefone</label>
          <input className="input" value={empresa.telefone || ''}
            onChange={e => set('telefone', e.target.value)} />
        </div>
        <div className="field">
          <label style={{ fontSize: 12, color: 'var(--tm-fg-3)' }}>E-mail</label>
          <input className="input" type="email" value={empresa.email || ''}
            onChange={e => set('email', e.target.value)} />
        </div>
      </div>

      {/* ── Cor do tema ── */}
      <SectionLabel>Cor do tema</SectionLabel>
      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 16 }}>
        {EMPRESA_CORES.map(c => (
          <button key={c} onClick={() => set('cor', c)} style={{
            width: 28, height: 28, borderRadius: '50%', border: 'none',
            background: c, cursor: 'pointer',
            outline: (empresa.cor || '#C9A36B') === c ? `2px solid ${c}` : '2px solid transparent',
            outlineOffset: 2,
            transition: 'outline 0.15s',
          }} />
        ))}
      </div>

      {/* ── Integração ── */}
      <SectionLabel>Integração</SectionLabel>
      <div className="form-grid">
        <div className="field">
          <label style={{ fontSize: 12, color: 'var(--tm-fg-3)' }}>NFe.io Company ID</label>
          <input className="input" disabled value={empresa.nfeio_company_id || ''}
            placeholder="Disponível após integração com NFe.io"
            style={{ opacity: 0.5 }} />
          <span style={{ fontSize: 11, color: 'var(--tm-fg-4)', marginTop: 4, display: 'block' }}>
            Disponível após integração com NFe.io
          </span>
        </div>
      </div>
    </Drawer>
  );
}

// ═════════════════════════════════════════════════════════════════════════════
// 2. NFEmissaoDrawer — Full NF-e Emission Form
// ═════════════════════════════════════════════════════════════════════════════

function NFEmissaoDrawer({ open, pedido, items, empresas, clienteData, onEmitir, onCancel, saving }) {

  // ── State: Section 1 — Dados da NF-e ──
  const [empresaId, setEmpresaId]       = useNffState('');
  const [tipoSaida, setTipoSaida]       = useNffState('Emissão Própria');

  // ── State: Section 2 — Natureza e Regime ──
  const [natureza, setNatureza]          = useNffState('Venda de mercadoria');
  const [finalidade, setFinalidade]      = useNffState('NF-e normal');
  const [indicadorPresenca, setIndicadorPresenca] = useNffState('Não se aplica');

  // ── State: Section 3 — Destinatário ──
  const [destNome, setDestNome]          = useNffState('');
  const [tipoPessoa, setTipoPessoa]      = useNffState('Jurídica');
  const [destDoc, setDestDoc]            = useNffState('');
  const [destIe, setDestIe]              = useNffState('');
  // indIEDest: 1=Contribuinte ICMS, 2=Contribuinte isento, 9=Não contribuinte
  const [indIEDest, setIndIEDest]        = useNffState('1');
  const [destEndereco, setDestEndereco]  = useNffState('');
  const [destNumero, setDestNumero]      = useNffState('');
  const [destComplemento, setDestComplemento] = useNffState('');
  const [destBairro, setDestBairro]      = useNffState('');
  const [destCidade, setDestCidade]      = useNffState('');
  const [destUf, setDestUf]              = useNffState('SP');
  const [destCep, setDestCep]            = useNffState('');
  const [destFone, setDestFone]          = useNffState('');
  const [destEmail, setDestEmail]        = useNffState('');

  // ── State: Section 4 — Itens NCM (editable per row) ──
  const [ncmMap, setNcmMap]              = useNffState({});

  // ── State: Section 5 — Cálculo de impostos ──
  const [frete, setFrete]                = useNffState('0.00');
  const [seguro, setSeguro]              = useNffState('0.00');
  const [outras, setOutras]              = useNffState('0.00');
  const [desconto, setDesconto]          = useNffState('0.00');
  const [icmsBase, setIcmsBase]          = useNffState('0.00');
  const [icmsValor, setIcmsValor]        = useNffState('0.00');
  const [icmsStBase, setIcmsStBase]      = useNffState('0.00');
  const [icmsStValor, setIcmsStValor]    = useNffState('0.00');
  const [ipiValor, setIpiValor]          = useNffState('0.00');
  const [issValor, setIssValor]          = useNffState('0.00');
  const [cbsValor, setCbsValor]          = useNffState('0.00');

  // ── State: Section 6 — Transporte / Volumes ──
  const [modalidadeFrete, setModalidadeFrete] = useNffState('0');
  const [fretePorConta, setFretePorConta]     = useNffState('0 - Contratação do Frete por conta do Remetente (CIF)');
  const [transpNome, setTranspNome]           = useNffState('');
  const [transpPlaca, setTranspPlaca]         = useNffState('');
  const [transpUf, setTranspUf]               = useNffState('');
  const [volQtd, setVolQtd]                   = useNffState('');
  const [volPesoBruto, setVolPesoBruto]       = useNffState('');
  const [volPesoLiquido, setVolPesoLiquido]   = useNffState('');
  const [volEspecie, setVolEspecie]           = useNffState('');
  const [volMarca, setVolMarca]               = useNffState('');

  // ── State: Section 7 — Pagamento ──
  const [condPagamento, setCondPagamento]     = useNffState('');

  // ── State: Section 8 — Informações adicionais ──
  const [infoComplementar, setInfoComplementar] = useNffState('');
  const [obsInternas, setObsInternas]           = useNffState('');

  // ── Default empresa ──
  useNffEffect(() => {
    if (empresas && empresas.length > 0 && !empresaId) {
      setEmpresaId(empresas[0].id);
    }
  }, [empresas]); // eslint-disable-line

  // ── Auto-fill from pedido ──
  useNffEffect(() => {
    if (!pedido) return;
    setDestNome(pedido.cli || '');
    setInfoComplementar(pedido.obs || '');
    setObsInternas(pedido.obsInternas || pedido.obs_internas || '');

    // CPF/CNPJ do pedido (campo cliente_doc / cliId)
    if (pedido.cliId || pedido.cliente_doc) {
      setDestDoc(pedido.cliId || pedido.cliente_doc || '');
    }

    // Tipo de pessoa do pedido
    const doc = pedido.cliId || pedido.cliente_doc || '';
    if (doc) {
      const digits = doc.replace(/\D/g, '');
      setTipoPessoa(digits.length > 11 ? 'Jurídica' : 'Física');
    }

    // Condição de pagamento
    if (pedido.condPag || pedido.cond_pagamento) {
      setCondPagamento(pedido.condPag || pedido.cond_pagamento || '');
    }

    // Desconto, outras despesas
    setDesconto(String(parseFloat(pedido?.descontoExtra || pedido?.desconto_extra) || 0));
    setOutras(String(parseFloat(pedido?.outrasDespesas || pedido?.outras_despesas) || 0));

    // ── Transportador / Frete ──
    const tr = pedido.transp || pedido.transportador || {};

    // Frete por conta (código "0","1","2","9" → dropdown text)
    if (tr.fretePorConta != null) {
      const code = String(tr.fretePorConta);
      const freteLabels = {
        '0': '0 - Contratação do Frete por conta do Remetente (CIF)',
        '1': '1 - Contratação do Frete por conta do Destinatário (FOB)',
        '2': '2 - Contratação do Frete por conta de Terceiros',
        '9': '9 - Sem Ocorrência de Transporte',
      };
      setFretePorConta(freteLabels[code] || freteLabels['0']);
      setModalidadeFrete(code);
    }

    // Nome transportador, placa
    setTranspNome(tr.nome || tr.name || '');
    if (tr.placa) setTranspPlaca(tr.placa);
    if (tr.ufVeiculo || tr.uf) setTranspUf(tr.ufVeiculo || tr.uf);

    // Valor do frete
    setFrete(String(parseFloat(tr.valor || tr.frete || pedido?.frete) || 0));

    // ── Volumes do pedido ──
    // Use != null instead of truthiness — 0 is a valid value
    if (tr.qtd != null) setVolQtd(String(tr.qtd));
    if (tr.pesoBruto != null) setVolPesoBruto(String(tr.pesoBruto));
    if (tr.pesoLiquido != null) setVolPesoLiquido(String(tr.pesoLiquido));
    if (tr.especie) setVolEspecie(tr.especie);
    if (tr.marca) setVolMarca(tr.marca);

    // Default espécie if not set
    if (!tr.especie) setVolEspecie('Caixa');
  }, [pedido]);

  // ── Auto-calculate weights from product data ──
  useNffEffect(() => {
    if (!items || items.length === 0 || !window.tmSupabase) return;
    const skus = items.map(it => it.sku).filter(Boolean);
    if (skus.length === 0) return;

    (async () => {
      const { data: prods } = await window.tmSupabase
        .from('produtos').select('sku,peso_bruto,peso_liquido')
        .in('sku', skus);
      if (!prods || prods.length === 0) return;

      const prodMap = {};
      prods.forEach(p => { prodMap[p.sku] = p; });

      // Calculate total weights: product weight is in grams, convert to kg
      let totalBruto = 0, totalLiquido = 0;
      items.forEach(it => {
        const prod = prodMap[it.sku];
        if (!prod) return;
        const qty = parseFloat(it.qty) || 0;
        totalBruto += qty * (parseFloat(prod.peso_bruto) || 0) / 1000;
        totalLiquido += qty * (parseFloat(prod.peso_liquido) || 0) / 1000;
      });

      // Round to 3 decimal places
      totalBruto = Math.round(totalBruto * 1000) / 1000;
      totalLiquido = Math.round(totalLiquido * 1000) / 1000;

      // Only set if we actually have weight data and current values are empty/zero
      if (totalBruto > 0) setVolPesoBruto(String(totalBruto));
      if (totalLiquido > 0) setVolPesoLiquido(String(totalLiquido));

      // Auto-set quantity = number of distinct items (if not already set from pedido)
      if (!volQtd || volQtd === '0') setVolQtd(String(items.length));
    })();
  }, [items]);

  // ── Auto-fill from clienteData (clientes/saloes/distribuidores) ──
  useNffEffect(() => {
    if (!clienteData) return;

    // CPF/CNPJ — só preenche se o pedido não já trouxe
    const docFromClient = clienteData.cnpj || clienteData.cpf || '';
    if (docFromClient) setDestDoc(docFromClient);

    // Tipo de pessoa
    if (clienteData.tipo_pessoa === 'PJ' || clienteData.cnpj) {
      setTipoPessoa('Jurídica');
    } else if (clienteData.tipo_pessoa === 'PF' || clienteData.cpf) {
      setTipoPessoa('Física');
    }

    // Contato
    if (clienteData.email) setDestEmail(clienteData.email);
    if (clienteData.fone || clienteData.celular || clienteData.whats) {
      setDestFone(clienteData.fone || clienteData.celular || clienteData.whats || '');
    }

    // Endereço (usa campos geral_* do cadastro CRM)
    if (clienteData.geral_cidade) setDestCidade(clienteData.geral_cidade);
    if (clienteData.geral_uf) setDestUf(clienteData.geral_uf);
    if (clienteData.geral_endereco) setDestEndereco(clienteData.geral_endereco);
    if (clienteData.geral_numero) setDestNumero(clienteData.geral_numero);
    if (clienteData.geral_bairro) setDestBairro(clienteData.geral_bairro);
    if (clienteData.geral_cep) setDestCep(clienteData.geral_cep);
    if (clienteData.geral_complemento) setDestComplemento(clienteData.geral_complemento);
    if (clienteData.ie || clienteData.inscricao_estadual) {
      const ieVal = clienteData.ie || clienteData.inscricao_estadual;
      setDestIe(ieVal);
      // Auto-detect IE indicator from CRM data
      if (ieVal.toUpperCase() === 'ISENTO') {
        setIndIEDest('2');
      } else if (ieVal.replace(/\D/g, '').length > 0) {
        setIndIEDest('1');
      }
    }
  }, [clienteData]);

  // ── Auto-adjust indIEDest when tipoPessoa changes ──
  useNffEffect(() => {
    if (tipoPessoa === 'Física') {
      setIndIEDest('9'); // PF = Não contribuinte
      setDestIe('');
    }
  }, [tipoPessoa]);

  // ── Computed values ──
  const safeItems = items || [];
  const selectedEmpresa = (empresas || []).find(e => e.id === empresaId);

  const computeUnitPrice = useNffCb((it) => {
    return (it.precoLista || 0) * (1 - (it.descPct || 0) / 100);
  }, []);

  const computeLineTotal = useNffCb((it) => {
    return computeUnitPrice(it) * (it.qty || 0);
  }, [computeUnitPrice]);

  const vProd = safeItems.reduce((s, it) => s + computeLineTotal(it), 0);
  const vFrete    = parseFloat(frete) || 0;
  const vSeguro   = parseFloat(seguro) || 0;
  const vOutras   = parseFloat(outras) || 0;
  const vDesconto = parseFloat(desconto) || 0;
  const vTotal    = vProd + vFrete + vSeguro + vOutras - vDesconto;

  const totalApTrib = (parseFloat(icmsValor) || 0) + (parseFloat(icmsStValor) || 0)
    + (parseFloat(ipiValor) || 0) + (parseFloat(issValor) || 0) + (parseFloat(cbsValor) || 0);

  // ── Label style shortcut ──
  const lbl = { fontSize: 12, color: 'var(--tm-fg-3)' };

  // ── handleEmitir ──
  const handleEmitir = useNffCb(() => {
    const empresa = (empresas || []).find(e => e.id === empresaId);
    onEmitir({
      empresaId,
      empresa,
      tipoSaida,
      natureza,
      finalidade,
      indicadorPresenca,
      destNome, destDoc, destEmail, destFone,
      tipoPessoa,
      destIe: indIEDest === '1' ? destIe : '', // Only send IE if Contribuinte
      indIEDest,
      destEndereco: { logradouro: destEndereco, numero: destNumero, complemento: destComplemento, bairro: destBairro, cidade: destCidade, uf: destUf, cep: destCep },
      modalidadeFrete,
      fretePorConta,
      transportador: { nome: transpNome, placa: transpPlaca, ufVeiculo: transpUf },
      volumes: { quantidade: volQtd, pesoBruto: volPesoBruto, pesoLiquido: volPesoLiquido, especie: volEspecie, marca: volMarca },
      valorProdutos: vProd,
      valorFrete: parseFloat(frete) || 0,
      valorSeguro: parseFloat(seguro) || 0,
      valorOutras: parseFloat(outras) || 0,
      valorDesconto: parseFloat(desconto) || 0,
      valorTotal: vTotal,
      icmsBase: parseFloat(icmsBase) || 0,
      icmsValor: parseFloat(icmsValor) || 0,
      icmsStBase: parseFloat(icmsStBase) || 0,
      icmsStValor: parseFloat(icmsStValor) || 0,
      ipiValor: parseFloat(ipiValor) || 0,
      issValor: parseFloat(issValor) || 0,
      cbsValor: parseFloat(cbsValor) || 0,
      totalApTrib,
      infoComplementar,
      obsInternas,
      items: safeItems.map((it, i) => ({
        ...it,
        numeroItem: i + 1,
        valorUnitario: computeUnitPrice(it),
        valorTotal: computeLineTotal(it),
        ncm: ncmMap[i] !== undefined ? ncmMap[i] : (it.ncm || '3305.10.00'),
      })),
      parcelas: pedido?.parcelas || [],
      formaPagamento: pedido?.pgto || pedido?.forma_pagamento || '',
      condPagamento,
    });
  }, [empresaId, tipoSaida, natureza, finalidade, indicadorPresenca,
      destNome, destDoc, destEmail, destFone, tipoPessoa, destIe, indIEDest,
      destEndereco, destNumero, destComplemento, destBairro, destCidade, destUf, destCep,
      modalidadeFrete, fretePorConta, transpNome, transpPlaca, transpUf,
      volQtd, volPesoBruto, volPesoLiquido, volEspecie, volMarca,
      frete, seguro, outras, desconto, vProd, vTotal,
      icmsBase, icmsValor, icmsStBase, icmsStValor, ipiValor, issValor, cbsValor, totalApTrib,
      infoComplementar, obsInternas, safeItems, ncmMap, pedido, empresas, onEmitir,
      computeUnitPrice, computeLineTotal, condPagamento]);

  return (
    <Drawer
      open={open}
      onClose={onCancel}
      title="Emitir NF-e"
      subtitle={pedido ? `Pedido #${pedido.num || '—'} — ${pedido.cli || '—'}` : ''}
      width={960}
      footer={
        <div style={{ display: 'flex', gap: 8 }}>
          <Button variant="primary" icon="send" onClick={handleEmitir} disabled={saving || !empresaId}>
            {saving ? 'Emitindo...' : 'Emitir NF-e'}
          </Button>
          <Button variant="ghost" onClick={onCancel}>Cancelar</Button>
        </div>
      }
    >

      {/* ═══════════════════════════════════════════════════════════════════ */}
      {/* SECTION 1 — DADOS DA NF-e                                        */}
      {/* ═══════════════════════════════════════════════════════════════════ */}
      <SectionLabel>Dados da NF-e</SectionLabel>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 12 }}>
        <div className="field">
          <label style={lbl}>Tipo de saída</label>
          <select className="input" value={tipoSaida} onChange={e => setTipoSaida(e.target.value)}>
            <option value="Emissão Própria">Emissão Própria</option>
            <option value="Complementar">Complementar</option>
            <option value="Ajuste">Ajuste</option>
            <option value="Devolução">Devolução</option>
          </select>
        </div>
        <div className="field">
          <label style={lbl}>Série</label>
          <input className="input" readOnly
            value={selectedEmpresa ? (selectedEmpresa.serie_nfe || selectedEmpresa.serieNfe || 1) : '—'}
            style={{ opacity: 0.7, background: 'var(--tm-bg-2)' }} />
        </div>
        <div className="field">
          <label style={lbl}>Número</label>
          <input className="input" readOnly value="Automático"
            style={{ opacity: 0.5, background: 'var(--tm-bg-2)', color: 'var(--tm-fg-4)' }} />
        </div>
        <div className="field">
          <label style={lbl}>Empresa emissora *</label>
          <select className="input" value={empresaId} onChange={e => setEmpresaId(e.target.value)}>
            {(empresas || []).map(emp => (
              <option key={emp.id} value={emp.id}>
                {emp.nome_fantasia || emp.nomeFantasia || emp.razao_social || emp.razaoSocial} — {emp.cnpj}
              </option>
            ))}
          </select>
          {selectedEmpresa && (
            <div style={{ marginTop: 6 }}>
              <EmpresaBadge
                nome={selectedEmpresa.nome_fantasia || selectedEmpresa.nomeFantasia || selectedEmpresa.razao_social || selectedEmpresa.razaoSocial}
                cor={selectedEmpresa.cor}
              />
            </div>
          )}
        </div>
      </div>

      {/* ═══════════════════════════════════════════════════════════════════ */}
      {/* SECTION 2 — NATUREZA E REGIME                                    */}
      {/* ═══════════════════════════════════════════════════════════════════ */}
      <SectionLabel>Natureza e Regime</SectionLabel>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 12 }}>
        <div className="field">
          <label style={lbl}>Natureza da operação</label>
          <select className="input" value={natureza} onChange={e => setNatureza(e.target.value)}>
            {NATUREZAS_OPERACAO.map(n => <option key={n} value={n}>{n}</option>)}
          </select>
        </div>
        <div className="field">
          <label style={lbl}>Regime tributário</label>
          <input className="input" readOnly
            value={selectedEmpresa ? (selectedEmpresa.regime_tributario || selectedEmpresa.regimeTributario || '—') : '—'}
            style={{ opacity: 0.7, background: 'var(--tm-bg-2)' }} />
        </div>
        <div className="field">
          <label style={lbl}>Finalidade</label>
          <select className="input" value={finalidade} onChange={e => setFinalidade(e.target.value)}>
            <option value="NF-e normal">NF-e normal</option>
            <option value="NF-e complementar">NF-e complementar</option>
            <option value="NF-e de ajuste">NF-e de ajuste</option>
            <option value="Devolução/Retorno">Devolução/Retorno</option>
          </select>
        </div>
        <div className="field">
          <label style={lbl}>Indicador de presença</label>
          <select className="input" value={indicadorPresenca} onChange={e => setIndicadorPresenca(e.target.value)}>
            <option value="Não se aplica">Não se aplica</option>
            <option value="Operação presencial">Operação presencial</option>
            <option value="Operação não presencial, internet">Operação não presencial, internet</option>
            <option value="Operação não presencial, teleatendimento">Operação não presencial, teleatendimento</option>
            <option value="Operação não presencial, outros">Operação não presencial, outros</option>
          </select>
        </div>
      </div>

      {/* ═══════════════════════════════════════════════════════════════════ */}
      {/* SECTION 3 — DESTINATÁRIO                                         */}
      {/* ═══════════════════════════════════════════════════════════════════ */}
      <SectionLabel>Destinatário</SectionLabel>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 12 }}>
        <div className="field" style={{ gridColumn: 'span 2' }}>
          <label style={lbl}>Nome</label>
          <input className="input" value={destNome} onChange={e => setDestNome(e.target.value)} />
        </div>
        <div className="field">
          <label style={lbl}>Tipo de pessoa</label>
          <select className="input" value={tipoPessoa} onChange={e => setTipoPessoa(e.target.value)}>
            <option value="Física">Física</option>
            <option value="Jurídica">Jurídica</option>
          </select>
        </div>
        <div className="field">
          <label style={lbl}>{tipoPessoa === 'Jurídica' ? 'CNPJ' : 'CPF'}</label>
          <input className="input" value={destDoc} onChange={e => setDestDoc(e.target.value)} />
        </div>
        <div className="field">
          <label style={lbl}>Indicador IE</label>
          <select className="input" value={indIEDest} onChange={e => {
            setIndIEDest(e.target.value);
            if (e.target.value !== '1') setDestIe('');
          }}>
            <option value="1">Contribuinte ICMS</option>
            <option value="2">Contribuinte isento</option>
            <option value="9">Não contribuinte</option>
          </select>
        </div>
        <div className="field">
          <label style={lbl}>Inscrição Estadual {indIEDest === '1' ? '*' : ''}</label>
          <input className="input" value={indIEDest === '1' ? destIe : 'ISENTO'}
            onChange={e => setDestIe(e.target.value)}
            disabled={indIEDest !== '1'}
            style={indIEDest !== '1' ? { opacity: 0.5, background: 'var(--tm-bg-2)' } : {}}
            placeholder={indIEDest === '1' ? 'Ex: 123.456.789.012' : ''} />
        </div>
        <div className="field">
          <label style={lbl}>Fone / Celular</label>
          <input className="input" value={destFone} onChange={e => setDestFone(e.target.value)} />
        </div>
        <div className="field">
          <label style={lbl}>E-mail</label>
          <input className="input" type="email" value={destEmail} onChange={e => setDestEmail(e.target.value)} />
        </div>
        <div className="field">
          <label style={lbl}>Vendedor</label>
          <input className="input" readOnly value={pedido?.vendedor || '—'}
            style={{ opacity: 0.7, background: 'var(--tm-bg-2)' }} />
        </div>
      </div>

      {/* ── Sub-grid: Endereço do destinatário ── */}
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: 12, marginTop: 12 }}>
        <div className="field">
          <label style={lbl}>Endereço</label>
          <input className="input" value={destEndereco} onChange={e => setDestEndereco(e.target.value)} />
        </div>
        <div className="field">
          <label style={lbl}>Número</label>
          <input className="input" value={destNumero} onChange={e => setDestNumero(e.target.value)} />
        </div>
        <div className="field">
          <label style={lbl}>Complemento</label>
          <input className="input" value={destComplemento} onChange={e => setDestComplemento(e.target.value)} />
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 12, marginTop: 12 }}>
        <div className="field">
          <label style={lbl}>Bairro</label>
          <input className="input" value={destBairro} onChange={e => setDestBairro(e.target.value)} />
        </div>
        <div className="field">
          <label style={lbl}>Cidade</label>
          <input className="input" value={destCidade} onChange={e => setDestCidade(e.target.value)} />
        </div>
        <div className="field">
          <label style={lbl}>UF</label>
          <select className="input" value={destUf} onChange={e => setDestUf(e.target.value)}>
            {UF_LIST.map(uf => <option key={uf} value={uf}>{uf}</option>)}
          </select>
        </div>
        <div className="field">
          <label style={lbl}>CEP</label>
          <input className="input" value={destCep} onChange={e => setDestCep(e.target.value)} />
        </div>
      </div>

      {/* ═══════════════════════════════════════════════════════════════════ */}
      {/* SECTION 4 — ITENS DA NOTA FISCAL                                 */}
      {/* ═══════════════════════════════════════════════════════════════════ */}
      <SectionLabel>Itens da Nota Fiscal</SectionLabel>
      <div style={{ overflowX: 'auto', marginBottom: 16, flexShrink: 0 }}>
        {safeItems.length === 0 ? (
          <div style={{
            padding: '24px 16px', textAlign: 'center', color: 'var(--tm-fg-4)',
            fontSize: 13, background: 'var(--tm-bg-2)', borderRadius: 8,
          }}>
            Nenhum item encontrado neste pedido
          </div>
        ) : (
          <table className="tbl" style={{ width: '100%' }}>
            <thead>
              <tr>
                <th style={{ width: 36 }}>#</th>
                <th>Produto / Serviço</th>
                <th>Código</th>
                <th style={{ width: 50 }}>UN</th>
                <th className="num" style={{ width: 60 }}>Qtde</th>
                <th className="num" style={{ width: 100 }}>Preço un.</th>
                <th className="num" style={{ width: 110 }}>Preço total</th>
                <th style={{ width: 120 }}>NCM</th>
              </tr>
            </thead>
            <tbody>
              {safeItems.map((it, i) => {
                const unitPrice = computeUnitPrice(it);
                const lineTotal = computeLineTotal(it);
                const rowNcm = ncmMap[i] !== undefined ? ncmMap[i] : (it.ncm || '3305.10.00');
                return (
                  <tr key={i}>
                    <td className="muted">{i + 1}</td>
                    <td>{it.desc}</td>
                    <td><span className="ref-mono">{it.sku}</span></td>
                    <td>{it.un}</td>
                    <td className="num">{it.qty}</td>
                    <td className="num">{brl(unitPrice)}</td>
                    <td className="num">{brl(lineTotal)}</td>
                    <td>
                      <input className="input" value={rowNcm}
                        onChange={e => setNcmMap(prev => ({ ...prev, [i]: e.target.value }))}
                        style={{ fontSize: 12, padding: '2px 6px', width: '100%' }} />
                    </td>
                  </tr>
                );
              })}
            </tbody>
            <tfoot>
              <tr style={{ fontWeight: 600 }}>
                <td colSpan={4} style={{ textAlign: 'right', color: 'var(--tm-fg-4)' }}>Totais:</td>
                <td className="num">{safeItems.reduce((s, it) => s + (it.qty || 0), 0)}</td>
                <td className="num">—</td>
                <td className="num" style={{ color: 'var(--tm-accent)' }}>{brl(vProd)}</td>
                <td></td>
              </tr>
            </tfoot>
          </table>
        )}
      </div>

      {/* ═══════════════════════════════════════════════════════════════════ */}
      {/* SECTION 5 — CÁLCULO DE IMPOSTOS                                  */}
      {/* ═══════════════════════════════════════════════════════════════════ */}
      <SectionLabel>Cálculo de Impostos</SectionLabel>
      <div style={{
        background: 'var(--tm-bg-2)', borderRadius: 8, padding: '12px 16px', marginBottom: 16, flexShrink: 0,
      }}>
        {/* Row 1 */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr 1fr', gap: 10, marginBottom: 10 }}>
          <div className="field">
            <label style={{ fontSize: 11, color: 'var(--tm-fg-4)' }}>Total Produtos (R$)</label>
            <input className="input" type="number" step="0.01" readOnly value={vProd.toFixed(2)}
              style={{ opacity: 0.7, fontWeight: 600 }} />
          </div>
          <div className="field">
            <label style={{ fontSize: 11, color: 'var(--tm-fg-4)' }}>Valor do Frete (R$)</label>
            <input className="input" type="number" step="0.01" value={frete}
              onChange={e => setFrete(e.target.value)} />
          </div>
          <div className="field">
            <label style={{ fontSize: 11, color: 'var(--tm-fg-4)' }}>Valor do Seguro (R$)</label>
            <input className="input" type="number" step="0.01" value={seguro}
              onChange={e => setSeguro(e.target.value)} />
          </div>
          <div className="field">
            <label style={{ fontSize: 11, color: 'var(--tm-fg-4)' }}>Outras Despesas (R$)</label>
            <input className="input" type="number" step="0.01" value={outras}
              onChange={e => setOutras(e.target.value)} />
          </div>
          <div className="field">
            <label style={{ fontSize: 11, color: 'var(--tm-fg-4)' }}>Desconto (R$)</label>
            <input className="input" type="number" step="0.01" value={desconto}
              onChange={e => setDesconto(e.target.value)} />
          </div>
          <div className="field">
            <label style={{ fontSize: 11, color: 'var(--tm-fg-4)' }}>Total da Nota (R$)</label>
            <input className="input" type="number" step="0.01" readOnly value={vTotal.toFixed(2)}
              style={{ opacity: 0.7, fontWeight: 700, color: 'var(--tm-accent)' }} />
          </div>
        </div>
        {/* Row 2 */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 10, marginBottom: 10 }}>
          <div className="field">
            <label style={{ fontSize: 11, color: 'var(--tm-fg-4)' }}>Base ICMS</label>
            <input className="input" type="number" step="0.01" value={icmsBase}
              onChange={e => setIcmsBase(e.target.value)} />
          </div>
          <div className="field">
            <label style={{ fontSize: 11, color: 'var(--tm-fg-4)' }}>Valor ICMS</label>
            <input className="input" type="number" step="0.01" value={icmsValor}
              onChange={e => setIcmsValor(e.target.value)} />
          </div>
          <div className="field">
            <label style={{ fontSize: 11, color: 'var(--tm-fg-4)' }}>Base ICMS ST</label>
            <input className="input" type="number" step="0.01" value={icmsStBase}
              onChange={e => setIcmsStBase(e.target.value)} />
          </div>
          <div className="field">
            <label style={{ fontSize: 11, color: 'var(--tm-fg-4)' }}>Valor ICMS ST</label>
            <input className="input" type="number" step="0.01" value={icmsStValor}
              onChange={e => setIcmsStValor(e.target.value)} />
          </div>
        </div>
        {/* Row 3 */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10, marginBottom: 10 }}>
          <div className="field">
            <label style={{ fontSize: 11, color: 'var(--tm-fg-4)' }}>Valor IPI</label>
            <input className="input" type="number" step="0.01" value={ipiValor}
              onChange={e => setIpiValor(e.target.value)} />
          </div>
          <div className="field">
            <label style={{ fontSize: 11, color: 'var(--tm-fg-4)' }}>Total ISS (R$)</label>
            <input className="input" type="number" step="0.01" value={issValor}
              onChange={e => setIssValor(e.target.value)} />
          </div>
          <div className="field">
            <label style={{ fontSize: 11, color: 'var(--tm-fg-4)' }}>Total CBS (R$)</label>
            <input className="input" type="number" step="0.01" value={cbsValor}
              onChange={e => setCbsValor(e.target.value)} />
          </div>
        </div>
        {/* Row 4 */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 10 }}>
          <div className="field">
            <label style={{ fontSize: 11, color: 'var(--tm-fg-4)' }}>Total A. Tributos (R$)</label>
            <input className="input" type="number" step="0.01" readOnly value={totalApTrib.toFixed(2)}
              style={{ opacity: 0.7, fontWeight: 600 }} />
          </div>
        </div>
      </div>

      {/* ═══════════════════════════════════════════════════════════════════ */}
      {/* SECTION 6 — TRANSPORTADOR / VOLUMES                              */}
      {/* ═══════════════════════════════════════════════════════════════════ */}
      <SectionLabel>Transportador / Volumes</SectionLabel>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        <div className="field">
          <label style={lbl}>Transporte</label>
          <select className="input" value={modalidadeFrete} onChange={e => setModalidadeFrete(e.target.value)}>
            {MODALIDADES_FRETE.map(m => (
              <option key={m.id} value={m.id}>{m.label}</option>
            ))}
          </select>
        </div>
        <div className="field">
          <label style={lbl}>Frete por conta</label>
          <select className="input" value={fretePorConta} onChange={e => setFretePorConta(e.target.value)}>
            <option value="0 - Contratação do Frete por conta do Remetente (CIF)">0 - Contratação do Frete por conta do Remetente (CIF)</option>
            <option value="1 - Contratação do Frete por conta do Destinatário (FOB)">1 - Contratação do Frete por conta do Destinatário (FOB)</option>
            <option value="2 - Contratação do Frete por conta de Terceiros">2 - Contratação do Frete por conta de Terceiros</option>
            <option value="9 - Sem Ocorrência de Transporte">9 - Sem Ocorrência de Transporte</option>
          </select>
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: 12, marginTop: 12 }}>
        <div className="field">
          <label style={lbl}>Nome do transportador</label>
          <input className="input" value={transpNome} onChange={e => setTranspNome(e.target.value)} />
        </div>
        <div className="field">
          <label style={lbl}>Placa veículo</label>
          <input className="input" value={transpPlaca} onChange={e => setTranspPlaca(e.target.value)}
            placeholder="AAA-0A00" />
        </div>
        <div className="field">
          <label style={lbl}>UF veículo</label>
          <select className="input" value={transpUf} onChange={e => setTranspUf(e.target.value)}>
            <option value="">—</option>
            {UF_LIST.map(uf => <option key={uf} value={uf}>{uf}</option>)}
          </select>
        </div>
      </div>

      {/* ── Dados do volume ── */}
      <div style={{ marginTop: 12, fontSize: 12, color: 'var(--tm-fg-3)', fontWeight: 600, marginBottom: 8 }}>
        Dados do volume
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr', gap: 12 }}>
        <div className="field">
          <label style={lbl}>Quantidade</label>
          <input className="input" type="number" value={volQtd} onChange={e => setVolQtd(e.target.value)} />
        </div>
        <div className="field">
          <label style={lbl}>Peso Bruto (kg)</label>
          <input className="input" type="number" step="0.001" value={volPesoBruto}
            onChange={e => setVolPesoBruto(e.target.value)} />
        </div>
        <div className="field">
          <label style={lbl}>Peso Líquido (kg)</label>
          <input className="input" type="number" step="0.001" value={volPesoLiquido}
            onChange={e => setVolPesoLiquido(e.target.value)} />
        </div>
        <div className="field">
          <label style={lbl}>Espécie</label>
          <input className="input" value={volEspecie} onChange={e => setVolEspecie(e.target.value)}
            placeholder="Caixa, Volume..." />
        </div>
        <div className="field">
          <label style={lbl}>Marca</label>
          <input className="input" value={volMarca} onChange={e => setVolMarca(e.target.value)} />
        </div>
      </div>

      {/* ═══════════════════════════════════════════════════════════════════ */}
      {/* SECTION 7 — PAGAMENTO                                            */}
      {/* ═══════════════════════════════════════════════════════════════════ */}
      <SectionLabel>Pagamento</SectionLabel>
      <div className="form-grid">
        <div className="field" style={{ gridColumn: 'span 2' }}>
          <label style={lbl}>Condição de pagamento</label>
          <input className="input" value={condPagamento} onChange={e => setCondPagamento(e.target.value)} />
        </div>
      </div>

      {/* ── Parcelas ── */}
      {pedido?.parcelas && pedido.parcelas.length > 0 && (
        <div style={{ overflowX: 'auto', marginTop: 12, marginBottom: 16, flexShrink: 0 }}>
          <table className="tbl" style={{ width: '100%', fontSize: 13 }}>
            <thead>
              <tr>
                <th style={{ width: 36 }}>#</th>
                <th>Vencimento</th>
                <th className="num">Valor</th>
                <th>Forma</th>
              </tr>
            </thead>
            <tbody>
              {pedido.parcelas.map((p, i) => (
                <tr key={i}>
                  <td className="muted">{i + 1}</td>
                  <td>{p.vencimento || p.data || '—'}</td>
                  <td className="num">{brl(p.valor || 0)}</td>
                  <td>{p.forma || pedido?.pgto || pedido?.forma_pagamento || '—'}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {/* ═══════════════════════════════════════════════════════════════════ */}
      {/* SECTION 8 — INFORMAÇÕES ADICIONAIS                               */}
      {/* ═══════════════════════════════════════════════════════════════════ */}
      <SectionLabel>Informações Adicionais</SectionLabel>
      <div className="form-grid">
        <div className="field" style={{ gridColumn: 'span 2' }}>
          <label style={lbl}>Informações complementares</label>
          <textarea className="input" rows={3} value={infoComplementar}
            onChange={e => setInfoComplementar(e.target.value)}
            style={{ resize: 'vertical', minHeight: 60 }} />
        </div>
        <div className="field" style={{ gridColumn: 'span 2' }}>
          <label style={lbl}>Observações internas</label>
          <textarea className="input" rows={2} value={obsInternas}
            onChange={e => setObsInternas(e.target.value)}
            style={{ resize: 'vertical', minHeight: 48 }} />
        </div>
      </div>

    </Drawer>
  );
}

// ─── Export ──────────────────────────────────────────────────────────────────

Object.assign(window, { EmpresaEmissoraForm, NFEmissaoDrawer });