/* ============================================================
   Omnitok Analytics — views: Geo, Devices, Brands, Temporal
   + detail slideovers → window
   ============================================================ */
const { useState:mS, useMemo:mM, useRef:mR } = React;

/* ============================ GEOGRAPHY ============================ */
function Cartogram({rows, drill, country}){
  const counts=mM(()=>OA.countBy(rows,'co'),[rows]);
  const max=Math.max(1,...Object.values(counts));
  let maxCol=0,maxRow=0;
  Object.keys(OA.COUNTRIES).forEach(cc=>{ const g=OA.COUNTRIES[cc].g; if(g[0]>maxCol)maxCol=g[0]; if(g[1]>maxRow)maxRow=g[1]; });
  const cell=52, gap=5;
  const present=Object.keys(counts).filter(cc=>OA.COUNTRIES[cc]);
  const color=v=>{ const t=Math.pow(v/max,.55); const l=(a,b)=>Math.round(a+(b-a)*t);
    const c1=[226,225,242], c2=[77,74,157]; return `rgb(${l(c1[0],c2[0])},${l(c1[1],c2[1])},${l(c1[2],c2[2])})`; };
  return React.createElement('div',{className:'carto',style:{width:(maxCol+1)*(cell+gap),height:(maxRow+1)*(cell+gap),margin:'4px auto',maxWidth:'100%'}},
    present.map(cc=>{ const g=OA.COUNTRIES[cc].g; const v=counts[cc]; const big=v/max>.5;
      return React.createElement('div',{key:cc,className:'ctile',title:OA.countryName(cc,OA.lang)+': '+OA.fmt(v),
        onClick:()=>drill({country:country===cc?null:cc}),
        style:{left:g[0]*(cell+gap),top:g[1]*(cell+gap),width:cell,height:cell,background:color(v),
          color: v/max>.45?'#fff':'#4D4A9D', outline:country===cc?'3px solid #FF177B':'none',outlineOffset:1}},
        React.createElement('span',{className:'cc'},cc),
        React.createElement('span',{className:'cv',style:{color:v/max>.45?'rgba(255,255,255,.85)':'#6663b3'}},OA.fmtCompact(v))); }));
}
window.Cartogram=Cartogram;

