/* ============================================================
   Omnitok Analytics — views: Overview, Products, Retailers → window
   ============================================================ */
const { useState:vS, useMemo:vM, useRef:vR } = React;

/* ---- shared helpers ---- */
function deriveName(path){
  if(!path||path==='/'||path.length<3) return null;
  let segs=path.split(/[\/]/).filter(Boolean);
  let best=''; for(const s of segs){ const letters=(s.match(/[a-zA-ZáéíóúñÁÉÍÓÚ]/g)||[]).length; if(letters>(best.match(/[a-zA-Z]/g)||[]).length && letters>4) best=s; }
  if(!best) return null;
  best=best.replace(/\.html?$/i,'').replace(/_/g,'-');
  let words=best.split('-').filter(w=> w && !/^\d{3,}$/.test(w) && w.length<24 && !/^(p|shop|product|dp|prod)$/i.test(w));
  if(words.length>9) words=words.slice(0,9);
  let name=words.join(' ').trim();
  if(name.length<4) return null;
  return name.charAt(0).toUpperCase()+name.slice(1);
}
window.deriveName=deriveName;

function productsFrom(rows){
  const m={};
  for(const e of rows){ const k=e.k; let o=m[k];
    if(!o){ o=m[k]={sku:k,brand:e.b,cat:e.c,views:0,_ret:new Set(),_ses:new Set(),_co:new Set(),devices:{},last:0,name:null,path:e.p}; }
    o.views++; o._ret.add(e.r); o._ses.add(e.s); o._co.add(e.co); o.devices[e.d]=(o.devices[e.d]||0)+1;
    if(e.t>o.last) o.last=e.t;
    if(!o.name){ const n=deriveName(e.p); if(n){o.name=n;o.path=e.p;} }
    if(o.brand==='Sin asignar'&&e.b!=='Sin asignar') o.brand=e.b;
    if(o.cat==='Sin categoría'&&e.c!=='Sin categoría') o.cat=e.c;
  }
  return Object.values(m).map(o=>{ o.reach=o._ret.size; o.nSess=o._ses.size; o.nCo=o._co.size;
    let tr=null,mx=0; for(const e of rows){} // topRetailer computed below cheaply
    return o; });
}
window.productsFrom=productsFrom;

function topRetailerForSku(rows,sku){ const m={}; for(const e of rows){ if(e.k===sku) m[e.r]=(m[e.r]||0)+1; } let b=null,mx=0; for(const k in m){ if(m[k]>mx){mx=m[k];b=k;} } return b; }
window.topRetailerForSku=topRetailerForSku;

/* mini device split bar */
function DeviceMini({devices,w}){
  const tot=Object.values(devices).reduce((a,b)=>a+b,0)||1;
  const order=['Desktop','Mobile','Tablet']; const cols={Desktop:'#4D4A9D',Mobile:'#FF177B',Tablet:'#14B8A6'};
  return React.createElement('div',{style:{display:'flex',width:w||70,height:7,borderRadius:99,overflow:'hidden',background:'#F1F0F8'}},
    order.map(d=> devices[d]?React.createElement('div',{key:d,title:d,style:{width:(devices[d]/tot*100)+'%',background:cols[d]||'#A3A3A3'}}):null));
}
window.DeviceMini=DeviceMini;

