// app-ui.jsx — interactive UI atoms for the STAR app
const T = {
  yellow: '#C19A3D', deep: '#C19A3D', ink: '#1A1A18', bg: '#F4F1EA', soft: '#FBFAF6',
  line: 'rgba(26,26,24,.14)', muted: '#8C8576', sub: '#3A382F', sale: '#C19A3D',
  kakao: '#FEE500', kakaoInk: '#3C1E1E',
  paper: '#F4F1EA', paper2: '#FBFAF6', taupe: '#8C8576', gold: '#C19A3D',
};

// ---- generic pressable ----
function Press({ onClick, children, style, active }) {
  const [d, setD] = React.useState(false);
  return (
    <div onClick={onClick}
      onPointerDown={() => setD(true)} onPointerUp={() => setD(false)} onPointerLeave={() => setD(false)}
      style={{ cursor: 'pointer', transition: 'transform .08s, filter .12s', transform: d ? 'scale(0.97)' : 'scale(1)', filter: d ? 'brightness(0.96)' : 'none', ...style }}>
      {children}
    </div>
  );
}

// ---- top header (back + title + optional cart) ----
function AppHeader({ title, onBack, onCart, cartCount = 0, right, light }) {
  return (
    <div style={{ flex: '0 0 auto', height: 52, display: 'flex', alignItems: 'center', gap: 6, padding: '0 8px 0 4px', background: light ? 'transparent' : T.bg, borderBottom: light ? 'none' : `1px solid ${T.line}` }}>
      <Press onClick={onBack} style={{ width: 44, height: 44, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke={light ? '#fff' : T.ink} strokeWidth="2.1" strokeLinecap="round" strokeLinejoin="round"><path d="m15 18-6-6 6-6"/></svg>
      </Press>
      <div style={{ flex: 1, fontSize: 16, fontWeight: 500, letterSpacing: '.01em', color: light ? '#fff' : T.ink, fontFamily: "'Noto Serif KR', serif" }}>{title}</div>
      {right}
      {onCart && (
        <Press onClick={onCart} style={{ width: 44, height: 44, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
          <svg width="23" height="23" viewBox="0 0 24 24" fill="none" stroke={light ? '#fff' : T.ink} strokeWidth="1.8"><path d="M5 7h14l-1.2 11.2a2 2 0 0 1-2 1.8H8.2a2 2 0 0 1-2-1.8L5 7ZM8.5 7a3.5 3.5 0 0 1 7 0"/></svg>
          {cartCount > 0 && <span style={{ position: 'absolute', top: 6, right: 6, background: T.ink, color: T.bg, fontSize: 10, fontWeight: 500, borderRadius: 9, padding: '1px 5px', fontFamily: "'Jost', sans-serif" }}>{cartCount}</span>}
        </Press>
      )}
    </div>
  );
}

// ---- interactive bottom nav with center FAB ----
function NavBar({ active, onNav }) {
  const items = [
    { key: 'home', label: '홈', icon: 'M3 11.5 12 4l9 7.5M5 10v9h5v-5h4v5h5v-9' },
    { key: 'category', label: '카테고리', icon: 'M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z' },
    { key: 'my', label: '마이', icon: 'M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM4 21c0-4 4-6 8-6s8 2 8 6' },
    { key: 'cart', label: '장바구니', icon: 'M5 7h14l-1.2 11.2a2 2 0 0 1-2 1.8H8.2a2 2 0 0 1-2-1.8L5 7ZM8.5 7a3.5 3.5 0 0 1 7 0' },
  ];
  return (
    <div style={{ flex: '0 0 auto', height: 62, background: T.bg, borderTop: `1px solid ${T.line}`, display: 'flex', position: 'relative', zIndex: 5 }}>
      {items.map(it => {
        const on = it.key === active;
        const col = on ? T.ink : T.taupe;
        return (
          <Press key={it.key} onClick={() => onNav(it.key)} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 5 }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={col} strokeWidth={on ? 1.7 : 1.35} strokeLinecap="round" strokeLinejoin="round"><path d={it.icon} /></svg>
            <span style={{ fontSize: 9.5, letterSpacing: '.1em', fontWeight: on ? 500 : 400, whiteSpace: 'nowrap', color: col, fontFamily: "'Noto Serif KR', serif" }}>{it.label}</span>
          </Press>
        );
      })}
    </div>
  );
}

// ---- bottom sheet ----
function Sheet({ open, onClose, children, height, pad = true }) {
  return (
    <div style={{ position: 'absolute', inset: 0, zIndex: 40, pointerEvents: open ? 'auto' : 'none' }}>
      <div onClick={onClose} style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,.45)', opacity: open ? 1 : 0, transition: 'opacity .25s' }} />
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, background: T.soft, borderRadius: '4px 4px 0 0', transform: open ? 'translateY(0)' : 'translateY(105%)', transition: 'transform .32s cubic-bezier(.2,.8,.2,1)', maxHeight: '92%', height, display: 'flex', flexDirection: 'column', boxShadow: '0 -8px 30px rgba(0,0,0,.18)' }}>
        <div style={{ flex: '0 0 auto', display: 'flex', justifyContent: 'center', padding: '10px 0 4px' }}><div style={{ width: 40, height: 3, borderRadius: 0, background: T.line }} /></div>
        <div style={{ overflow: 'auto', padding: pad ? '6px 18px 18px' : 0, flex: 1 }}>{children}</div>
      </div>
    </div>
  );
}