function GeoView({rows, f, drill, openRetailer}){
  const [mapMode,setMapMode]=mS('map');
  const countries=mM(()=>OA.rank(rows,'co'),[rows]);
  const cities=mM(()=>OA.rank(rows,'ci'),[rows]).filter(c=>c.k!=='—');
  const top=countries[0];
  const cityRows=cities.slice(0,40).map((c,i)=>({_id:c.k+i,city:c.k,v:c.v,
    country:(()=>{ for(const e of rows){ if(e.ci===c.k) return e.co; } return ''; })()}));
  const maxCity=Math.max(1,...cities.map(c=>c.v));
  return React.createElement('div',null,
    React.createElement('div',{className:'grid g-3',style:{marginBottom:16}},
      React.createElement(Kpi,{icon:Icon.globe,tint:{bg:'#FEF3DC',fg:'#D97706'},label:OA.t('kpi_countries'),desc:OA.t('reachGeo'),value:OA.fmt(countries.length)}),
      React.createElement(Kpi,{icon:Icon.pin,tint:{bg:'#FFE6F1',fg:'#FF177B'},label:OA.t('cities'),desc:OA.t('topCities'),value:OA.fmt(cities.length)}),
      React.createElement(Kpi,{icon:Icon.trend,tint:{bg:'#EEF0FB',fg:'#4D4A9D'},label:top?OA.countryName(top.k,OA.lang):'—',desc:OA.t('ofTotal'),value:top?OA.pct(top.v/rows.length*100,0):'—'})),
    React.createElement('div',{className:'grid g-2',style:{marginBottom:16}},
      React.createElement(Card,{title:OA.t('geoFor'),desc:OA.t('drillHint'),
        tools:React.createElement('div',{style:{display:'flex',alignItems:'center',gap:12}},
          React.createElement('div',{className:'legend'},
            React.createElement('div',{className:'li'},React.createElement('span',{className:'d',style:{background:'#E2E1F2'}}),OA.lang==='es'?'menos':'less'),
            React.createElement('div',{className:'li'},React.createElement('span',{className:'d',style:{background:'#3D3A7C'}}),OA.lang==='es'?'más':'more')),
          React.createElement('div',{className:'seg'},
            React.createElement('button',{className:mapMode==='map'?'on':'',onClick:()=>setMapMode('map')},OA.t('mapTab')),
            React.createElement('button',{className:mapMode==='grid'?'on':'',onClick:()=>setMapMode('grid')},OA.t('gridTab'))))},
        mapMode==='map'
          ? React.createElement(window.GeoMap,{rows,drill,country:f.country})
          : React.createElement(Cartogram,{rows,drill,country:f.country})),
      React.createElement(Card,{title:OA.t('byCountry'),desc:OA.t('rankByViews')},
        React.createElement(RankBars,{items:countries,fmtLabel:k=>OA.countryName(k,OA.lang),onClick:(d)=>drill({country:d.k}),color:'#D97706',max:9}))),
    React.createElement(Card,{pad:false,title:OA.t('topCities'),desc:OA.fmt(cities.length)+' '+OA.t('cities').toLowerCase()},
      React.createElement('table',{className:'tbl'},
        React.createElement('thead',null,React.createElement('tr',null,
          React.createElement('th',{style:{width:40}},'#'),
          React.createElement('th',null,OA.t('city')),
          React.createElement('th',null,OA.t('country')),
          React.createElement('th',{className:'num',style:{width:'40%'}},OA.t('views')))),
        React.createElement('tbody',null,
          cityRows.slice(0,12).map((c,i)=>React.createElement('tr',{key:c._id,onClick:()=>drill({country:c.country})},
            React.createElement('td',null,React.createElement('span',{className:'rank '+(i<3?'top':'')},i+1)),
            React.createElement('td',null,React.createElement('div',{style:{display:'flex',alignItems:'center',gap:8}},
              React.createElement('span',{style:{color:'#FF177B'}},React.createElement(Icon.pin,{style:{width:14,height:14}})),
              React.createElement('span',{style:{fontWeight:700,color:'#262626'}},c.city))),
            React.createElement('td',null,React.createElement(Badge,{tone:'info'},OA.countryName(c.country,OA.lang))),
            React.createElement('td',{className:'num'},React.createElement('div',{className:'barcell'},
              React.createElement('div',{className:'track'},React.createElement('div',{className:'fill',style:{width:(c.v/maxCity*100)+'%',background:'#FF177B'}})),
              React.createElement('span',{style:{width:42,textAlign:'right'}},OA.fmt(c.v))))))))
  ));
}
window.GeoView=GeoView;

