// js/components/widgets/relatorio/PLExecutivoView.jsx
// [Wave W2 PLAN 2026-05-18 v223.20] Extraído de Relatorio.jsx L714-825 (Bug #645 backlog Wave 8).
// Modal P&L Executivo full DRE — admin-only via Relatorio tab='pl'.
//
// Props (8 — threshold 15 OK):
//   tab: string — só renderiza se tab==='pl'
//   periodo: object|null — período filtrado ({y,m} ou null)
//   labelMes: fn(periodo) → string — label período
//   fs: array — notas filtradas do período
//   revenue: number — faturamento total período
//   fmt: fn(num) → string — formatador R$
//   plData: object — DRE pré-computado (subtotalBruto, creditoAplicado, fretes, embalagens,
//     descontosGlobais, receitaLiquida, cmv, margemBruta, margemBrutaPct, despesas,
//     lucroLiquido, margemLiquidaPct, comissoes, vendedoresPeriodo, receitaBruta)
//   gastosPorCategoria: array — gastos breakdown [{categoria, count, total}]
//
// Padrão: IIFE + window.ZNX.widgets.relatorio.PLExecutivoView (regra_lib_puro_js_widget_com_jsx).
(function() {
  'use strict';

  function PLExecutivoView({tab, periodo, labelMes, fs, revenue, fmt, plData, gastosPorCategoria}) {
    if (tab !== 'pl') return null;

    return (
      <div>
        <div className="card" style={{marginBottom:14,background:'linear-gradient(135deg,#0F1B36,#1B2A4A)',color:'#fff',padding:'18px 24px'}}>
          <div style={{fontSize:10,color:'#B89840',fontWeight:700,letterSpacing:2,textTransform:'uppercase',marginBottom:6}}>💰 P&L Executivo Completo</div>
          <div style={{fontSize:18,fontWeight:800,color:'#FEF9E7'}}>{periodo?labelMes(periodo):'Todo o histórico'} · {fs.length} notas</div>
          <div style={{fontSize:12,color:'#B89840',marginTop:4}}>Demonstrativo de Resultados detalhado · {fmt(revenue)} faturamento</div>
        </div>

        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:16,marginBottom:14}}>
          {/* ─── RECEITA + CUSTOS + RESULTADO ─── */}
          <div className="card">
            <div style={{fontWeight:700,color:'#10B981',marginBottom:10,fontSize:14}}>📈 RECEITA</div>
            <table style={{width:'100%',fontSize:13,marginBottom:18}}>
              <tbody>
                <tr><td style={{padding:'4px 0',color:'#374151'}}>Subtotal bruto (itens)</td><td style={{textAlign:'right',fontWeight:600}}>{fmt(plData.subtotalBruto)}</td></tr>
                <tr><td style={{padding:'4px 0',color:'#DC2626',fontSize:12}}>(-) Crédito Aplicado</td><td style={{textAlign:'right',color:'#DC2626',fontSize:12}}>-{fmt(plData.creditoAplicado)}</td></tr>
                <tr><td style={{padding:'4px 0',color:'#10B981',fontSize:12}}>(+) Fretes cobrados</td><td style={{textAlign:'right',color:'#10B981',fontSize:12}}>+{fmt(plData.fretes)}</td></tr>
                <tr><td style={{padding:'4px 0',color:'#10B981',fontSize:12}}>(+) Embalagens cobradas</td><td style={{textAlign:'right',color:'#10B981',fontSize:12}}>+{fmt(plData.embalagens)}</td></tr>
                {plData.descontosGlobais>0&&(
                  <tr><td style={{padding:'4px 0',color:'#EA580C',fontSize:11}}>(-) Descontos globais (notas)</td><td style={{textAlign:'right',color:'#EA580C',fontSize:11}}>-{fmt(plData.descontosGlobais)}</td></tr>
                )}
                <tr style={{background:'#F0FDF4',borderTop:'2px solid #15803D'}}><td style={{padding:'8px 4px',fontWeight:800,color:'#15803D'}}>= RECEITA LÍQUIDA</td><td style={{textAlign:'right',padding:'8px 4px',fontWeight:800,color:'#15803D'}}>{fmt(plData.receitaLiquida)}</td></tr>
              </tbody>
            </table>

            <div style={{fontWeight:700,color:'#DC2626',marginBottom:10,fontSize:14}}>📉 CUSTOS DAS MERCADORIAS</div>
            <table style={{width:'100%',fontSize:13,marginBottom:18}}>
              <tbody>
                <tr><td style={{padding:'4px 0',color:'#DC2626'}}>(-) COGS (custo médio × qtd vendida)</td><td style={{textAlign:'right',color:'#DC2626'}}>-{fmt(plData.cmv)}</td></tr>
                <tr style={{background:'#F0FDF4',borderTop:'2px solid #15803D'}}><td style={{padding:'8px 4px',fontWeight:800,color:'#15803D'}}>= LUCRO BRUTO</td><td style={{textAlign:'right',padding:'8px 4px',fontWeight:800,color:'#15803D'}}>{fmt(plData.margemBruta)} <span style={{fontSize:11,color:'#B89840'}}>({plData.margemBrutaPct.toFixed(1)}%)</span></td></tr>
              </tbody>
            </table>

            <div style={{fontWeight:700,color:'#B89840',marginBottom:10,fontSize:14}}>🎯 RESULTADO LÍQUIDO</div>
            <table style={{width:'100%',fontSize:13}}>
              <tbody>
                <tr><td style={{padding:'4px 0',color:'#374151'}}>Lucro Bruto</td><td style={{textAlign:'right'}}>{fmt(plData.margemBruta)}</td></tr>
                <tr><td style={{padding:'4px 0',color:'#EA580C'}}>(-) Despesas Operacionais (Gastos)</td><td style={{textAlign:'right',color:'#EA580C'}}>-{fmt(plData.despesas)}</td></tr>
                <tr style={{background:plData.lucroLiquido>=0?'#0F1B36':'#7F1D1D',color:'#fff',borderTop:'3px solid #B89840'}}>
                  <td style={{padding:'12px 8px',fontWeight:900,color:'#B89840',fontSize:14}}>= LUCRO LÍQUIDO</td>
                  <td style={{padding:'12px 8px',textAlign:'right',fontWeight:900,color:'#fff',fontSize:16}}>{fmt(plData.lucroLiquido)} <span style={{color:'#B89840',fontSize:11}}>({plData.margemLiquidaPct.toFixed(1)}%)</span></td>
                </tr>
              </tbody>
            </table>
          </div>

          {/* ─── BREAKDOWN GASTOS + COMISSÕES INFO ─── */}
          <div className="card">
            <div style={{fontWeight:700,color:'#EA580C',marginBottom:10,fontSize:14}}>💸 DESPESAS POR CATEGORIA</div>
            {gastosPorCategoria.length===0?(
              <div style={{padding:'20px 0',color:'#9CA3AF',fontSize:13,textAlign:'center'}}>Nenhum gasto Pago/Parcial no período</div>
            ):(
              <table style={{width:'100%',fontSize:13,marginBottom:18}}>
                <thead><tr style={{borderBottom:'1px solid #E5E7EB'}}>
                  <th style={{textAlign:'left',padding:'6px 0',color:'#6B7280',fontWeight:600,fontSize:11}}>Categoria</th>
                  <th style={{textAlign:'center',padding:'6px 0',color:'#6B7280',fontWeight:600,fontSize:11}}>Qtd</th>
                  <th style={{textAlign:'right',padding:'6px 0',color:'#6B7280',fontWeight:600,fontSize:11}}>Total</th>
                  <th style={{textAlign:'right',padding:'6px 0',color:'#6B7280',fontWeight:600,fontSize:11}}>% do mês</th>
                </tr></thead>
                <tbody>
                  {gastosPorCategoria.map(g=>(
                    <tr key={g.categoria} style={{borderBottom:'1px solid #F3F4F6'}}>
                      <td style={{padding:'6px 0',color:'#374151'}}>{g.categoria}</td>
                      <td style={{textAlign:'center',padding:'6px 0',color:'#6B7280',fontSize:12}}>{g.count}</td>
                      <td style={{textAlign:'right',padding:'6px 0',color:'#DC2626',fontWeight:600}}>-{fmt(g.total)}</td>
                      <td style={{textAlign:'right',padding:'6px 0',color:'#9CA3AF',fontSize:11}}>{plData.despesas>0?((g.total/plData.despesas)*100).toFixed(1):'0'}%</td>
                    </tr>
                  ))}
                  <tr style={{background:'#FEF3C7',borderTop:'2px solid #B89840'}}>
                    <td style={{padding:'8px 0',fontWeight:800,color:'#92700A'}}>TOTAL DESPESAS</td>
                    <td style={{textAlign:'center',padding:'8px 0',fontWeight:700,color:'#92700A'}}>{gastosPorCategoria.reduce((s,g)=>s+g.count,0)}</td>
                    <td style={{textAlign:'right',padding:'8px 0',fontWeight:800,color:'#92700A'}}>-{fmt(plData.despesas)}</td>
                    <td style={{textAlign:'right',padding:'8px 0',color:'#92700A',fontSize:11}}>100%</td>
                  </tr>
                </tbody>
              </table>
            )}

            <div style={{marginTop:18,padding:'12px 14px',background:'#EFF6FF',borderLeft:'4px solid #2563EB',borderRadius:4}}>
              <div style={{fontWeight:700,color:'#1E40AF',fontSize:13,marginBottom:6}}>📊 Comissões estimadas (info derivada)</div>
              <div style={{fontSize:18,fontWeight:800,color:'#1E40AF'}}>{fmt(plData.comissoes)}</div>
              <div style={{fontSize:11,color:'#6B7280',marginTop:6,lineHeight:1.5}}>
                Calculado em JS pela regra V4 (1% se vendedor bate meta, 0,5% senão). <strong>NÃO subtraído</strong> do Lucro Líquido — já entra em "Folha de Pagamento" quando admin paga via Gastos (regra Bug #619).
              </div>
            </div>

            {Object.keys(plData.vendedoresPeriodo||{}).length>0&&(
              <div style={{marginTop:14}}>
                <div style={{fontWeight:700,color:'#1B2A4A',fontSize:13,marginBottom:8}}>👥 Top vendedoras (período)</div>
                <table style={{width:'100%',fontSize:12}}>
                  <tbody>
                    {Object.entries(plData.vendedoresPeriodo||{}).sort((a,b)=>b[1]-a[1]).slice(0,5).map(([nome,val],i)=>(
                      <tr key={nome} style={{borderBottom:'1px solid #F3F4F6'}}>
                        <td style={{padding:'5px 0',color:'#6B7280',fontSize:11,width:20}}>#{i+1}</td>
                        <td style={{padding:'5px 0',color:'#374151'}}>{nome}</td>
                        <td style={{textAlign:'right',padding:'5px 0',color:'#B89840',fontWeight:700}}>{fmt(val)}</td>
                        <td style={{textAlign:'right',padding:'5px 0',color:'#9CA3AF',fontSize:11,width:60}}>{plData.receitaBruta>0?((val/plData.receitaBruta)*100).toFixed(1):'0'}%</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </div>
        </div>

        <div style={{fontSize:11,color:'#9CA3AF',padding:'10px 14px',background:'#F9FAFB',borderRadius:6,marginTop:8,lineHeight:1.6}}>
          💡 <strong>Como ler:</strong> Lucro Bruto = Receita Líquida − COGS (custo das mercadorias). Lucro Líquido = Lucro Bruto − Despesas Operacionais (Gastos Pago+Parcial do período). Comissões reais entram em "Folha de Pagamento" quando admin paga via aba Gastos. Para exportar PDF, use o botão "📄 PDF Executivo" no topo.
        </div>
      </div>
    );
  }

  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets.relatorio = window.ZNX.widgets.relatorio || {};
  window.ZNX.widgets.relatorio.PLExecutivoView = PLExecutivoView;
})();