// js/components/widgets/novavenda/PaymentFretePanel.jsx
// [Wave 24 v224.5 NUCLEAR] Opções entrega + Nota Fiscal + Forma Pagamento
// Extraído de NovaVendaPage.jsx (ordem render preserved):
//   - "OPÇÕES DE ENTREGA" (L617-693) — Frete 5 opções + embalagem retirada + endereço + transportadora
//   - "NOTA FISCAL" (L695-736) — toggle + NF fields opcionais
//   - "FORMA DE PAGAMENTO" (L738-790) — Pix/Dinheiro/Misto + split
//
// Deps runtime globals: fmt
(function(){
  'use strict';

  // [v224.73 + v224.55] vars MOVED to PaymentFretePanel body (SecHead local fica IIFE-level · não usa calcs/GOLD/NAVY)
  function SecHead({icon, title}){
    return (
      <div style={{padding:'13px 20px',borderBottom:'1px solid #F0F2F5',display:'flex',alignItems:'center',gap:8}}>
        <span style={{fontSize:14}}>{icon}</span>
        <span style={{fontSize:10,fontWeight:800,color:'#6B7280',letterSpacing:1.5,textTransform:'uppercase'}}>{title}</span>
      </div>
    );
  }

  function PaymentFretePanel(props){
    // [v224.73 FIX 2026-05-30] vars em render time
    const calcs = window.ZNX && window.ZNX.novavenda && window.ZNX.novavenda.calcs;
    const GOLD = (calcs && calcs.GOLD) || '#B89840';
    const NAVY = (calcs && calcs.NAVY) || '#1B2A4A';
    const fmt = window.fmt || function(v){return 'R$ '+Number(v||0).toFixed(2);};
    const {form, setForm, total, FRETE_OPTS, nfTax} = props;

    return (
      <>
        {/* OPÇÕES DE ENTREGA (L617-693) */}
        <div style={{background:'#fff',borderRadius:10,border:'1px solid #E4E7EC',marginBottom:14,overflow:'hidden'}}>
          <SecHead icon="🚚" title="Opções de entrega"/>
          <div style={{padding:'16px 20px',display:'flex',flexDirection:'column',gap:10}}>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
              {FRETE_OPTS.map(function(opt){
                const sel = form.frete===opt.key;
                return (
                  <button key={opt.key} onClick={function(){setForm(function(f){return Object.assign({},f,{frete:opt.key, embalagem:opt.key==='Retirada'?f.embalagem:''});});}}
                    style={{padding:'14px 20px',border:'1.5px solid '+(sel?GOLD:'#E4E7EC'),borderRadius:9,background:sel?'#FFFBF0':'#fff',cursor:'pointer',textAlign:'center',transition:'all .15s',boxShadow:sel?'0 0 0 3px rgba(184,152,64,.12)':'none'}}>
                    <div style={{fontWeight:700,fontSize:14,color:sel?NAVY:'#374151'}}>{opt.label}</div>
                  </button>
                );
              })}
            </div>
            {form.frete==='Retirada' && (
              <div style={{marginTop:10}}>
                <div style={{fontSize:12,fontWeight:700,color:'#6B7280',marginBottom:8,textTransform:'uppercase',letterSpacing:0.5}}>Embalagem</div>
                <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
                  {['Sacola','Caixa'].map(function(emb){
                    const sel = form.embalagem===emb;
                    return (
                      <button key={emb} onClick={function(){setForm(function(f){return Object.assign({},f,{embalagem:sel?'':emb});});}}
                        style={{padding:'12px',border:'1.5px solid '+(sel?GOLD:'#E4E7EC'),borderRadius:9,background:sel?'#FFFBF0':'#fff',cursor:'pointer',textAlign:'center',transition:'all .15s',fontWeight:700,fontSize:13,color:sel?NAVY:'#9CA3AF'}}>
                        {emb==='Sacola'?'🛍️ Sacola':'📦 Caixa'}
                      </button>
                    );
                  })}
                </div>
              </div>
            )}
            {(form.frete==='PAC' || form.frete==='Sedex' || form.frete==='Motoboy') && (function(){
              const ee = form.enderecoEntrega || {};
              const inp = function(field, placeholder){
                return (
                  <input key={field} value={ee[field]||''} placeholder={placeholder}
                    onChange={function(e){setForm(function(f){return Object.assign({},f,{enderecoEntrega:Object.assign({},f.enderecoEntrega||{},(function(){var o={}; o[field]=e.target.value; return o;})())});});}}
                    style={{padding:'9px 12px',borderRadius:8,border:'1.5px solid #D1D5DB',fontSize:13,color:'#374151',outline:'none',fontFamily:"'Plus Jakarta Sans',sans-serif",width:'100%',boxSizing:'border-box'}}
                    onFocus={function(e){e.target.style.borderColor=NAVY;}}
                    onBlur={function(e){e.target.style.borderColor='#D1D5DB';}}/>
                );
              };
              return (
                <div style={{marginTop:10,background:'#F8FAFF',border:'1.5px solid #D1D5DB',borderRadius:10,padding:'14px 16px'}}>
                  <div style={{fontSize:12,fontWeight:700,color:'#374151',marginBottom:12,display:'flex',alignItems:'center',gap:6}}>
                    <span>📮</span> Endereço para {form.frete}
                  </div>
                  <div style={{display:'flex',flexDirection:'column',gap:8}}>
                    {inp('nome','Nome completo do destinatário')}
                    <div style={{display:'grid',gridTemplateColumns:'1fr 2fr',gap:8}}>
                      {inp('cep','CEP')}
                      {inp('endereco','Rua / Avenida')}
                    </div>
                    <div style={{display:'grid',gridTemplateColumns:'1fr 2fr 2fr',gap:8}}>
                      {inp('numero','Número')}
                      {inp('complemento','Complemento')}
                      {inp('bairro','Bairro')}
                    </div>
                    <div style={{display:'grid',gridTemplateColumns:'2fr 1fr',gap:8}}>
                      {inp('cidade','Cidade')}
                      {inp('estado','UF')}
                    </div>
                  </div>
                </div>
              );
            })()}
            {form.frete==='Transportadora' && (
              <React.Fragment>
                {/* [v224.42 ENTREGA TRANSPORTADORA] Data + Hora OBRIGATÓRIOS · save bloqueia se vazio */}
                <div style={{marginTop:10,background:'#FFF7ED',border:'1.5px solid #FED7AA',borderRadius:10,padding:'14px 16px'}}>
                  <div style={{fontSize:12,fontWeight:700,color:'#9A3412',marginBottom:10,display:'flex',alignItems:'center',gap:6}}>
                    <span>🚚</span> Data e Horário da Entrega <span style={{color:'#DC2626',fontSize:11}}>*</span>
                  </div>
                  <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
                    <div>
                      <label style={{fontSize:11,color:'#6B7280',fontWeight:600,display:'block',marginBottom:4}}>Data</label>
                      <input type="date"
                        value={(form.enderecoEntrega||{}).delivery_date || ''}
                        onChange={function(e){setForm(function(f){return Object.assign({},f,{enderecoEntrega:Object.assign({},f.enderecoEntrega||{},{delivery_date:e.target.value})});});}}
                        style={{width:'100%',padding:'10px 12px',borderRadius:8,border:'1.5px solid #FED7AA',fontSize:13,color:'#374151',outline:'none',boxSizing:'border-box',background:'#fff'}}/>
                    </div>
                    <div>
                      <label style={{fontSize:11,color:'#6B7280',fontWeight:600,display:'block',marginBottom:4}}>Horário</label>
                      <input type="time"
                        value={(form.enderecoEntrega||{}).delivery_time || ''}
                        onChange={function(e){setForm(function(f){return Object.assign({},f,{enderecoEntrega:Object.assign({},f.enderecoEntrega||{},{delivery_time:e.target.value})});});}}
                        style={{width:'100%',padding:'10px 12px',borderRadius:8,border:'1.5px solid #FED7AA',fontSize:13,color:'#374151',outline:'none',boxSizing:'border-box',background:'#fff'}}/>
                    </div>
                  </div>
                  {(!((form.enderecoEntrega||{}).delivery_date) || !((form.enderecoEntrega||{}).delivery_time)) && (
                    <div style={{marginTop:8,fontSize:11,color:'#DC2626',fontWeight:600}}>
                      ⚠️ Preencha data E horário · obrigatório pra Transportadora
                    </div>
                  )}
                </div>
                {/* OBS Transportadora (existente · texto livre pra etiquetar caixa) */}
                <div style={{marginTop:10,background:'#F8FAFF',border:'1.5px solid #D1D5DB',borderRadius:10,padding:'14px 16px'}}>
                  <div style={{fontSize:12,fontWeight:700,color:'#374151',marginBottom:10,display:'flex',alignItems:'center',gap:6}}>
                    <span>📦</span> O que escrever na caixa
                  </div>
                  <textarea value={form.obsTransportadora||''} onChange={function(e){setForm(function(f){return Object.assign({},f,{obsTransportadora:e.target.value});});}}
                    placeholder="Ex: FRAGIL — João Silva — Rua das Flores, 123 — São Paulo/SP — (11) 99999-9999"
                    rows={3}
                    style={{width:'100%',padding:'10px 12px',borderRadius:8,border:'1.5px solid #D1D5DB',fontSize:13,color:'#374151',outline:'none',resize:'vertical',fontFamily:"'Plus Jakarta Sans',sans-serif",boxSizing:'border-box',lineHeight:1.5,background:'#fff'}}
                    onFocus={function(e){e.target.style.borderColor=NAVY;}}
                    onBlur={function(e){e.target.style.borderColor='#D1D5DB';}}/>
                </div>
              </React.Fragment>
            )}
          </div>
        </div>

        {/* NOTA FISCAL (L695-736) */}
        <div style={{background:'#fff',borderRadius:10,border:'1px solid #E4E7EC',marginBottom:14,overflow:'hidden'}}>
          <SecHead icon="📄" title="Nota Fiscal"/>
          <div style={{padding:'14px 20px'}}>
            <button onClick={function(){setForm(function(f){return Object.assign({},f,{nfEnabled:!f.nfEnabled});});}}
              style={{width:'100%',padding:'14px',border:'1.5px solid '+(form.nfEnabled?'#B89840':'#E4E7EC'),borderRadius:10,background:form.nfEnabled?'#FFFBEB':'#F9FAFB',cursor:'pointer',display:'flex',alignItems:'center',justifyContent:'space-between',transition:'all .15s'}}>
              <span style={{display:'flex',alignItems:'center',gap:10}}>
                <span style={{fontSize:22}}>📄</span>
                <span style={{textAlign:'left'}}>
                  <div style={{fontWeight:700,fontSize:13,color:form.nfEnabled?'#1B2A4A':'#374151'}}>Cliente quer Nota Fiscal</div>
                  <div style={{fontSize:11,color:form.nfEnabled && nfTax>0?'#92700A':'#9CA3AF',marginTop:2,fontWeight:form.nfEnabled && nfTax>0?700:400}}>{form.nfEnabled && nfTax>0?'+ '+fmt(nfTax)+' (5% sobre o total)':'Adiciona 5% sobre o total da compra'}</div>
                </span>
              </span>
              <span style={{width:42,height:24,borderRadius:12,background:form.nfEnabled?'#B89840':'#D1D5DB',display:'flex',alignItems:'center',padding:'0 3px',transition:'all .2s',justifyContent:form.nfEnabled?'flex-end':'flex-start'}}>
                <span style={{width:18,height:18,borderRadius:'50%',background:'#fff',boxShadow:'0 1px 3px rgba(0,0,0,.2)'}}/>
              </span>
            </button>
            {form.nfEnabled && (function(){
              const nf = form.notaFiscal || {};
              const nfInp = function(field, placeholder){
                return (
                  <input value={nf[field]||''} placeholder={placeholder}
                    onChange={function(e){setForm(function(f){return Object.assign({},f,{notaFiscal:Object.assign({},f.notaFiscal||{},(function(){var o={}; o[field]=e.target.value; return o;})())});});}}
                    style={{padding:'9px 12px',borderRadius:8,border:'1.5px solid #D1D5DB',fontSize:13,color:'#374151',outline:'none',width:'100%',boxSizing:'border-box'}}
                    onFocus={function(e){e.target.style.borderColor='#B89840';}}
                    onBlur={function(e){e.target.style.borderColor='#D1D5DB';}}/>
                );
              };
              return (
                <div style={{marginTop:12,display:'flex',flexDirection:'column',gap:8}}>
                  <div style={{display:'grid',gridTemplateColumns:'2fr 1fr',gap:8}}>
                    {nfInp('numero','Número da NF')}
                    {nfInp('serie','Série')}
                  </div>
                  {nfInp('chave','Chave de Acesso (44 dígitos)')}
                  <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8}}>
                    {nfInp('emissao','Data de Emissão')}
                    {nfInp('cnpj','CNPJ do Emitente')}
                  </div>
                  {nfInp('obs','Observações da NF (opcional)')}
                </div>
              );
            })()}
          </div>
        </div>

        {/* FORMA DE PAGAMENTO (L738-790) */}
        <div style={{background:'#fff',borderRadius:10,border:'1px solid #E4E7EC',marginBottom:14,overflow:'hidden'}}>
          <SecHead icon="💳" title="Forma de Pagamento"/>
          <div style={{padding:'14px 20px'}}>
            <div style={{display:'flex',gap:10}}>
              {[{k:'Pix',l:'🔵 Pix'},{k:'Dinheiro Vivo',l:'💵 Dinheiro'},{k:'Misto',l:'🔀 Misto'}].map(function(opt){
                const k=opt.k, l=opt.l;
                return (
                  <button key={k} onClick={function(){setForm(function(f){
                    const sel = f.paymentMethod===k?'':k;
                    return Object.assign({},f,{paymentMethod:sel, paymentPixValue:0, paymentCashValue:0});
                  });}}
                    style={{flex:1,padding:'12px 16px',borderRadius:10,border:'2px solid '+(form.paymentMethod===k?NAVY:'#E4E7EC'),background:form.paymentMethod===k?NAVY:'#F9FAFB',color:form.paymentMethod===k?GOLD:'#374151',fontWeight:700,fontSize:14,cursor:'pointer',transition:'all .15s',display:'flex',alignItems:'center',justifyContent:'center',gap:8}}>
                    {l}
                  </button>
                );
              })}
            </div>
            {form.paymentMethod==='Misto' && (function(){
              const pix = Number(form.paymentPixValue||0);
              const cash = Number(form.paymentCashValue||0);
              const sum = Number((pix+cash).toFixed(2));
              const diff = Number((total-sum).toFixed(2));
              const ok = Math.abs(diff)<0.01 && pix>0 && cash>0;
              return (
                <div style={{marginTop:14,display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
                  <div>
                    <label style={{display:'block',fontSize:11,fontWeight:700,color:'#374151',marginBottom:4}}>🔵 Valor Pix</label>
                    <input type="number" min="0" step="0.01" value={pix||''}
                      onChange={function(e){setForm(function(f){return Object.assign({},f,{paymentPixValue:Number(e.target.value)||0});});}}
                      style={{width:'100%',padding:'10px 12px',borderRadius:8,border:'1px solid '+(ok?'#10B981':'#E4E7EC'),fontSize:14,fontWeight:600,boxSizing:'border-box'}} placeholder="0,00"/>
                  </div>
                  <div>
                    <label style={{display:'block',fontSize:11,fontWeight:700,color:'#374151',marginBottom:4}}>💵 Valor Dinheiro</label>
                    <input type="number" min="0" step="0.01" value={cash||''}
                      onChange={function(e){setForm(function(f){return Object.assign({},f,{paymentCashValue:Number(e.target.value)||0});});}}
                      style={{width:'100%',padding:'10px 12px',borderRadius:8,border:'1px solid '+(ok?'#10B981':'#E4E7EC'),fontSize:14,fontWeight:600,boxSizing:'border-box'}} placeholder="0,00"/>
                  </div>
                  <div style={{gridColumn:'1 / -1',padding:'10px 12px',borderRadius:8,background:ok?'#ECFDF5':'#FEF2F2',border:'1px solid '+(ok?'#10B98166':'#FCA5A5'),fontSize:12,fontWeight:600,color:ok?'#065F46':'#991B1B',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
                    <span>{ok?'✅ Soma confere':(diff>0?'⚠️ Falta '+fmt(diff)+' para bater com total':'⚠️ Excedeu '+fmt(Math.abs(diff))+' do total')}</span>
                    <span>Total: {fmt(total)} | Pix+Dinheiro: {fmt(sum)}</span>
                  </div>
                  <div style={{gridColumn:'1 / -1',display:'flex',gap:6}}>
                    <button type="button" onClick={function(){setForm(function(f){return Object.assign({},f,{paymentPixValue:Number((total/2).toFixed(2)), paymentCashValue:Number((total-Number((total/2).toFixed(2))).toFixed(2))});});}}
                      style={{flex:1,padding:'7px 10px',borderRadius:6,border:'1px solid #E4E7EC',background:'#fff',color:'#374151',fontSize:11,fontWeight:600,cursor:'pointer'}}>50/50</button>
                    <button type="button" onClick={function(){setForm(function(f){return Object.assign({},f,{paymentPixValue:total, paymentCashValue:0});});}}
                      style={{flex:1,padding:'7px 10px',borderRadius:6,border:'1px solid #E4E7EC',background:'#fff',color:'#374151',fontSize:11,fontWeight:600,cursor:'pointer'}}>Tudo Pix</button>
                    <button type="button" onClick={function(){setForm(function(f){return Object.assign({},f,{paymentPixValue:0, paymentCashValue:total});});}}
                      style={{flex:1,padding:'7px 10px',borderRadius:6,border:'1px solid #E4E7EC',background:'#fff',color:'#374151',fontSize:11,fontWeight:600,cursor:'pointer'}}>Tudo Dinheiro</button>
                  </div>
                </div>
              );
            })()}
            {!form.paymentMethod && <div style={{marginTop:8,fontSize:11,color:'#9CA3AF',textAlign:'center'}}>Selecione a forma de pagamento</div>}
          </div>
        </div>
      </>
    );
  }

  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets.novavenda = window.ZNX.widgets.novavenda || {};
  window.ZNX.widgets.novavenda.PaymentFretePanel = PaymentFretePanel;
})();