/* ============================ DEVICES & TECH ============================ */
function DevicesView({rows, drill}){
  const dev=mM(()=>OA.rank(rows,'d'),[rows]);
  const os=mM(()=>OA.rank(rows,'os'),[rows]);
  const br=mM(()=>OA.rank(rows,'br'),[rows]);
  const langs=mM(()=>OA.rank(rows,'lg'),[rows]).filter(l=>l.k!=='—');
  const screens=mM(()=>OA.rank(rows,'sc'),[rows]).filter(s=>s.k!=='—');
  const tot=rows.length||1;
  const mobile=OA.countBy(rows,'d')['Mobile']||0;
  const desktop=OA.countBy(rows,'d')['Desktop']||0;
  const dLabel=k=>k==='Desktop'?OA.t('desktop'):k==='Mobile'?OA.t('mobile'):k==='Tablet'?OA.t('tablet'):k;
  return React.createElement('div',null,
    React.createElement('div',{className:'grid g-3',style:{marginBottom:16}},
      React.createElement(Kpi,{icon:Icon.smartphone,tint:{bg:'#FFE6F1',fg:'#FF177B'},label:OA.t('mobile'),desc:OA.t('ofTotal'),value:OA.pct(mobile/tot*100,0)}),
      React.createElement(Kpi,{icon:Icon.monitor,tint:{bg:'#EEF0FB',fg:'#4D4A9D'},label:OA.t('desktop'),desc:OA.t('ofTotal'),value:OA.pct(desktop/tot*100,0)}),
      React.createElement(Kpi,{icon:Icon.device,tint:{bg:'#E6F7F4',fg:'#14B8A6'},label:OA.t('os'),desc:os[0]?os[0].k:'',value:os[0]?OA.pct(os[0].v/tot*100,0):'—'})),
    React.createElement('div',{className:'grid g-2',style:{marginBottom:16}},
      React.createElement(Card,{title:OA.t('deviceMix')},
        React.createElement('div',{style:{display:'flex',alignItems:'center',gap:24,flexWrap:'wrap',justifyContent:'center'}},
          React.createElement(Donut,{data:dev.map((d,i)=>({k:dLabel(d.k),v:d.v,color:OA.PALETTE[i]})),centerValue:OA.fmtCompact(tot),centerLabel:OA.t('contentEvents'),onClick:(d)=>{}}),
          React.createElement('div',{style:{flex:1,minWidth:160}},
            React.createElement(RankBars,{items:dev,fmtLabel:dLabel,onClick:(d)=>drill({device:d.k}),colorByIndex:true,max:4})))),
      React.createElement(Card,{title:OA.t('byOs'),desc:OA.t('os')},
        React.createElement(RankBars,{items:os,onClick:(d)=>drill({os:d.k}),color:'#14B8A6',max:6}))),
    React.createElement('div',{className:'grid g-2',style:{marginBottom:16}},
      React.createElement(Card,{title:OA.t('topBrowsers')},
        React.createElement(RankBars,{items:br,onClick:(d)=>drill({browser:d.k}),color:'#3B82F6',max:6})),
      React.createElement(Card,{title:OA.t('langData'),desc:OA.t('langData')},
        React.createElement(RankBars,{items:langs,colorByIndex:true,max:6}))),
    React.createElement(Card,{title:OA.t('screen'),desc:OA.t('deviceMix')},
      React.createElement('div',{style:{display:'flex',gap:8,flexWrap:'wrap'}},
        screens.slice(0,12).map((s,i)=>React.createElement('div',{key:s.k,style:{flex:'1 1 130px',minWidth:120,border:'1px solid #E5E5E5',borderRadius:10,padding:'11px 13px'}},
          React.createElement('div',{className:'mono',style:{fontSize:13,fontWeight:700,color:'#262626'}},s.k),
          React.createElement('div',{style:{display:'flex',alignItems:'baseline',gap:6,marginTop:3}},
            React.createElement('span',{style:{fontSize:18,fontWeight:800,color:'#4D4A9D'}},OA.fmt(s.v)),
            React.createElement('span',{className:'muted',style:{fontSize:11.5,fontWeight:700}},OA.pct(s.v/tot*100,0))),
          React.createElement('div',{style:{height:5,background:'#F1F0F8',borderRadius:99,marginTop:7,overflow:'hidden'}},
            React.createElement('div',{style:{height:'100%',width:(s.v/screens[0].v*100)+'%',background:OA.PALETTE[i%OA.PALETTE.length],borderRadius:99}}))))))
  );
}
window.DevicesView=DevicesView;

