/* global React */
/* ============================================================================
   Shared chart primitives
   ----------------------------------------------------------------------------
   - ChartTooltip  : floating tooltip with automatic edge flip
   - useOnScreen   : trigger animations only after the element enters viewport
   - useChartKey   : re-mount key that changes when visibility triggers, so
                     the CSS animations replay on first view
   ========================================================================= */

const { useState, useEffect, useRef, useMemo } = React;

// Intersection-based trigger -------------------------------------------------
// Accepts a ref; returns boolean. Uses useLayoutEffect so ref.current is set.
function useOnScreen(ref, {rootMargin='-20px'}={}) {
  const [visible, setVisible] = useState(false);
  React.useLayoutEffect(()=>{
    const el = ref.current;
    if (!el) { const t = setTimeout(()=>setVisible(true), 50); return ()=>clearTimeout(t); }
    if (!('IntersectionObserver' in window)) { setVisible(true); return; }
    const io = new IntersectionObserver((entries)=>{
      entries.forEach(e => { if (e.isIntersecting) { setVisible(true); io.disconnect(); } });
    },{rootMargin});
    io.observe(el);
    // Fallback: if still not visible after 400ms, force on (covers nested scroll containers)
    const t = setTimeout(()=>setVisible(v=>v||true), 400);
    return ()=>{ io.disconnect(); clearTimeout(t); };
  },[]);
  return visible;
}

// Tooltip ---------------------------------------------------------------------
// pos = {x,y} in pixels within the container (container must be position:relative)
// side = 'top' | 'right'
function ChartTooltip({pos, side='top', children}) {
  if (!pos) return null;
  const style = { left: pos.x+'px', top: pos.y+'px' };
  return <div className={'chart-tooltip '+(side==='right'?'right':'')} style={style}>{children}</div>;
}

// Filter context (analytics page-wide) ---------------------------------------
const AnalyticsFilterCtx = React.createContext({fin:null, setFin:()=>{}});

function AnalyticsFilterProvider({children}) {
  const [fin, setFin] = useState(null);
  const value = useMemo(()=>({fin, setFin}),[fin]);
  return <AnalyticsFilterCtx.Provider value={value}>{children}</AnalyticsFilterCtx.Provider>;
}

function useAnalyticsFilter() { return React.useContext(AnalyticsFilterCtx); }

// Formatters -----------------------------------------------------------------
const fmtARS = (n) => '$' + n.toLocaleString('es-AR');
const fmtPP = (n) => (n>0?'+':'') + n.toFixed(1) + 'pp';

Object.assign(window, {
  ChartTooltip, useOnScreen,
  AnalyticsFilterProvider, useAnalyticsFilter,
  fmtARS, fmtPP,
});