// 돼지엄마 shared components

const { useState, useRef, useEffect } = React;

// ───────── ICONS ─────────
const Icon = ({ name, size = 20, color = 'currentColor', stroke = 1.7 }) => {
  const paths = {
    search: 'M11 4a7 7 0 1 1 0 14 7 7 0 0 1 0-14ZM21 21l-4.35-4.35',
    bell: 'M15 17h5l-1.4-1.4A2 2 0 0 1 18 14V11a6 6 0 1 0-12 0v3a2 2 0 0 1-.6 1.6L4 17h5M9 17a3 3 0 0 0 6 0',
    home: 'M3 11.5 12 4l9 7.5V20a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1v-8.5Z',
    board: 'M4 5h16v3H4zM4 11h16v3H4zM4 17h10v3H4z',
    star: 'M12 3l2.7 5.5 6 .9-4.4 4.3 1 6-5.3-2.8L6.7 19.7l1-6L3.3 9.4l6-.9L12 3z',
    chat: 'M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H8l-5 4V5Z',
    info: 'M12 8v.01M12 12v4M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z',
    heart: 'M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78Z',
    bookmark: 'M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z',
    share: 'M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7M16 6l-4-4-4 4M12 2v14',
    more: 'M12 6h.01M12 12h.01M12 18h.01',
    check: 'M5 12l5 5L20 7',
    crown: 'M3 17l2-9 5 4 2-7 2 7 5-4 2 9H3z',
    plus: 'M12 5v14M5 12h14',
    chevR: 'M9 6l6 6-6 6',
    chevL: 'M15 6l-6 6 6 6',
    close: 'M6 6l12 12M18 6L6 18',
    filter: 'M3 6h18M6 12h12M10 18h4',
    upload: 'M12 16V4M6 10l6-6 6 6M4 20h16',
    mic: 'M12 2a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3zM5 11a7 7 0 0 0 14 0M12 18v3',
    send: 'M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z',
    sparkle: 'M12 3l2 6 6 2-6 2-2 6-2-6-6-2 6-2 2-6z',
    expert: 'M12 2L4 5v6c0 5 3.5 9 8 11 4.5-2 8-6 8-11V5l-8-3z',
    calendar: 'M3 8h18M8 3v4M16 3v4M5 6h14a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z',
    arrowR: 'M5 12h14M13 5l7 7-7 7',
    pin: 'M12 2v6M12 8a4 4 0 0 0-4 4h8a4 4 0 0 0-4-4zM8 12v4l4 5 4-5v-4',
    shield: 'M12 2L4 6v6c0 5 3.5 9 8 10 4.5-1 8-5 8-10V6l-8-4z',
    eye: 'M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7zM12 9a3 3 0 1 1 0 6 3 3 0 0 1 0-6z',
    lock: 'M5 11h14v10H5zM8 11V7a4 4 0 0 1 8 0v4',
    flag: 'M4 21V4M4 15h12l-2-3 2-3H4',
    image: 'M4 5h16v14H4zM4 16l5-5 4 4 3-3 4 4',
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color}
      strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" style={{ display: 'block' }}>
      <path d={paths[name] || ''} />
    </svg>
  );
};

// ───────── BADGE ─────────
const Badge = ({ kind, label, emphasis = 'medium', size = 'sm' }) => {
  // kind: verified, senior, honor, expert, hot, custom
  const tokens = {
    verified: { bg: 'rgba(0,200,150,.12)', fg: 'var(--c-verified)', icon: 'check', text: '검증' },
    senior:   { bg: 'rgba(139,92,246,.12)', fg: 'var(--c-senior)',   icon: 'crown', text: '선배' },
    honor:    { bg: 'rgba(255,184,0,.16)',  fg: '#A77A00',           icon: 'star',  text: '명예' },
    expert:   { bg: 'rgba(44,91,255,.10)',  fg: 'var(--c-primary)',  icon: 'shield',text: label || '전문가' },
    hot:      { bg: 'rgba(229,62,62,.10)',  fg: 'var(--c-danger)',   icon: null,    text: 'HOT' },
  };
  const t = tokens[kind] || tokens.verified;
  const display = label || t.text;
  const isStrong = emphasis === 'strong';
  const isMin = emphasis === 'minimal';
  const px = size === 'xs' ? '4px 6px' : '4px 8px';
  const fs = size === 'xs' ? 10.5 : 11;
  if (isMin) {
    return (
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, color: t.fg, fontSize: fs, fontWeight: 600 }}>
        {t.icon && <Icon name={t.icon} size={11} color={t.fg} stroke={2.4} />}
      </span>
    );
  }
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 3,
      padding: px, borderRadius: 6,
      background: isStrong ? t.fg : t.bg,
      color: isStrong ? '#fff' : t.fg,
      fontSize: fs, fontWeight: 600, lineHeight: 1,
      letterSpacing: '-0.01em',
    }}>
      {t.icon && <Icon name={t.icon} size={11} color={isStrong ? '#fff' : t.fg} stroke={2.6} />}
      {display}
    </span>
  );
};

