// Shared React helpers across all 3 directions.
const { useState, useEffect, useRef, useMemo, createContext, useContext } = React;

// Inline sparkline — minimal SVG path.
function Spark({ data, color = 'currentColor', height = 36, fill, strokeWidth = 1.5, smooth = true }) {
  if (!data || data.length === 0) return null;
  const min = Math.min(...data), max = Math.max(...data);
  const range = max - min || 1;
  const w = 100, h = height;
  const pts = data.map((v, i) => [
    (i / (data.length - 1)) * w,
    h - ((v - min) / range) * (h - 4) - 2,
  ]);
  let d = '';
  if (smooth) {
    d = pts.reduce((acc, [x, y], i) => {
      if (i === 0) return `M ${x} ${y}`;
      const [px, py] = pts[i - 1];
      const cx = (px + x) / 2;
      return `${acc} Q ${px} ${py} ${cx} ${(py + y) / 2} T ${x} ${y}`;
    }, '');
  } else {
    d = pts.map(([x, y], i) => `${i === 0 ? 'M' : 'L'} ${x} ${y}`).join(' ');
  }
  const fillD = fill ? `${d} L ${w} ${h} L 0 ${h} Z` : null;
  return (
    <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" style={{ width: '100%', height, display: 'block' }}>
      {fill && <path d={fillD} fill={fill} stroke="none"/>}
      <path d={d} fill="none" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" vectorEffect="non-scaling-stroke"/>
    </svg>
  );
}

// Radial progress ring.
function Ring({ pct = 0, size = 48, sw = 4, color = 'currentColor', track = 'rgba(255,255,255,0.08)', children }) {
  const r = (size - sw) / 2;
  const c = 2 * Math.PI * r;
  const p = Math.max(0, Math.min(1, pct));
  return (
    <div style={{ position: 'relative', width: size, height: size, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
      <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={track} strokeWidth={sw}/>
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={color} strokeWidth={sw}
                strokeDasharray={c}
                strokeDashoffset={c * (1 - p)}
                strokeLinecap="round"
                style={{ transition: 'stroke-dashoffset .8s cubic-bezier(.4,0,.2,1)' }}/>
      </svg>
      {children && <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 600 }}>{children}</div>}
    </div>
  );
}

// Linear progress bar
function Bar({ pct = 0, color = 'currentColor', track = 'rgba(255,255,255,0.08)', height = 6, radius = 999 }) {
  const p = Math.max(0, Math.min(1, pct));
  return (
    <div style={{ height, background: track, borderRadius: radius, overflow: 'hidden' }}>
      <div style={{ height: '100%', width: (p * 100) + '%', background: color, borderRadius: radius, transition: 'width .8s cubic-bezier(.4,0,.2,1)' }}/>
    </div>
  );
}

// Phone frame for mobile views. width × height target, but responsive on small screens.
function Phone({ children, w = 390, h = 844, theme = 'dark' }) {
  return (
    <div className="phone-shell" data-theme={theme}>
      <div className="phone" style={{ width: w, height: h }}>
        <div className="phone-screen">{children}</div>
      </div>
    </div>
  );
}

// Money / number helpers from data.js are on window. Add a few more.
function compactInt(n) {
  const abs = Math.abs(n);
  if (abs >= 1e6) return (n / 1e6).toFixed(1).replace(/\.0$/, '') + 'M';
  if (abs >= 1e3) return (n / 1e3).toFixed(1).replace(/\.0$/, '') + 'k';
  return String(n);
}

// Country flag emoji-ish (just iso 2-letter inside a pill — we avoid emoji).
function CountryDot({ c }) {
  return <span style={{ fontSize: 9, fontWeight: 700, letterSpacing: 0.5, padding: '1px 5px', border: '1px solid currentColor', borderRadius: 4, opacity: 0.7 }}>{c}</span>;
}

// Computes derived progress.
function useAccountProgress(a) {
  return useMemo(() => window.computeProgress(a), [a]);
}

// Direction switcher context (which direction is active + which view + which page)
const AppContext = createContext(null);
function useApp() { return useContext(AppContext); }

Object.assign(window, { useState, useEffect, useRef, useMemo, Spark, Ring, Bar, Phone, compactInt, CountryDot, useAccountProgress, AppContext, useApp });