/* ============================ BRANDS & CATEGORIES ============================ */
function BrandsView({rows, drill, account, openBrand}){
  const [metric,setMetric]=mS('views');
  const metricDefs={ views:{label:OA.t('kpi_views'),get:(o)=>o.views,color:'#4D4A9D'},
    retailers:{label:OA.t('kpi_retailers'),get:(o)=>o.reach,color:'#FF177B'},
    skus:{label:'SKUs',get:(o)=>o.skus,color:'#14B8A6'},
    sessions:{label:OA.t('sessions'),get:(o)=>o.nSess,color:'#3B82F6'} };
  const brandAgg=mM(()=>{ const m={};
    for(const e of rows){ let o=m[e.b]; if(!o)o=m[e.b]={k:e.b,views:0,_r:new Set(),_s:new Set(),_k:new Set(),_c:new Set()};
      o.views++; o._r.add(e.r); o._s.add(e.s); o._k.add(e.k); o._c.add(e.c); }
    return Object.values(m).map(o=>({...o,reach:o._r.size,nSess:o._s.size,skus:o._k.size,cats:o._c.size})).sort((a,b)=>b.views-a.views);
  },[rows]);
  const cats=mM(()=>OA.rank(rows,'c'),[rows]);
  const md=metricDefs[metric];
  const topBrands=brandAgg.slice(0,9);
  const groups=topBrands.map(b=>({k:b.k,vals:[md.get(b)]}));
  // coverage matrix brands × retailers
  const topRet=OA.rank(rows,'r',8).map(r=>r.k);
  const matrixBrands=brandAgg.slice(0,8);
  const cell={}; let cmax=0;
  for(const e of rows){ if(topRet.includes(e.r)){ const key=e.b+'|'+e.r; cell[key]=(cell[key]||0)+1; if(cell[key]>cmax)cmax=cell[key]; } }
  const benchAvg = brandAgg.length? brandAgg.reduce((s,b)=>s+md.get(b),0)/brandAgg.length : 0;
  return React.createElement('div',null,
    React.createElement('div',{style:{display:'flex',alignItems:'center',gap:10,marginBottom:14,flexWrap:'wrap'}},
      React.createElement('span',{className:'filt-label'},OA.t('metric')),
      React.createElement('div',{className:'seg'},
        Object.keys(metricDefs).map(k=>React.createElement('button',{key:k,className:metric===k?'on':'',onClick:()=>setMetric(k)},metricDefs[k].label)))),
    React.createElement('div',{className:'grid g-2',style:{marginBottom:16}},
      React.createElement(Card,{title:OA.t('compareBrands'),desc:md.label+' · '+OA.t('rankByViews')},
        React.createElement(GroupBars,{groups,series:[{name:md.label,color:md.color}],height:280})),
      React.createElement(Card,{title:OA.t('byCategory'),desc:OA.fmt(cats.length)+' '+OA.t('category').toLowerCase()},
        React.createElement(RankBars,{items:cats,onClick:(d)=>drill({category:d.k}),colorByIndex:true,max:10}))),
    React.createElement(Card,{title:OA.t('coverageMatrix'),desc:OA.t('covMatrix_d'),pad:false},
      React.createElement('div',{style:{overflowX:'auto',padding:'8px 20px 20px'}},
        React.createElement('table',{style:{borderCollapse:'separate',borderSpacing:4,minWidth:560}},
          React.createElement('thead',null,React.createElement('tr',null,
            React.createElement('th'),
            topRet.map(r=>React.createElement('th',{key:r,style:{fontSize:10.5,fontWeight:700,color:'#737373',padding:'4px 2px',textAlign:'center',maxWidth:70}},
              React.createElement('div',{style:{transform:'rotate(-32deg)',transformOrigin:'center',whiteSpace:'nowrap',height:54,display:'flex',alignItems:'flex-end',justifyContent:'center'}},OA.rName(r)))))),
          React.createElement('tbody',null,
            matrixBrands.map(b=>React.createElement('tr',{key:b.k},
              React.createElement('td',{style:{fontSize:12.5,fontWeight:700,color:'#262626',whiteSpace:'nowrap',paddingRight:8,maxWidth:120,overflow:'hidden',textOverflow:'ellipsis'}},b.k),
              topRet.map(r=>{ const v=cell[b.k+'|'+r]||0; const t=Math.pow(v/cmax,.6);
                const l=(a,c)=>Math.round(a+(c-a)*t); const bg=v?`rgb(${l(238,255)},${l(240,23)},${l(251,123)})`:'#F7F7FB';
                return React.createElement('td',{key:r,title:b.k+' · '+OA.rName(r)+': '+OA.fmt(v),
                  onClick:()=>drill({retailer:r}),
                  style:{width:50,height:34,background:bg,borderRadius:6,textAlign:'center',fontSize:11,fontWeight:800,
                    color:v/cmax>.45?'#fff':(v?'#d91065':'#D4D4D4'),cursor:'pointer'}}, v||'·'); }))))))) ,
    React.createElement('div',{style:{height:16}}),
    React.createElement(Card,{pad:false,title:OA.t('compareBrands'),desc:OA.t('vsBenchmark')},
      React.createElement('table',{className:'tbl'},
        React.createElement('thead',null,React.createElement('tr',null,
          React.createElement('th',null,OA.t('brand')),
          React.createElement('th',{className:'num'},OA.t('views')),
          React.createElement('th',{className:'num'},OA.t('stores')),
          React.createElement('th',{className:'num'},'SKUs'),
          React.createElement('th',{className:'num'},OA.t('sessions')),
          React.createElement('th',{className:'num'},md.label+' '+OA.t('vsBenchmark')))),
        React.createElement('tbody',null,
          brandAgg.slice(0,14).map((b,i)=>{ const val=md.get(b); const dv=benchAvg?(val-benchAvg)/benchAvg*100:0;
            return React.createElement('tr',{key:b.k,onClick:()=>drill({})},
              React.createElement('td',null,React.createElement('div',{className:'cell-main'},
                React.createElement('span',{className:'rank '+(i<3?'top':'')},i+1),
                React.createElement('span',{style:{fontWeight:700,color:'#262626'}},b.k))),
              React.createElement('td',{className:'num'},OA.fmt(b.views)),
              React.createElement('td',{className:'num'},b.reach),
              React.createElement('td',{className:'num'},b.skus),
              React.createElement('td',{className:'num'},OA.fmt(b.nSess)),
              React.createElement('td',{className:'num'},React.createElement('span',{className:'delta '+(dv>0.5?'up':dv<-0.5?'down':'flat')},
                dv>0?'+':'',OA.pct(dv,0)))); }))))
  );
}
window.BrandsView=BrandsView;

