// js/components/widgets/orcamentos/QuoteViewModal.jsx
// [Wave 4 KIMI 2026-05-15] Extraído de Orcamentos.jsx L1175-1284 — refactor zero-lógica.
// Padrão: IIFE + window.ZNX.widgets.orcamentos.X namespace + props injection explícita.
//
// Modal de visualização orçamento (modo view). Mostra OrcPipeline + header info + entrega + NF +
// pagamento + items + notes + ações por status/role (Editar/Excluir/PDF/WhatsApp/Converter).
//
// Props (validadas FASE 1.5 = 13 props, ORC_STATUS_COLORS é global):
//   activeQuote: quote object (q) — quote sendo visualizado
//   clients: array — lista clientes
//   products: array — lista produtos
//   user: object — user atual (admin/financeiro pode converter)
//   convertingQuoteId: string | null — ID em conversão (loading state)
//   isTerminalQuoteStatus: function(status) — verifica status terminal
//   setModal: setter — fecha modal
//   setCancelMotivoModal: setter — abre modal cancelar
//   openEdit: function(quote) — abre modal edição
//   gerarOrcamentoPDF: function(quote, clients) — gera PDF
//   shareWhatsApp: function(quote) — compartilha WhatsApp
//   convert: function(quote) — converte em venda
//   updateNote: function(id, notes) — atualiza notas
//
// Globals runtime: fmt, fmtDate, today, saleFinalTotal, itemNet, nid, Modal, OrcPipeline,
//                  window.ORC_STATUS_COLORS (definido em OrcPipeline.jsx).
(function() {
  'use strict';

  function QuoteViewModal({
    activeQuote, clients, products, user, convertingQuoteId,
    isTerminalQuoteStatus, setModal, setCancelMotivoModal,
    openEdit, gerarOrcamentoPDF, shareWhatsApp, convert, updateNote
  }){
    if(!activeQuote) return null;
    const q=activeQuote;
    const c=clients.find(x=>x.id===q.clientId);
    const expired=q.validity&&q.validity<today()&&q.status!=='Convertido'&&q.status!=='Aprovado';
    return (
      <Modal title={`Orçamento ${q.number}`} onClose={()=>setModal(null)} large>
        <OrcPipeline status={q.status}/>
        {/* Header Info */}
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:12,marginBottom:16}}>
          <div style={{background:'#F9FAFB',borderRadius:8,padding:'12px 14px'}}>
            <div style={{fontSize:11,color:'#9CA3AF',marginBottom:4,textTransform:'uppercase',letterSpacing:.5}}>Cliente</div>
            <div style={{fontWeight:600,fontSize:14}}>{c?.name||'—'}</div>
            {(c?.phone||c?.whatsapp)&&<div style={{fontSize:11,color:'#9CA3AF',marginTop:2}}>{c.phone||c.whatsapp}</div>}
          </div>
          <div style={{background:'#F9FAFB',borderRadius:8,padding:'12px 14px'}}>
            <div style={{fontSize:11,color:'#9CA3AF',marginBottom:4,textTransform:'uppercase',letterSpacing:.5}}>Data / Validade</div>
            <div style={{fontWeight:600,fontSize:14}}>{fmtDate(q.date)}</div>
            {q.validity&&<div style={{fontSize:11,color:expired?'#DC2626':'#A89070',marginTop:2}}>Válido até {fmtDate(q.validity)}{expired?' — EXPIRADO ⚠':''}</div>}
          </div>
          <div style={{background:'#F9FAFB',borderRadius:8,padding:'12px 14px'}}>
            <div style={{fontSize:11,color:'#9CA3AF',marginBottom:4,textTransform:'uppercase',letterSpacing:.5}}>Vendedor / Status</div>
            <div style={{fontWeight:600,fontSize:14}}>{q.sellerName||'—'}</div>
            <span style={{display:'inline-block',marginTop:4,padding:'2px 8px',borderRadius:12,fontSize:11,fontWeight:700,
              background:(ORC_STATUS_COLORS[q.status]||'#A89070')+'22',
              color:ORC_STATUS_COLORS[q.status]||'#A89070',
              border:`1px solid ${(ORC_STATUS_COLORS[q.status]||'#A89070')}44`}}>
              {q.status}
            </span>
            {q.saleNumber&&<div style={{fontSize:11,color:'#2563EB',marginTop:4,fontWeight:600}}>→ Venda {q.saleNumber}</div>}
          </div>
        </div>
        {/* Entrega */}
        {(q.freteType || q.frete_type)&&(
          <div style={{background:'#EEF2FF',border:'1px solid #C7D2FE',borderRadius:8,padding:'10px 14px',marginBottom:14,fontSize:13}}>
            <span style={{fontWeight:700,color:'#1B2A4A'}}>🚚 Entrega: </span>
            <span style={{color:'#374151'}}>{(()=>{ const ft=q.freteType||q.frete_type; return ft==='Retirada'?'Retirada Presencial':ft; })()}</span>
            {(q.embalagemTipo||q.embalagem_tipo)&&<span style={{color:'#6B7280'}}> · Embalagem: {q.embalagemTipo||q.embalagem_tipo}</span>}
            {['PAC','Sedex','Motoboy'].includes(q.freteType||q.frete_type)&&q.enderecoEntrega?.nome&&(
              <div style={{marginTop:6,fontSize:12,color:'#374151'}}>
                {[q.enderecoEntrega.nome,q.enderecoEntrega.cep?'CEP '+q.enderecoEntrega.cep:'',q.enderecoEntrega.endereco,q.enderecoEntrega.numero,q.enderecoEntrega.cidade,q.enderecoEntrega.estado].filter(Boolean).join(' · ')}
              </div>
            )}
            {(q.freteType||q.frete_type)==='Transportadora'&&q.obsTransportadora&&(
              <div style={{marginTop:6,fontSize:12,color:'#374151'}}>Obs. caixa: {q.obsTransportadora}</div>
            )}
          </div>
        )}
        {q.nfEnabled&&(
          <div style={{background:'#FFFBEB',border:'1px solid #B89840',borderRadius:8,padding:'10px 14px',marginBottom:14,fontSize:13}}>
            <span style={{fontWeight:700,color:'#1B2A4A'}}>📄 Nota Fiscal: </span>
            <span style={{color:'#92700A',fontWeight:700}}>+5% = {fmt(saleFinalTotal(q)*0.05)}</span>
            {q.notaFiscal?.numero&&<span style={{color:'#6B7280',marginLeft:8}}>· NF {q.notaFiscal.numero}{q.notaFiscal.serie?' Série '+q.notaFiscal.serie:''}</span>}
            {q.notaFiscal?.cnpj&&<div style={{fontSize:11,color:'#6B7280',marginTop:4}}>CNPJ: {q.notaFiscal.cnpj}{q.notaFiscal.emissao?' · Emissão: '+q.notaFiscal.emissao:''}</div>}
            {q.notaFiscal?.chave&&<div style={{fontSize:10,color:'#9CA3AF',marginTop:2,wordBreak:'break-all'}}>Chave: {q.notaFiscal.chave}</div>}
          </div>
        )}
        {q.paymentMethod&&(
          <div style={{background:'#F0F4FF',border:'1px solid #C7D2FE',borderRadius:8,padding:'10px 14px',marginBottom:14,fontSize:13}}>
            <span style={{fontWeight:700,color:'#1B2A4A'}}>💳 Forma de Pagamento: </span>
            <span style={{color:'#2563EB',fontWeight:700}}>
              {q.paymentMethod==='Pix'?'🔵 Pix':q.paymentMethod==='Dinheiro Vivo'?'💵 Dinheiro Vivo':q.paymentMethod==='Misto'?
                `🔀 Misto — 🔵 ${fmt(Number(q.paymentPixValue||q.payment_pix_value||0))} + 💵 ${fmt(Number(q.paymentCashValue||q.payment_cash_value||0))}`:q.paymentMethod}
            </span>
          </div>
        )}
        {/* Items */}
        <div style={{background:'#FFFFFF',border:'1px solid #E4E7EC',borderRadius:8,overflow:'hidden',marginBottom:14}}>
          <table style={{margin:0}}>
            <thead><tr><th style={{padding:'10px 14px'}}>Produto</th><th>Vol.</th><th>Qtd</th><th>Preço Unit.</th><th>Subtotal</th></tr></thead>
            <tbody>
              {(q.items||[]).map((it,i)=>(
                <tr key={i}>
                  <td style={{padding:'10px 14px',fontWeight:500}}>{it.name||it.productName||it.product_name||products.find(pp=>pp.id===it.productId)?.name||'—'}</td>
                  <td style={{fontSize:12,color:'#6B7280'}}>{it.volume||(()=>{const p=products.find(x=>nid(x.id,it.productId));return p?.volume||'—';})()}</td>
                  <td>{it.qty}</td>
                  <td>{fmt(it.price)}</td>
                  <td className="gold" style={{fontWeight:700}}>{fmt(it.qty*itemNet(it))}</td>
                </tr>
              ))}
              <tr style={{background:'#FFFBEB',borderTop:'2px solid #2563EB33'}}>
                <td colSpan="4" style={{textAlign:'right',fontWeight:700,padding:'12px 14px',fontSize:14}}>TOTAL:</td>
                <td className="gold" style={{fontWeight:800,fontSize:16,padding:'12px 14px'}}>{fmt(saleFinalTotal(q))}</td>
              </tr>
            </tbody>
          </table>
        </div>
        {/* Notes */}
        <div className="form-group" style={{marginBottom:16}}>
          <label style={{display:'flex',alignItems:'center',gap:6}}>📝 Observações / Feedback do Cliente</label>
          <textarea defaultValue={q.notes||''} onBlur={e=>updateNote(q.id,e.target.value)} rows={3}
            style={{resize:'vertical'}} placeholder="Clique para adicionar observações ou feedback do cliente..."/>
        </div>
        {/* Actions */}
        <div style={{display:'flex',gap:10,justifyContent:'flex-end',flexWrap:'wrap'}}>
          <button className="btn-outline" onClick={()=>setModal(null)}>Fechar</button>
          {!isTerminalQuoteStatus(q.status)&&(
            <button className="btn-outline" style={{borderColor:'#DC2626',color:'#DC2626'}} onClick={()=>{setModal(null);setCancelMotivoModal({id:q.id,number:q.number,total:q.total,clientId:q.clientId,clientName:clients.find(c=>c.id===q.clientId)?.name||''});}}>🗑 Excluir</button>
          )}
          {!isTerminalQuoteStatus(q.status)&&(
            <button className="btn-outline" onClick={()=>openEdit(q)}>✏ Editar</button>
          )}
          <button className="btn-outline" onClick={()=>gerarOrcamentoPDF(q,clients)}>📄 Salvar PDF</button>
          <button className="btn-outline" style={{borderColor:'#25D366',color:'#25D366'}} onClick={()=>shareWhatsApp(q)}>📱 Compartilhar no WhatsApp</button>
          {!isTerminalQuoteStatus(q.status)&&(user.role==='admin'||user.role==='financeiro')&&(
            <button className="btn-gold" onClick={()=>convert(q)} disabled={!!convertingQuoteId} style={{opacity:convertingQuoteId?0.6:1,cursor:convertingQuoteId?'not-allowed':'pointer'}}>{convertingQuoteId===q.id?'⏳ Convertendo…':'→ Converter em Venda'}</button>
          )}
        </div>
      </Modal>
    );
  }

  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets.orcamentos = window.ZNX.widgets.orcamentos || {};
  window.ZNX.widgets.orcamentos.QuoteViewModal = QuoteViewModal;
})();