// Atomic UI primitives
const { useState, useEffect, useRef, useMemo, useCallback } = React;

function Btn({ children, active, variant='ghost', size='md', title, onClick, style, disabled, icon }) {
  const sizes = {
    sm: { padding: '4px 8px', fontSize: 11, height: 24, gap: 5 },
    md: { padding: '6px 10px', fontSize: 12, height: 30, gap: 6 },
    lg: { padding: '8px 14px', fontSize: 13, height: 36, gap: 8 },
  };
  const variants = {
    ghost: { background: active ? 'var(--bg-3)' : 'transparent', color: active ? 'var(--ink-0)' : 'var(--ink-2)', border: '1px solid transparent' },
    outline: { background: 'var(--bg-2)', color: 'var(--ink-1)', border: '1px solid var(--line-2)' },
    solid: { background: 'var(--ink-0)', color: 'var(--bg-0)', border: '1px solid var(--ink-0)', fontWeight: 600 },
    accent: { background: 'var(--accent)', color: 'var(--accent-text)', border: '1px solid var(--accent)', fontWeight: 600 },
    danger: { background: 'transparent', color: 'var(--reject)', border: '1px solid transparent' },
  };
  return (
    <button
      onClick={e => { if (!disabled && onClick) onClick(e); }}
      title={title}
      disabled={disabled}
      style={{
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        borderRadius: 'var(--radius)', cursor: disabled ? 'not-allowed' : 'pointer',
        opacity: disabled ? 0.4 : 1,
        transition: 'background 120ms, color 120ms, border-color 120ms',
        whiteSpace: 'nowrap', letterSpacing: 0.02,
        ...sizes[size], ...variants[variant], ...style,
      }}
      onMouseEnter={e => { if (!disabled && !active && variant==='ghost') { e.currentTarget.style.background = 'var(--bg-3)'; e.currentTarget.style.color = 'var(--ink-0)'; } }}
      onMouseLeave={e => { if (!active && variant==='ghost') { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--ink-2)'; } }}
    >
      {icon && <span style={{display:'flex'}}>{icon}</span>}
      {children}
    </button>
  );
}

function Kbd({ children }) {
  return <kbd style={{
    fontFamily: 'var(--mono)', fontSize: 10,
    padding: '1px 5px', minWidth: 16, textAlign: 'center',
    background: 'var(--bg-3)', color: 'var(--ink-2)',
    border: '1px solid var(--line-2)', borderBottom: '2px solid var(--line-2)',
    borderRadius: 3, lineHeight: 1.4,
  }}>{children}</kbd>;
}

function Chip({ children, active, color, onClick, onRemove, style }) {
  const colorMap = {
    red:    { bg: 'rgba(229,72,77,0.16)',  fg: '#ff9ba0' },
    orange: { bg: 'rgba(255,155,80,0.16)', fg: '#ffb27a' },
    yellow: { bg: 'rgba(244,185,66,0.16)', fg: '#f4d58a' },
    green:  { bg: 'rgba(82,200,120,0.16)', fg: '#88ddaa' },
    blue:   { bg: 'rgba(112,165,255,0.16)',fg: '#a7c6ff' },
    purple: { bg: 'rgba(186,128,240,0.16)',fg: '#d0a8f5' },
  };
  const c = color && colorMap[color] ? colorMap[color] : { bg: active ? 'var(--blue-soft)' : 'var(--bg-3)', fg: active ? '#a7c6ff' : 'var(--ink-2)'};
  return (
    <span onClick={onClick} style={{
      display: 'inline-flex', alignItems: 'center', gap: 4,
      padding: '2px 7px', fontSize: 10.5, fontWeight: 500,
      background: c.bg, color: c.fg,
      borderRadius: 99, cursor: onClick ? 'pointer' : 'default',
      letterSpacing: 0.02, lineHeight: 1.5,
      ...style,
    }}>
      {children}
      {onRemove && <button onClick={e => { e.stopPropagation(); onRemove(); }}
        style={{ background: 'none', border: 'none', color: 'inherit', cursor: 'pointer', opacity: 0.6, padding: 0, marginLeft: 1, lineHeight: 1 }}>×</button>}
    </span>
  );
}

function Stars({ rating, onRate, size = 12, compact }) {
  return (
    <div style={{ display: 'inline-flex', gap: 1, alignItems: 'center' }} onClick={e=>e.stopPropagation()}>
      {[1,2,3,4,5].map(i => {
        const filled = i <= (rating||0);
        return (
          <button key={i} onClick={e => { e.stopPropagation(); onRate && onRate(i === rating ? 0 : i); }}
            style={{
              background: 'none', border: 'none', padding: compact ? '0 1px' : '0 2px', cursor: 'pointer',
              color: filled ? 'var(--accent)' : 'var(--ink-4)',
              fontSize: size, lineHeight: 1, transition: 'color 120ms, transform 80ms',
            }}
            onMouseEnter={e => { e.currentTarget.style.transform = 'scale(1.2)'; }}
            onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; }}
          >★</button>
        );
      })}
    </div>
  );
}

