// SMASH mobile — shared primitives.
// Brand-true small parts: avatar, NTRP badge, button, pill, divider, app header, tab bar.

const SMASH = {
  green: '#0F4C3A',
  green100: '#E8F2EE',
  green200: '#9FE1CB',
  green400: '#0F6E56',
  green700: '#093024',
  yellow: '#D9F378',
  yellow100: '#F7FBE5',
  yellow700: '#A7C649',
  yellowInk: '#173404',
  off: '#FAFAF7',
  cream: '#F1EFE8',
  mist: '#D3D1C7',
  stone: '#888780',
  slate: '#5F5E5A',
  ink: '#2C2C2A',
  black: '#0F0F0F',
  err: '#A32D2D',
  warn: '#BA7517',
  fontBody: '-apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, sans-serif',
  fontDisplay: '"Bebas Neue", "Arial Narrow", Impact, sans-serif',
  fontMono: 'ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace'
};
window.SMASH = SMASH;

// ─── Wordmark (the canonical SMASH logo with dot) ────────────────────────
function Wordmark({ size = 28, color = SMASH.green, dot = SMASH.yellow }) {
  return (
    <span style={{
      fontFamily: SMASH.fontDisplay,
      fontWeight: 700,
      fontSize: size,
      letterSpacing: '-0.04em',
      lineHeight: 0.9,
      color,
      position: 'relative',
      display: 'inline-block'
    }}>
      SMASH
      <span style={{
        position: 'absolute',
        width: '0.14em', height: '0.14em',
        background: dot, borderRadius: '50%',
        right: '0.05em', top: '-0.32em'
      }} />
    </span>);

}

// ─── Avatar (initial in a deep-green circle) ─────────────────────────────
function Avatar({ name = 'А', size = 44, tone = 'green' }) {
  const palette = {
    green: { bg: 'linear-gradient(135deg,#0F6E56,#0F4C3A)', fg: SMASH.yellow },
    yellow: { bg: SMASH.yellow, fg: SMASH.yellowInk },
    ink: { bg: SMASH.black, fg: SMASH.yellow },
    cream: { bg: SMASH.cream, fg: SMASH.green }
  }[tone] || { bg: SMASH.green, fg: SMASH.yellow };
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      background: palette.bg,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: palette.fg,
      fontFamily: SMASH.fontDisplay, fontWeight: 700,
      fontSize: size * 0.46, letterSpacing: '-0.04em',
      flexShrink: 0
    }}>{name.slice(0, 1).toUpperCase()}</div>);

}

// ─── NTRP badge ──────────────────────────────────────────────────────────
function NTRPBadge({ value, tone = 'yellow', delta }) {
  const tones = {
    yellow: { bg: SMASH.yellow, fg: SMASH.yellowInk },
    green: { bg: SMASH.green100, fg: SMASH.green },
    ink: { bg: SMASH.black, fg: SMASH.yellow },
    cream: { bg: SMASH.cream, fg: SMASH.slate }
  }[tone];
  return (
    <span style={{
      fontFamily: SMASH.fontMono, fontSize: 13, fontWeight: 500,
      padding: '5px 11px', borderRadius: 6,
      background: tones.bg, color: tones.fg,
      display: 'inline-flex', alignItems: 'center', gap: 6,
      lineHeight: 1
    }}>
      {value}
      {delta && <span style={{ fontSize: 11, opacity: 0.85 }}>{delta}</span>}
    </span>);

}

// ─── Button ──────────────────────────────────────────────────────────────
function Button({ kind = 'primary', children, onClick, full, icon, style = {} }) {
  const kinds = {
    primary: { bg: SMASH.green, fg: SMASH.yellow, bd: 'none' },
    accent: { bg: SMASH.yellow, fg: SMASH.yellowInk, bd: 'none' },
    secondary: { bg: 'transparent', fg: SMASH.green, bd: `1px solid ${SMASH.green}` },
    ghost: { bg: 'transparent', fg: SMASH.ink, bd: 'none' },
    danger: { bg: 'transparent', fg: SMASH.err, bd: `1px solid ${SMASH.err}` },
    onDark: { bg: SMASH.yellow, fg: SMASH.yellowInk, bd: 'none' }
  }[kind];
  return (
    <button onClick={onClick} style={{
      fontFamily: SMASH.fontBody, fontSize: 15, fontWeight: 500,
      padding: '13px 20px', borderRadius: 16,
      border: kinds.bd, background: kinds.bg, color: kinds.fg,
      cursor: 'pointer',
      width: full ? '100%' : 'auto',
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      transition: 'background 180ms cubic-bezier(.4,0,.2,1)',
      ...style
    }}>
      {icon}
      {children}
    </button>);

}

