// js/components/widgets/clientes/InsightsTabView.jsx
// [Wave 17 v223.43 20260521] Aba Insights admin-only — extraído de Clientes.jsx L636-781
// Props: visibleClients, clientLTV, clientHealthMap (Map), healthBuckets,
//        growthData, maxGrowth, thisMonth, lastMonth, semData, user, onOpen360
// Deps runtime: window.fmt, window.nid
(function(){
  'use strict';

  function InsightsTabView(props){
    const visibleClients = props.visibleClients || [];
    const clientLTV = props.clientLTV || [];
    const clientHealthMap = props.clientHealthMap || new Map();
    const healthBuckets = props.healthBuckets || { quente:0, saudavel:0, atencao:0, critico:0 };
    const growthData = props.growthData || [];
    const maxGrowth = Number(props.maxGrowth || 1);
    const thisMonth = props.thisMonth || null;
    const lastMonth = props.lastMonth || null;
    const semData = Number(props.semData || 0);
    const user = props.user || {};
    const onOpen360 = props.onOpen360 || function(){};

    const fmt = (typeof window.fmt === 'function') ? window.fmt : function(v){ return 'R$ '+Number(v||0).toFixed(2); };
    const nid = (typeof window.nid === 'function') ? window.nid : function(a,b){ return String(a) === String(b); };

    return (
      <>
        <div className="page-header">
          <div className="page-title">📊 Insights de Clientes</div>
          <div style={{fontSize:12,color:'#6B7280'}}>Health Score, LTV, churn, inativos e crescimento da base</div>
        </div>

        {/* [Onda 3a] Health Score buckets */}
        <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:12,marginBottom:14}}>
          <div className="stat-card" style={{borderLeft:'4px solid #16A34A'}}>
            <div className="stat-label">🔥 Quentes (80-100)</div>
            <div className="stat-value" style={{color:'#16A34A'}}>{healthBuckets.quente}</div>
            <div style={{fontSize:11,color:'#6B7280'}}>{visibleClients.length>0?(healthBuckets.quente/visibleClients.length*100).toFixed(0):0}% da base — fidelizar</div>
          </div>
          <div className="stat-card" style={{borderLeft:'4px solid #2563EB'}}>
            <div className="stat-label">✅ Saudáveis (60-79)</div>
            <div className="stat-value" style={{color:'#2563EB'}}>{healthBuckets.saudavel}</div>
            <div style={{fontSize:11,color:'#6B7280'}}>cross-sell + frequência</div>
          </div>
          <div className="stat-card" style={{borderLeft:'4px solid #EA580C'}}>
            <div className="stat-label">⚠️ Atenção (30-59)</div>
            <div className="stat-value" style={{color:'#EA580C'}}>{healthBuckets.atencao}</div>
            <div style={{fontSize:11,color:'#6B7280'}}>ligar antes de esfriar</div>
          </div>
          <div className="stat-card" style={{borderLeft:'4px solid #DC2626'}}>
            <div className="stat-label">💀 Críticos (0-29)</div>
            <div className="stat-value" style={{color:'#DC2626'}}>{healthBuckets.critico}</div>
            <div style={{fontSize:11,color:'#6B7280'}}>reativação urgente</div>
          </div>
        </div>

        {/* KPIs gerais (RFM puro por dias) */}
        <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:12,marginBottom:18}}>
          <div className="stat-card"><div className="stat-label">{user && user.role === 'vendedor' ? 'Seus Clientes' : 'Total de Clientes'}</div><div className="stat-value" style={{color:'#2563EB'}}>{visibleClients.length}</div></div>
          <div className="stat-card"><div className="stat-label">Ativos (≤30d)</div><div className="stat-value" style={{color:'#16A34A'}}>{clientLTV.filter(function(c){ return c.daysSince<=30; }).length}</div><div style={{fontSize:11,color:'#6B7280'}}>{clientLTV.length>0?(clientLTV.filter(function(c){return c.daysSince<=30;}).length/clientLTV.length*100).toFixed(0):0}% dos compradores</div></div>
          <div className="stat-card"><div className="stat-label">Risco Churn (31-90d)</div><div className="stat-value" style={{color:'#EA580C'}}>{clientLTV.filter(function(c){ return c.daysSince>30 && c.daysSince<=90; }).length}</div></div>
          <div className="stat-card"><div className="stat-label">Inativos (+90d)</div><div className="stat-value" style={{color:'#DC2626'}}>{clientLTV.filter(function(c){ return c.daysSince>90; }).length}</div></div>
        </div>

        {/* 2 colunas: Top LTV | Risco churn */}
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:16,marginBottom:16}}>
          {/* Top 15 LTV */}
          <div className="card">
            <div style={{fontSize:13,fontWeight:700,color:'#9CA3AF',marginBottom:12,textTransform:'uppercase',letterSpacing:1}}>🏆 Top 15 LTV</div>
            {clientLTV.length === 0
              ? <div style={{color:'#6B7280',fontSize:13,padding:14,textAlign:'center'}}>Nenhuma venda registrada ainda.</div>
              : clientLTV.slice(0,15).map(function(c,i){
                  const max = (clientLTV[0] && clientLTV[0].total) || 1;
                  const pct = Math.round(c.total/max*100);
                  const cli = visibleClients.find(function(x){ return nid(x.id, c.id); });
                  return (
                    <div key={c.id} onClick={function(){ if(cli) onOpen360(cli); }} style={{cursor:cli?'pointer':'default',padding:'8px 0',borderBottom:i<14?'1px solid #F3F4F6':'none'}}>
                      <div style={{display:'flex',justifyContent:'space-between',marginBottom:3}}>
                        <span style={{fontSize:13,fontWeight:600,color:i===0?'#92700A':i<3?'#EA580C':'#1B2A4A'}}>{i+1}. {c.name}</span>
                        <span style={{fontSize:13,fontWeight:700,color:'#16A34A'}}>{fmt(c.total)}</span>
                      </div>
                      <div style={{height:5,background:'#F3F4F6',borderRadius:3,overflow:'hidden'}}>
                        <div style={{width:pct+'%',height:'100%',background:i===0?'#C8A951':i<3?'#EA580C':'#3a3020'}}/>
                      </div>
                      <div style={{fontSize:10,color:'#6B7280',marginTop:2}}>{c.orders} compra(s) · ticket {fmt(c.ticket)}</div>
                    </div>
                  );
                })
            }
          </div>

          {/* Risco de Churn */}
          <div className="card">
            <div style={{fontSize:13,fontWeight:700,color:'#EA580C',marginBottom:12,textTransform:'uppercase',letterSpacing:1}}>⚠️ Risco de Churn (31-90d)</div>
            {clientLTV.filter(function(c){ return c.daysSince>30 && c.daysSince<=90; }).length === 0
              ? <div style={{color:'#16A34A',fontSize:13,padding:14,textAlign:'center'}}>✅ Nenhum cliente em risco.</div>
              : <div style={{maxHeight:480,overflowY:'auto'}}>
                  <table style={{fontSize:12}}>
                    <thead><tr><th>Cliente</th><th>Inativo</th><th>LTV</th><th>Ticket</th></tr></thead>
                    <tbody>
                      {clientLTV.filter(function(c){ return c.daysSince>30 && c.daysSince<=90; }).map(function(c){
                        const cli = visibleClients.find(function(x){ return nid(x.id, c.id); });
                        return (
                          <tr key={c.id} style={{cursor:cli?'pointer':'default'}} onClick={function(){ if(cli) onOpen360(cli); }}>
                            <td style={{fontWeight:600}}>{c.name}</td>
                            <td style={{color:'#EA580C',fontWeight:700}}>{c.daysSince}d</td>
                            <td className="gold">{fmt(c.total)}</td>
                            <td className="dim">{fmt(c.ticket)}</td>
                          </tr>
                        );
                      })}
                    </tbody>
                  </table>
                </div>
            }
          </div>
        </div>

        {/* Inativos +90d */}
        <div className="card" style={{marginBottom:16}}>
          <div style={{fontSize:13,fontWeight:700,color:'#DC2626',marginBottom:12,textTransform:'uppercase',letterSpacing:1}}>💀 Inativos (+90 dias) — reativação urgente</div>
          {clientLTV.filter(function(c){ return c.daysSince>90; }).length === 0
            ? <div style={{color:'#16A34A',fontSize:13,padding:14,textAlign:'center'}}>✅ Nenhum cliente inativo +90d.</div>
            : <div style={{maxHeight:300,overflowY:'auto'}}>
                <table style={{fontSize:12}}>
                  <thead><tr><th>Cliente</th><th>Dias Inativo</th><th>LTV Total</th><th>Ticket Médio</th></tr></thead>
                  <tbody>
                    {clientLTV.filter(function(c){ return c.daysSince>90; }).map(function(c){
                      const cli = visibleClients.find(function(x){ return nid(x.id, c.id); });
                      return (
                        <tr key={c.id} style={{cursor:cli?'pointer':'default'}} onClick={function(){ if(cli) onOpen360(cli); }}>
                          <td style={{fontWeight:600}}>{c.name}</td>
                          <td style={{color:'#DC2626',fontWeight:700}}>{c.daysSince>9000?'Sem compra':c.daysSince+'d'}</td>
                          <td className="gold">{fmt(c.total)}</td>
                          <td className="dim">{fmt(c.ticket)}</td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
          }
        </div>

        {/* Crescimento Mensal */}
        <div className="card">
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:14}}>
            <div style={{fontWeight:700,fontSize:14,color:'#2563EB'}}>📈 Novos Clientes por Mês</div>
            <div style={{display:'flex',gap:20,fontSize:12}}>
              <span style={{color:'#9CA3AF'}}>Este mês: <strong style={{color:'#374151'}}>{(thisMonth && thisMonth.count) || 0}</strong></span>
              <span style={{color:'#9CA3AF'}}>Mês anterior: <strong style={{color:'#374151'}}>{(lastMonth && lastMonth.count) || 0}</strong></span>
              {semData>0 && <span style={{color:'#6B7280'}}>Sem data: {semData}</span>}
            </div>
          </div>
          <div style={{display:'flex',alignItems:'flex-end',gap:6,height:80}}>
            {growthData.map(function(m,i){
              const isNow = i === growthData.length - 1;
              const pct = Math.round(m.count/maxGrowth*100);
              return (
                <div key={m.key} style={{flex:1,display:'flex',flexDirection:'column',alignItems:'center',gap:4}}>
                  <span style={{fontSize:10,color:m.count>0?'#2563EB':'#555',fontWeight:700}}>{m.count>0?m.count:''}</span>
                  <div style={{width:'100%',background:'#F9FAFB',borderRadius:'3px 3px 0 0',height:60,display:'flex',alignItems:'flex-end',overflow:'hidden'}}>
                    <div style={{width:'100%',height:(pct||2)+'%',background:isNow?'#2563EB':m.count>0?'#7a5c1e':'#222',borderRadius:'3px 3px 0 0',transition:'height .3s',minHeight:m.count>0?4:2}}/>
                  </div>
                  <span style={{fontSize:9,color:isNow?'#2563EB':'#555',whiteSpace:'nowrap'}}>{m.label}</span>
                </div>
              );
            })}
          </div>
        </div>
      </>
    );
  }

  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets.clientes = window.ZNX.widgets.clientes || {};
  window.ZNX.widgets.clientes.InsightsTabView = InsightsTabView;
  window.InsightsTabViewClientes = InsightsTabView; // alias
})();