// js/components/widgets/entradas/NotasFreteiroPanel.jsx
// [Backlog #590 2026-05-16] Extraído de Entradas.jsx L1179-1256 — refactor zero-RPC zero-lógica.
// Padrão: IIFE + window.ZNX.widgets.entradas.X namespace + props injection.
//
// Tab notas — lista notas freteiro com progress bar (esperado vs entregue), accordion expand
// pra ver detalhes por produto, botão "Registrar Entrada desta Nota" (link cruzado pra tab entradas).
//
// Spec original dizia 426L+20props — REAL 77L+13props (CC corrigiu FASE 1.5).
//
// Props (validados FASE 2 = 13 props, ajustado de 11 estimado FASE 1.5):
//   notasFreteiro: array — notas cadastradas
//   viewNota: object | null — nota expandida atualmente
//   products: array — lookup produtos
//   inactiveLookup: object — fallback pra produtos inativos
//   suppliers: array — lookup fornecedores
//   setViewNota: setter — expand/collapse
//   setForm: setter — pre-fill form do modal Nova Entrada
//   setSelectedSupp: setter — pre-fill fornecedor
//   setSuppSearch: setter — pre-fill busca fornecedor
//   setTab: setter — pular pra tab entradas após "Registrar Entrada desta Nota"
//   setModal: setter — abrir modal Nova Entrada
//   notaProgress: fn(nota) → array — helper progresso por item
//   notaStatus: fn(nota) → 'Completo'|'Parcial'|'Pendente'
//
// Deps runtime globals: fmtDate (window.fmtDate), nid (window.nid), Icon (componente global).
(function() {
  'use strict';

  function NotasFreteiroPanel({notasFreteiro, viewNota, products, inactiveLookup, suppliers, setViewNota, setForm, setSelectedSupp, setSuppSearch, setTab, setModal, notaProgress, notaStatus}){
    return (
      <div style={{display:'flex',flexDirection:'column',gap:14}}>
        {(notasFreteiro||[]).length===0&&<div className="card" style={{textAlign:'center',color:'#9CA3AF',padding:40}}>Nenhuma nota cadastrada. Clique em <strong>+ Nova Nota</strong> para começar.</div>}
        {(notasFreteiro||[]).map(nota=>{
          const prog=notaProgress(nota);
          const totalEsp=prog.reduce((s,i)=>s+i.qtdEsperada,0);
          const totalEnt=prog.reduce((s,i)=>s+i.entregue,0);
          const pct=totalEsp>0?Math.round(totalEnt/totalEsp*100):0;
          const status=notaStatus(nota);
          const statusColor=status==='Completo'?'#16A34A':status==='Parcial'?'#EA580C':'#9CA3AF';
          const statusBg=status==='Completo'?'#DCFCE7':status==='Parcial'?'#FFEDD5':'#F3F4F6';
          const isOpen=viewNota?.id===nota.id;
          return(
            <div key={nota.id} className="card" style={{padding:0,border:`1px solid ${isOpen?'#2563EB':'#E4E7EC'}`}}>
              {/* Header da nota */}
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'14px 18px',cursor:'pointer',borderBottom:isOpen?'1px solid #F3F4F6':'none'}} onClick={()=>setViewNota(isOpen?null:nota)}>
                <div style={{display:'flex',alignItems:'center',gap:16}}>
                  <div>
                    <div style={{display:'flex',alignItems:'center',gap:8}}>
                      <span style={{fontWeight:700,fontSize:14,color:'#1C1C28'}}>{nota.number}</span>
                      <span style={{background:statusBg,color:statusColor,borderRadius:20,padding:'2px 10px',fontSize:11,fontWeight:600}}>{status}</span>
                    </div>
                    <div style={{fontSize:12,color:'#6B7280',marginTop:2}}>🚚 {nota.freteiro} · {fmtDate(nota.date)}{nota.notes&&` · ${nota.notes}`}</div>
                  </div>
                </div>
                <div style={{display:'flex',alignItems:'center',gap:16}}>
                  {/* Mini progress */}
                  <div style={{textAlign:'right'}}>
                    <div style={{fontSize:13,fontWeight:700,color:statusColor}}>{totalEnt}/{totalEsp} un. entregues</div>
                    <div style={{width:120,height:6,background:'#F3F4F6',borderRadius:3,marginTop:4,overflow:'hidden'}}>
                      <div style={{height:'100%',width:`${pct}%`,background:statusColor,borderRadius:3,transition:'width .4s'}}/>
                    </div>
                    <div style={{fontSize:11,color:'#9CA3AF',marginTop:2}}>{pct}% concluído{totalEsp-totalEnt>0?` · faltam ${totalEsp-totalEnt} un.`:''}</div>
                  </div>
                  <span style={{color:'#9CA3AF',fontSize:11}}>{isOpen?'▲':'▼'}</span>
                </div>
              </div>
              {/* Detalhe dos itens */}
              {isOpen&&(
                <div style={{padding:'14px 18px'}}>
                  <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(280px,1fr))',gap:10,marginBottom:14}}>
                    {prog.map(item=>{
                      const p=products.find(x=>nid(x.id,item.productId))||inactiveLookup[item.productId];
                      const itemPct=item.qtdEsperada>0?Math.round(item.entregue/item.qtdEsperada*100):0;
                      const iColor=item.faltando===0?'#16A34A':item.entregue>0?'#EA580C':'#9CA3AF';
                      return(
                        <div key={item.productId} style={{background:'#F9FAFB',border:'1px solid #F3F4F6',borderRadius:8,padding:'10px 14px'}}>
                          <div style={{fontWeight:600,fontSize:13,color:'#374151',marginBottom:6}}>{p?.name||`Produto inativo (${(item.productId||'').slice(0,8)}…)`}</div>
                          <div style={{display:'flex',justifyContent:'space-between',fontSize:12,marginBottom:6}}>
                            <span style={{color:'#9CA3AF'}}>Esperado: <strong style={{color:'#374151'}}>{item.qtdEsperada} un.</strong></span>
                            <span style={{color:'#9CA3AF'}}>Entregue: <strong style={{color:iColor}}>{item.entregue} un.</strong></span>
                          </div>
                          <div style={{width:'100%',height:6,background:'#E4E7EC',borderRadius:3,overflow:'hidden'}}>
                            <div style={{height:'100%',width:`${Math.min(100,itemPct)}%`,background:iColor,borderRadius:3,transition:'width .4s'}}/>
                          </div>
                          <div style={{display:'flex',justifyContent:'space-between',marginTop:4,fontSize:11}}>
                            <span style={{color:iColor,fontWeight:600}}>{itemPct}%</span>
                            {item.faltando>0&&<span style={{color:'#EA580C',fontWeight:600}}>⚠ faltam {item.faltando} un.</span>}
                            {item.faltando===0&&<span style={{color:'#16A34A',fontWeight:600}}>✓ Completo</span>}
                          </div>
                        </div>
                      );
                    })}
                  </div>
                  <button className="btn-gold btn-sm" onClick={()=>{
                    setForm(f=>({...f,notaFreteiroId:nota.id,supplierId:nota.supplierId||''}));
                    if(nota.supplierId){const s=suppliers.find(x=>x.id===nota.supplierId);if(s){setSelectedSupp(s);setSuppSearch(s.name);}}
                    setTab('entradas');setModal(true);
                  }} style={{display:'inline-flex',alignItems:'center',gap:6}}>
                    <Icon n="plus" size={12}/>Registrar Entrada desta Nota
                  </button>
                </div>
              )}
            </div>
          );
        })}
      </div>
    );
  }

  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets.entradas = window.ZNX.widgets.entradas || {};
  window.ZNX.widgets.entradas.NotasFreteiroPanel = NotasFreteiroPanel;
})();