// Sticker Pack Pro — full-bleed scrapbook prototype
// All-in-one component file. Uses tweaks from window.__stickerTweaks.

// ─── THEMES ───────────────────────────────────────────────
const SP_THEMES = {
  banana:      { bg: '#fef9c3', ink: '#1c1917', accent: '#7c3aed', accent2: '#ef4444', tape: '#fde68a' },
  highlighter: { bg: '#f5f5f4', ink: '#0c0a09', accent: '#a3e635', accent2: '#ec4899', tape: '#fef08a' },
  void:        { bg: '#0c0a09', ink: '#fafaf9', accent: '#facc15', accent2: '#f472b6', tape: '#3f3f46' },
  bubblegum:   { bg: '#fce7f3', ink: '#1c1917', accent: '#db2777', accent2: '#0891b2', tape: '#fbcfe8' },
  tomato:      { bg: '#ffe4d6', ink: '#1c1917', accent: '#dc2626', accent2: '#0e7490', tape: '#fed7aa' },
  mint:        { bg: '#d1fae5', ink: '#0a0a0a', accent: '#059669', accent2: '#dc2626', tape: '#a7f3d0' },
  ozone:       { bg: '#dbeafe', ink: '#0a0a0a', accent: '#2563eb', accent2: '#f59e0b', tape: '#bfdbfe' },
};

const SP_FONTS = {
  block:      { display: '"Archivo Black", sans-serif', body: '"Space Grotesk", sans-serif', dispWt: 900, hand: '"Caveat", cursive' },
  marker:     { display: '"Caveat", cursive', body: '"Space Grotesk", sans-serif', dispWt: 700, hand: '"Caveat", cursive' },
  industrial: { display: '"Space Grotesk", sans-serif', body: '"Space Grotesk", sans-serif', dispWt: 700, hand: '"Caveat", cursive' },
  serifslab:  { display: '"DM Serif Display", serif', body: '"Space Grotesk", sans-serif', dispWt: 400, hand: '"Caveat", cursive' },
  mono:       { display: '"JetBrains Mono", monospace', body: '"JetBrains Mono", monospace', dispWt: 700, hand: '"Caveat", cursive' },
  zine:       { display: '"Fraunces", serif', body: '"Space Grotesk", sans-serif', dispWt: 900, hand: '"Caveat", cursive' },
  bubble:     { display: '"Fraunces", serif', body: '"Manrope", sans-serif', dispWt: 700, hand: '"Caveat", cursive' },
};

// ─── PAPER TEXTURE ────────────────────────────────────────
const PAPER_BG = `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>")`;

// ─── HELPER ATOMS ─────────────────────────────────────────

function PeelSticker({ children, bg, color, rotate=-3, x, y, draggable=false, onClick, style, t, fontSize=11, padding='5px 11px', shape='rect', sound='pop', className }) {
  const [pos, setPos] = React.useState({x, y});
  const [drag, setDrag] = React.useState(false);
  const [hover, setHover] = React.useState(false);
  const ref = React.useRef(null);
  const startRef = React.useRef(null);

  React.useEffect(() => { setPos({x, y}); }, [x, y]);

  const onMouseDown = (e) => {
    if (!draggable) return;
    e.preventDefault();
    startRef.current = { mx: e.clientX, my: e.clientY, px: pos.x ?? 0, py: pos.y ?? 0 };
    setDrag(true);
    const onMove = (ev) => {
      setPos({ x: startRef.current.px + (ev.clientX - startRef.current.mx), y: startRef.current.py + (ev.clientY - startRef.current.my) });
    };
    const onUp = () => {
      setDrag(false);
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('mouseup', onUp);
    };
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mouseup', onUp);
  };

  const handleClick = (e) => {
    if (drag) return;
    if (window.__sp_playSound) window.__sp_playSound(sound);
    if (window.__sp_burstConfetti && ref.current) {
      const r = ref.current.getBoundingClientRect();
      window.__sp_burstConfetti(r.left + r.width/2, r.top + r.height/2, bg || t.accent);
    }
    if (onClick) onClick(e);
  };

  const positioned = pos.x !== undefined;
  const peelLift = hover ? 'translateY(-2px) scale(1.04)' : '';
  const totalRot = drag ? rotate * 0.3 : rotate;

  const baseStyle = {
    background: bg || t.accent,
    color: color || (bg === t.ink ? t.bg : t.ink),
    padding,
    border: `2px solid ${t.ink}`,
    borderRadius: shape === 'pill' ? 999 : (shape === 'round' ? '50%' : 4),
    fontWeight: 700,
    fontSize,
    letterSpacing: '0.04em',
    textTransform: 'uppercase',
    boxShadow: drag ? `8px 12px 0 0 ${t.ink}66` : (hover ? `5px 5px 0 0 ${t.ink}` : `3px 3px 0 0 ${t.ink}`),
    transform: `${positioned ? `translate(${pos.x}px, ${pos.y}px)` : ''} rotate(${totalRot}deg) ${peelLift}`,
    transition: drag ? 'none' : 'transform .25s cubic-bezier(.5, 1.6, .4, 1), box-shadow .2s',
    cursor: draggable ? (drag ? 'grabbing' : 'grab') : 'pointer',
    position: positioned ? 'absolute' : 'relative',
    display: 'inline-block',
    transformOrigin: 'center',
    userSelect: 'none',
    zIndex: drag ? 100 : (hover ? 50 : 1),
    ...style,
  };

  return (
    <div ref={ref}
      className={className}
      onMouseDown={onMouseDown}
      onClick={handleClick}
      onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)}
      style={baseStyle}>
      {/* peel corner */}
      <span style={{
        position:'absolute', top:-1, right:-1, width:hover?14:0, height:hover?14:0,
        background: t.bg,
        borderLeft:`2px solid ${t.ink}`, borderBottom:`2px solid ${t.ink}`,
        clipPath: 'polygon(100% 0, 0 0, 100% 100%)',
        transition:'all .2s',
      }}/>
      {children}
    </div>
  );
}

