// Shared UI primitives

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

function Chip({ children, tone, ink }) {
  const cls = ['chip'];
  if (tone) cls.push(tone);
  if (ink) cls.push('ink');
  return <span className={cls.join(' ')}>{children}</span>;
}

function Avatar({ name, size = 32 }) {
  const initials = name.split(/\s+/).slice(0,2).map(s => s[0]).join('').toUpperCase();
  return <div className="msg-avatar" style={{ width: size, height: size, fontSize: size * 0.38 }}>{initials}</div>;
}

// Tiny SVG sparkline
function Spark({ data, w = 60, h = 18, color }) {
  const max = Math.max(...data), min = Math.min(...data);
  const pts = data.map((v, i) => {
    const x = (i / (data.length - 1)) * w;
    const y = h - ((v - min) / (max - min || 1)) * h;
    return `${x.toFixed(1)},${y.toFixed(1)}`;
  }).join(' ');
  return (
    <svg width={w} height={h} style={{ display: 'block' }}>
      <polyline fill="none" stroke={color || 'currentColor'} strokeWidth="1.5" points={pts} strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

// Currency format
const eur = (n, opts = {}) => {
  const s = (Math.abs(n)).toLocaleString('en-US', { maximumFractionDigits: 0 });
  const prefix = opts.sign && n >= 0 ? '+' : (n < 0 ? '−' : '');
  return `${prefix}€${s}`;
};

Object.assign(window, { Chip, Avatar, Spark, eur });