/* ============================ TEMPORAL ============================ */
function TemporalView({rows, f}){
  const from=f.from||OA.tmin, to=f.to||OA.tmax;
  const daily=mM(()=>OA.daily(rows,from,to),[rows,from,to]);
  // weekday matrix: rows weekday (Mon..Sun), cols hour 0-23
  const wdOrder=[1,2,3,4,5,6,0];
  const wdLabels=wdOrder.map(d=>[OA.t('sun'),OA.t('mon'),OA.t('tue'),OA.t('wed'),OA.t('thu'),OA.t('fri'),OA.t('sat')][d]);
  const matrix=mM(()=>{ const m=wdOrder.map(()=>Array(24).fill(0));
    for(const e of rows){ const ri=wdOrder.indexOf(e.wd); if(ri>=0) m[ri][e.hr]++; } return m; },[rows]);
  const hmax=Math.max(1,...matrix.flat());
  const byHour=mM(()=>{ const a=Array(24).fill(0); for(const e of rows)a[e.hr]++; return a; },[rows]);
  const byWd=mM(()=>{ const a={}; for(const e of rows)a[e.wd]=(a[e.wd]||0)+1; return a; },[rows]);
  const peakHour=byHour.indexOf(Math.max(...byHour));
  const wdCounts=wdOrder.map(d=>({d,v:byWd[d]||0}));
  const peakWd=wdCounts.reduce((a,b)=>b.v>a.v?b:a,{v:-1});
  const peakWdLabel=[OA.t('sun'),OA.t('mon'),OA.t('tue'),OA.t('wed'),OA.t('thu'),OA.t('fri'),OA.t('sat')][peakWd.d];
  const avgDaily=daily.length?rows.length/daily.length:0;
  return React.createElement('div',null,
    React.createElement('div',{className:'grid g-3',style:{marginBottom:16}},
      React.createElement(Kpi,{icon:Icon.clock,tint:{bg:'#EEF0FB',fg:'#4D4A9D'},label:OA.t('peakHour'),desc:OA.t('contentEvents'),value:peakHour+':00'}),
      React.createElement(Kpi,{icon:Icon.calendar,tint:{bg:'#FFE6F1',fg:'#FF177B'},label:OA.t('peakDay'),desc:OA.fmt(peakWd.v)+' '+OA.t('contentEvents'),value:peakWdLabel}),
      React.createElement(Kpi,{icon:Icon.trend,tint:{bg:'#E6F7F4',fg:'#14B8A6'},label:OA.t('avgDaily'),desc:OA.t('contentEvents'),value:OA.fmt(avgDaily)})),
    React.createElement(Card,{title:OA.t('heatmap'),desc:OA.t('heatmap_d'),style:{marginBottom:16}},
      React.createElement(Heatmap,{matrix,max:hmax,rowLabels:wdLabels})),
    React.createElement('div',{className:'grid g-2',style:{marginBottom:16}},
      React.createElement(Card,{title:OA.t('hour'),desc:OA.t('contentEvents')},
        React.createElement(GroupBars,{groups:byHour.map((v,h)=>({k:(h%2===0?h+'':''),vals:[v]})),series:[{name:OA.t('hour'),color:'#4D4A9D'}],height:200})),
      React.createElement(Card,{title:OA.t('weekday'),desc:OA.t('contentEvents')},
        React.createElement(GroupBars,{groups:wdCounts.map(w=>({k:[OA.t('sun'),OA.t('mon'),OA.t('tue'),OA.t('wed'),OA.t('thu'),OA.t('fri'),OA.t('sat')][w.d],vals:[w.v]})),series:[{name:OA.t('weekday'),color:'#FF177B'}],height:200}))),
    React.createElement(Card,{title:OA.t('trend'),desc:OA.t('trend_d')},
      React.createElement(TrendChart,{data:daily}))
  );
}
window.TemporalView=TemporalView;

