// Bebechic Mobile UI Kit — Shared atomic components
// All visuals derive from tokens.css (/docs/tokens.css).

const BBC = {
  cream: '#FFFCF5', mint100: '#E7FEF7', mint200: '#B6E2D3', mint300: '#8FD8C3',
  mint500: '#74AF9E', mint700: '#176676', ink: '#1A3A40', inkSoft: '#3D5A60',
  mute: '#7A8E92', line: '#E8EEE9', lineSoft: '#F1F4F0',
  blush200: '#FFD8DB', blush400: '#F5A6B3', blush600: '#D4527A',
  skin: '#FDE2D3', sun: '#FFE28A',
  sh1: '0 2px 6px rgba(23,102,118,0.07), 0 1px 2px rgba(23,102,118,0.04)',
  sh2: '0 8px 20px rgba(23,102,118,0.08), 0 2px 4px rgba(23,102,118,0.04)',
  sh3: '0 18px 40px rgba(23,102,118,0.10), 0 4px 8px rgba(23,102,118,0.04)',
  fontDisplay: "'Quicksand', system-ui, sans-serif",
  fontBody: "'Be Vietnam Pro', system-ui, sans-serif",
  ease: 'cubic-bezier(.22,.61,.36,1)',
};

// ── Phosphor-style line icons (inline so we don't need a CDN load order)
function Icon({ name, size = 22, weight = 1.8, color = 'currentColor' }) {
  const sw = { width: size, height: size, minWidth: size, minHeight: size, flexShrink: 0, fill: 'none', stroke: color, strokeWidth: weight, strokeLinecap: 'round', strokeLinejoin: 'round', display: 'block' };
  const paths = {
    home: <><path d="M3 10.5 12 3l9 7.5V20a1.5 1.5 0 0 1-1.5 1.5H15v-7h-6v7H4.5A1.5 1.5 0 0 1 3 20Z"/></>,
    search: <><circle cx="11" cy="11" r="7"/><path d="m20 20-3-3"/></>,
    heart: <><path d="M12 20s-7-4.5-9.5-9C.8 8.5 2.5 5 6 5c2 0 3.5 1 4 2.5C10.5 6 12 5 14 5c3.5 0 5.2 3.5 3.5 6C19 15.5 12 20 12 20Z"/></>,
    bag: <><path d="M5 8h14l-1 12.5a1.5 1.5 0 0 1-1.5 1.4H7.5A1.5 1.5 0 0 1 6 20.5Z"/><path d="M9 8V6a3 3 0 0 1 6 0v2"/></>,
    user: <><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></>,
    chev: <><path d="m9 6 6 6-6 6"/></>,
    back: <><path d="m15 6-6 6 6 6"/></>,
    star: <><path d="m12 3 2.6 5.6 6.1.7-4.5 4.2 1.2 6.1L12 16.7l-5.4 2.9 1.2-6.1L3.3 9.3l6.1-.7Z"/></>,
    plus: <><path d="M12 5v14M5 12h14"/></>,
    minus: <><path d="M5 12h14"/></>,
    close: <><path d="m6 6 12 12M18 6 6 18"/></>,
    filter: <><path d="M4 5h16M7 12h10M10 19h4"/></>,
    spark: <><path d="M12 3v4M12 17v4M5 12H1M23 12h-4M6 6l2.5 2.5M15.5 15.5 18 18M6 18l2.5-2.5M15.5 8.5 18 6"/></>,
    bell: <><path d="M6 9a6 6 0 0 1 12 0c0 7 3 8 3 8H3s3-1 3-8"/><path d="M10 21a2 2 0 0 0 4 0"/></>,
    pin: <><path d="M12 22s-7-7.5-7-13a7 7 0 0 1 14 0c0 5.5-7 13-7 13Z"/><circle cx="12" cy="9" r="2.5"/></>,
    check: <><path d="m5 12 5 5L20 7"/></>,
    truck: <><rect x="1.5" y="6.5" width="13" height="10" rx="1"/><path d="M14.5 9.5h4l3 3.5v3.5h-7"/><circle cx="6" cy="18.5" r="1.8"/><circle cx="17" cy="18.5" r="1.8"/></>,
    discount: <><circle cx="9" cy="9" r="1.4"/><circle cx="15" cy="15" r="1.4"/><path d="m6 18 12-12"/><rect x="3" y="3" width="18" height="18" rx="6"/></>,
  };
  return <svg viewBox="0 0 24 24" style={sw}>{paths[name] || null}</svg>;
}