// ───────── AVATAR ─────────
const Avatar = ({ initial, bg, size = 40, ring }) => (
  <div style={{
    width: size, height: size, borderRadius: '50%',
    background: bg || '#2C5BFF',
    color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
    fontWeight: 700, fontSize: size * 0.42, flexShrink: 0,
    boxShadow: ring ? `0 0 0 2px var(--c-bg-primary), 0 0 0 4px ${ring}` : null,
  }}>{initial}</div>
);

// ───────── TOP BAR (mobile) ─────────
const TopBar = ({ title, showLogo, showBack, showSearch = true, showBell = true, onBack, onSearch, onBell, badge }) => (
  <div style={{
    height: 52, display: 'flex', alignItems: 'center', padding: '0 8px 0 16px',
    background: 'var(--c-bg-primary)', borderBottom: '1px solid var(--c-border)',
    position: 'sticky', top: 0, zIndex: 10,
  }}>
    {showBack && (
      <button onClick={onBack} style={{ width: 36, height: 36, marginLeft: -8, display: 'grid', placeItems: 'center', border: 0, background: 'transparent', cursor: 'pointer', color: 'var(--c-text-primary)' }}>
        <Icon name="chevL" size={22} />
      </button>
    )}
    {showLogo && (
      <div style={{ fontSize: 20, fontWeight: 800, letterSpacing: '-0.03em', color: 'var(--c-primary)' }}>
        돼지엄마
      </div>
    )}
    {title && (
      <div style={{ fontSize: 16, fontWeight: 600, color: 'var(--c-text-primary)', flex: 1, textAlign: showBack ? 'left' : 'center', marginLeft: showBack ? 4 : 0 }}>{title}</div>
    )}
    <div style={{ flex: 1 }} />
    {showSearch && (
      <button onClick={onSearch} style={{ width: 40, height: 40, display: 'grid', placeItems: 'center', border: 0, background: 'transparent', cursor: 'pointer', color: 'var(--c-text-primary)' }}>
        <Icon name="search" size={22} />
      </button>
    )}
    {showBell && (
      <button onClick={onBell} style={{ width: 40, height: 40, display: 'grid', placeItems: 'center', border: 0, background: 'transparent', cursor: 'pointer', color: 'var(--c-text-primary)', position: 'relative' }}>
        <Icon name="bell" size={22} />
        {badge && (
          <span style={{
            position: 'absolute', top: 6, right: 7, minWidth: 16, height: 16, padding: '0 4px',
            borderRadius: 8, background: 'var(--c-danger)', color: '#fff', fontSize: 10, fontWeight: 700,
            display: 'grid', placeItems: 'center', border: '2px solid var(--c-bg-primary)',
          }}>{badge}</span>
        )}
      </button>
    )}
  </div>
);

// ───────── BOTTOM NAV ─────────
const BottomNav = ({ active, onChange }) => {
  const items = [
    { id: 'home', label: '홈', icon: 'home' },
    { id: 'board', label: '게시판', icon: 'board' },
    { id: 'review', label: '평가', icon: 'star' },
    { id: 'consult', label: '컨설팅', icon: 'chat' },
    { id: 'info', label: '정보', icon: 'info' },
  ];
  return (
    <div style={{
      position: 'sticky', bottom: 0,
      height: 64, display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)',
      background: 'var(--c-bg-primary)', borderTop: '1px solid var(--c-border)',
      paddingBottom: 'env(safe-area-inset-bottom)',
    }}>
      {items.map((it) => {
        const on = active === it.id;
        return (
          <button key={it.id} onClick={() => onChange(it.id)} style={{
            border: 0, background: 'transparent', cursor: 'pointer',
            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
            gap: 4, color: on ? 'var(--c-primary)' : 'var(--c-text-tertiary)',
            transition: 'color .15s',
          }}>
            <Icon name={it.icon} size={24} stroke={on ? 2.2 : 1.7} />
            <span style={{ fontSize: 10.5, fontWeight: on ? 600 : 500 }}>{it.label}</span>
          </button>
        );
      })}
    </div>
  );
};

