// MakerSights primitives — Button, Input, Badge, Chip, Alert, Card, Avatar

function Button({ children, variant = 'solid', size = 'md', icon, onClick, disabled, style: s }) {
  const base = {
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
    border: 'none', cursor: disabled ? 'not-allowed' : 'pointer', fontFamily: "'PP Telegraf', sans-serif",
    fontWeight: 600, lineHeight: 1, borderRadius: 900, whiteSpace: 'nowrap',
    transition: 'background 120ms cubic-bezier(0.2,0,0,1)',
  };
  const sizes = {
    sm: { height: 28, padding: '0 12px', fontSize: 12 },
    md: { height: 32, padding: '0 16px', fontSize: 13 },
    lg: { height: 40, padding: '0 20px', fontSize: 14 },
  };
  const variants = {
    solid: { background: disabled ? '#eef2f6' : '#3a8518', color: disabled ? '#717f90' : '#fff' },
    outlined: { background: 'transparent', color: '#050301', border: '1px solid #3a8518' },
    subtle: { background: 'transparent', color: '#050301' },
    danger: { background: '#d63f2b', color: '#fff' },
    dark: { background: '#050301', color: '#fff' },
  };
  return (
    <button onClick={onClick} disabled={disabled} style={{...base, ...sizes[size], ...variants[variant], ...s}}>
      {icon}<span>{children}</span>
    </button>
  );
}

function IconButton({ icon, onClick, title, variant = 'subtle' }) {
  const bg = variant === 'subtle' ? 'transparent' : variant === 'solid' ? '#3a8518' : '#eef2f6';
  const color = variant === 'solid' ? '#fff' : '#050301';
  return (
    <button onClick={onClick} title={title} style={{
      width: 32, height: 32, borderRadius: 6, border: 'none', cursor: 'pointer',
      background: bg, color, display: 'flex', alignItems: 'center', justifyContent: 'center'
    }}>{icon}</button>
  );
}

function Input({ label, hint, error, ...props }) {
  return (
    <label style={{display:'flex', flexDirection:'column', gap:6, fontFamily:"'PP Telegraf', sans-serif"}}>
      {label && <span style={{fontSize:12, fontWeight:600, color:'#050301'}}>{label}</span>}
      <input {...props} style={{
        height: 36, padding: '0 12px', borderRadius: 6,
        border: `1px solid ${error ? '#d63f2b' : '#ced6de'}`,
        background: '#fff', fontSize: 14, color: '#050301', fontFamily: 'inherit',
        outline: 'none', ...props.style
      }}/>
      {(hint || error) && <span style={{fontSize:12, color: error ? '#d63f2b' : '#636c79'}}>{error || hint}</span>}
    </label>
  );
}

function Badge({ children, tone = 'neutral' }) {
  const tones = {
    neutral: { background: '#eef2f6', color: '#050301' },
    mint: { background: '#daebd1', color: '#2b6418' },
    red: { background: '#fce3e3', color: '#bf3826' },
    amber: { background: '#fff3dc', color: '#8c5800' },
    blue: { background: '#dbe9fa', color: '#0070eb' },
    violet: { background: '#d9cff7', color: '#430dd9' },
    dark: { background: '#050301', color: '#fff' },
  };
  return <span style={{
    display:'inline-flex', alignItems:'center', gap:4,
    padding:'2px 10px', borderRadius:900, fontSize:12, fontWeight:600,
    height:22, lineHeight:1, fontFamily:"'PP Telegraf', sans-serif",
    ...tones[tone]
  }}>{children}</span>;
}

function Card({ children, pad = 24, style: s }) {
  return <div style={{
    background:'#fff', border:'1px solid #e5ebf1', borderRadius:12,
    padding: pad, ...s
  }}>{children}</div>;
}

function Alert({ tone = 'info', title, children, onClose }) {
  const tones = {
    success: { bg:'#daebd1', br:'#c8e2ba', dot:'#3a8518', tc:'#2b6418', icon:'✓' },
    info:    { bg:'#eef2f6', br:'#e5ebf1', dot:'#636c79', tc:'#050301', icon:'i' },
    warning: { bg:'#fff3dc', br:'#ffe4a6', dot:'#a56500', tc:'#8c5800', icon:'!' },
    danger:  { bg:'#fce3e3', br:'#f5c7c2', dot:'#d63f2b', tc:'#bf3826', icon:'!' },
  };
  const t = tones[tone];
  return (
    <div style={{
      display:'flex', gap:12, alignItems:'flex-start',
      padding:'12px 16px', borderRadius:8, border:`1px solid ${t.br}`, background:t.bg,
      fontFamily:"'PP Telegraf', sans-serif"
    }}>
      <div style={{width:20, height:20, borderRadius:999, background:t.dot, color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontWeight:700, fontSize:12, flex:'none', marginTop:2}}>{t.icon}</div>
      <div style={{flex:1, minWidth:0}}>
        <div style={{fontFamily:"'PP Telegraf'", fontWeight:700, fontSize:14, color:t.tc}}>{title}</div>
        {children && <div style={{fontSize:13, color:'#050301', marginTop:2}}>{children}</div>}
      </div>
      {onClose && <button onClick={onClose} style={{background:'transparent', border:'none', cursor:'pointer', color:t.tc}}>×</button>}
    </div>
  );
}

function Avatar({ name, color = '#3a8518', size = 32 }) {
  const initials = name.split(' ').map(p=>p[0]).join('').slice(0,2);
  return (
    <div style={{
      width:size, height:size, borderRadius:999, background:color,
      color:'#fff', fontWeight:600, fontSize: size*0.38,
      display:'flex', alignItems:'center', justifyContent:'center',
      fontFamily:"'PP Telegraf', sans-serif"
    }}>{initials}</div>
  );
}

function Chip({ children, onRemove }) {
  return (
    <div style={{
      display:'inline-flex', alignItems:'center', gap:6, padding:'4px 8px 4px 12px',
      borderRadius:900, fontSize:13, background:'#eef2f6', color:'#050301',
      fontFamily:"'PP Telegraf', sans-serif"
    }}>
      <span>{children}</span>
      {onRemove && <button onClick={onRemove} style={{
        width:16, height:16, borderRadius:999, background:'#ced6de', color:'#fff',
        border:'none', cursor:'pointer', fontSize:11, lineHeight:1, display:'flex', alignItems:'center', justifyContent:'center'
      }}>×</button>}
    </div>
  );
}

function Tabs({ tabs, active, onChange }) {
  return (
    <div style={{display:'flex', borderBottom:'1px solid #e5ebf1', gap:0, fontFamily:"'PP Telegraf', sans-serif"}}>
      {tabs.map(t => (
        <button key={t.id} onClick={()=>onChange?.(t.id)} style={{
          padding:'10px 16px', background:'transparent', border:'none',
          borderBottom: active === t.id ? '2px solid #3a8518' : '2px solid transparent',
          color: active === t.id ? '#050301' : '#636c79',
          fontWeight: active === t.id ? 600 : 500, fontSize:14, cursor:'pointer',
          marginBottom:-1, fontFamily:'inherit'
        }}>{t.label}{t.count != null && <span style={{marginLeft:6, color:'#717f90', fontWeight:500}}>{t.count}</span>}</button>
      ))}
    </div>
  );
}

Object.assign(window, { Button, IconButton, Input, Badge, Card, Alert, Avatar, Chip, Tabs });