function ColorDot({ color, size = 10, onClick, active }) {
  const map = {
    red: '#e5484d', orange: '#ff9b50', yellow: '#f4b942',
    green: '#52c878', blue: '#70a5ff', purple: '#ba80f0',
  };
  return (
    <button onClick={onClick} style={{
      width: size, height: size, borderRadius: '50%',
      background: color ? map[color] : 'transparent',
      border: color ? 'none' : '1.5px dashed var(--ink-4)',
      padding: 0, cursor: onClick ? 'pointer' : 'default',
      boxShadow: active ? '0 0 0 2px var(--bg-1), 0 0 0 3px var(--ink-1)' : 'none',
      transition: 'box-shadow 120ms',
    }}/>
  );
}

function Pill({ children, color = 'neutral', style }) {
  const map = {
    neutral: { bg: 'var(--bg-3)', fg: 'var(--ink-2)', border: 'var(--line-2)' },
    raw: { bg: 'transparent', fg: 'var(--ink-1)', border: 'var(--line-3)' },
    jpg: { bg: 'transparent', fg: 'var(--ink-2)', border: 'var(--line-2)' },
    accent: { bg: 'var(--accent-soft)', fg: 'var(--accent)', border: 'transparent' },
    reject: { bg: 'var(--reject-soft)', fg: 'var(--reject)', border: 'transparent' },
    live: { bg: 'rgba(82,200,120,0.14)', fg: '#88ddaa', border: 'transparent' },
  };
  const c = map[color] || map.neutral;
  return <span style={{
    display: 'inline-flex', alignItems: 'center', gap: 4,
    padding: '1px 6px', fontSize: 10, fontWeight: 500,
    letterSpacing: 0.08, textTransform: 'uppercase',
    background: c.bg, color: c.fg, border: `1px solid ${c.border}`,
    borderRadius: 3, fontFamily: 'var(--mono)',
    ...style,
  }}>{children}</span>;
}

function Divider({ vertical, style }) {
  return <div style={{
    background: 'var(--line-1)',
    width: vertical ? 1 : '100%',
    height: vertical ? 16 : 1,
    flexShrink: 0,
    ...style,
  }} />;
}

function Toast({ msg, onClose }) {
  useEffect(() => {
    if (!msg) return;
    const t = setTimeout(onClose, 2600);
    return () => clearTimeout(t);
  }, [msg]);
  if (!msg) return null;
  return (
    <div style={{
      position: 'fixed', bottom: 80, left: '50%', transform: 'translateX(-50%)',
      background: 'var(--bg-3)', color: 'var(--ink-0)',
      padding: '10px 18px', borderRadius: 8, fontSize: 12,
      border: '1px solid var(--line-2)',
      boxShadow: '0 12px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.02) inset',
      zIndex: 999, animation: 'fade-up 180ms ease',
      display: 'flex', alignItems: 'center', gap: 10,
    }}>
      <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)' }}/>
      {msg}
    </div>
  );
}

Object.assign(window, { Btn, Kbd, Chip, Stars, ColorDot, Pill, Divider, Toast });