/* ============================================================
   Omnitok Analytics — App shell → mounts #root
   ============================================================ */
const { useState:aS, useMemo:aM, useEffect:aE, useRef:aR } = React;

const NAV=[
  {id:'overview',icon:Icon.grid,key:'overview'},
  {id:'products',icon:Icon.box,key:'products'},
  {id:'retailers',icon:Icon.store,key:'retailers'},
  {id:'geo',icon:Icon.globe,key:'geo'},
  {id:'devices',icon:Icon.device,key:'devices'},
  {id:'brands',icon:Icon.layers,key:'brands'},
  {id:'temporal',icon:Icon.clock,key:'temporal'},
];

function App(){
  const [,force]=aS(0); const rerender=()=>force(x=>x+1);
  const [view,setView]=aS('overview');
  const [account,setAccount]=aS(window.__OA_DEFAULT_ACCOUNT||'Midea');
  const [period,setPeriod]=aS('30');
  const [f,setF]=aS({});
  const [detail,setDetail]=aS(null);
  const [acctOpen,setAcctOpen]=aS(false);
  const contentRef=aR(null); const acctRef=aR(null);

  aE(()=>{ const h=(e)=>{ if(acctRef.current&&!acctRef.current.contains(e.target)) setAcctOpen(false); }; document.addEventListener('mousedown',h); return ()=>document.removeEventListener('mousedown',h); },[]);

  // period -> from/to
  const range=aM(()=>{ if(period==='all') return {from:OA.tmin,to:OA.tmax};
    if(period==='7') return {from:OA.tmax-6*OA.DAY,to:OA.tmax};
    return {from:OA.tmax-29*OA.DAY,to:OA.tmax}; },[period]);

  const fullF=aM(()=>Object.assign({account},f,range),[account,f,range]);
  const rows=aM(()=>OA.filter(fullF),[fullF]);
  const accountRows=aM(()=>OA.filter({account}),[account]);
  const kpi=aM(()=>OA.kpis(fullF),[fullF]);

  const drill=(patch)=>{ setF(prev=>{ const n={...prev}; for(const k in patch){ if(patch[k]==null||n[k]===patch[k]) delete n[k]; else n[k]=patch[k]; } return n; }); };
  const setSearch=(v)=>setF(prev=>{ const n={...prev}; if(v) n.search=v; else delete n.search; return n; });

  const setLang=(l)=>{ OA.setLang(l); rerender(); };

  // option lists for filter selects (counts within account+range, ignoring that dim)
  const optsFor=(dim)=>{ const base=OA.filter(Object.assign({account},f,range,{[dim]:undefined}));
    return OA.rank(base,dim).map(o=>({value:o.k,label:dim==='retailer'?OA.rName(o.k):dim==='country'?OA.countryName(o.k,OA.lang):dim==='device'?(o.k==='Desktop'?OA.t('desktop'):o.k==='Mobile'?OA.t('mobile'):o.k):o.k,count:o.v})); };

  // chips
  const chipDefs=[];
  if(f.category) chipDefs.push({k:'category',label:OA.t('category'),val:f.category});
  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)});
  if(f.device) chipDefs.push({k:'device',label:OA.t('device'),val:f.device==='Desktop'?OA.t('desktop'):f.device==='Mobile'?OA.t('mobile'):f.device});
  if(f.os) chipDefs.push({k:'os',label:OA.t('os'),val:f.os});
  if(f.browser) chipDefs.push({k:'browser',label:OA.t('browser'),val:f.browser});
  if(f.city) chipDefs.push({k:'city',label:OA.t('city'),val:f.city});
  if(f.search) chipDefs.push({k:'search',label:OA.t('search'),val:f.search});
  const removeChip=(k)=>setF(prev=>{ const n={...prev}; delete n[k]; return n; });

  // exports
  const doCsv=()=>OAExport.eventsCsv(rows,`omnitok_${view}_${account}.csv`);
  const doPng=()=>OAExport.pngFromCard(contentRef.current,`omnitok_${view}.png`);
  const doPdf=()=>OAExport.printPdf();

  const openProduct=(sku)=>setDetail({type:'product',id:sku});
  const openRetailer=(host)=>setDetail({type:'retailer',id:host});

  // data note bar (overview only)
  const dataNote=React.createElement('div',{className:'note-bar'},
    React.createElement(Icon.info,null),
    React.createElement('span',null, OA.meta.note,' ',
      React.createElement('b',{style:{color:'#525252'}}, OA.fmtDateFull(OA.tmin)+' – '+OA.fmtDateFull(OA.tmax))));

  // current account display
  const isAdmin=account==='all';
  const acctName=isAdmin?OA.t('allBrands'):account;
  const acctRole=isAdmin?OA.t('adminRole'):OA.t('clientRole');
  const acctInitials=isAdmin?'OT':account.slice(0,2).toUpperCase();

  const viewProps={rows,f:fullF,kpi,drill,openProduct,openRetailer,account,dataNote:view==='overview'?dataNote:null,setSearch,search:f.search};
  let ViewEl;
  if(view==='overview') ViewEl=React.createElement(OverviewView,viewProps);
  else if(view==='products') ViewEl=React.createElement(ProductsView,viewProps);
  else if(view==='retailers') ViewEl=React.createElement(RetailersView,viewProps);
  else if(view==='geo') ViewEl=React.createElement(GeoView,viewProps);
  else if(view==='devices') ViewEl=React.createElement(DevicesView,viewProps);
  else if(view==='brands') ViewEl=React.createElement(BrandsView,viewProps);
  else if(view==='temporal') ViewEl=React.createElement(TemporalView,viewProps);

  const titles={overview:OA.t('overview'),products:OA.t('products'),retailers:OA.t('retailers'),geo:OA.t('geo'),devices:OA.t('devices'),brands:OA.t('brands'),temporal:OA.t('temporal')};
  const subs={
    overview:OA.lang==='es'?'Visión general del rendimiento de tu contenido en retail':'Overview of your content performance across retail',
    products:OA.lang==='es'?'Explora el rendimiento por SKU':'Explore performance by SKU',
    retailers:OA.lang==='es'?'Dónde aparece tu contenido y cómo rinde cada tienda':'Where your content appears and how each store performs',
    geo:OA.lang==='es'?'Alcance por país y ciudad':'Reach by country and city',
    devices:OA.lang==='es'?'Con qué dispositivos y tecnología te ven':'Devices and technology your audience uses',
    brands:OA.lang==='es'?'Comparativa entre marcas y categorías':'Comparison across brands and categories',
    temporal:OA.lang==='es'?'Cuándo se visualiza tu contenido':'When your content is viewed'
  };

  return React.createElement('div',{className:'app'},
    /* ---------- Sidebar ---------- */
    React.createElement('aside',{className:'sidebar'},
      React.createElement('div',{className:'sb-head'},
        React.createElement('img',{src:'assets/omnitok-logo.svg',alt:'Omnitok'}),
        React.createElement('span',{style:{fontSize:11,fontWeight:700,color:'rgba(255,255,255,.45)',letterSpacing:'.02em',marginTop:2}},'Analytics')),
      React.createElement('div',{className:'sb-acct',ref:acctRef},
        React.createElement('div',{className:'sb-acct-label'},OA.t('account')),
        React.createElement('div',{style:{position:'relative'}},
          React.createElement('button',{className:'acct-switch',onClick:()=>setAcctOpen(o=>!o)},
            React.createElement('span',{className:'acct-logo'},acctInitials),
            React.createElement('span',{className:'acct-meta'},
              React.createElement('div',{className:'acct-name'},acctName),
              React.createElement('div',{className:'acct-role'},acctRole)),
            React.createElement('span',{className:'acct-caret'},React.createElement(Icon.swap,{style:{width:16,height:16}}))),
          acctOpen&&React.createElement('div',{className:'menu',style:{minWidth:228,maxHeight:360,top:'calc(100% + 6px)'}},
            React.createElement('button',{className:'menu-item'+(isAdmin?' sel':''),onClick:()=>{setAccount('all');setAcctOpen(false);setF({});}},
              React.createElement('span',{className:'acct-logo',style:{width:24,height:24,fontSize:10,borderRadius:6}},'OT'),
              React.createElement('span',null,OA.t('allBrandsAdmin')),
              isAdmin&&React.createElement('span',{style:{marginLeft:'auto',color:'#4D4A9D'}},React.createElement(Icon.check,{style:{width:15,height:15}}))),
            React.createElement('div',{style:{height:1,background:'#E5E5E5',margin:'5px 0'}}),
            OA.brands.filter(b=>b.name!=='Sin asignar').map(b=>React.createElement('button',{key:b.name,className:'menu-item'+(account===b.name?' sel':''),
              onClick:()=>{setAccount(b.name);setAcctOpen(false);setF({});}},
              React.createElement('span',{className:'acct-logo',style:{width:24,height:24,fontSize:10,borderRadius:6,background:'linear-gradient(135deg,#4D4A9D,#FF177B)'}},b.name.slice(0,2).toUpperCase()),
              React.createElement('span',{style:{overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}},b.name),
              React.createElement('span',{className:'ct'},OA.fmt(b.count))))))),
      React.createElement('nav',{className:'sb-nav'},
        React.createElement('div',{className:'sb-group-label'},OA.t('nav_analysis')),
        NAV.map(n=>React.createElement('button',{key:n.id,className:'sb-item'+(view===n.id?' active':''),onClick:()=>{setView(n.id);}},
          React.createElement(n.icon,null), titles[n.id]))),
      React.createElement('div',{className:'sb-foot'},
        React.createElement('div',{className:'sb-user'},
          React.createElement('div',{className:'av'},'JM'),
          React.createElement('div',{style:{minWidth:0}},
            React.createElement('div',{className:'nm'},'Jorge Méndez'),
            React.createElement('div',{className:'em'},'jorge@'+(isAdmin?'omnitok.com':account.toLowerCase().replace(/[^a-z]/g,'')+'.com'))))) ),

    /* ---------- Main ---------- */
    React.createElement('div',{className:'main'},
      React.createElement('header',{className:'hdr'},
        React.createElement('div',null,
          React.createElement('div',{className:'hdr-title'},titles[view]),
          React.createElement('div',{className:'hdr-sub'},subs[view])),
        React.createElement('div',{className:'hdr-spacer'}),
        React.createElement('div',{className:'hdr-pill'},React.createElement('span',{className:'live-dot'}),OA.t('live')),
        React.createElement('div',{className:'lang-tog'},
          React.createElement('button',{className:OA.lang==='es'?'on':'',onClick:()=>setLang('es')},'ES'),
          React.createElement('button',{className:OA.lang==='en'?'on':'',onClick:()=>setLang('en')},'EN')),
        React.createElement('button',{className:'btn btn-icon btn-ghost',title:'Notifications'},React.createElement(Icon.bell,null))),

      React.createElement('div',{className:'content',ref:contentRef},
        /* page head */
        React.createElement('div',{className:'page-head'},
          React.createElement('div',null,
            React.createElement('h1',{className:'page-title'},titles[view]),
            React.createElement('p',{className:'page-sub'},
              isAdmin?OA.t('allBrandsAdmin'):(OA.t('brandScopeNote')+' '),
              !isAdmin&&React.createElement('b',{style:{color:'#4D4A9D'}},account))),
          React.createElement('div',{className:'page-actions'},
            React.createElement(ExportMenu,{onCsv:doCsv,onPdf:doPdf,onPng:doPng}))),

        /* filters */
        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'},
              ['7','30','all'].map(p=>React.createElement('button',{key:p,className:period===p?'on':'',onClick:()=>setPeriod(p)},
                p==='7'?OA.t('last7'):p==='30'?OA.t('last30'):OA.t('all'))))),
          React.createElement('div',{style:{width:1,height:26,background:'#E5E5E5'}}),
          React.createElement(Select,{label:OA.t('category'),value:f.category,options:optsFor('category'),onChange:v=>drill({category:v}),searchable:true,allLabel:OA.t('allFa')}),
          React.createElement(Select,{label:OA.t('retailer'),value:f.retailer,options:optsFor('retailer'),onChange:v=>drill({retailer:v}),searchable:true,allLabel:OA.t('allF')}),
          React.createElement(Select,{label:OA.t('country'),value:f.country,options:optsFor('country'),onChange:v=>drill({country:v}),searchable:true,allLabel:OA.t('allF')}),
          React.createElement(Select,{label:OA.t('device'),value:f.device,options:optsFor('device'),onChange:v=>drill({device:v}),allLabel:OA.t('allF')}),
          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:()=>removeChip(c.k)},'×'))),
            React.createElement('button',{className:'chip-clear',onClick:()=>setF({})},OA.t('clearFilters')))),

        /* the view */
        rows.length===0
          ? React.createElement('div',{className:'card'},React.createElement('div',{className:'empty'},React.createElement(Icon.search,null),OA.t('noData')))
          : ViewEl
      )),

    /* ---------- detail slideover ---------- */
    detail&&detail.type==='product'&&React.createElement(ProductDetail,{sku:detail.id,accountRows,onClose:()=>setDetail(null),drill}),
    detail&&detail.type==='retailer'&&React.createElement(RetailerDetail,{host:detail.id,accountRows,onClose:()=>setDetail(null),drill,openProduct})
  );
}

OA.load().then(()=>{
  // default account: biggest real brand
  window.__OA_DEFAULT_ACCOUNT = (OA.brands.find(b=>b.name!=='Sin asignar')||{name:'all'}).name;
  document.getElementById('loader')?.remove();
  ReactDOM.createRoot(document.getElementById('root')).render(React.createElement(App));
}).catch(err=>{
  document.getElementById('loader').innerHTML='<div style="color:#EF4444;font-family:sans-serif;padding:20px">Error cargando datos: '+err.message+'</div>';
  console.error(err);
});