// 888 Artworks — shared app primitives (buttons, chips, cards, tab bar)
// Global-scope exports at bottom. CSS comes from ../../colors_and_type.css.

const eightBall = (size = 32) => (
  <svg viewBox="0 0 200 200" width={size} height={size}>
    <defs>
      <radialGradient id={`s${size}`} cx="0.35" cy="0.3" r="0.9">
        <stop offset="0%" stopColor="#3a3a38"/><stop offset="55%" stopColor="#121210"/><stop offset="100%" stopColor="#000"/>
      </radialGradient>
      <radialGradient id={`c${size}`} cx="0.4" cy="0.35" r="0.8">
        <stop offset="0%" stopColor="#fcf5e3"/><stop offset="70%" stopColor="#f1e7cc"/><stop offset="100%" stopColor="#d9caa4"/>
      </radialGradient>
    </defs>
    <circle cx="100" cy="100" r="92" fill={`url(#s${size})`}/>
    <ellipse cx="72" cy="62" rx="28" ry="14" fill="#fff" opacity="0.12"/>
    <circle cx="100" cy="100" r="42" fill={`url(#c${size})`}/>
    <text x="100" y="115" textAnchor="middle" fontFamily="'DM Serif Display', Georgia, serif" fontWeight="900" fontSize="34" fill="#17140d" letterSpacing="-0.5">888</text>
  </svg>
);

const Icon = ({ name, size = 20, color = 'currentColor', fill = 'none', sw = 1.5 }) => {
  const common = { width: size, height: size, viewBox: '0 0 24 24', fill, stroke: color, strokeWidth: sw, strokeLinecap: 'round', strokeLinejoin: 'round' };
  const paths = {
    search: <><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></>,
    heart: <path d="M12 21s-7-4.5-7-10a4.5 4.5 0 0 1 8-2 4.5 4.5 0 0 1 8 2c0 5.5-7 10-9 10Z"/>,
    bag: <><path d="M6 7h12l-1 13H7z"/><path d="M9 7V5a3 3 0 0 1 6 0v2"/></>,
    user: <><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7"/></>,
    filter: <path d="M3 6h18M6 12h12M10 18h4"/>,
    grid: <><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></>,
    plus: <path d="M12 5v14M5 12h14"/>,
    arrowRight: <path d="M20 12H4M14 6l6 6-6 6"/>,
    arrowLeft: <path d="M4 12h16M10 6l-6 6 6 6"/>,
    close: <path d="M18 6 6 18M6 6l12 12"/>,
    check: <path d="m4 12 5 5L20 6"/>,
    message: <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>,
    calendar: <><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></>,
    eye: <><path d="M21 12c-2 5-6 7-9 7-6 0-9-5-9-7s3-7 9-7c3 0 7 2 9 7Z"/><circle cx="12" cy="12" r="3"/></>,
    home: <><path d="M3 12 12 3l9 9"/><path d="M5 10v10h14V10"/></>,
    sparkles: <><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.5 5.5l2.5 2.5M16 16l2.5 2.5M5.5 18.5 8 16M16 8l2.5-2.5"/></>,
  };
  return <svg {...common}>{paths[name] || null}</svg>;
};

// Buttons
const Button = ({ children, variant = 'primary', size = 'md', icon, iconRight, onClick, disabled, full }) => {
  const pad = size === 'sm' ? '8px 16px' : size === 'lg' ? '14px 26px' : '12px 22px';
  const fs = size === 'sm' ? 13 : size === 'lg' ? 15 : 14;
  const radius = 999;
  const styles = {
    primary: { background: 'var(--action)', color: 'var(--action-fg)', border: '1px solid transparent' },
    accent:  { background: 'var(--accent)', color: 'var(--accent-fg)', border: '1px solid transparent' },
    secondary: { background: 'transparent', color: 'var(--fg)', border: '1px solid var(--line-strong)' },
    ghost: { background: 'transparent', color: 'var(--fg-soft)', border: '1px solid transparent' },
  }[variant];
  return (
    <button onClick={onClick} disabled={disabled} style={{
      ...styles, padding: pad, fontSize: fs, fontFamily: 'var(--font-body)', fontWeight: 500,
      borderRadius: radius, cursor: disabled ? 'default' : 'pointer', width: full ? '100%' : undefined,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      opacity: disabled ? 0.4 : 1, transition: 'all 120ms var(--ease-out)',
    }}>
      {icon && <Icon name={icon} size={fs + 2}/>}
      {children}
      {iconRight && <Icon name={iconRight} size={fs + 2}/>}
    </button>
  );
};

// Chip
const Chip = ({ children, active, onClick }) => (
  <button onClick={onClick} style={{
    fontFamily: 'var(--font-body)', fontSize: 12, fontWeight: 500,
    padding: '7px 14px', borderRadius: 999,
    border: `1px solid ${active ? 'var(--ink-500)' : 'var(--line-strong)'}`,
    color: active ? 'var(--fg-on-ink)' : 'var(--fg-soft)',
    background: active ? 'var(--ink-500)' : 'transparent',
    cursor: 'pointer', whiteSpace: 'nowrap', transition: 'all 120ms var(--ease-out)',
  }}>{children}</button>
);

