/* ============================================================
   lib.jsx — helpers de formato, íconos y átomos compartidos
   Expuesto en window (los <script babel> no comparten scope)
   ============================================================ */
const { useState, useEffect, useRef, useCallback } = React;

/* ---------------- formato (es-AR) ---------------- */
const _ar0 = new Intl.NumberFormat('es-AR', { maximumFractionDigits: 0 });
const _ar2 = new Intl.NumberFormat('es-AR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });

function fmtARS(n, dec) {
  const v = Math.abs(n);
  const s = (dec ? _ar2 : _ar0).format(v);
  return (n < 0 ? '-$' : '$') + s;
}
function fmtNum(n, dec = 0) {
  return new Intl.NumberFormat('es-AR', { minimumFractionDigits: dec, maximumFractionDigits: dec }).format(n);
}
function fmtPct(n, dec = 1) {
  const s = new Intl.NumberFormat('es-AR', { minimumFractionDigits: dec, maximumFractionDigits: dec }).format(Math.abs(n));
  return (n > 0 ? '+' : n < 0 ? '-' : '') + s + '%';
}
function fmtCompact(n) {
  const v = Math.abs(n);
  if (v >= 1e6) return (n < 0 ? '-' : '') + '$' + (v / 1e6).toFixed(1).replace('.', ',') + 'M';
  if (v >= 1e3) return (n < 0 ? '-' : '') + '$' + Math.round(v / 1e3) + 'k';
  return fmtARS(n);
}

/* ---------------- íconos (línea, 24x24, currentColor) ---------------- */
const ICONS = {
  dashboard: 'M3 3h7v7H3zM14 3h7v4h-7zM14 10h7v11h-7zM3 13h7v8H3z',
  wallet: 'M3 7a2 2 0 0 1 2-2h12v0a2 2 0 0 1 2 2v0H5M3 7v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-2M3 7h16v4M21 11h-4a2 2 0 0 0 0 4h4',
  market: 'M3 3v18h18M7 14l4-4 3 3 5-6',
  settings: 'M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM19.4 13a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1A1.7 1.7 0 0 0 8.6 19a1.7 1.7 0 0 0-1.9.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.9 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1A1.7 1.7 0 0 0 5 8.6a1.7 1.7 0 0 0-.3-1.9l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.9.3H11a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.9-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.9V11a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z',
  refresh: 'M21 12a9 9 0 1 1-2.6-6.3M21 4v4h-4',
  up: 'M12 19V5M5 12l7-7 7 7',
  down: 'M12 5v14M19 12l-7 7-7-7',
  arrowUpRight: 'M7 17 17 7M8 7h9v9',
  bell: 'M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0',
  search: 'M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM21 21l-4.3-4.3',
  sparkle: 'M12 3l1.9 5.6L19.5 10l-5.6 1.9L12 17l-1.9-5.1L4.5 10l5.6-1.4z',
  sheet: 'M4 3h11l5 5v13a0 0 0 0 1 0 0H4zM15 3v5h5M8 13h8M8 17h8M8 9h3',
  bank: 'M3 21h18M4 10h16M5 21V10M19 21V10M9 21V10M15 21V10M12 3 3 8h18z',
  filter: 'M3 5h18l-7 8v6l-4-2v-4z',
  check: 'M20 6 9 17l-5-5',
  alertTri: 'M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01',
  info: 'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 16v-4M12 8h.01',
  trending: 'M22 7 13.5 15.5 8.5 10.5 2 17M16 7h6v6',
  target: 'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12zM12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4z',
  coins: 'M9 14a6 6 0 1 0 0-12 6 6 0 0 0 0 12zM15 22a6 6 0 1 0 0-12 6 6 0 0 0 0 12zM9 8h.01M15 16h.01',
  pie: 'M12 2v10l8 4A10 10 0 1 0 12 2z',
  scale: 'M12 3v18M5 7h14M8 7l-4 8a4 4 0 0 0 8 0zM16 7l4 8a4 4 0 0 1-8 0zM7 21h10',
  download: 'M12 3v12M7 10l5 5 5-5M5 21h14',
  link: 'M10 13a5 5 0 0 0 7 0l2-2a5 5 0 0 0-7-7l-1 1M14 11a5 5 0 0 0-7 0l-2 2a5 5 0 0 0 7 7l1-1',
  clock: 'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 7v5l3 2',
  menu: 'M3 6h18M3 12h18M3 18h18',
  lock: 'M19 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2zM7 11V7a5 5 0 0 1 10 0v4',
  plus: 'M12 5v14M5 12h14',
  x:    'M18 6 6 18M6 6l12 12',
};

function Icon({ name, className, style, size }) {
  const d = ICONS[name];
  if (!d) return null;
  const fill = name === 'sparkle' || name === 'dashboard';
  return (
    <svg className={className} style={style} width={size || 24} height={size || 24}
      viewBox="0 0 24 24" fill={fill ? 'currentColor' : 'none'}
      stroke={fill ? 'none' : 'currentColor'} strokeWidth="1.8"
      strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d={d} />
    </svg>
  );
}

/* ---------------- átomos ---------------- */
function Delta({ value, suffix = '%', className = '', showIcon = true, dec = 1 }) {
  const dir = value > 0 ? 'up' : value < 0 ? 'down' : 'flat';
  const txt = (value > 0 ? '+' : value < 0 ? '-' : '') +
    new Intl.NumberFormat('es-AR', { minimumFractionDigits: dec, maximumFractionDigits: dec }).format(Math.abs(value)) + suffix;
  return (
    <span className={`delta ${dir} ${className}`}>
      {showIcon && dir !== 'flat' && <Icon name={dir} size={12} />}
      {txt}
    </span>
  );
}

function Signal({ s, onHover }) {
  const label = typeof s === 'string' ? s : (s.signal || '—');
  return (
    <span className={`badge sig-${label}`}
      onMouseEnter={onHover ? (e) => onHover(e, s) : undefined}
      onMouseMove={onHover ? (e) => onHover(e, s) : undefined}
      onMouseLeave={onHover ? () => onHover(null) : undefined}>
      <span className="pip" />{label}
    </span>
  );
}

function useTooltip() {
  const [tt, setTt] = useState(null);
  const onHover = useCallback((e, payload) => {
    if (!e) { setTt(null); return; }
    setTt({ x: e.clientX, y: e.clientY, payload });
  }, []);
  const node = tt ? (
    <div className="tooltip" style={{ left: Math.min(tt.x + 14, window.innerWidth - 270), top: tt.y + 16 }}>
      {tt.payload?.signal && <div className="tt-head" style={{ color: signalColor(tt.payload.signal) }}>{tt.payload.signal}</div>}
      <div>{tt.payload?.reason || tt.payload?.hint || ''}</div>
    </div>
  ) : null;
  return { onHover, node };
}

function signalColor(s) {
  return { COMPRAR: 'var(--pos)', ACUMULAR: 'var(--info)', ESPERAR: 'var(--text-2)', VENDER: 'var(--neg)' }[s] || 'var(--text)';
}

Object.assign(window, {
  fmtARS, fmtNum, fmtPct, fmtCompact,
  Icon, ICONS, Delta, Signal, useTooltip, signalColor,
  useState, useEffect, useRef, useCallback,
});