/* ============================================================
   Omnitok Analytics — vista EN VIVO (Workers Analytics Engine)
   Polling 10 s a OA.rtSummary; filtros combinables locales
   {brand?, sku?, retailer?, country?} (AND). Con account!=='all'
   la marca queda fijada por el selector de cuenta.
   ============================================================ */
const { useState:rS, useEffect:rE, useRef:rRef } = React;

/* Barras por minuto: rects en viewBox estirado + etiquetas HTML (sin distorsión) */
function RtBars({series, minutes}){
  const H=170, W=600;
  const max=Math.max(1,...series.map(d=>d.v));
  const bw=W/series.length;
  return React.createElement('div',null,
    React.createElement('svg',{viewBox:`0 0 ${W} ${H}`,preserveAspectRatio:'none',
      style:{width:'100%',height:H,display:'block'}},
      [1,2,3].map(g=>React.createElement('line',{key:g,x1:0,x2:W,y1:H-4-(H-24)*g/3.5,y2:H-4-(H-24)*g/3.5,stroke:'#F5F5F5'})),
      series.map((d,i)=>{
        const h=(d.v/max)*(H-24), last=i===series.length-1;
        return React.createElement('rect',{key:i,x:i*bw+1,y:H-4-h,width:Math.max(1,bw-2),height:Math.max(h,d.v>0?2:0),rx:2,
          fill:last?'#FF177B':'#4D4A9D',opacity:last?1:(0.3+0.6*i/series.length)});
      })),
    React.createElement('div',{style:{display:'flex',justifyContent:'space-between',fontSize:11,color:'#A3A3A3',fontWeight:700,marginTop:6}},
      React.createElement('span',null,'-'+minutes+' min'),
      React.createElement('span',null,'-'+Math.round(minutes/2)+' min'),
      React.createElement('span',null,OA.t('rt_now'))));
}