// Tag
const Tag = ({ children, tone = 'sage' }) => {
  const bg = { sage: 'var(--sage-400)', clay: 'var(--clay-400)', lucky: 'var(--lucky-500)', ink: 'var(--ink-500)' }[tone];
  return <span style={{
    fontFamily: 'var(--font-body)', fontSize: 10, fontWeight: 600, letterSpacing: '0.12em',
    textTransform: 'uppercase', padding: '4px 8px', borderRadius: 'var(--r-xs)',
    color: 'white', background: bg,
  }}>{children}</span>;
};

// Eyebrow
const Eyebrow = ({ children, style }) => (
  <div style={{
    fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 500, letterSpacing: '0.18em',
    textTransform: 'uppercase', color: 'var(--fg-muted)', ...style,
  }}>{children}</div>
);

// Artwork thumbnail — the matte-board frame
const ArtworkFrame = ({ image, gradient, tag, saved, onSave, aspect = '4/5', size = 'md', alt = '' }) => {
  const pad = size === 'sm' ? 6 : 8;
  return (
    <div style={{
      aspectRatio: aspect, borderRadius: 'var(--r-sm)', overflow: 'hidden',
      background: '#bfa27a', padding: pad, boxShadow: 'var(--shadow-frame)',
      position: 'relative',
    }}>
      {image ? (
        <img
          src={image}
          alt={alt}
          loading="lazy"
          style={{ width: '100%', height: '100%', borderRadius: 4, objectFit: 'cover', display: 'block', background: gradient || '#111' }}
        />
      ) : (
        <div style={{ width: '100%', height: '100%', borderRadius: 4, background: gradient }}/>
      )}
      {tag && <div style={{ position: 'absolute', top: pad + 6, left: pad + 6 }}>{tag}</div>}
      {onSave && (
        <button onClick={(e) => { e.stopPropagation(); onSave(); }} style={{
          position: 'absolute', top: pad + 6, right: pad + 6, width: 30, height: 30, borderRadius: '50%',
          background: 'rgba(251,247,236,0.92)', border: 'none', display: 'flex',
          alignItems: 'center', justifyContent: 'center', cursor: 'pointer', padding: 0,
        }}>
          <Icon name="heart" size={15} color={saved ? 'var(--lucky-500)' : 'var(--ink-500)'} fill={saved ? 'var(--lucky-500)' : 'none'}/>
        </button>
      )}
    </div>
  );
};

// Cream disk (signature motif)
const Disk = ({ children, size = 40, inverted }) => (
  <div style={{
    width: size, height: size, borderRadius: '50%',
    background: inverted ? 'var(--beige-50)' : 'var(--ink-500)',
    color: inverted ? 'var(--ink-500)' : 'var(--beige-50)',
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    fontFamily: 'var(--font-numeral)', fontSize: Math.round(size * 0.42), letterSpacing: '-0.02em',
  }}>{children}</div>
);

// Bottom tab bar
// Pass `fixed` (used by app.html) to anchor the bar to the viewport bottom
// regardless of the surrounding layout. Without it the bar lives in normal
// flex flow (used by the index.html showcase, which renders inside a phone
// bezel). The padding uses max(8px, env(safe-area-inset-bottom)) so devices
// with a home indicator get the right clearance without us double-stacking.
const TabBar = ({ active, onChange, fixed }) => {
  const tabs = [
    { id: 'browse', label: 'Browse', icon: 'grid' },
    { id: 'commission', label: 'Commission', icon: 'sparkles' },
    { id: 'saved', label: 'Saved', icon: 'heart' },
    { id: 'studio', label: 'Studio', icon: 'user' },
  ];
  return (
    <div style={{
      ...(fixed ? { position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 5 } : {}),
      display: 'flex', justifyContent: 'space-around',
      padding: '8px 0 max(8px, env(safe-area-inset-bottom))',
      background: 'rgba(251,247,236,0.92)', backdropFilter: 'blur(12px)',
      WebkitBackdropFilter: 'blur(12px)',
      borderTop: '1px solid var(--line)',
      flexShrink: 0,
    }}>
      {tabs.map(t => (
        <button key={t.id} onClick={() => onChange(t.id)} style={{
          background: 'none', border: 'none', cursor: 'pointer',
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, padding: '4px 10px',
          color: active === t.id ? 'var(--ink-500)' : 'var(--fg-faint)',
          fontFamily: 'var(--font-body)', fontSize: 10, fontWeight: 500,
        }}>
          <Icon name={t.icon} size={22}/>
          {t.label}
        </button>
      ))}
    </div>
  );
};

// Top header used on product screens
const AppHeader = ({ title, onBack, trailing }) => (
  <div style={{
    display: 'flex', alignItems: 'center', gap: 12, padding: '12px 16px',
    background: 'rgba(246,239,223,0.85)', backdropFilter: 'blur(12px)',
    borderBottom: '1px solid var(--line)', position: 'sticky', top: 0, zIndex: 3,
    minHeight: 52,
  }}>
    {onBack ? (
      <button onClick={onBack} style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer', color: 'var(--fg)' }}>
        <Icon name="arrowLeft" size={22}/>
      </button>
    ) : (
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>{eightBall(28)}</div>
    )}
    <div style={{
      flex: 1, fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 500,
      color: 'var(--fg)', letterSpacing: '-0.01em',
    }}>{title}</div>
    {trailing}
  </div>
);

Object.assign(window, {
  eightBall, Icon, Button, Chip, Tag, Eyebrow, ArtworkFrame, Disk, TabBar, AppHeader
});