/* ============================================================
   Omnitok Analytics — shared UI components → window
   ============================================================ */
const { useState:uS, useRef:uR, useEffect:uE, useMemo:uM } = React;

/* ---------- Dropdown Select ---------- */
function Select({label, value, options, onChange, searchable, align, width, renderOpt, allLabel}){
  const [open,setOpen]=uS(false); const [q,setQ]=uS(''); const ref=uR(null);
  uE(()=>{ const h=(e)=>{ if(ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener('mousedown',h); return ()=>document.removeEventListener('mousedown',h); },[]);
  const cur = value==null||value==='' ? (allLabel||OA.t('allFa')) : (renderOpt?renderOpt(value).label:value);
  let opts = options;
  if(searchable && q){ const s=q.toLowerCase(); opts=options.filter(o=>(''+(o.label||o.value)).toLowerCase().includes(s)); }
  return React.createElement('div',{className:'sel',ref},
    React.createElement('button',{className:'sel-btn',onClick:()=>setOpen(o=>!o)},
      label&&React.createElement('span',{className:'cap'},label),
      React.createElement('span',{style:{maxWidth:170,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}},cur),
      React.createElement(Icon.chevDown,null)),
    open&&React.createElement('div',{className:'menu'+(align==='right'?' right':''),style:width?{minWidth:width}:null},
      searchable&&React.createElement('input',{className:'menu-search',placeholder:OA.t('search')+'…',value:q,autoFocus:true,
        onChange:e=>setQ(e.target.value),onClick:e=>e.stopPropagation()}),
      React.createElement('button',{className:'menu-item'+((value==null||value==='')?' sel':''),onClick:()=>{onChange(null);setOpen(false);setQ('');}},
        allLabel||OA.t('allFa')),
      opts.map(o=>{ const v=o.value!==undefined?o.value:o; const lab=o.label!==undefined?o.label:o;
        return React.createElement('button',{key:v,className:'menu-item'+(value===v?' sel':''),onClick:()=>{onChange(v);setOpen(false);setQ('');}},
          o.dot&&React.createElement('span',{className:'dot',style:{background:o.dot}}),
          React.createElement('span',{style:{overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}},lab),
          o.count!=null&&React.createElement('span',{className:'ct'},OA.fmt(o.count))); })
    ));
}
window.Select=Select;

/* ---------- Card wrapper ---------- */
function Card({title, desc, tools, children, pad, className, style}){
  return React.createElement('div',{className:'card '+(className||''),style},
    (title||tools)&&React.createElement('div',{className:'card-head'},
      React.createElement('div',null,
        title&&React.createElement('h3',{className:'card-title'},title),
        desc&&React.createElement('p',{className:'card-desc'},desc)),
      tools&&React.createElement('div',{className:'card-tools'},tools)),
    React.createElement('div',{className:pad===false?'':'card-pad',style:title?{paddingTop:14}:null},children));
}
window.Card=Card;

/* ---------- KPI card ---------- */
function Kpi({icon, tint, label, desc, value, delta, spark, onClick}){
  const Ico=icon;
  const dCls = delta==null?'flat':(delta>0.5?'up':(delta<-0.5?'down':'flat'));
  const dIco = dCls==='up'?Icon.arrowUp:dCls==='down'?Icon.arrowDown:null;
  return React.createElement('div',{className:'card kpi',onClick,style:onClick?{cursor:'pointer'}:null},
    React.createElement('div',{className:'kpi-top'},
      React.createElement('div',{className:'kpi-ico',style:{background:tint.bg,color:tint.fg}}, React.createElement(Ico)),
      delta!=null&&React.createElement('span',{className:'delta '+dCls},
        dIco&&React.createElement(dIco,{style:{width:11,height:11}}),
        OA.pct(Math.abs(delta),0))),
    React.createElement('div',{className:'kpi-label'},label),
    React.createElement('div',{className:'kpi-val tnum'},value),
    React.createElement('div',{className:'kpi-foot'},
      React.createElement('span',{className:'muted'}, desc)),
    spark&&React.createElement('div',{className:'kpi-spark'}, spark)
  );
}
window.Kpi=Kpi;

/* ---------- Badge ---------- */
function Badge({children, tone, dot}){
  return React.createElement('span',{className:'badge bg-'+(tone||'gray')},
    dot&&React.createElement('span',{className:'bd',style:{background:dot}}), children);
}
window.Badge=Badge;

/* ---------- Export menu ---------- */
function ExportMenu({onCsv, onPdf, onPng}){
  const [open,setOpen]=uS(false); const ref=uR(null);
  uE(()=>{ const h=(e)=>{ if(ref.current&&!ref.current.contains(e.target)) setOpen(false); }; document.addEventListener('mousedown',h); return ()=>document.removeEventListener('mousedown',h);},[]);
  return React.createElement('div',{className:'sel',ref},
    React.createElement('button',{className:'btn btn-ghost',onClick:()=>setOpen(o=>!o)},
      React.createElement(Icon.download,null), OA.t('export'), React.createElement(Icon.chevDown,{style:{width:13,height:13,opacity:.6}})),
    open&&React.createElement('div',{className:'menu right',style:{minWidth:200}},
      React.createElement('div',{style:{fontSize:11,color:'#A3A3A3',padding:'4px 10px 7px',lineHeight:1.4}},OA.t('exportInfo')),
      onCsv&&React.createElement('button',{className:'menu-item',onClick:()=>{setOpen(false);onCsv();}},React.createElement(Icon.csv,{style:{width:15,height:15,color:'#22C55E'}}),OA.t('exportCsv')),
      onPdf&&React.createElement('button',{className:'menu-item',onClick:()=>{setOpen(false);onPdf();}},React.createElement(Icon.pdf,{style:{width:15,height:15,color:'#EF4444'}}),OA.t('exportPdf')),
      onPng&&React.createElement('button',{className:'menu-item',onClick:()=>{setOpen(false);onPng();}},React.createElement(Icon.image,{style:{width:15,height:15,color:'#3B82F6'}}),OA.t('exportPng'))));
}
window.ExportMenu=ExportMenu;

/* ---------- SlideOver ---------- */
function SlideOver({children, onClose, title, sub, logo}){
  uE(()=>{ const h=(e)=>{ if(e.key==='Escape') onClose(); }; document.addEventListener('keydown',h); return ()=>document.removeEventListener('keydown',h);},[]);
  return React.createElement(React.Fragment,null,
    React.createElement('div',{className:'overlay',onClick:onClose}),
    React.createElement('div',{className:'slideover'},
      React.createElement('div',{className:'so-head'},
        logo&&React.createElement('div',{className:'acct-logo',style:{width:42,height:42,fontSize:16,borderRadius:10}},logo),
        React.createElement('div',{style:{flex:1,minWidth:0}},
          React.createElement('div',{style:{fontSize:11,fontWeight:700,color:'#A3A3A3',textTransform:'uppercase',letterSpacing:'.05em'}},sub),
          React.createElement('div',{style:{fontSize:18,fontWeight:800,color:'#262626',lineHeight:1.2,wordBreak:'break-word'}},title)),
        React.createElement('button',{className:'so-close',onClick:onClose},'×')),
      React.createElement('div',{className:'so-body'},children)));
}
window.SlideOver=SlideOver;

/* ---------- Sortable data table ---------- */
function DataTable({columns, rows, sortKey, sortDir, onSort, onRow, page, pageSize=12}){
  const [pg,setPg]=uS(0);
  uE(()=>{ setPg(0); },[rows.length, sortKey, sortDir]);
  const start=pg*pageSize; const slice=rows.slice(start,start+pageSize);
  const pages=Math.ceil(rows.length/pageSize);
  return React.createElement('div',null,
    React.createElement('div',{className:'tbl-wrap'},
      React.createElement('table',{className:'tbl'},
        React.createElement('thead',null,React.createElement('tr',null,
          columns.map(c=>React.createElement('th',{key:c.key,className:c.num?'num':'',style:c.w?{width:c.w}:null,
            onClick:c.sort!==false?()=>onSort(c.key):undefined},
            c.label,
            c.sort!==false&&sortKey===c.key&&React.createElement('span',{className:'sortarrow'},sortDir>0?'▲':'▼'))))),
        React.createElement('tbody',null,
          slice.map((r,i)=>React.createElement('tr',{key:r._id||i,onClick:onRow?()=>onRow(r):undefined},
            columns.map(c=>React.createElement('td',{key:c.key,className:c.num?'num':''},c.render?c.render(r,start+i):r[c.key]))))))),
    pages>1&&React.createElement('div',{style:{display:'flex',alignItems:'center',justifyContent:'space-between',padding:'12px 14px',borderTop:'1px solid #F5F5F5'}},
      React.createElement('span',{style:{fontSize:12.5,color:'#737373',fontWeight:600}}, OA.fmt(start+1)+'–'+OA.fmt(Math.min(start+pageSize,rows.length))+' '+OA.t('of')+' '+OA.fmt(rows.length)),
      React.createElement('div',{style:{display:'flex',gap:6}},
        React.createElement('button',{className:'btn btn-ghost btn-sm',disabled:pg===0,style:pg===0?{opacity:.4}:null,onClick:()=>setPg(p=>Math.max(0,p-1))},'‹'),
        Array.from({length:Math.min(pages,7)},(_,i)=>{ let n=i; if(pages>7){ if(pg>3) n=pg-3+i; if(n>pages-1) n=pages-7+i; } 
          return React.createElement('button',{key:n,className:'btn btn-sm '+(n===pg?'btn-primary':'btn-ghost'),onClick:()=>setPg(n)}, n+1); }),
        React.createElement('button',{className:'btn btn-ghost btn-sm',disabled:pg>=pages-1,style:pg>=pages-1?{opacity:.4}:null,onClick:()=>setPg(p=>Math.min(pages-1,p+1))},'›'))));
}
window.DataTable=DataTable;

/* ---------- product thumbnail placeholder (striped) ---------- */
function Thumb({seed, size, label}){
  const pal=OA.PALETTE; const c=pal[Math.abs(hashStr(seed||'x'))%pal.length];
  const init=(label||seed||'?').replace(/[^A-Za-z0-9]/g,'').slice(0,2).toUpperCase();
  return React.createElement('div',{className:'thumb',style:{width:size||38,height:size||38,
    background:`linear-gradient(135deg,${c}22,${c}11)`,color:c,fontWeight:800,fontSize:(size||38)*0.34}},init);
}
function hashStr(s){let h=0;for(let i=0;i<s.length;i++){h=(h*31+s.charCodeAt(i))|0;}return h;}
window.Thumb=Thumb; window.hashStr=hashStr;

/* ---------- section header inside page ---------- */
function SectionTitle({icon, children, right}){
  const I=icon;
  return React.createElement('div',{style:{display:'flex',alignItems:'center',gap:9,margin:'4px 0 12px'}},
    I&&React.createElement('span',{style:{color:'#4D4A9D'}},React.createElement(I,{style:{width:17,height:17}})),
    React.createElement('h2',{style:{fontSize:16,fontWeight:800,color:'#262626',margin:0,letterSpacing:'-.01em'}},children),
    right&&React.createElement('div',{style:{marginLeft:'auto'}},right));
}
window.SectionTitle=SectionTitle;

/* ---------- insight strip ---------- */
function Insight({children}){
  return React.createElement('div',{className:'insight'},
    React.createElement('div',{className:'ico'},React.createElement(Icon.bolt,null)),
    React.createElement('div',{className:'tx'},children));
}
window.Insight=Insight;