// js/components/widgets/TodayHero.jsx
// [Wave 12A v223.34 20260520] Extraído de DashboardV2.jsx L290-323
// Card "HOJE" — faturamento + lucro bruto + líquido + sales count + delta vs ontem/média 7d
//
// Props:
//   todayRevenue, todayProfit, todayMargin, todayLucroLiquido, todayMarginLiquida, todayGastos
//   todaySales (array), yesterdayRevenue, last7Avg
//
// Deps runtime: window.fmt
(function(){
  'use strict';

  function TodayHero(props){
    const {
      todayRevenue=0, todayProfit=0, todayMargin=0,
      todayLucroLiquido=0, todayMarginLiquida=0, todayGastos=0,
      todaySales=[], yesterdayRevenue=0, last7Avg=0
    } = props;

    // [regra_validacao_helpers_runtime] Fail-loud se fmt não carregou
    const fmt = typeof window.fmt === 'function' ? window.fmt : (v)=>String(v);

    function deltaPct(curr,prev){
      if(prev<=0) return curr>0?'+∞%':'—';
      const pct=(curr-prev)/prev*100;
      return (pct>=0?'+':'')+pct.toFixed(0)+'%';
    }
    function deltaColor(curr,prev){
      if(prev<=0) return '#9CA3AF';
      return curr>=prev ? '#16A34A' : '#DC2626';
    }

    return (
      <div className="card" style={{padding:18,background:'linear-gradient(135deg,#FFFFFF,#F9FAFB)'}}>
        <div style={{fontSize:11,color:'#9CA3AF',fontWeight:700,textTransform:'uppercase',letterSpacing:1.5,marginBottom:8}}>
          ☀️ Hoje — {new Date().toLocaleDateString('pt-BR',{weekday:'long',day:'numeric',month:'short'})}
        </div>
        <div style={{display:'flex',alignItems:'baseline',gap:14,flexWrap:'wrap'}}>
          <div style={{fontSize:32,fontWeight:900,color:'#1B2A4A',letterSpacing:'-0.02em'}}>{fmt(todayRevenue)}</div>
          <div style={{fontSize:13,color:'#6B7280'}}>faturamento</div>
          <div style={{borderLeft:'2px solid #E5E7EB',height:24,margin:'0 6px'}}/>
          <div style={{fontSize:18,fontWeight:700,color:'#15803D'}}>{fmt(todayProfit)}</div>
          <div style={{fontSize:12,color:'#6B7280'}}>bruto · margem {todayMargin.toFixed(1)}%</div>
          <div style={{borderLeft:'2px solid #E5E7EB',height:24,margin:'0 6px'}}/>
          <div style={{fontSize:18,fontWeight:700,color:todayLucroLiquido>=0?'#16A34A':'#DC2626'}}>{fmt(todayLucroLiquido)}</div>
          <div style={{fontSize:12,color:'#6B7280'}}>líquido · margem {todayMarginLiquida.toFixed(1)}%</div>
          <div style={{borderLeft:'2px solid #E5E7EB',height:24,margin:'0 6px'}}/>
          <div style={{fontSize:14,fontWeight:600,color:'#374151'}}>{todaySales.length} {todaySales.length===1?'venda':'vendas'}</div>
        </div>
        <div style={{display:'flex',gap:18,marginTop:8,fontSize:11,color:'#6B7280'}}>
          <span>vs ontem ({fmt(yesterdayRevenue)}): <strong style={{color:deltaColor(todayRevenue,yesterdayRevenue)}}>{deltaPct(todayRevenue,yesterdayRevenue)}</strong></span>
          <span>vs média 7d ({fmt(last7Avg)}): <strong style={{color:deltaColor(todayRevenue,last7Avg)}}>{deltaPct(todayRevenue,last7Avg)}</strong></span>
          {todayGastos>0&&<span>gastos hoje: <strong style={{color:'#EA580C'}}>−{fmt(todayGastos)}</strong></span>}
        </div>
      </div>
    );
  }

  // Namespace [regra_estender_bloco_refs_fail_loud]
  window.ZNX = window.ZNX || {};
  window.ZNX.components = window.ZNX.components || {};
  window.ZNX.components.TodayHero = TodayHero;
  window.TodayHero = TodayHero;
})();