function Tape({ rotate=-2, color, w=100, style }) {
  return (
    <div style={{
      position:'absolute', width: w, height: 24, background: color,
      transform: `rotate(${rotate}deg)`,
      backgroundImage:'linear-gradient(135deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,.06) 100%)',
      boxShadow:'0 1px 3px rgba(0,0,0,0.15)', opacity: 0.85,
      ...style,
    }}/>
  );
}

function ScrapBox({ children, bg, rotate=0, t, style, hoverable=true, sticky }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={()=>hoverable&&setHover(true)} onMouseLeave={()=>setHover(false)}
      style={{
        position:'relative',
        background: bg || '#fff',
        border: `2.5px solid ${t.ink}`,
        boxShadow: hover ? `10px 10px 0 0 ${t.ink}` : `6px 6px 0 0 ${t.ink}`,
        transform: `rotate(${rotate}deg) ${hover?'translate(-2px,-2px)':''}`,
        transition:'transform .2s, box-shadow .2s',
        backgroundImage: PAPER_BG,
        backgroundBlendMode:'multiply',
        ...style,
      }}>
      {sticky}
      {children}
    </div>
  );
}

// ─── DOODLE SVGs (simple primitives only) ─────────────────
const Doodle = {
  Squiggle: ({ color, w=160, h=20 }) => (
    <svg viewBox="0 0 160 20" width={w} height={h}><path d="M2 10 Q 20 2, 40 10 T 80 10 T 120 10 T 158 10" stroke={color} strokeWidth="3" fill="none" strokeLinecap="round"/></svg>
  ),
  Star: ({ color, size=26 }) => (
    <svg viewBox="0 0 24 24" width={size} height={size}><path d="M12 2 L13.6 9.5 L21 11 L13.6 12.5 L12 22 L10.4 12.5 L3 11 L10.4 9.5 Z" fill={color}/></svg>
  ),
  Arrow: ({ color, w=80, h=40, rotate=0 }) => (
    <svg viewBox="0 0 80 40" width={w} height={h} style={{transform:`rotate(${rotate}deg)`}}>
      <path d="M5 30 Q 30 5, 70 18" stroke={color} strokeWidth="3" fill="none" strokeLinecap="round"/>
      <path d="M62 10 L72 18 L60 24" stroke={color} strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  Heart: ({ color, size=22 }) => (
    <svg viewBox="0 0 24 24" width={size} height={size}><path d="M12 21 C12 21 3 14 3 8 C 3 5, 5 3, 8 3 C 10 3, 11 4, 12 6 C 13 4, 14 3, 16 3 C 19 3, 21 5, 21 8 C 21 14, 12 21, 12 21 Z" fill={color}/></svg>
  ),
  Spiral: ({ color, size=40 }) => (
    <svg viewBox="0 0 40 40" width={size} height={size}><path d="M20 20 m 0 -2 a 2 2 0 1 1 -2 2 a 4 4 0 1 1 4 -4 a 6 6 0 1 1 -6 6 a 8 8 0 1 1 8 -8 a 10 10 0 1 1 -10 10" stroke={color} strokeWidth="2" fill="none" strokeLinecap="round"/></svg>
  ),
  Sparkle: ({ color, size=18 }) => (
    <svg viewBox="0 0 24 24" width={size} height={size}><path d="M12 2 L13 11 L22 12 L13 13 L12 22 L11 13 L2 12 L11 11 Z" fill={color}/></svg>
  ),
  Underline: ({ color, w=200, h=14 }) => (
    <svg viewBox="0 0 200 14" width={w} height={h}><path d="M3 8 Q 50 14, 100 6 T 197 8" stroke={color} strokeWidth="4" fill="none" strokeLinecap="round"/></svg>
  ),
};

window.SP_THEMES = SP_THEMES;
window.SP_FONTS = SP_FONTS;
window.PeelSticker = PeelSticker;
window.Tape = Tape;
window.ScrapBox = ScrapBox;
window.Doodle = Doodle;
window.PAPER_BG = PAPER_BG;