/* eslint-disable */
// Primitives.jsx — buttons, pills, cards, inputs, stat blocks. All small.

const Button = ({ children, variant = 'primary', size = 'md', icon, iconRight, onClick, disabled, style, ...rest }) => {
  const sizes = {
    sm: { height: 30, padding: '0 12px', fontSize: 12, gap: 6 },
    md: { height: 38, padding: '0 18px', fontSize: 13, gap: 8 },
    lg: { height: 46, padding: '0 24px', fontSize: 14, gap: 10 },
  };
  const variants = {
    primary: {
      background: 'var(--grad-gold-button)',
      color: 'var(--ink-1)',
      fontWeight: 600,
      border: '1px solid #7E5614',
      boxShadow: 'var(--inner-gold)',
    },
    secondary: {
      background: 'transparent',
      color: 'var(--gold-300)',
      border: '1px solid var(--border-gold)',
    },
    ghost: {
      background: 'transparent',
      color: 'var(--fg-secondary)',
      border: '1px solid transparent',
    },
    wine: {
      background: 'var(--wine-500)',
      color: '#fff',
      border: '1px solid var(--wine-400)',
    },
    danger: {
      background: 'transparent',
      color: 'var(--red-400)',
      border: '1px solid rgba(196,69,69,0.4)',
    },
  };
  return (
    <button onClick={disabled ? undefined : onClick} disabled={disabled} style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      gap: sizes[size].gap, height: sizes[size].height, padding: sizes[size].padding,
      borderRadius: 8, fontFamily: 'var(--font-sans)', fontWeight: 500,
      fontSize: sizes[size].fontSize, cursor: disabled ? 'not-allowed' : 'pointer',
      opacity: disabled ? 0.45 : 1, whiteSpace: 'nowrap',
      transition: 'background 120ms var(--ease-standard), border-color 120ms var(--ease-standard)',
      ...variants[variant], ...style,
    }} {...rest}>
      {icon ? <span style={{ display: 'inline-flex' }}>{icon}</span> : null}
      {children}
      {iconRight ? <span style={{ display: 'inline-flex' }}>{iconRight}</span> : null}
    </button>
  );
};

const IconButton = ({ icon, onClick, label, active, style }) => (
  <button onClick={onClick} aria-label={label} style={{
    width: 32, height: 32, borderRadius: 6,
    background: active ? 'rgba(201,152,64,0.10)' : 'transparent',
    color: active ? 'var(--gold-300)' : 'var(--fg-secondary)',
    border: '1px solid ' + (active ? 'var(--border-gold)' : 'transparent'),
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    cursor: 'pointer', transition: 'all 120ms var(--ease-standard)',
    ...style,
  }}>{icon}</button>
);

const Pill = ({ children, tone = 'neutral', dot = true, style }) => {
  const tones = {
    success: ['var(--status-success)', 'rgba(79,168,106,0.12)'],
    warning: ['var(--status-warning)', 'rgba(225,165,58,0.12)'],
    danger:  ['var(--status-danger)',  'rgba(196,69,69,0.12)'],
    info:    ['var(--status-info)',    'rgba(93,139,217,0.12)'],
    wine:    ['var(--wine-200)',       'rgba(122,32,24,0.22)'],
    gold:    ['var(--gold-300)',       'rgba(201,152,64,0.10)'],
    neutral: ['var(--bone-4)',         'rgba(255,244,219,0.06)'],
  };
  const [c, bg] = tones[tone];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '4px 10px', borderRadius: 999,
      background: bg, color: c, fontSize: 11, fontWeight: 500,
      letterSpacing: '0.02em', border: `1px solid ${c}33`, whiteSpace: 'nowrap', ...style,
    }}>
      {dot ? <span style={{ width: 6, height: 6, borderRadius: '50%', background: c }} /> : null}
      {children}
    </span>
  );
};