/* ============================ OVERVIEW ============================ */
function OverviewView({rows, f, kpi, drill, openProduct, dataNote}){
  const from=f.from||OA.tmin, to=f.to||OA.tmax;
  const daily=vM(()=>OA.daily(rows,from,to),[rows,from,to]);
  const devices=vM(()=>OA.rank(rows,'d'),[rows]);
  const retailers=vM(()=>OA.rank(rows,'r'),[rows]);
  const cats=vM(()=>OA.rank(rows,'c'),[rows]);
  const countries=vM(()=>OA.rank(rows,'co'),[rows]);
  const products=vM(()=> productsFrom(rows).sort((a,b)=>b.views-a.views).slice(0,6),[rows]);
  const devTot=rows.length||1;
  const mobile=(OA.countBy(rows,'d')['Mobile']||0);
  const sparkData=daily.map(d=>({v:d.v}));

  const kpiCards=[
    {icon:Icon.eye,tint:{bg:'#EEF0FB',fg:'#4D4A9D'},label:OA.t('kpi_views'),desc:OA.t('kpi_views_d'),k:kpi.views},
    {icon:Icon.store,tint:{bg:'#FFE6F1',fg:'#FF177B'},label:OA.t('kpi_retailers'),desc:OA.t('kpi_retailers_d'),k:kpi.retailers},
    {icon:Icon.box,tint:{bg:'#E6F7F4',fg:'#14B8A6'},label:OA.t('kpi_skus'),desc:OA.t('kpi_skus_d'),k:kpi.skus},
    {icon:Icon.globe,tint:{bg:'#FEF3DC',fg:'#D97706'},label:OA.t('kpi_countries'),desc:OA.t('kpi_countries_d'),k:kpi.countries},
    {icon:Icon.users,tint:{bg:'#E6EEFD',fg:'#3B82F6'},label:OA.t('kpi_sessions'),desc:OA.fmt(kpi.visitors.v)+' '+OA.t('kpi_sessions_d').toLowerCase(),k:kpi.sessions},
  ];
  return React.createElement('div',null,
    dataNote,
    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.k.v),delta:c.k.delta,
        spark:React.createElement(Spark,{data:sparkData,color:c.tint.fg,w:200,h:34})}))),

    React.createElement('div',{className:'grid g-2',style:{marginBottom:16}},
      React.createElement(Card,{title:OA.t('trend'),desc:OA.t('trend_d'),
        tools:React.createElement('span',{className:'badge bg-primary'},OA.fmt(rows.length)+' '+OA.t('contentEvents'))},
        React.createElement(TrendChart,{data:daily})),
      React.createElement(Card,{title:OA.t('deviceSplit')},
        React.createElement('div',{style:{display:'flex',flexDirection:'column',alignItems:'center',gap:14}},
          React.createElement(Donut,{data:devices.map((d,i)=>({k:d.k==='Desktop'?OA.t('desktop'):d.k==='Mobile'?OA.t('mobile'):d.k,v:d.v,color:OA.PALETTE[i]})),
            centerValue:OA.pct(mobile/devTot*100,0),centerLabel:OA.t('mobile'),onClick:(d)=>{}}),
          React.createElement(Legend,{items:devices.map((d,i)=>({k:d.k==='Desktop'?OA.t('desktop'):d.k==='Mobile'?OA.t('mobile'):d.k,v:d.v,color:OA.PALETTE[i]}))})))),

    React.createElement('div',{className:'grid g-3',style:{marginBottom:16}},
      React.createElement(Card,{title:OA.t('byRetailer'),desc:OA.t('byRetailer_d')},
        React.createElement(RankBars,{items:retailers,onClick:(d)=>drill({retailer:d.k}),fmtLabel:k=>OA.rName(k),color:'#FF177B',max:7})),
      React.createElement(Card,{title:OA.t('byCategory')},
        React.createElement(RankBars,{items:cats,onClick:(d)=>drill({category:d.k}),colorByIndex:true,max:7})),
      React.createElement(Card,{title:OA.t('byCountry')},
        React.createElement(RankBars,{items:countries,onClick:(d)=>drill({country:d.k}),fmtLabel:k=>OA.countryName(k,OA.lang),color:'#14B8A6',max:7}))),

    React.createElement('div',{className:'grid g-2'},
      React.createElement(Card,{title:OA.t('topProducts'),pad:false,
        tools:React.createElement('span',{className:'card-desc'},OA.t('drillHint'))},
        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('category')),
            React.createElement('th',{className:'num'},OA.t('reach')),
            React.createElement('th',{className:'num'},OA.t('views')))),
          React.createElement('tbody',null,
            products.map((p,i)=>React.createElement('tr',{key:p.sku,onClick:()=>openProduct(p.sku)},
              React.createElement('td',null,React.createElement('div',{className:'cell-main'},
                React.createElement(Thumb,{seed:p.sku,label:p.brand}),
                React.createElement('div',{style:{minWidth:0}},
                  React.createElement('div',{className:'cell-name',style:{whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis',maxWidth:230}}, p.name||p.sku),
                  React.createElement('div',{className:'cell-sku'}, p.brand+' · '+p.sku)))),
              React.createElement('td',null,React.createElement(Badge,{tone:'primary'},p.cat)),
              React.createElement('td',{className:'num'}, p.reach+' '+OA.t('stores').toLowerCase()),
              React.createElement('td',{className:'num'}, OA.fmt(p.views)))))) ),
      React.createElement('div',{style:{display:'flex',flexDirection:'column',gap:16}},
        React.createElement(Card,{title:OA.t('reachRetailers')},
          React.createElement('div',{style:{display:'flex',alignItems:'baseline',gap:8}},
            React.createElement('span',{style:{fontSize:38,fontWeight:800,color:'#262626',letterSpacing:'-.02em'}},OA.fmt(OA.uniq(rows,'r'))),
            React.createElement('span',{className:'muted',style:{fontSize:13,fontWeight:600}},OA.t('uniqueRetailers'))),
          React.createElement('div',{style:{marginTop:6}},
            React.createElement('span',{className:'muted',style:{fontSize:12.5}}, OA.t('avgPerStore')+': '),
            React.createElement('b',{style:{color:'#262626'}}, OA.fmt(rows.length/Math.max(1,OA.uniq(rows,'r')))+' '+OA.t('contentEvents')))),
        React.createElement(Insight,null,
          (()=>{ const topR=retailers[0], topC=cats[0]; if(!topR) return OA.t('noData');
            return React.createElement(React.Fragment,null,
              OA.lang==='es'?'Tu contenido se concentra en ':'Your content concentrates on ',
              React.createElement('b',null,OA.rName(topR.k)),
              OA.lang==='es'?` (${OA.pct(topR.v/rows.length*100,0)} de las visualizaciones). La categoría `:` (${OA.pct(topR.v/rows.length*100,0)} of views). The `,
              React.createElement('b',null,topC.k),
              OA.lang==='es'?' lidera la demanda y ':' category leads demand and ',
              React.createElement('b',null,OA.pct(mobile/devTot*100,0)),
              OA.lang==='es'?' del tráfico es móvil.':' of traffic is mobile.'); })())))
  );
}
window.OverviewView=OverviewView;