function RealtimeView({account}){
  const isAdmin = account==='all';
  const [win,setWin]=rS('15m');
  const [f,setF]=rS({});                 // {brand?, sku?, retailer?, country?}
  const [data,setData]=rS(null);
  const [err,setErr]=rS(null);
  const [updAt,setUpdAt]=rS(null);
  const [,tickR]=rS(0);                  // re-render del "hace Xs"
  const timerRef=rRef(null);

  // cambiar de cuenta invalida el filtro local de marca
  rE(()=>{ setF(prev=>{ if(!prev.brand) return prev; const n={...prev}; delete n.brand; return n; }); },[account]);

  rE(()=>{
    let alive=true;
    const fetchNow=async()=>{
      try{
        const d=await OA.rtSummary({brand:isAdmin?(f.brand||'all'):account,
          sku:f.sku, retailer:f.retailer, country:f.country, window:win});
        if(!alive) return;
        setData(d); setErr(null); setUpdAt(Date.now());
      }catch(e){ if(alive){ setErr(String(e&&e.message||e)); } }
    };
    fetchNow();
    timerRef.current=setInterval(fetchNow,10000);
    return ()=>{ alive=false; clearInterval(timerRef.current); };
  },[account,win,f.brand,f.sku,f.retailer,f.country]);

  rE(()=>{ const t=setInterval(()=>tickR(x=>x+1),1000); return ()=>clearInterval(t); },[]);

  const toggle=(k,v)=> setF(prev=>{
    const n={...prev};
    if(n[k]===v) delete n[k]; else n[k]=v;
    return n;
  });

  /* ---- estados especiales ---- */
  if(data && data.enabled===false){
    return React.createElement('div',{className:'card'},
      React.createElement('div',{className:'empty'},
        React.createElement(Icon.bolt,null),
        React.createElement('div',{style:{fontWeight:800,color:'#525252',marginBottom:4}},OA.t('rt_disabled')),
        React.createElement('div',{style:{fontSize:12.5}},OA.t('rt_disabled_hint'))));
  }
  if(!data && err){
    return React.createElement('div',{className:'card'},
      React.createElement('div',{className:'empty'},React.createElement(Icon.info,null),OA.t('rt_err')));
  }
  if(!data){
    return React.createElement('div',{className:'card'},
      React.createElement('div',{className:'empty'},React.createElement('div',{className:'spinner'}),OA.t('loading')));
  }

  const minutes=(data.window&&data.window.minutes)||15;
  const K=data.kpis||{views:0,retailers:0,countries:0,skus:0};
  const T=data.top||{};

  // eje completo de minutos (AE solo devuelve buckets con datos)
  const byMin={};
  (data.series||[]).forEach(r=>{ const ts=Date.parse(String(r.t).replace(' ','T')+'Z'); if(ts) byMin[Math.floor(ts/60000)]=r.views; });
  const nowMin=Math.floor(Date.now()/60000);
  const series=[]; for(let i=minutes-1;i>=0;i--){ series.push({v:byMin[nowMin-i]||0}); }
  const perMin=series.length?series[series.length-1].v||series[series.length-2]?.v||0:0;

  const secsAgo=updAt?Math.max(0,Math.round((Date.now()-updAt)/1000)):null;
  const mkItems=(arr)=> (arr||[]).map(o=>({k:o.key,v:o.views}));

  const chipDefs=[];
  if(isAdmin&&f.brand) chipDefs.push({k:'brand',label:OA.t('brand'),val:f.brand});
  if(f.sku) chipDefs.push({k:'sku',label:OA.t('sku'),val:f.sku});
  if(f.retailer) chipDefs.push({k:'retailer',label:OA.t('retailer'),val:OA.rName(f.retailer)});
  if(f.country) chipDefs.push({k:'country',label:OA.t('country'),val:OA.countryName(f.country,OA.lang)});

  const kpiCards=[
    {icon:Icon.eye,tint:{bg:'#EEF0FB',fg:'#4D4A9D'},label:OA.t('rt_viewsWin'),desc:minutes+' min',v:K.views},
    {icon:Icon.bolt,tint:{bg:'#FFE6F1',fg:'#FF177B'},label:OA.t('rt_perMin'),desc:OA.t('rt_now'),v:perMin},
    {icon:Icon.store,tint:{bg:'#E6F7F4',fg:'#14B8A6'},label:OA.t('rt_actRet'),desc:minutes+' min',v:K.retailers},
    {icon:Icon.globe,tint:{bg:'#FEF3DC',fg:'#D97706'},label:OA.t('rt_actCo'),desc:minutes+' min',v:K.countries},
    {icon:Icon.box,tint:{bg:'#E6EEFD',fg:'#3B82F6'},label:OA.t('rt_actSku'),desc:minutes+' min',v:K.skus},
  ];

  return React.createElement('div',null,
    /* barra propia: ventana + chips + estado de frescura */
    React.createElement('div',{className:'filters'},
      React.createElement('div',{className:'filt-group'},
        React.createElement('span',{className:'filt-label'},OA.t('period')),
        React.createElement('div',{className:'seg'},
          [['15m','rt_win15'],['60m','rt_win60']].map(([p,k])=>
            React.createElement('button',{key:p,className:win===p?'on':'',onClick:()=>setWin(p)},OA.t(k))))),
      React.createElement('div',{style:{width:1,height:26,background:'#E5E5E5'}}),
      React.createElement('span',{style:{fontSize:12,color:'#737373',fontWeight:600}},OA.t('rt_drill')),
      React.createElement('div',{className:'filt-spacer'}),
      chipDefs.length>0&&React.createElement('div',{className:'chips'},
        chipDefs.map(c=>React.createElement('span',{key:c.k,className:'chip'},
          React.createElement('span',null,c.label,': ',React.createElement('b',null,c.val)),
          React.createElement('button',{onClick:()=>toggle(c.k,f[c.k])},'×'))),
        React.createElement('button',{className:'chip-clear',onClick:()=>setF({})},OA.t('clearFilters'))),
      React.createElement('span',{className:'hdr-pill'},
        React.createElement('span',{className:'live-dot'}),
        err?OA.t('rt_err'):(secsAgo==null?OA.t('loading'):OA.t('rt_updated')+' '+secsAgo+' s'))),

    React.createElement('div',{className:'grid g-kpi',style:{marginBottom:16}},
      kpiCards.map((c,i)=>React.createElement(Kpi,{key:i,icon:c.icon,tint:c.tint,label:c.label,desc:c.desc,
        value:OA.fmt(c.v),delta:null,
        spark:i===0?React.createElement(Spark,{data:series,color:c.tint.fg,w:200,h:34}):null}))),

    React.createElement('div',{className:'grid g-2',style:{marginBottom:16}},
      React.createElement(Card,{title:OA.t('rt_trend'),desc:OA.t('rt_trend_d'),
        tools:React.createElement('span',{className:'badge bg-accent'},
          React.createElement('span',{className:'bd',style:{background:'#FF177B'}}),OA.t('rt')+' · <10 s')},
        React.createElement(RtBars,{series,minutes})),
      React.createElement(Card,{title:OA.t('rt_topRet')},
        React.createElement(RankBars,{items:mkItems(T.retailers),max:7,color:'#FF177B',
          fmtLabel:k=>OA.rName(k),onClick:d=>toggle('retailer',d.k)}))),

    React.createElement('div',{className:'grid '+((isAdmin&&!f.brand)?'g-3':'g-2e'),style:{marginBottom:16}},
      React.createElement(Card,{title:OA.t('rt_topCo')},
        React.createElement(RankBars,{items:mkItems(T.countries),max:7,color:'#14B8A6',
          fmtLabel:k=>OA.countryName(k,OA.lang),onClick:d=>toggle('country',d.k)})),
      React.createElement(Card,{title:OA.t('rt_devices')},
        React.createElement(RankBars,{items:mkItems(T.devices),max:5,colorByIndex:true,
          fmtLabel:k=>k==='Desktop'?OA.t('desktop'):k==='Mobile'?OA.t('mobile'):k})),
      (isAdmin&&!f.brand)&&React.createElement(Card,{title:OA.t('rt_topBrands')},
        React.createElement(RankBars,{items:(T.brands||[]).map(b=>({k:b.key,v:b.views,_n:b.name})),max:7,
          fmtLabel:k=>{ const b=(T.brands||[]).find(x=>x.key===k); return (b&&b.name)||k; },
          onClick:d=>toggle('brand',d.k)}))),

    React.createElement(Card,{title:OA.t('rt_hot'),desc:OA.t('rt_hot_d'),pad:false},
      React.createElement('div',{className:'tbl-wrap'},
        React.createElement('table',{className:'tbl'},
          React.createElement('thead',null,React.createElement('tr',null,
            React.createElement('th',null,OA.t('product')),
            React.createElement('th',null,OA.t('brand')),
            React.createElement('th',null,OA.t('category')),
            React.createElement('th',{className:'num'},OA.t('views')))),
          React.createElement('tbody',null,
            (T.skus||[]).length===0
              ? React.createElement('tr',null,React.createElement('td',{colSpan:4,style:{textAlign:'center',color:'#A3A3A3',padding:24}},OA.t('noData')))
              : (T.skus||[]).map((p,i)=>React.createElement('tr',{key:p.key||i,onClick:()=>toggle('sku',p.key)},
                  React.createElement('td',null,React.createElement('div',{className:'cell-main'},
                    React.createElement('div',{style:{minWidth:0}},
                      React.createElement('div',{className:'cell-name',style:{whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis',maxWidth:320}},p.name||p.key),
                      React.createElement('div',{className:'cell-sku'},p.key)))),
                  React.createElement('td',null,p.brand||'—'),
                  React.createElement('td',null,p.category?React.createElement(Badge,{tone:'primary'},p.category):'—'),
                  React.createElement('td',{className:'num'},OA.fmt(p.views))))))),
      React.createElement('div',{className:'card-pad',style:{paddingTop:10}},
        React.createElement('div',{className:'note-bar',style:{marginBottom:0}},
          React.createElement(Icon.info,null),
          React.createElement('span',null,OA.t('rt_source'))))));
}
window.RealtimeView=RealtimeView;