/* ============================ DETAIL: PRODUCT ============================ */
function ProductDetail({sku, accountRows, onClose, drill}){
  const rows=mM(()=>accountRows.filter(e=>e.k===sku),[accountRows,sku]);
  if(!rows.length) return null;
  const name=mM(()=>{ for(const e of rows){ const n=deriveName(e.p); if(n) return n; } return sku; },[rows]);
  const brand=rows.find(e=>e.b!=='Sin asignar')?.b||rows[0].b;
  const cat=rows.find(e=>e.c!=='Sin categoría')?.c||rows[0].c;
  const ret=OA.rank(rows,'r',6);
  const dev=OA.rank(rows,'d');
  const co=OA.rank(rows,'co',5);
  const from=OA.tmin,to=OA.tmax;
  const daily=OA.daily(rows,Math.max(from,OA.tmax-29*OA.DAY),to);
  const url=rows[0].p?('https://'+rows[0].r+rows[0].p):null;
  return React.createElement(SlideOver,{onClose,title:name,sub:OA.t('detailProduct'),logo:(brand||'?').slice(0,2).toUpperCase()},
    React.createElement('div',{style:{display:'flex',gap:8,flexWrap:'wrap'}},
      React.createElement(Badge,{tone:'primary'},brand),
      React.createElement(Badge,{tone:'gray'},cat),
      React.createElement('span',{className:'mono',style:{fontSize:12,fontWeight:700,color:'#737373',padding:'3px 9px',background:'#F5F5F5',borderRadius:99}},sku)),
    React.createElement('div',{style:{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:10}},
      [[Icon.eye,OA.fmt(rows.length),OA.t('views')],[Icon.store,OA.uniq(rows,'r'),OA.t('stores')],[Icon.users,OA.fmt(OA.uniq(rows,'s')),OA.t('sessions')]]
        .map((s,i)=>React.createElement('div',{key:i,className:'card',style:{padding:'12px 14px'}},
          React.createElement('div',{style:{color:'#4D4A9D',marginBottom:4}},React.createElement(s[0],{style:{width:16,height:16}})),
          React.createElement('div',{style:{fontSize:20,fontWeight:800,color:'#262626'}},s[1]),
          React.createElement('div',{className:'muted',style:{fontSize:11,fontWeight:700}},s[2])))),
    React.createElement(Card,{title:OA.t('trend'),pad:true},React.createElement(TrendChart,{data:daily,height:150})),
    React.createElement(Card,{title:OA.t('whereSeen'),pad:true},
      React.createElement(RankBars,{items:ret,fmtLabel:k=>OA.rName(k),onClick:(d)=>{drill({retailer:d.k});onClose();},color:'#FF177B',max:6})),
    React.createElement('div',{style:{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}},
      React.createElement(Card,{title:OA.t('deviceSplit'),pad:true},
        React.createElement(Donut,{size:130,thickness:20,data:dev.map((d,i)=>({k:d.k,v:d.v,color:OA.PALETTE[i]})),centerValue:dev.length?OA.pct((OA.countBy(rows,'d')['Mobile']||0)/rows.length*100,0):'0%',centerLabel:OA.t('mobile')})),
      React.createElement(Card,{title:OA.t('byCountry'),pad:true},
        React.createElement(RankBars,{items:co,fmtLabel:k=>OA.countryName(k,OA.lang),onClick:(d)=>{drill({country:d.k});onClose();},color:'#14B8A6',max:5}))),
    url&&React.createElement('a',{href:url,target:'_blank',className:'btn btn-ghost',style:{justifyContent:'center'}},
      React.createElement(Icon.external,null), OA.lang==='es'?'Ver página de producto':'View product page')
  );
}
window.ProductDetail=ProductDetail;

