// UI primitives for TradesFlow - icons, chips, buttons, formatters

const fmtAUD = (n, showSign = false) => {
  if (n == null) return '-';
  const abs = Math.abs(n);
  const formatted = abs.toLocaleString('en-AU', { minimumFractionDigits: abs >= 1000 ? 0 : 2, maximumFractionDigits: abs >= 1000 ? 0 : 2 });
  const sign = n < 0 ? '−' : (showSign ? '+' : '');
  return `${sign}$${formatted}`;
};

const fmtAUDcents = (n) => {
  if (n == null) return '-';
  return `$${n.toLocaleString('en-AU', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
};

// Icons - all 16px, stroke-based, currentColor
function Icon({ name, size = 16, strokeWidth = 1.6, style = {} }) {
  const s = { width: size, height: size, flexShrink: 0, ...style };
  const p = { fill: 'none', stroke: 'currentColor', strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'plus': return <svg viewBox="0 0 16 16" style={s}><path {...p} d="M8 3v10M3 8h10"/></svg>;
    case 'arrow-right': return <svg viewBox="0 0 16 16" style={s}><path {...p} d="M3 8h10M9 4l4 4-4 4"/></svg>;
    case 'arrow-left': return <svg viewBox="0 0 16 16" style={s}><path {...p} d="M13 8H3M7 4L3 8l4 4"/></svg>;
    case 'chevron-down': return <svg viewBox="0 0 16 16" style={s}><path {...p} d="M4 6l4 4 4-4"/></svg>;
    case 'chevron-right': return <svg viewBox="0 0 16 16" style={s}><path {...p} d="M6 4l4 4-4 4"/></svg>;
    case 'check': return <svg viewBox="0 0 16 16" style={s}><path {...p} d="M3 8.5l3 3 7-7"/></svg>;
    case 'x': return <svg viewBox="0 0 16 16" style={s}><path {...p} d="M4 4l8 8M12 4l-8 8"/></svg>;
    case 'search': return <svg viewBox="0 0 16 16" style={s}><circle {...p} cx="7" cy="7" r="4.5"/><path {...p} d="M13 13l-2.8-2.8"/></svg>;
    case 'filter': return <svg viewBox="0 0 16 16" style={s}><path {...p} d="M2 3h12M4 8h8M6 13h4"/></svg>;
    case 'user': return <svg viewBox="0 0 16 16" style={s}><circle {...p} cx="8" cy="6" r="2.8"/><path {...p} d="M3 13c1-2.2 2.8-3 5-3s4 .8 5 3"/></svg>;
    case 'users': return <svg viewBox="0 0 16 16" style={s}><circle {...p} cx="6" cy="6" r="2.4"/><circle {...p} cx="11.5" cy="7" r="2"/><path {...p} d="M2 13c.5-2 2-2.8 4-2.8s3.5.8 4 2.8M10 12.5c.3-1.3 1.3-2 2.6-2s2 .5 2.4 1.8"/></svg>;
    case 'phone': return <svg viewBox="0 0 16 16" style={s}><path {...p} d="M3 3h3l1.5 3L6 7.5c1 2 2.5 3.5 4.5 4.5L12 10.5 15 12v3c-7 0-12-5-12-12z"/></svg>;
    case 'mail': return <svg viewBox="0 0 16 16" style={s}><rect {...p} x="2" y="3" width="12" height="10" rx="1.5"/><path {...p} d="M2 5l6 4 6-4"/></svg>;
    case 'map': return <svg viewBox="0 0 16 16" style={s}><path {...p} d="M8 14s4.5-4.3 4.5-7.5a4.5 4.5 0 00-9 0C3.5 9.7 8 14 8 14z"/><circle {...p} cx="8" cy="6.5" r="1.5"/></svg>;
    case 'camera': return <svg viewBox="0 0 16 16" style={s}><rect {...p} x="1.5" y="4" width="13" height="9" rx="1.5"/><circle {...p} cx="8" cy="8.5" r="2.5"/><path {...p} d="M5.5 4l1-1.5h3L10.5 4"/></svg>;
    case 'mic': return <svg viewBox="0 0 16 16" style={s}><rect {...p} x="6" y="2" width="4" height="7" rx="2"/><path {...p} d="M4 8a4 4 0 008 0M8 12v2M6 14h4"/></svg>;
    case 'sparkles': return <svg viewBox="0 0 16 16" style={s}><path {...p} d="M6 1v3M6 6v3M3.5 3.5h5M3.5 7.5h5M11.5 7v6M9.5 10h4"/></svg>;
    case 'bolt': return <svg viewBox="0 0 16 16" style={s}><path {...p} d="M9 1L3 9h4l-1 6 6-8H8l1-6z"/></svg>;
    case 'clock': return <svg viewBox="0 0 16 16" style={s}><circle {...p} cx="8" cy="8" r="6"/><path {...p} d="M8 4.5V8l2.5 1.5"/></svg>;
    case 'calendar': return <svg viewBox="0 0 16 16" style={s}><rect {...p} x="2" y="3.5" width="12" height="10" rx="1.5"/><path {...p} d="M2 6.5h12M6 2v3M10 2v3"/></svg>;
    case 'dollar': return <svg viewBox="0 0 16 16" style={s}><path {...p} d="M8 2v12M11 5H6.5a2 2 0 000 4h3a2 2 0 010 4H5"/></svg>;
    case 'file': return <svg viewBox="0 0 16 16" style={s}><path {...p} d="M3 2h7l3 3v9H3V2zM10 2v3h3"/></svg>;
    case 'settings': return <svg viewBox="0 0 16 16" style={s}><circle {...p} cx="8" cy="8" r="2"/><path {...p} d="M8 1v2M8 13v2M15 8h-2M3 8H1M12.95 3.05l-1.4 1.4M4.45 11.55l-1.4 1.4M12.95 12.95l-1.4-1.4M4.45 4.45l-1.4-1.4"/></svg>;
    case 'bell': return <svg viewBox="0 0 16 16" style={s}><path {...p} d="M4 11V7a4 4 0 018 0v4l1 2H3l1-2zM6.5 13.5a1.5 1.5 0 003 0"/></svg>;
    case 'home': return <svg viewBox="0 0 16 16" style={s}><path {...p} d="M2 7l6-5 6 5v7H2V7z"/><path {...p} d="M6 14v-4h4v4"/></svg>;
    case 'dash': return <svg viewBox="0 0 16 16" style={s}><rect {...p} x="2" y="2" width="5.5" height="5.5" rx="1"/><rect {...p} x="8.5" y="2" width="5.5" height="5.5" rx="1"/><rect {...p} x="2" y="8.5" width="5.5" height="5.5" rx="1"/><rect {...p} x="8.5" y="8.5" width="5.5" height="5.5" rx="1"/></svg>;
    case 'list': return <svg viewBox="0 0 16 16" style={s}><path {...p} d="M2 4h12M2 8h12M2 12h12"/></svg>;
    case 'quote': return <svg viewBox="0 0 16 16" style={s}><path {...p} d="M3 2h7l3 3v9H3V2z"/><path {...p} d="M5.5 7h5M5.5 9.5h5M5.5 12h3"/></svg>;
    case 'receipt': return <svg viewBox="0 0 16 16" style={s}><path {...p} d="M3 1.5h10v13l-2-1-2 1-2-1-2 1-2-1V1.5z"/><path {...p} d="M6 5h4M6 7.5h4M6 10h3"/></svg>;
    case 'star': return <svg viewBox="0 0 16 16" style={s}><path {...p} d="M8 1.5l2 4.5 5 .5-3.8 3.3 1.1 4.7L8 12l-4.3 2.5L4.8 9.8 1 6.5l5-.5L8 1.5z"/></svg>;
    case 'flag': return <svg viewBox="0 0 16 16" style={s}><path {...p} d="M3 2v12M3 2.5h8l-1 2.5 1 2.5H3"/></svg>;
    case 'climate': return <svg viewBox="0 0 16 16" style={s}><rect {...p} x="1.5" y="3" width="13" height="6" rx="1.5"/><path {...p} d="M4 6.5h8M4 11l1 2M8 11l1 2M12 11l1 2"/></svg>;
    case 'wrench': return <svg viewBox="0 0 16 16" style={s}><path {...p} d="M10.5 1.5a3.5 3.5 0 013 4.8L14 7l-7.5 7.5-1.5-1.5L12.5 5.5a3.5 3.5 0 01-2-4z"/></svg>;
    case 'sun': return <svg viewBox="0 0 16 16" style={s}><circle {...p} cx="8" cy="8" r="3"/><path {...p} d="M8 1v1.5M8 13.5V15M1 8h1.5M13.5 8H15M3 3l1 1M12 12l1 1M13 3l-1 1M4 12l-1 1"/></svg>;
    case 'link': return <svg viewBox="0 0 16 16" style={s}><path {...p} d="M7 4.5H5a3.5 3.5 0 000 7h2M9 4.5h2a3.5 3.5 0 010 7H9M6 8h4"/></svg>;
    case 'send': return <svg viewBox="0 0 16 16" style={s}><path {...p} d="M14 2L2 7l5 2 2 5 5-12zM7 9l4-4"/></svg>;
    case 'copy': return <svg viewBox="0 0 16 16" style={s}><rect {...p} x="5" y="5" width="9" height="9" rx="1.5"/><path {...p} d="M3 10V3.5C3 2.7 3.7 2 4.5 2H11"/></svg>;
    case 'external': return <svg viewBox="0 0 16 16" style={s}><path {...p} d="M10 2h4v4M14 2l-6 6M7 3H3v10h10V9"/></svg>;
    case 'pencil': return <svg viewBox="0 0 16 16" style={s}><path {...p} d="M11 2l3 3-8 8H3v-3l8-8z"/></svg>;
    case 'more': return <svg viewBox="0 0 16 16" style={s}><circle fill="currentColor" cx="4" cy="8" r="1.2"/><circle fill="currentColor" cx="8" cy="8" r="1.2"/><circle fill="currentColor" cx="12" cy="8" r="1.2"/></svg>;
    case 'shield': return <svg viewBox="0 0 16 16" style={s}><path {...p} d="M8 1.5l5.5 2v4.5c0 3.5-2.5 5.8-5.5 6.5-3-.7-5.5-3-5.5-6.5V3.5L8 1.5z"/></svg>;
    case 'battery': return <svg viewBox="0 0 16 16" style={s}><rect {...p} x="2" y="5" width="10" height="6" rx="1"/><path {...p} d="M13 7v2h1V7h-1z" fill="currentColor"/><rect fill="currentColor" x="3.5" y="6.5" width="5" height="3" rx="0.3" stroke="none"/></svg>;
    case 'download': return <svg viewBox="0 0 16 16" style={s}><path {...p} d="M8 2v8M4.5 7L8 10.5 11.5 7M2.5 13h11"/></svg>;
    case 'upload': return <svg viewBox="0 0 16 16" style={s}><path {...p} d="M8 10V2M4.5 5.5L8 2l3.5 3.5M2.5 13h11"/></svg>;
    case 'play': return <svg viewBox="0 0 16 16" style={s}><path {...p} d="M4 3v10l9-5-9-5z" fill="currentColor" stroke="none"/></svg>;
    case 'pause': return <svg viewBox="0 0 16 16" style={s}><rect fill="currentColor" x="4" y="3" width="3" height="10" rx="1" stroke="none"/><rect fill="currentColor" x="9" y="3" width="3" height="10" rx="1" stroke="none"/></svg>;
    case 'stop': return <svg viewBox="0 0 16 16" style={s}><rect fill="currentColor" x="4" y="4" width="8" height="8" rx="1" stroke="none"/></svg>;
    case 'image': return <svg viewBox="0 0 16 16" style={s}><rect {...p} x="2" y="3" width="12" height="10" rx="1.5"/><circle {...p} cx="6" cy="7" r="1.2"/><path {...p} d="M2 11l3.5-3.5 4 4M10 8.5l2-1.5 2 1.5"/></svg>;
    default: return null;
  }
}

function Chip({ children, tone = 'neutral', icon, style = {} }) {
  const tones = {
    neutral: { bg: 'var(--surface-2)', fg: 'var(--ink-70)', border: 'var(--border)' },
    accent: { bg: 'var(--accent-tint)', fg: 'var(--accent-ink)', border: 'var(--accent-border)' },
    sage: { bg: 'var(--sage-tint)', fg: 'var(--sage-ink)', border: 'var(--sage-border)' },
    warn: { bg: '#FEF0E0', fg: '#7A4213', border: '#F2D8B3' },
    ink: { bg: 'var(--ink)', fg: 'var(--paper)', border: 'var(--ink)' },
    ghost: { bg: 'transparent', fg: 'var(--ink-60)', border: 'var(--border)' },
  };
  const t = tones[tone] || tones.neutral;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 5,
      padding: '2px 8px', borderRadius: 999, fontSize: 11, lineHeight: '18px',
      background: t.bg, color: t.fg, border: `1px solid ${t.border}`,
      fontFamily: 'var(--mono)', letterSpacing: 0.2,
      whiteSpace: 'nowrap',
      ...style,
    }}>
      {icon && <Icon name={icon} size={11} strokeWidth={1.8} />}
      {children}
    </span>
  );
}

function Btn({ children, variant = 'secondary', size = 'md', icon, iconRight, onClick, disabled, style = {}, type = 'button', title }) {
  const variants = {
    primary:   { bg: 'var(--ink)', fg: 'var(--paper)', bd: 'var(--ink)', hover: 'var(--ink-85)' },
    secondary: { bg: 'var(--surface)', fg: 'var(--ink)', bd: 'var(--border-strong)', hover: 'var(--surface-2)' },
    ghost:     { bg: 'transparent', fg: 'var(--ink-70)', bd: 'transparent', hover: 'var(--surface-2)' },
    accent:    { bg: 'var(--accent)', fg: '#2A1A04', bd: 'var(--accent)', hover: 'var(--accent-deep)' },
    danger:    { bg: 'var(--surface)', fg: '#8C2E20', bd: '#E8C8C0', hover: '#FBEFEC' },
    soft:      { bg: 'var(--surface-2)', fg: 'var(--ink)', bd: 'var(--border)', hover: 'var(--surface-3)' },
  };
  const sizes = {
    sm: { padY: 4, padX: 9, fs: 12, gap: 5, h: 26 },
    md: { padY: 6, padX: 12, fs: 13, gap: 6, h: 32 },
    lg: { padY: 10, padX: 18, fs: 14, gap: 8, h: 42 },
  };
  const v = variants[variant], s = sizes[size];
  const [hover, setHover] = React.useState(false);
  return (
    <button
      type={type}
      title={title}
      onClick={onClick}
      disabled={disabled}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        gap: s.gap, padding: `${s.padY}px ${s.padX}px`, height: s.h,
        borderRadius: 8, border: `1px solid ${v.bd}`,
        background: hover && !disabled ? v.hover : v.bg, color: v.fg,
        fontSize: s.fs, fontWeight: 500, fontFamily: 'var(--sans)',
        cursor: disabled ? 'not-allowed' : 'pointer',
        opacity: disabled ? 0.5 : 1,
        transition: 'background 120ms ease, transform 80ms ease',
        transform: hover && !disabled ? 'translateY(-0.5px)' : 'none',
        letterSpacing: -0.1, boxShadow: variant === 'primary' ? '0 1px 0 rgba(0,0,0,0.05)' : 'none',
        ...style,
      }}>
      {icon && <Icon name={icon} size={size === 'lg' ? 15 : 14} />}
      {children}
      {iconRight && <Icon name={iconRight} size={size === 'lg' ? 15 : 14} />}
    </button>
  );
}

function KeyCap({ children, style = {} }) {
  return <kbd style={{
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    minWidth: 18, height: 18, padding: '0 5px',
    fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--ink-60)',
    background: 'var(--surface)', border: '1px solid var(--border)',
    borderBottomWidth: 2, borderRadius: 4, ...style,
  }}>{children}</kbd>;
}

// Striped placeholder - used in cards & photos where we don't have real imagery
function PlaceholderImage({ label, tone = '#c8c0ae', width = '100%', height = 120, style = {} }) {
  const id = React.useMemo(() => 'ph-' + Math.random().toString(36).slice(2, 8), []);
  return (
    <div style={{
      position: 'relative', width, height, borderRadius: 8,
      background: tone, overflow: 'hidden',
      fontFamily: 'var(--mono)', fontSize: 10, color: 'rgba(0,0,0,0.58)',
      letterSpacing: 0.5,
      ...style,
    }}>
      <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0 }}>
        <defs>
          <pattern id={id} patternUnits="userSpaceOnUse" width="8" height="8" patternTransform="rotate(45)">
            <line x1="0" y1="0" x2="0" y2="8" stroke="rgba(255,255,255,0.22)" strokeWidth="3"/>
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill={`url(#${id})`}/>
      </svg>
      {label && (
        <div style={{
          position: 'absolute', inset: 0, display: 'flex', alignItems: 'flex-end',
          padding: '8px 10px',
        }}>
          <span style={{
            background: 'rgba(20,18,12,0.78)', color: 'rgba(255,245,225,0.92)',
            padding: '2px 7px', borderRadius: 3, fontSize: 9.5, textTransform: 'uppercase',
            letterSpacing: 0.8,
          }}>{label}</span>
        </div>
      )}
    </div>
  );
}

