// js/components/widgets/insights/FinanceiroPanel.jsx
// [Wave 5 KIMI 2026-05-15] Extraído de Insights.jsx tab='financeiro' — refactor zero-lógica.
// Padrão: IIFE + window.ZNX.widgets.insights.X namespace + props injection.
//
// Props (validadas FASE 1.5 = 8 props):
//   stockHealth: object {costVal, saleVal, potentialProfit, dead[], deadCostVal, danger[]}
//   recAging: object {tot, totalPay, balance, current, d30, d60, d90, over90}
//   receivables: array — contas a receber
//   payables: array — contas a pagar
//   products: array — produtos (usado em capital por marca)
//   cashFlowProjetado: object {vencido{rec,pag}, d30{rec,pag,saldo}, d60{...}, d90{...}}
//   margemPorCategoria: array — [{cat, receita, lucro, margem}]
//   roiPorMarca: array — [{brand, capital, lucro, vendas, roi}]
//
// Deps runtime globals: fmt, extractBrand (window.fmt, window.extractBrand).
// Widget deps (Wave 1 PR1): KCard, STitle (via window.ZNX.widgets).
(function() {
  'use strict';
  // [Wave 5 KIMI + v224.55 2026-05-28] vars+check MOVED to component body (preventivo)
  // regra_validacao_helpers_runtime_quando_ordem_scripts_uncertain

  function FinanceiroPanel({stockHealth, recAging, receivables, payables, products, cashFlowProjetado, margemPorCategoria, roiPorMarca}){
    // [v224.55 FIX-PREV-19 2026-05-28] vars+check em render time
    const KCard = window.ZNX?.widgets?.KCard;
    const STitle = window.ZNX?.widgets?.STitle;
    if (!KCard || !STitle) {
      console.error('[FinanceiroPanel] widgets faltando: KCard/STitle');
      window.Sentry?.captureMessage?.('[FinanceiroPanel] base widgets missing', 'error');
    }
    return (
      <div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:14,marginBottom:20}}>
          <KCard label="Valor Estoque (custo)" value={fmt(stockHealth.costVal)} color='#A89070'/>
          <KCard label="Valor Estoque (venda)" value={fmt(stockHealth.saleVal)} color='#2563EB'/>
          <KCard label="Lucro Potencial" value={fmt(stockHealth.potentialProfit)} color='#16A34A'/>
          <KCard label="Balanço Rec – Pag" value={fmt(recAging.balance)} color={recAging.balance>=0?'#16A34A':'#DC2626'} sub={`${fmt(recAging.tot)} rec. · ${fmt(recAging.totalPay)} pag.`}/>
        </div>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:16,marginBottom:16}}>
          <div className="card">
            <STitle t="📅 Aging de Recebimentos" s="Vencimento das contas pendentes"/>
            {[{label:'No prazo (a vencer)',val:recAging.current,color:'#16A34A'},{label:'Vencido 1–30 dias',val:recAging.d30,color:'#EA580C'},{label:'Vencido 31–60 dias',val:recAging.d60,color:'#ff6600'},{label:'Vencido 61–90 dias',val:recAging.d90,color:'#DC2626'},{label:'Vencido +90 dias',val:recAging.over90,color:'#b71c1c'}].map(({label,val,color})=>(
              <div key={label} style={{marginBottom:12}}>
                <div style={{display:'flex',justifyContent:'space-between',marginBottom:4}}>
                  <span style={{fontSize:12,color:'#9CA3AF'}}>{label}</span>
                  <span style={{fontSize:13,fontWeight:700,color}}>{fmt(val)}</span>
                </div>
                <div style={{background:'#F9FAFB',borderRadius:3,height:6,overflow:'hidden'}}>
                  <div style={{height:'100%',width:`${recAging.tot>0?val/recAging.tot*100:0}%`,background:color,borderRadius:3}}/>
                </div>
              </div>
            ))}
            <div style={{borderTop:'1px solid #F3F4F6',paddingTop:10,marginTop:4,display:'flex',justifyContent:'space-between'}}>
              <span style={{fontSize:12,color:'#9CA3AF'}}>Total pendente</span>
              <span style={{fontSize:15,fontWeight:700,color:'#2563EB'}}>{fmt(recAging.tot)}</span>
            </div>
          </div>
          <div className="card">
            <STitle t="⚖️ Posição Financeira" s="Contas a receber vs a pagar"/>
            <div style={{textAlign:'center',padding:'8px 0 20px'}}>
              <div style={{fontSize:42,fontWeight:900,color:recAging.balance>=0?'#16A34A':'#DC2626',lineHeight:1}}>{recAging.balance>=0?'▲':'▼'} {fmt(Math.abs(recAging.balance))}</div>
              <div style={{fontSize:12,color:'#9CA3AF',marginTop:6}}>{recAging.balance>=0?'Saldo positivo — você tem mais a receber':'Saldo negativo — dívidas superam recebimentos'}</div>
            </div>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
              <div style={{background:'#F0FDF4',border:'1px solid #BBF7D0',borderRadius:8,padding:'14px',textAlign:'center'}}>
                <div style={{fontSize:11,color:'#9CA3AF',marginBottom:4}}>A Receber</div>
                <div style={{fontSize:20,fontWeight:800,color:'#16A34A'}}>{fmt(recAging.tot)}</div>
                <div style={{fontSize:10,color:'#6B7280',marginTop:2}}>{receivables.filter(r=>r.status==='Pendente').length} contas</div>
              </div>
              <div style={{background:'#FEF2F2',border:'1px solid #FECACA',borderRadius:8,padding:'14px',textAlign:'center'}}>
                <div style={{fontSize:11,color:'#9CA3AF',marginBottom:4}}>A Pagar</div>
                <div style={{fontSize:20,fontWeight:800,color:'#DC2626'}}>{fmt(recAging.totalPay)}</div>
                <div style={{fontSize:10,color:'#6B7280',marginTop:2}}>{payables.filter(p=>p.status==='Pendente').length} contas</div>
              </div>
            </div>
          </div>
        </div>
        <div className="card">
          <STitle t="📦 Capital em Estoque por Marca" s="Investimento por marca (preço de custo)"/>
          {(()=>{
            const byBrand={};
            for(const p of products){
              const brand=p.brand||extractBrand(p.name)||'Sem Marca';
              if(!byBrand[brand])byBrand[brand]={brand,costVal:0,saleVal:0,units:0};
              byBrand[brand].costVal+=p.stock*(p.avgCost||0);
              byBrand[brand].saleVal+=p.stock*(p.salePrice||0);
              byBrand[brand].units+=p.stock;
            }
            const list=Object.values(byBrand).filter(b=>b.costVal>0).sort((a,b)=>b.costVal-a.costVal);
            const maxC=list[0]?.costVal||1;
            return list.map(b=>(
              <div key={b.brand} style={{display:'flex',alignItems:'center',gap:10,marginBottom:8}}>
                <div style={{width:110,fontSize:11,color:'#9CA3AF',textAlign:'right',flexShrink:0,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{b.brand}</div>
                <div style={{flex:1,height:16,background:'#F9FAFB',borderRadius:4,overflow:'hidden',position:'relative'}}>
                  <div style={{position:'absolute',top:0,left:0,height:'100%',width:`${b.costVal/maxC*100}%`,background:'#2563EB33',borderRadius:4}}/>
                  <div style={{position:'absolute',top:0,left:0,height:'100%',width:`${b.costVal/maxC*60}%`,background:'#2563EB',borderRadius:4}}/>
                </div>
                <div style={{fontSize:11,color:'#2563EB',minWidth:90,textAlign:'right',fontWeight:600}}>{fmt(b.costVal)}</div>
                <div style={{fontSize:10,color:'#6B7280',minWidth:55,textAlign:'right'}}>{b.units} un.</div>
              </div>
            ));
          })()}
        </div>

        {/* [NOVO v112] D1 Cash Flow Projetado + D3 Margem por Categoria + D4 ROI por Marca */}
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:16,marginTop:16}}>
          <div className="card">
            <STitle t="💵 Cash Flow Projetado" s="Saldo Receber − Pagar acumulado"/>
            {[
              {label:'Vencidos (atraso)',rec:cashFlowProjetado.vencido.rec,pag:cashFlowProjetado.vencido.pag,saldo:cashFlowProjetado.vencido.rec-cashFlowProjetado.vencido.pag,colorBg:'#FEE2E2'},
              {label:'Próx. 30 dias',rec:cashFlowProjetado.d30.rec,pag:cashFlowProjetado.d30.pag,saldo:cashFlowProjetado.d30.saldo,colorBg:'#EFF6FF'},
              {label:'Próx. 60 dias (acumulado)',rec:cashFlowProjetado.d60.rec,pag:cashFlowProjetado.d60.pag,saldo:cashFlowProjetado.d60.saldo,colorBg:'#F0FDF4'},
              {label:'Próx. 90 dias (acumulado)',rec:cashFlowProjetado.d90.rec,pag:cashFlowProjetado.d90.pag,saldo:cashFlowProjetado.d90.saldo,colorBg:'#FEF9E7'}
            ].map(({label,rec,pag,saldo,colorBg})=>(
              <div key={label} style={{padding:'10px 12px',background:colorBg,borderRadius:8,marginBottom:8}}>
                <div style={{fontSize:11,color:'#374151',fontWeight:600,marginBottom:6}}>{label}</div>
                <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:8,fontSize:11}}>
                  <div>
                    <div style={{color:'#9CA3AF',fontSize:9}}>Receber</div>
                    <div style={{color:'#16A34A',fontWeight:700}}>{fmt(rec)}</div>
                  </div>
                  <div>
                    <div style={{color:'#9CA3AF',fontSize:9}}>Pagar</div>
                    <div style={{color:'#DC2626',fontWeight:700}}>−{fmt(pag)}</div>
                  </div>
                  <div>
                    <div style={{color:'#9CA3AF',fontSize:9}}>Saldo</div>
                    <div style={{color:saldo>=0?'#16A34A':'#DC2626',fontWeight:800}}>{saldo>=0?'+':''}{fmt(saldo)}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>

          <div className="card">
            <STitle t="📊 Margem por Categoria" s="Lucro real (preço − avg_cost)"/>
            {margemPorCategoria.length===0?
              <div style={{fontSize:12,color:'#9CA3AF',padding:20,textAlign:'center'}}>Sem dados de categoria</div>:
              margemPorCategoria.map((c,i)=>{
                const corM=c.margem>=40?'#16A34A':c.margem>=25?'#2563EB':'#EA580C';
                return(
                  <div key={c.cat} style={{padding:'10px 0',borderBottom:'1px solid #F3F4F6'}}>
                    <div style={{display:'flex',justifyContent:'space-between',fontSize:12,marginBottom:4}}>
                      <span style={{fontWeight:600,color:'#374151'}}>{i+1}. {c.cat}</span>
                      <span style={{fontWeight:700,color:corM}}>{c.margem.toFixed(1)}%</span>
                    </div>
                    <div style={{display:'flex',gap:14,fontSize:10,color:'#9CA3AF'}}>
                      <span>Receita: {fmt(c.receita)}</span>
                      <span>Lucro: <strong style={{color:corM}}>{fmt(c.lucro)}</strong></span>
                    </div>
                  </div>
                );
              })
            }
          </div>
        </div>

        {/* D4 ROI por Marca */}
        {roiPorMarca.length>0&&(
          <div className="card" style={{marginTop:16}}>
            <STitle t="📈 ROI por Marca" s="Lucro do mês ÷ capital parado em estoque · top 15"/>
            <div style={{overflowX:'auto'}}>
              <table style={{width:'100%',fontSize:12,minWidth:600}}>
                <thead><tr style={{background:'#F8FAFB'}}>
                  <th style={{textAlign:'left',padding:'8px 6px'}}>Marca</th>
                  <th style={{textAlign:'right',padding:'8px 6px'}}>Capital parado</th>
                  <th style={{textAlign:'right',padding:'8px 6px'}}>Lucro do mês</th>
                  <th style={{textAlign:'right',padding:'8px 6px'}}>Vendas</th>
                  <th style={{textAlign:'right',padding:'8px 6px'}}>ROI mensal</th>
                </tr></thead>
                <tbody>
                  {roiPorMarca.map((b,i)=>{
                    const corR=b.roi>=10?'#16A34A':b.roi>=5?'#2563EB':b.roi>=0?'#EA580C':'#DC2626';
                    return(
                      <tr key={b.brand} style={{borderBottom:'1px solid #F3F4F6'}}>
                        <td style={{padding:'8px 6px',fontWeight:600}}>{i+1}. {b.brand}</td>
                        <td style={{padding:'8px 6px',textAlign:'right',color:'#9CA3AF'}}>{fmt(b.capital)}</td>
                        <td style={{padding:'8px 6px',textAlign:'right',color:b.lucro>=0?'#16A34A':'#DC2626',fontWeight:700}}>{fmt(b.lucro)}</td>
                        <td style={{padding:'8px 6px',textAlign:'right',color:'#374151'}}>{b.vendas}</td>
                        <td style={{padding:'8px 6px',textAlign:'right'}}><span style={{padding:'3px 10px',background:`${corR}22`,color:corR,borderRadius:4,fontWeight:800}}>{b.roi.toFixed(1)}%</span></td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
            <div style={{marginTop:10,fontSize:11,color:'#9CA3AF',fontStyle:'italic'}}>💡 Marcas com ROI baixo = capital parado mal aproveitado. Marcas com ROI alto = bom investimento.</div>
          </div>
        )}
      </div>
    );
  }

  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets.insights = window.ZNX.widgets.insights || {};
  window.ZNX.widgets.insights.FinanceiroPanel = FinanceiroPanel;
})();