// ─── Status pill ─────────────────────────────────────────────────────────
function StatusPill({ tone = 'neutral', children }) {
  const tones = {
    confirmed: { bg: SMASH.yellow100, fg: SMASH.green700, dot: SMASH.green400 },
    pending: { bg: '#FBEDD8', fg: '#6A3F02', dot: SMASH.warn },
    error: { bg: '#F5DCDC', fg: '#5A1818', dot: SMASH.err },
    info: { bg: '#DCE7F4', fg: '#093D74', dot: '#185FA5' },
    neutral: { bg: SMASH.cream, fg: SMASH.slate, dot: SMASH.stone }
  }[tone];
  return (
    <span style={{
      fontSize: 12, fontWeight: 500, padding: '5px 11px',
      borderRadius: 9999, background: tones.bg, color: tones.fg,
      display: 'inline-flex', alignItems: 'center', gap: 6, lineHeight: 1
    }}>
      <span style={{ width: 6, height: 6, borderRadius: '50%', background: tones.dot }} />
      {children}
    </span>);

}

// ─── Label (small caps) ──────────────────────────────────────────────────
function Label({ children, color = SMASH.stone, style = {} }) {
  return (
    <div style={{
      fontSize: 11, fontWeight: 500, letterSpacing: 1.4,
      textTransform: 'uppercase', color, ...style
    }}>{children}</div>);

}

// ─── App header (in-screen, sits below status bar) ───────────────────────
function AppHeader({ title, left, right, sub }) {
  return (
    <div style={{ padding: '8px 20px 12px', display: 'flex', flexDirection: 'column', gap: 4 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        {left && <div style={{ marginLeft: -8, padding: 8, color: SMASH.ink, cursor: 'pointer' }}>{left}</div>}
        <div style={{ ...{
            flex: 1, fontFamily: SMASH.fontDisplay, fontSize: 30, lineHeight: 1,
            fontWeight: 700, letterSpacing: '-0.03em', color: SMASH.black
          }, fontFamily: "\"Bebas Neue\"" }}>{title}</div>
        {right && <div style={{ display: 'flex', gap: 6, color: SMASH.ink }}>{right}</div>}
      </div>
      {sub && <div style={{ fontSize: 13, color: SMASH.slate, marginLeft: left ? 36 : 0 }}>{sub}</div>}
    </div>);

}

// ─── Bottom tab bar ──────────────────────────────────────────────────────
function TabBar({ active, onChange }) {
  const items = [
  { id: 'discover', label: 'Discover', icon: Icon.search },
  { id: 'matches', label: 'Matches', icon: Icon.calendar },
  { id: 'chat', label: 'Чаты', icon: Icon.message },
  { id: 'profile', label: 'Профиль', icon: Icon.user }];

  return (
    <div style={{
      borderTop: `1px solid ${SMASH.mist}`,
      background: SMASH.off,
      padding: '6px 8px 12px',
      display: 'flex', justifyContent: 'space-around'
    }}>
      {items.map((it) => {
        const on = it.id === active;
        return (
          <div key={it.id} onClick={() => onChange?.(it.id)} style={{
            flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
            padding: '6px 0', cursor: 'pointer',
            color: on ? SMASH.green : SMASH.stone
          }}>
            {it.icon(22)}
            <span style={{
              fontSize: 10, fontWeight: 500, letterSpacing: 0.4,
              textTransform: 'uppercase'
            }}>{it.label}</span>
          </div>);

      })}
    </div>);

}

// ─── Section heading inside a screen ─────────────────────────────────────
function SectionHead({ children, action }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
      padding: '20px 20px 10px'
    }}>
      <Label>{children}</Label>
      {action && <div style={{ fontSize: 13, color: SMASH.green, fontWeight: 500 }}>{action}</div>}
    </div>);

}

// ─── Card wrapper (1px Mist border, no shadow) ───────────────────────────
function Card({ children, style = {}, onClick, padding = 16 }) {
  return (
    <div onClick={onClick} style={{
      background: SMASH.off, border: `1px solid ${SMASH.mist}`,
      borderRadius: 16, padding,
      cursor: onClick ? 'pointer' : 'default',
      ...style
    }}>{children}</div>);

}

// ─── Divider ─────────────────────────────────────────────────────────────
function Divider({ inset = 0 }) {
  return <div style={{ height: 1, background: SMASH.mist, margin: `0 ${inset}px` }} />;
}

Object.assign(window, {
  Wordmark, Avatar, NTRPBadge, Button, StatusPill, Label,
  AppHeader, TabBar, SectionHead, Card, Divider
});