// ── Button
function Button({ children, variant = 'primary', size = 'md', icon, onClick, style = {}, full }) {
  const sizes = { sm: {padding: '8px 14px', fontSize: 13}, md: {padding: '12px 22px', fontSize: 14}, lg: {padding: '14px 26px', fontSize: 15} };
  const variants = {
    primary: { background: BBC.mint700, color: BBC.cream, boxShadow: '0 4px 12px rgba(23,102,118,0.22)' },
    secondary: { background: BBC.mint300, color: BBC.mint700, boxShadow: BBC.sh1 },
    soft: { background: BBC.mint100, color: BBC.mint700, boxShadow: `inset 0 0 0 1.5px ${BBC.mint200}` },
    ghost: { background: 'transparent', color: BBC.mint700, boxShadow: `inset 0 0 0 1.5px ${BBC.mint700}` },
    rose: { background: BBC.blush600, color: BBC.cream, boxShadow: '0 4px 12px rgba(212,82,122,0.22)' },
  };
  return (
    <button onClick={onClick} style={{
      border: 'none', cursor: 'pointer', borderRadius: 999,
      fontFamily: BBC.fontDisplay, fontWeight: 600,
      textTransform: 'uppercase', letterSpacing: '0.06em',
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      transition: `transform 140ms ${BBC.ease}, box-shadow 220ms ${BBC.ease}, background 220ms ${BBC.ease}`,
      width: full ? '100%' : undefined,
      ...sizes[size], ...variants[variant], ...style,
    }}
    onMouseDown={e => e.currentTarget.style.transform = 'scale(0.97)'}
    onMouseUp={e => e.currentTarget.style.transform = 'scale(1)'}
    onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}
    >
      {icon && <Icon name={icon} size={size === 'sm' ? 14 : 16} />}
      {children}
    </button>
  );
}

// ── Chip (selectable filter)
function Chip({ children, on, onClick }) {
  return (
    <button onClick={onClick} style={{
      fontFamily: BBC.fontBody, fontSize: 13, fontWeight: 500,
      padding: '7px 14px', borderRadius: 999, border: 'none', cursor: 'pointer',
      background: on ? BBC.mint700 : '#fff',
      color: on ? BBC.cream : BBC.mint700,
      boxShadow: on ? 'none' : `inset 0 0 0 1.5px ${BBC.mint200}`,
      whiteSpace: 'nowrap', transition: `all 180ms ${BBC.ease}`,
    }}>{children}</button>
  );
}

// ── Badge
function Badge({ children, color = 'pink', style = {} }) {
  const colors = {
    pink: {background: BBC.blush200, color: BBC.blush600},
    sun: {background: BBC.sun, color: '#7a5a10'},
    mint: {background: BBC.mint100, color: BBC.mint700},
    dark: {background: BBC.mint700, color: BBC.cream},
  };
  return <span style={{
    fontFamily: BBC.fontBody, fontSize: 11, fontWeight: 500,
    padding: '3px 9px', borderRadius: 999, display: 'inline-flex', alignItems: 'center', gap: 4,
    ...colors[color], ...style,
  }}>{children}</span>;
}

// ── Card (surface)
function Card({ children, padded = true, line = false, style = {}, onClick }) {
  return (
    <div onClick={onClick} style={{
      background: '#fff', borderRadius: 24,
      padding: padded ? 14 : 0,
      boxShadow: line ? `0 0 0 1.5px ${BBC.mint700}, ${BBC.sh1}` : BBC.sh1,
      cursor: onClick ? 'pointer' : undefined,
      transition: `transform 220ms ${BBC.ease}, box-shadow 220ms ${BBC.ease}`,
      ...style,
    }}>{children}</div>
  );
}

