// js/components/widgets/insights/IAPanel.jsx
// [Wave 5 KIMI 2026-05-15] Extraído de Insights.jsx tab='ia' — refactor zero-lógica.
// Padrão: IIFE + window.ZNX.widgets.insights.X namespace + props injection.
//
// Props (validadas FASE 1.5 = 4 props):
//   previsaoProximoMes: object | null — média 3m + tendência + previsão
//   alertasIA: array — alertas inteligentes (severidade/icon/tipo/msg)
//   anomalias: array — anomalias detectadas (icon/msg)
//   recomendacoes: array — recomendações personalizadas (icon/msg)
//
// Deps runtime globals: fmt (window.fmt).
// Widget deps (Wave 1 PR1): STitle (via window.ZNX.widgets.STitle).
(function() {
  'use strict';
  // [v224.73 + v224.55] vars+check MOVED to component body
  function IAPanel({previsaoProximoMes, alertasIA, anomalias, recomendacoes}){
    const STitle = window.ZNX?.widgets?.STitle;
    if (!STitle) {
      console.error('[IAPanel v224.73] widget faltando: STitle');
      window.Sentry?.captureMessage?.('[IAPanel v224.73] STitle missing', 'error');
    }
    return (
      <div>
        <div style={{padding:'14px 18px',background:'linear-gradient(135deg,#FEF9E7,#FFFBEB)',border:'1px solid #C8A95155',borderRadius:10,marginBottom:20}}>
          <div style={{fontSize:13,fontWeight:800,color:'#92700A',marginBottom:4}}>🤖 IA Insights — análise inteligente da operação</div>
          <div style={{fontSize:11,color:'#6B7280'}}>Detecção automática de padrões, anomalias e oportunidades baseado em dados históricos. Atualizado em tempo real.</div>
        </div>

        {/* F1 Previsão próximo mês */}
        {previsaoProximoMes&&(
          <div className="card" style={{marginBottom:16,border:'1px solid #2563EB33'}}>
            <STitle t="🔮 Previsão de Vendas — Próximo Mês" s={`Baseado em média móvel dos últimos 3 meses (${previsaoProximoMes.baseMonths.join(' · ')}) + tendência`}/>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:14}}>
              <div style={{padding:'14px 18px',background:'#EFF6FF',borderRadius:10}}>
                <div style={{fontSize:11,color:'#9CA3AF'}}>Média 3 meses</div>
                <div style={{fontSize:20,fontWeight:800,color:'#2563EB',marginTop:4}}>{fmt(previsaoProximoMes.media3)}</div>
              </div>
              <div style={{padding:'14px 18px',background:previsaoProximoMes.tendencia>=0?'#F0FDF4':'#FEE2E2',borderRadius:10}}>
                <div style={{fontSize:11,color:'#9CA3AF'}}>Tendência</div>
                <div style={{fontSize:20,fontWeight:800,color:previsaoProximoMes.tendencia>=0?'#16A34A':'#DC2626',marginTop:4}}>{previsaoProximoMes.tendencia>=0?'↑':'↓'} {Math.abs(previsaoProximoMes.tendencia).toFixed(1)}%</div>
              </div>
              <div style={{padding:'14px 18px',background:'#FEF9E7',border:'1px solid #C8A95155',borderRadius:10}}>
                <div style={{fontSize:11,color:'#92700A',fontWeight:700}}>📈 PREVISÃO PRÓXIMO MÊS</div>
                <div style={{fontSize:24,fontWeight:900,color:'#92700A',marginTop:4}}>{fmt(previsaoProximoMes.previsao)}</div>
              </div>
            </div>
            <div style={{marginTop:10,fontSize:11,color:'#9CA3AF',fontStyle:'italic'}}>⚠️ Previsão simplificada — usa apenas tendência recente. Para estimativas precisas, considerar sazonalidade, marketing e contexto.</div>
          </div>
        )}

        {/* F2 Alertas inteligentes */}
        {alertasIA.length>0&&(
          <div className="card" style={{marginBottom:16,border:'1px solid #DC262633'}}>
            <STitle t="⚠️ Alertas Inteligentes" s="Padrões anormais detectados"/>
            {alertasIA.map((a,i)=>{
              const corSev=a.severidade==='alta'?'#DC2626':a.severidade==='media'?'#EA580C':'#2563EB';
              return(
                <div key={i} style={{padding:'10px 14px',background:`${corSev}11`,border:`1px solid ${corSev}33`,borderRadius:8,marginBottom:8,display:'flex',gap:12,alignItems:'center'}}>
                  <span style={{fontSize:24}}>{a.icon}</span>
                  <div style={{flex:1}}>
                    <div style={{fontSize:13,fontWeight:700,color:corSev,textTransform:'uppercase',letterSpacing:0.3,marginBottom:2}}>{a.tipo.replace(/_/g,' ')}</div>
                    <div style={{fontSize:12,color:'#374151'}}>{a.msg}</div>
                  </div>
                </div>
              );
            })}
          </div>
        )}
        {alertasIA.length===0&&(
          <div className="card" style={{marginBottom:16,padding:30,textAlign:'center',background:'#F0FDF4',border:'1px solid #16A34A33'}}>
            <div style={{fontSize:32,marginBottom:6}}>✅</div>
            <div style={{fontSize:14,fontWeight:700,color:'#15803D'}}>Tudo normal — nenhum alerta crítico</div>
            <div style={{fontSize:11,color:'#9CA3AF',marginTop:4}}>Operação rodando dentro dos padrões esperados</div>
          </div>
        )}

        {/* F3 Anomalias */}
        {anomalias.length>0&&(
          <div className="card" style={{marginBottom:16}}>
            <STitle t="🔍 Anomalias Detectadas" s="Padrões fora do normal hoje"/>
            {anomalias.map((a,i)=>(
              <div key={i} style={{padding:'8px 12px',background:'#F8FAFB',borderRadius:6,marginBottom:6,display:'flex',gap:10,alignItems:'center',fontSize:12}}>
                <span style={{fontSize:18}}>{a.icon}</span>
                <span style={{color:'#374151'}}>{a.msg}</span>
              </div>
            ))}
          </div>
        )}

        {/* F4 Recomendações */}
        {recomendacoes.length>0&&(
          <div className="card" style={{border:'1px solid #B8984033'}}>
            <STitle t="💡 Recomendações Personalizadas" s="Ações sugeridas baseado em padrões"/>
            {recomendacoes.map((r,i)=>(
              <div key={i} style={{padding:'10px 12px',background:'#FEF9E7',border:'1px solid #C8A95133',borderRadius:8,marginBottom:8,display:'flex',gap:10,alignItems:'center'}}>
                <span style={{fontSize:22}}>{r.icon}</span>
                <span style={{fontSize:12,color:'#374151'}}>{r.msg}</span>
              </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.IAPanel = IAPanel;
})();