/* ============================ PRODUCTS ============================ */
function ProductsView({rows, f, drill, openProduct, setSearch, search}){
  const [sortKey,setSortKey]=vS('views'); const [sortDir,setSortDir]=vS(-1);
  const products=vM(()=>productsFrom(rows),[rows]);
  const sorted=vM(()=>{ const arr=[...products]; arr.sort((a,b)=>{ let x=a[sortKey],y=b[sortKey];
    if(typeof x==='string'){return sortDir*x.localeCompare(y);} return sortDir*((x||0)-(y||0)); }); return arr; },[products,sortKey,sortDir]);
  const onSort=(k)=>{ if(k===sortKey) setSortDir(d=>-d); else { setSortKey(k); setSortDir(-1);} };
  const cols=[
    {key:'name',label:OA.t('product'),render:(p)=>React.createElement('div',{className:'cell-main'},
      React.createElement(Thumb,{seed:p.sku,label:p.brand}),
      React.createElement('div',{style:{minWidth:0}},
        React.createElement('div',{className:'cell-name',style:{whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis',maxWidth:280}},p.name||p.sku),
        React.createElement('div',{className:'cell-sku'},p.sku)))},
    {key:'brand',label:OA.t('brand'),render:(p)=>React.createElement(Badge,{tone:'gray'},p.brand)},
    {key:'cat',label:OA.t('category'),render:(p)=>React.createElement('span',{style:{fontSize:12.5,fontWeight:600,color:'#525252'}},p.cat)},
    {key:'reach',label:OA.t('stores'),num:true,render:(p)=>p.reach},
    {key:'nSess',label:OA.t('sessions'),num:true,render:(p)=>OA.fmt(p.nSess)},
    {key:'views',label:OA.t('views'),num:true,render:(p)=>React.createElement('div',{className:'barcell'},
      React.createElement('div',{className:'track'},React.createElement('div',{className:'fill',style:{width:(p.views/Math.max(...products.map(x=>x.views))*100)+'%'}})),
      React.createElement('span',{style:{width:42,textAlign:'right'}},OA.fmt(p.views)))},
    {key:'last',label:OA.t('lastSeen'),num:true,render:(p)=>React.createElement('span',{style:{fontWeight:600,color:'#737373',fontSize:12.5}},OA.fmtDate(p.last))},
  ];
  return React.createElement('div',null,
    React.createElement('div',{className:'grid g-3',style:{marginBottom:16}},
      React.createElement(Kpi,{icon:Icon.box,tint:{bg:'#EEF0FB',fg:'#4D4A9D'},label:OA.t('kpi_skus'),desc:OA.t('productsWith'),value:OA.fmt(products.length)}),
      React.createElement(Kpi,{icon:Icon.eye,tint:{bg:'#FFE6F1',fg:'#FF177B'},label:OA.t('kpi_views'),desc:OA.t('contentEvents'),value:OA.fmt(rows.length)}),
      React.createElement(Kpi,{icon:Icon.store,tint:{bg:'#E6F7F4',fg:'#14B8A6'},label:OA.t('avgPerStore'),desc:OA.t('uniqueRetailers'),
        value:OA.fmt(products.reduce((s,p)=>s+p.reach,0)/Math.max(1,products.length))})),
    React.createElement(Card,{pad:false,
      title:OA.t('products'),desc:OA.fmt(sorted.length)+' '+OA.t('resultsN'),
      tools:React.createElement('div',{style:{position:'relative'}},
        React.createElement('span',{style:{position:'absolute',left:9,top:8,color:'#A3A3A3'}},React.createElement(Icon.search,{style:{width:15,height:15}})),
        React.createElement('input',{className:'menu-search',style:{paddingLeft:30,margin:0,minWidth:240},placeholder:OA.t('searchProd'),
          value:search||'',onChange:e=>setSearch(e.target.value)}))},
      sorted.length?React.createElement(DataTable,{columns:cols,rows:sorted.map(p=>({...p,_id:p.sku})),sortKey,sortDir,onSort,onRow:(p)=>openProduct(p.sku),pageSize:11})
        :React.createElement('div',{className:'empty'},React.createElement(Icon.box,null),OA.t('noData')))
  );
}
window.ProductsView=ProductsView;

/* ============================ RETAILERS ============================ */
function RetailersView({rows, drill, openRetailer}){
  const [sortKey,setSortKey]=vS('views'); const [sortDir,setSortDir]=vS(-1);
  const list=vM(()=>{ const m={};
    for(const e of rows){ let o=m[e.r]; if(!o){o=m[e.r]={host:e.r,name:OA.rName(e.r),country:OA.rCountry(e.r),views:0,_sku:new Set(),_brand:new Set(),_ses:new Set(),devices:{}};}
      o.views++; o._sku.add(e.k); o._brand.add(e.b); o._ses.add(e.s); o.devices[e.d]=(o.devices[e.d]||0)+1; }
    return Object.values(m).map(o=>({...o,skus:o._sku.size,brands:o._brand.size,nSess:o._ses.size}));
  },[rows]);
  const sorted=vM(()=>{ const a=[...list]; a.sort((x,y)=>{ let p=x[sortKey],q=y[sortKey]; if(typeof p==='string') return sortDir*p.localeCompare(q); return sortDir*((p||0)-(q||0)); }); return a; },[list,sortKey,sortDir]);
  const onSort=(k)=>{ if(k===sortKey)setSortDir(d=>-d); else {setSortKey(k);setSortDir(-1);} };
  const maxV=Math.max(...list.map(r=>r.views),1);
  const cols=[
    {key:'name',label:OA.t('retailer'),render:(r,i)=>React.createElement('div',{className:'cell-main'},
      React.createElement('span',{className:'rank '+(i<3?'top':'')},i+1),
      React.createElement('div',null,
        React.createElement('div',{className:'cell-name'},r.name),
        React.createElement('div',{className:'cell-sku'},r.host)))},
    {key:'country',label:OA.t('country'),render:(r)=>r.country?React.createElement(Badge,{tone:'info'},r.country):'—'},
    {key:'brands',label:OA.t('brands').split(' ')[0],num:true,render:(r)=>r.brands},
    {key:'skus',label:'SKUs',num:true,render:(r)=>r.skus},
    {key:'nSess',label:OA.t('sessions'),num:true,render:(r)=>OA.fmt(r.nSess)},
    {key:'_dev',label:OA.t('device'),sort:false,render:(r)=>React.createElement(DeviceMini,{devices:r.devices})},
    {key:'views',label:OA.t('views'),num:true,render:(r)=>React.createElement('div',{className:'barcell'},
      React.createElement('div',{className:'track'},React.createElement('div',{className:'fill',style:{width:(r.views/maxV*100)+'%',background:'#FF177B'}})),
      React.createElement('span',{style:{width:42,textAlign:'right'}},OA.fmt(r.views)))},
  ];
  const topCountry=OA.rank(rows,'co')[0];
  return React.createElement('div',null,
    React.createElement('div',{className:'grid g-3',style:{marginBottom:16}},
      React.createElement(Kpi,{icon:Icon.store,tint:{bg:'#FFE6F1',fg:'#FF177B'},label:OA.t('uniqueRetailers'),desc:OA.t('reachRetailers'),value:OA.fmt(list.length)}),
      React.createElement(Kpi,{icon:Icon.layers,tint:{bg:'#EEF0FB',fg:'#4D4A9D'},label:OA.t('avgPerStore'),desc:OA.t('contentEvents'),value:OA.fmt(rows.length/Math.max(1,list.length))}),
      React.createElement(Kpi,{icon:Icon.globe,tint:{bg:'#E6F7F4',fg:'#14B8A6'},label:OA.t('country'),desc:topCountry?OA.countryName(topCountry.k,OA.lang):'',value:topCountry?OA.pct(topCountry.v/rows.length*100,0):'—'})),
    React.createElement('div',{className:'grid g-2',style:{marginBottom:16}},
      React.createElement(Card,{title:OA.t('byRetailer'),desc:OA.t('rankByViews')},
        React.createElement(RankBars,{items:list.map(r=>({k:r.host,v:r.views})).sort((a,b)=>b.v-a.v),fmtLabel:k=>OA.rName(k),onClick:(d)=>openRetailer(d.k),color:'#FF177B',max:8})),
      React.createElement(Card,{title:OA.t('byCountry')},
        React.createElement(RankBars,{items:OA.rank(rows,'co'),fmtLabel:k=>OA.countryName(k,OA.lang),onClick:(d)=>drill({country:d.k}),color:'#14B8A6',max:8}))),
    React.createElement(Card,{pad:false,title:OA.t('retailers'),desc:OA.fmt(list.length)+' '+OA.t('resultsN')},
      React.createElement(DataTable,{columns:cols,rows:sorted.map(r=>({...r,_id:r.host})),sortKey,sortDir,onSort,onRow:(r)=>openRetailer(r.host),pageSize:12}))
  );
}
window.RetailersView=RetailersView;