// ---- qty stepper ----
function Stepper({ value, setValue, min = 1, max = 99 }) {
  const btn = (label, fn, disabled) => (
    <Press onClick={disabled ? undefined : fn} style={{ width: 40, height: 40, display: 'flex', alignItems: 'center', justifyContent: 'center', opacity: disabled ? 0.3 : 1 }}>
      <span style={{ fontSize: 22, fontWeight: 600, color: T.ink }}>{label}</span>
    </Press>
  );
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', border: `1px solid ${T.line}`, borderRadius: 0, background: T.soft }}>
      {btn('−', () => setValue(Math.max(min, value - 1)), value <= min)}
      <span style={{ minWidth: 36, textAlign: 'center', fontSize: 15, fontWeight: 500, color: T.ink, fontFamily: "'Noto Serif KR', serif" }}>{value}</span>
      {btn('+', () => setValue(Math.min(max, value + 1)))}
    </div>
  );
}

// ---- toast ----
function Toast({ msg }) {
  return (
    <div style={{ position: 'absolute', left: 0, right: 0, bottom: 88, display: 'flex', justifyContent: 'center', zIndex: 60, pointerEvents: 'none', opacity: msg ? 1 : 0, transition: 'opacity .25s', transform: msg ? 'translateY(0)' : 'translateY(8px)' }}>
      <div style={{ background: T.ink, color: '#F4F1EA', fontFamily: "'Noto Serif KR', serif", fontSize: 13, fontWeight: 400, letterSpacing: '.02em', padding: '12px 22px', borderRadius: 2, maxWidth: '80%', textAlign: 'center', boxShadow: '0 8px 24px rgba(0,0,0,.3)' }}>{msg}</div>
    </div>
  );
}

// ---- product grid card ----
function ProductCard({ p, onClick }) {
  return (
    <Press onClick={onClick}>
      <div style={{ position: 'relative', width: '100%', aspectRatio: '3 / 4', overflow: 'hidden', background: '#EAE4D9' }}>
        {p.img
          ? <img src={p.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          : <div style={{ position: 'absolute', inset: 0, background: '#EAE4D9', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><span style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 24, letterSpacing: '.2em', textIndent: '.2em', color: 'rgba(26,26,24,.28)' }}>STAR</span></div>}
        {p.tag && <span style={{ position: 'absolute', left: 10, top: 10, fontFamily: "'Noto Serif KR', serif", fontSize: 10, fontWeight: 400, letterSpacing: '.05em', color: T.ink, background: 'rgba(244,241,234,.86)', padding: '4px 9px', whiteSpace: 'nowrap' }}>{p.tag}</span>}
      </div>
      <div style={{ marginTop: 11 }}>
        <div style={{ fontFamily: "'Jost', sans-serif", fontSize: 9.5, letterSpacing: '.16em', textTransform: 'uppercase', color: T.taupe, marginBottom: 4 }}>{p.genre || p.cat}</div>
        <div style={{ fontFamily: "'Noto Serif KR', serif", fontSize: 13, fontWeight: 400, color: T.ink, lineHeight: 1.45, height: 38, overflow: 'hidden' }}>{p.shortName || p.name}</div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 7, marginTop: 6 }}>
          <span style={{ fontFamily: "'Noto Serif KR', serif", fontSize: 13, fontWeight: 500, color: T.gold, letterSpacing: '.02em', whiteSpace: 'nowrap' }}>제작 문의</span>
          <span style={{ fontFamily: "'Jost', sans-serif", fontSize: 9.5, letterSpacing: '.1em', color: T.taupe }}>{p.material}</span>
        </div>
      </div>
    </Press>
  );
}

Object.assign(window, { T, Press, AppHeader, NavBar, Sheet, Stepper, Toast, ProductCard });