// ── ProductPhoto — gradient placeholder + tag
function ProductPhoto({ palette = 'mint', size = '4/5', badge, children }) {
  const grads = {
    mint: 'linear-gradient(140deg, #B6E2D3, #E7FEF7)',
    blush: 'linear-gradient(140deg, #FFD8DB, #FFE28A)',
    sun: 'linear-gradient(140deg, #FFE28A, #FFD8DB)',
    deep: 'linear-gradient(140deg, #8FD8C3, #B6E2D3)',
    cloud: 'linear-gradient(140deg, #E7FEF7, #FFFCF5)',
    rose: 'linear-gradient(140deg, #FFD8DB, #F5A6B3)',
  };
  return (
    <div style={{
      aspectRatio: size, borderRadius: 18, background: grads[palette],
      position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center',
      overflow: 'hidden',
    }}>
      <DoodlePattern />
      {badge && <div style={{position:'absolute', top:10, left:10, zIndex: 2}}>{badge}</div>}
      <div style={{position:'absolute', top:10, right:10, zIndex:2}}>
        <button style={{
          background: 'rgba(255,255,255,0.85)', backdropFilter:'blur(8px)', border:'none',
          width:32, height:32, borderRadius:999, display:'flex', alignItems:'center', justifyContent:'center',
          color: BBC.mint700, cursor:'pointer', boxShadow: BBC.sh1,
        }}><Icon name="heart" size={16}/></button>
      </div>
      {children}
    </div>
  );
}

// ── Doodle background — tiny SVG flowers & sparkles, hand-drawn feel
function DoodlePattern({ opacity = 0.35 }) {
  return (
    <svg style={{position:'absolute', inset:0, width:'100%', height:'100%', opacity}} viewBox="0 0 100 120" preserveAspectRatio="none">
      <g stroke={BBC.mint700} strokeWidth="0.5" fill="none" strokeLinecap="round">
        <circle cx="15" cy="20" r="3"/>
        <path d="M14 14 L15 16 M16 14 L15 16 M15 20 L15 22 M15 20 L13 21 M15 20 L17 21"/>
        <path d="M70 30 q3 -3 6 0 q-3 3 -6 0 z" fill={BBC.mint700} fillOpacity="0.3"/>
        <path d="M80 90 q-2 -4 -5 -2 q3 4 5 2 z" fill={BBC.blush400} fillOpacity="0.4"/>
        <path d="M20 95 l1 2 l2 1 l-2 1 l-1 2 l-1 -2 l-2 -1 l2 -1 z" fill={BBC.mint700} fillOpacity="0.3"/>
        <circle cx="85" cy="15" r="1.2" fill={BBC.mint700} fillOpacity="0.4"/>
        <circle cx="90" cy="18" r="0.7" fill={BBC.mint700} fillOpacity="0.4"/>
        <circle cx="50" cy="105" r="1" fill={BBC.blush400} fillOpacity="0.4"/>
      </g>
    </svg>
  );
}

// ── ProductCard
function ProductCard({ name, price, oldPrice, palette = 'mint', badge, onClick }) {
  return (
    <Card padded={false} onClick={onClick} style={{padding: 10}}>
      <ProductPhoto palette={palette} badge={badge}/>
      <div style={{padding: '10px 4px 4px', display:'flex', flexDirection:'column', gap: 4}}>
        <div style={{fontFamily: BBC.fontBody, fontWeight: 500, fontSize: 13, color: BBC.ink, lineHeight: 1.3, minHeight: 34}}>{name}</div>
        <div style={{display:'flex', alignItems:'baseline', gap: 6}}>
          <span style={{fontFamily: BBC.fontDisplay, fontWeight:700, fontSize: 14, color: BBC.mint700}}>{price}</span>
          {oldPrice && <span style={{fontFamily: BBC.fontBody, fontSize: 11, color: BBC.mute, textDecoration: 'line-through'}}>{oldPrice}</span>}
        </div>
      </div>
    </Card>
  );
}