const Card = ({ children, padding = 20, selected, style, onClick }) => (
  <div onClick={onClick} style={{
    background: 'var(--ink-3)',
    border: '1px solid var(--border-default)',
    borderRadius: 12,
    padding,
    boxShadow: 'var(--inner-highlight)',
    cursor: onClick ? 'pointer' : 'default',
    transition: 'border-color 120ms var(--ease-standard)',
    ...(selected ? { borderLeft: '2px solid var(--gold-400)', paddingLeft: padding - 1 } : {}),
    ...style,
  }}>{children}</div>
);

const Input = ({ label, value, onChange, suffix, prefix, placeholder, mono, style, focusGold }) => (
  <label style={{ display: 'flex', flexDirection: 'column', gap: 4, ...style }}>
    {label ? <span className="kgst-caption" style={{ color: 'var(--bone-3)' }}>{label}</span> : null}
    <div style={{
      display: 'flex', height: 38, borderRadius: 6, overflow: 'hidden',
      border: focusGold ? '1px solid var(--border-gold)' : '1px solid var(--border-default)',
      boxShadow: focusGold ? '0 0 0 2px rgba(201,152,64,0.15)' : 'none',
      background: 'var(--ink-2)',
    }}>
      {prefix ? <div style={{
        display: 'flex', alignItems: 'center', padding: '0 12px',
        color: 'var(--bone-3)', fontFamily: 'var(--font-mono)', fontSize: 12,
        borderRight: '1px solid var(--border-subtle)',
      }}>{prefix}</div> : null}
      <input value={value} onChange={e => onChange && onChange(e.target.value)} placeholder={placeholder}
        style={{
          flex: 1, background: 'transparent', border: 'none', outline: 'none',
          padding: '0 12px', color: 'var(--fg-primary)',
          fontFamily: mono ? 'var(--font-mono)' : 'var(--font-sans)',
          fontSize: mono ? 13 : 14,
        }} />
      {suffix ? <div style={{
        display: 'flex', alignItems: 'center', padding: '0 14px', background: 'var(--ink-3)',
        color: 'var(--gold-300)', fontFamily: 'var(--font-mono)', fontSize: 12,
        borderLeft: '1px solid var(--border-default)',
      }}>{suffix}</div> : null}
    </div>
  </label>
);

const Stat = ({ label, value, sub, tone = 'gold', icon }) => (
  <Card padding={18}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
      {icon ? <span style={{ color: 'var(--bone-3)', display: 'inline-flex' }}>{icon}</span> : null}
      <span className="kgst-caption" style={{ color: 'var(--bone-3)' }}>{label}</span>
    </div>
    <div className="kgst-mono kgst-num" style={{
      fontSize: 28, fontWeight: 600, letterSpacing: '-0.01em',
      color: tone === 'gold' ? 'var(--gold-300)' : tone === 'foil' ? 'transparent' : 'var(--fg-primary)',
      background: tone === 'foil' ? 'linear-gradient(180deg,#F8E8A8 0%,#D9B45A 50%,#8A6018 100%)' : 'none',
      WebkitBackgroundClip: tone === 'foil' ? 'text' : 'unset',
      backgroundClip: tone === 'foil' ? 'text' : 'unset',
      lineHeight: 1.1,
    }}>{value}</div>
    {sub ? <div style={{ marginTop: 8, fontSize: 12, color: 'var(--fg-secondary)' }}>{sub}</div> : null}
  </Card>
);

const Section = ({ title, action, children, style }) => (
  <section style={{ display: 'flex', flexDirection: 'column', gap: 14, ...style }}>
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
      <h2 className="kgst-h3" style={{ margin: 0 }}>{title}</h2>
      {action}
    </div>
    {children}
  </section>
);

const SealDot = ({ size = 18 }) => (
  <span style={{
    display: 'inline-block', width: size, height: size, borderRadius: '50%',
    background: 'radial-gradient(circle at 30% 25%, #C97A6F 0%, #7A2018 35%, #62180B 70%, #2E0B06 100%)',
    boxShadow: '0 0 0 1px rgba(201,152,64,0.55), inset 0 0 0 1px rgba(0,0,0,0.4)',
  }} />
);

Object.assign(window, { Button, IconButton, Pill, Card, Input, Stat, Section, SealDot });