// ───────── BUTTON ─────────
const Button = ({ children, kind = 'primary', size = 'md', full, onClick, disabled, leading, trailing, style }) => {
  const sizes = {
    sm: { h: 36, px: 12, fs: 13, r: 8 },
    md: { h: 48, px: 16, fs: 15, r: 8 },
    lg: { h: 56, px: 20, fs: 16, r: 10 },
  };
  const s = sizes[size];
  const kinds = {
    primary: { bg: 'var(--c-primary)', fg: '#fff', bd: 'transparent' },
    secondary: { bg: 'var(--c-bg-secondary)', fg: 'var(--c-text-primary)', bd: 'var(--c-border)' },
    tertiary: { bg: 'transparent', fg: 'var(--c-primary)', bd: 'var(--c-primary)' },
    ghost: { bg: 'transparent', fg: 'var(--c-text-primary)', bd: 'transparent' },
    danger: { bg: 'var(--c-danger)', fg: '#fff', bd: 'transparent' },
  };
  const k = kinds[kind];
  return (
    <button onClick={onClick} disabled={disabled} style={{
      height: s.h, padding: `0 ${s.px}px`, borderRadius: s.r, fontSize: s.fs, fontWeight: 600,
      background: k.bg, color: k.fg, border: `1px solid ${k.bd}`,
      cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.4 : 1,
      width: full ? '100%' : 'auto', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
      transition: 'transform .1s, opacity .15s',
      letterSpacing: '-0.01em',
      ...style,
    }}>
      {leading}{children}{trailing}
    </button>
  );
};

// ───────── CARD ─────────
const Card = ({ children, style, onClick, hoverable, padding = 16 }) => (
  <div onClick={onClick} style={{
    background: 'var(--c-bg-primary)',
    border: 'var(--card-border, none)',
    borderRadius: 'var(--card-radius)',
    boxShadow: 'var(--card-shadow)',
    padding,
    cursor: onClick ? 'pointer' : 'default',
    transition: 'box-shadow .15s, transform .1s',
    ...style,
  }}>{children}</div>
);

// ───────── SECTION HEADER ─────────
const SectionHeader = ({ icon, title, action, onAction }) => (
  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '20px 16px 10px' }}>
    <div style={{ fontSize: 16, fontWeight: 700, color: 'var(--c-text-primary)', letterSpacing: '-0.02em' }}>
      {icon && <span style={{ marginRight: 6 }}>{icon}</span>}{title}
    </div>
    {action && (
      <button onClick={onAction} style={{ border: 0, background: 'transparent', color: 'var(--c-text-sub)', fontSize: 13, fontWeight: 500, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 2 }}>
        {action}<Icon name="chevR" size={14} />
      </button>
    )}
  </div>
);

// ───────── STATS PILL ─────────
const Stats = ({ like, comment, view, size = 'sm' }) => {
  const fs = size === 'sm' ? 12 : 13;
  const c = 'var(--c-text-tertiary)';
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, color: c, fontSize: fs, fontWeight: 500 }}>
      {like != null && <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3 }}>♡ {like.toLocaleString()}</span>}
      {comment != null && <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3 }}>💬 {comment}</span>}
      {view != null && <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3 }}>· {view.toLocaleString()}</span>}
    </div>
  );
};

// ───────── AUTHOR LINE ─────────
const AuthorLine = ({ author, verified, senior, honor, expert, meta, badgeEmphasis = 'medium' }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap', fontSize: 12, color: 'var(--c-text-sub)' }}>
    <span style={{ fontWeight: 600, color: 'var(--c-text-primary)' }}>{author}</span>
    {verified && <Badge kind="verified" emphasis={badgeEmphasis} size="xs" />}
    {senior && <Badge kind="senior" emphasis={badgeEmphasis} size="xs" />}
    {honor && <Badge kind="honor" emphasis={badgeEmphasis} size="xs" />}
    {expert && <Badge kind="expert" label={expert} emphasis={badgeEmphasis} size="xs" />}
    {meta && <span style={{ color: 'var(--c-text-tertiary)' }}>· {meta}</span>}
  </div>
);

// expose
Object.assign(window, {
  Icon, Badge, Avatar, TopBar, BottomNav, Button, Card, SectionHeader, Stats, AuthorLine,
});