// ── BottomNav
function BottomNav({ active, onChange, cartCount = 0 }) {
  const tabs = [
    {id:'home', label:'Home', icon:'home'},
    {id:'search', label:'Search', icon:'search'},
    {id:'cart', label:'', icon:'bag', center: true},
    {id:'wishlist', label:'Wishlist', icon:'heart'},
    {id:'me', label:'Me', icon:'user'},
  ];
  return (
    <div style={{
      position: 'absolute', bottom: 8, left: 12, right: 12,
      background: 'rgba(255,252,245,0.92)', backdropFilter: 'blur(20px)',
      borderRadius: 28, padding: '10px 14px', boxShadow: BBC.sh2,
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      zIndex: 30,
    }}>
      {tabs.map(t => {
        if (t.center) {
          return (
            <div key={t.id} onClick={() => onChange(t.id)} style={{
              position:'relative', width: 54, height: 54, borderRadius:'50%',
              background: BBC.mint700, color: BBC.cream,
              display:'flex', alignItems:'center', justifyContent:'center',
              boxShadow: '0 8px 20px rgba(23,102,118,0.35)', marginTop: -24, cursor: 'pointer',
            }}>
              <Icon name="bag" size={22}/>
              {cartCount > 0 && <span style={{
                position:'absolute', top: -2, right: -2,
                background: BBC.blush600, color:'#fff', fontFamily: BBC.fontDisplay, fontWeight:700,
                fontSize: 10, width: 18, height: 18, borderRadius:'50%',
                display:'flex', alignItems:'center', justifyContent:'center',
                boxShadow: '0 0 0 2px #FFFCF5',
              }}>{cartCount}</span>}
            </div>
          );
        }
        const on = active === t.id;
        return (
          <div key={t.id} onClick={() => onChange(t.id)} style={{
            display:'flex', flexDirection:'column', alignItems:'center', gap: 2,
            padding: '6px 10px', borderRadius: 14, cursor: 'pointer',
            background: on ? BBC.mint100 : 'transparent',
            color: on ? BBC.mint700 : BBC.mute,
            fontFamily: BBC.fontBody, fontSize: 10.5, fontWeight: 500,
            transition: `all 180ms ${BBC.ease}`,
          }}>
            <Icon name={t.icon} size={22} color={on ? BBC.mint700 : BBC.mute}/>
            <span>{t.label}</span>
          </div>
        );
      })}
    </div>
  );
}

// ── TopBar
function TopBar({ title, left, right, transparent }) {
  return (
    <div style={{
      padding: '8px 18px 12px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      background: transparent ? 'transparent' : BBC.cream,
      position: 'sticky', top: 0, zIndex: 5,
    }}>
      <div style={{width: 40}}>{left}</div>
      <div style={{fontFamily: BBC.fontDisplay, fontWeight: 700, fontSize: 18, color: BBC.mint700}}>{title}</div>
      <div style={{width: 40, display:'flex', justifyContent:'flex-end'}}>{right}</div>
    </div>
  );
}

// ── IconButton (round)
function IconButton({ icon, onClick, badge, color, style }) {
  return (
    <button onClick={onClick} style={{
      width: 40, height: 40, borderRadius: 999,
      background: '#fff', border: 'none', cursor: 'pointer',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: color || BBC.mint700,
      boxShadow: BBC.sh1, position:'relative',
      ...style,
    }}>
      <Icon name={icon} size={18}/>
      {badge > 0 && <span style={{
        position:'absolute', top:-2, right:-2, background: BBC.blush600, color:'#fff',
        fontFamily: BBC.fontDisplay, fontWeight: 700, fontSize: 9, width: 16, height:16, borderRadius:'50%',
        display:'flex', alignItems:'center', justifyContent:'center', boxShadow:'0 0 0 1.5px #FFFCF5',
      }}>{badge}</span>}
    </button>
  );
}

// ── SearchField (compact)
function SearchField({ value, onChange, placeholder = 'Tìm gì cho hôm nay?', autoFocus }) {
  return (
    <div style={{
      position:'relative', flex: 1,
    }}>
      <Icon name="search" size={18} color={BBC.mint500} />
      <span style={{position:'absolute', left: 14, top: '50%', transform:'translateY(-50%)'}}>
        <Icon name="search" size={18} color={BBC.mint500}/>
      </span>
      <input value={value} onChange={e => onChange?.(e.target.value)} placeholder={placeholder} autoFocus={autoFocus} style={{
        width: '100%', padding: '11px 16px 11px 40px',
        borderRadius: 999, border: 'none', outline: 'none',
        background: '#fff', boxShadow: BBC.sh1,
        fontFamily: BBC.fontBody, fontSize: 14, color: BBC.ink,
      }}/>
    </div>
  );
}

// Export to window for other Babel scripts
Object.assign(window, {
  BBC, Icon, Button, Chip, Badge, Card, ProductPhoto, ProductCard, BottomNav, TopBar, IconButton, SearchField, DoodlePattern
});