/* ============================ DETAIL: RETAILER ============================ */
function RetailerDetail({host, accountRows, onClose, drill, openProduct}){
  const rows=mM(()=>accountRows.filter(e=>e.r===host),[accountRows,host]);
  if(!rows.length) return null;
  const products=mM(()=>productsFrom(rows).sort((a,b)=>b.views-a.views).slice(0,6),[rows]);
  const cats=OA.rank(rows,'c',6);
  const dev=OA.rank(rows,'d');
  const co=OA.rank(rows,'co',5);
  const daily=OA.daily(rows,Math.max(OA.tmin,OA.tmax-29*OA.DAY),OA.tmax);
  return React.createElement(SlideOver,{onClose,title:OA.rName(host),sub:OA.t('detailRetailer'),logo:OA.rName(host).slice(0,2).toUpperCase()},
    React.createElement('div',{style:{display:'flex',gap:8,flexWrap:'wrap',alignItems:'center'}},
      OA.rCountry(host)&&React.createElement(Badge,{tone:'info'},OA.countryName(OA.rCountry(host),OA.lang)),
      React.createElement('a',{href:'https://'+host,target:'_blank',className:'mono',style:{fontSize:12,fontWeight:700,color:'#4D4A9D'}},host)),
    React.createElement('div',{style:{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:10}},
      [[Icon.eye,OA.fmt(rows.length),OA.t('views')],[Icon.box,OA.uniq(rows,'k'),'SKUs'],[Icon.layers,OA.uniq(rows,'b'),OA.t('brand')+'s']]
        .map((s,i)=>React.createElement('div',{key:i,className:'card',style:{padding:'12px 14px'}},
          React.createElement('div',{style:{color:'#FF177B',marginBottom:4}},React.createElement(s[0],{style:{width:16,height:16}})),
          React.createElement('div',{style:{fontSize:20,fontWeight:800,color:'#262626'}},s[1]),
          React.createElement('div',{className:'muted',style:{fontSize:11,fontWeight:700}},s[2])))),
    React.createElement(Card,{title:OA.t('trend'),pad:true},React.createElement(TrendChart,{data:daily,height:150,color:'#FF177B'})),
    React.createElement(Card,{title:OA.t('topProducts'),pad:false},
      React.createElement('table',{className:'tbl'},
        React.createElement('tbody',null,
          products.map(p=>React.createElement('tr',{key:p.sku,onClick:()=>{onClose();openProduct(p.sku);}},
            React.createElement('td',null,React.createElement('div',{className:'cell-main'},
              React.createElement(Thumb,{seed:p.sku,label:p.brand,size:30}),
              React.createElement('div',{style:{minWidth:0}},
                React.createElement('div',{className:'cell-name',style:{fontSize:13,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis',maxWidth:280}},p.name||p.sku),
                React.createElement('div',{className:'cell-sku'},p.cat)))),
            React.createElement('td',{className:'num'},OA.fmt(p.views))))))),
    React.createElement('div',{style:{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}},
      React.createElement(Card,{title:OA.t('byCategory'),pad:true},React.createElement(RankBars,{items:cats,onClick:(d)=>{drill({category:d.k});onClose();},colorByIndex:true,max:5})),
      React.createElement(Card,{title:OA.t('deviceSplit'),pad:true},
        React.createElement(Donut,{size:130,thickness:20,data:dev.map((d,i)=>({k:d.k,v:d.v,color:OA.PALETTE[i]})),centerValue:OA.pct((OA.countBy(rows,'d')['Mobile']||0)/rows.length*100,0),centerLabel:OA.t('mobile')})))
  );
}
window.RetailerDetail=RetailerDetail;