// A small initial avatar
function Avatar({ initials, size = 24, tone }) {
  const palette = ['#C9B994', '#B8C6B0', '#D4B89C', '#A9B7BF', '#C1A898', '#BCC4A8'];
  const bg = tone || palette[initials.charCodeAt(0) % palette.length];
  return (
    <div style={{
      width: size, height: size, borderRadius: size,
      background: bg, color: '#201810',
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      fontSize: size * 0.42, fontWeight: 600, fontFamily: 'var(--sans)',
      letterSpacing: -0.2, flexShrink: 0,
      border: '1px solid rgba(0,0,0,0.08)',
    }}>{initials}</div>
  );
}

function Kbd({ children }) {
  return <span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-60)' }}>{children}</span>;
}

// Tiny trade icon chip (for trade switcher)
function TradeChip({ trade, selected = false, onClick }) {
  const [hover, setHover] = React.useState(false);
  return (
    <button
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: 'inline-flex', alignItems: 'center', gap: 6,
        padding: '5px 10px', borderRadius: 7,
        background: selected ? 'var(--ink)' : (hover ? 'var(--surface-2)' : 'transparent'),
        color: selected ? 'var(--paper)' : 'var(--ink-70)',
        border: `1px solid ${selected ? 'var(--ink)' : 'var(--border)'}`,
        fontSize: 12, fontWeight: 500, cursor: 'pointer',
        fontFamily: 'var(--sans)', letterSpacing: -0.1,
      }}>
      <Icon name={trade.icon} size={13} />
      {trade.label}
    </button>
  );
}

Object.assign(window, { Icon, Chip, Btn, KeyCap, PlaceholderImage, Avatar, Kbd, TradeChip, fmtAUD, fmtAUDcents });