// js/components/widgets/insights/OperacionalPanel.jsx
// [Wave 5 KIMI 2026-05-15] Extraído de Insights.jsx tab='operacional' — refactor zero-lógica.
// Padrão: IIFE + window.ZNX.widgets.insights.X namespace + props injection.
//
// Props (validadas FASE 1.5 = 5 props):
//   sales: array — vendas histórico
//   cancelamentos: object {total, motivos[]}
//   tempoMedioRetirada: object {media, qtd, distribuicao{imediato,h6,h24,d3,d7plus}}
//   funnelExtended: object {total, ativos, rascunho, aguardando, negoc, aprovado, convertido, cancelado, recusado, pctConv, pctCancel, pctRecusa}
//   padroesHorario: object {total, pico{dow,hour,qty}, manha, tarde, noite}
//
// Deps runtime globals: isFaturada (window.isFaturada).
// Widget deps (Wave 1 PR1): KCard, STitle, HBar (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 OperacionalPanel({sales, cancelamentos, tempoMedioRetirada, funnelExtended, padroesHorario}){
    // [v224.55 FIX-PREV-21 2026-05-28] vars+check em render time
    const KCard = window.ZNX?.widgets?.KCard;
    const STitle = window.ZNX?.widgets?.STitle;
    const HBar = window.ZNX?.widgets?.HBar;
    if (!KCard || !STitle || !HBar) {
      console.error('[OperacionalPanel] widgets faltando: KCard/STitle/HBar');
      window.Sentry?.captureMessage?.('[OperacionalPanel] base widgets missing', 'error');
    }
    return (
      <div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:14,marginBottom:20}}>
          <KCard label="Total de Vendas" value={sales.filter(s=>isFaturada(s)).length} sub="histórico" color='#2563EB'/>
          <KCard label="Cancelamentos" value={cancelamentos.total} sub="quotes + sales" color='#DC2626'/>
          <KCard label="Tempo Médio Pagto" value={tempoMedioRetirada.media>0?(tempoMedioRetirada.media<24?tempoMedioRetirada.media.toFixed(1)+'h':(tempoMedioRetirada.media/24).toFixed(1)+'d'):'—'} sub={`${tempoMedioRetirada.qtd} amostras`} color='#16A34A'/>
          <KCard label="Pico de venda" value={tempoMedioRetirada.distribuicao.imediato>tempoMedioRetirada.distribuicao.h6?'<1h':tempoMedioRetirada.distribuicao.h24>tempoMedioRetirada.distribuicao.d3?'1-24h':'+24h'} sub="categoria mais comum" color='#7C3AED'/>
        </div>

        {/* E1 Funil completo */}
        <div className="card" style={{marginBottom:16}}>
          <STitle t="🔄 Funil Completo" s={`${funnelExtended.total} orçamentos no histórico`}/>
          <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:10}}>
            {[
              {label:'Em Andamento',val:funnelExtended.ativos,color:'#2563EB',sub:`Rascunho ${funnelExtended.rascunho} · Aguard ${funnelExtended.aguardando} · Negoc ${funnelExtended.negoc} · Aprov ${funnelExtended.aprovado}`},
              {label:'✅ Convertidos',val:funnelExtended.convertido,color:'#16A34A',sub:`${funnelExtended.pctConv.toFixed(1)}% do total`},
              {label:'❌ Cancelados',val:funnelExtended.cancelado,color:'#DC2626',sub:`${funnelExtended.pctCancel.toFixed(1)}% perdas`},
              {label:'🚫 Recusados',val:funnelExtended.recusado,color:'#EA580C',sub:`${funnelExtended.pctRecusa.toFixed(1)}% recusa cliente`}
            ].map((f,i)=>(
              <div key={i} style={{padding:'14px 16px',background:`${f.color}11`,border:`1px solid ${f.color}33`,borderRadius:10,textAlign:'center'}}>
                <div style={{fontSize:11,color:'#9CA3AF',fontWeight:600,textTransform:'uppercase',letterSpacing:0.5,marginBottom:4}}>{f.label}</div>
                <div style={{fontSize:28,fontWeight:900,color:f.color,lineHeight:1}}>{f.val}</div>
                <div style={{fontSize:10,color:'#9CA3AF',marginTop:4}}>{f.sub}</div>
              </div>
            ))}
          </div>
        </div>

        {/* E2 Motivos cancelamento */}
        {cancelamentos.motivos.length>0&&(
          <div className="card" style={{marginBottom:16}}>
            <STitle t="❌ Top Motivos de Cancelamento" s="Quotes + sales canceladas"/>
            {cancelamentos.motivos.map(m=>(
              <HBar key={m.motivo} label={m.motivo.slice(0,40)} value={m.count} max={cancelamentos.motivos[0].count} color='#DC2626' fmtFn={v=>v+'×'}/>
            ))}
          </div>
        )}

        {/* E3 Distribuição tempo retirada */}
        {tempoMedioRetirada.qtd>0&&(
          <div className="card" style={{marginBottom:16}}>
            <STitle t="⏱️ Distribuição Tempo até Pagamento" s={`Baseado em ${tempoMedioRetirada.qtd} vendas pagas`}/>
            <div style={{display:'grid',gridTemplateColumns:'repeat(5,1fr)',gap:10}}>
              {[
                {label:'Imediato (<1h)',val:tempoMedioRetirada.distribuicao.imediato,color:'#16A34A'},
                {label:'1–6h',val:tempoMedioRetirada.distribuicao.h6,color:'#2563EB'},
                {label:'6–24h',val:tempoMedioRetirada.distribuicao.h24,color:'#7C3AED'},
                {label:'1–3 dias',val:tempoMedioRetirada.distribuicao.d3,color:'#EA580C'},
                {label:'3+ dias',val:tempoMedioRetirada.distribuicao.d7plus,color:'#DC2626'}
              ].map((b,i)=>{
                const pct=tempoMedioRetirada.qtd>0?(b.val/tempoMedioRetirada.qtd)*100:0;
                return(
                  <div key={i} style={{textAlign:'center',padding:'12px 8px',background:`${b.color}11`,border:`1px solid ${b.color}33`,borderRadius:8}}>
                    <div style={{fontSize:10,color:'#9CA3AF',marginBottom:4}}>{b.label}</div>
                    <div style={{fontSize:20,fontWeight:800,color:b.color}}>{b.val}</div>
                    <div style={{fontSize:10,color:b.color,fontWeight:600,marginTop:2}}>{pct.toFixed(0)}%</div>
                  </div>
                );
              })}
            </div>
          </div>
        )}

        {/* E4 Padrões horário consolidado */}
        {padroesHorario.total>0&&(
          <div className="card">
            <STitle t="🕐 Padrões de Horário — Time Consolidado" s={`${padroesHorario.total} vendas com hora registrada · pico ${['Dom','Seg','Ter','Qua','Qui','Sex','Sáb'][padroesHorario.pico.dow]} ${String(padroesHorario.pico.hour).padStart(2,'0')}h–${String(padroesHorario.pico.hour+1).padStart(2,'0')}h (${padroesHorario.pico.qty} vendas)`}/>
            <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:14}}>
              {[
                {label:'🌅 Manhã (8h–12h)',val:padroesHorario.manha,color:'#2563EB'},
                {label:'☀️ Tarde (12h–18h)',val:padroesHorario.tarde,color:'#B89840'},
                {label:'🌙 Noite (18h–22h)',val:padroesHorario.noite,color:'#7C3AED'}
              ].map((b,i)=>{
                const pct=padroesHorario.total>0?(b.val/padroesHorario.total)*100:0;
                return(
                  <div key={i} style={{padding:'14px 18px',background:`${b.color}11`,border:`1px solid ${b.color}33`,borderRadius:10}}>
                    <div style={{fontSize:11,color:'#9CA3AF'}}>{b.label}</div>
                    <div style={{fontSize:24,fontWeight:900,color:b.color,marginTop:4}}>{pct.toFixed(0)}%</div>
                    <div style={{fontSize:11,color:'#374151'}}>{b.val} vendas</div>
                  </div>
                );
              })}
            </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.OperacionalPanel = OperacionalPanel;
})();