// ===== Draggable stickers + Ctrl+Z easter egg =====
const { useEffect, useRef, useState } = React;

function Sticker({ id, initial, children, rotate = 0, onMove }) {
  const [pos, setPos] = useState(initial);
  const [drag, setDrag] = useState(false);
  const ref = useRef(null);
  const drift = useRef({ vx: 0, vy: 0, lastX: 0, lastY: 0, lastT: 0 });

  useEffect(() => { onMove && onMove(id, pos); }, [pos]);

  const onDown = (e) => {
    const pt = 'touches' in e ? e.touches[0] : e;
    const rect = ref.current.getBoundingClientRect();
    const offX = pt.clientX - rect.left;
    const offY = pt.clientY - rect.top;
    setDrag(true);
    drift.current.lastX = pt.clientX;
    drift.current.lastY = pt.clientY;
    drift.current.lastT = performance.now();

    const move = (ev) => {
      const p = 'touches' in ev ? ev.touches[0] : ev;
      const now = performance.now();
      const dt = Math.max(16, now - drift.current.lastT);
      drift.current.vx = (p.clientX - drift.current.lastX) / dt * 16;
      drift.current.vy = (p.clientY - drift.current.lastY) / dt * 16;
      drift.current.lastX = p.clientX;
      drift.current.lastY = p.clientY;
      drift.current.lastT = now;
      // absolute container coords
      const container = ref.current.offsetParent || document.body;
      const cRect = container.getBoundingClientRect();
      setPos({
        x: p.clientX - cRect.left - offX,
        y: p.clientY - cRect.top - offY
      });
      ev.preventDefault();
    };
    const up = () => {
      setDrag(false);
      // throw with inertia
      let { vx, vy } = drift.current;
      const animate = () => {
        vx *= 0.92; vy *= 0.92;
        if (Math.abs(vx) < 0.3 && Math.abs(vy) < 0.3) return;
        setPos(p => ({ x: p.x + vx, y: p.y + vy }));
        requestAnimationFrame(animate);
      };
      animate();
      window.removeEventListener('mousemove', move);
      window.removeEventListener('mouseup', up);
      window.removeEventListener('touchmove', move);
      window.removeEventListener('touchend', up);
    };
    window.addEventListener('mousemove', move);
    window.addEventListener('mouseup', up);
    window.addEventListener('touchmove', move, { passive: false });
    window.addEventListener('touchend', up);
  };

  return (
    <div
      ref={ref}
      className={`sticker ${drag ? 'dragging' : ''}`}
      style={{ left: pos.x, top: pos.y, transform: `rotate(${rotate}deg) ${drag ? 'scale(1.05)' : ''}` }}
      onMouseDown={onDown}
      onTouchStart={onDown}
      data-sticker-id={id}
    >
      {children}
    </div>
  );
}

// preset sticker SVGs
const STICKER_SVGS = {
  star: (
    <svg width="90" height="90" viewBox="0 0 90 90">
      <path d="M45 8 L54 34 L82 34 L60 50 L68 76 L45 60 L22 76 L30 50 L8 34 L36 34 Z" fill="#F5C23C" stroke="#1E3A6F" strokeWidth="3" strokeLinejoin="round"/>
      <text x="45" y="52" textAnchor="middle" fontFamily="monospace" fontWeight="700" fontSize="12" fill="#1E3A6F">NEW!</text>
    </svg>
  ),
  arrow: (
    <svg width="120" height="60" viewBox="0 0 120 60">
      <path d="M10 30 Q40 10 70 30 Q90 44 108 30" stroke="#E85A3C" strokeWidth="3.5" fill="none" strokeLinecap="round" strokeDasharray="2 5"/>
      <path d="M100 22 L112 30 L100 38" stroke="#E85A3C" strokeWidth="3.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  cloud: (
    <svg width="110" height="70" viewBox="0 0 110 70">
      <path d="M28 50 Q10 50 12 34 Q14 20 30 22 Q36 8 52 14 Q66 4 78 18 Q96 16 96 34 Q102 46 88 52 Z" fill="#5AC4B9" stroke="#1E3A6F" strokeWidth="3" strokeLinejoin="round"/>
      <text x="54" y="40" textAnchor="middle" fontFamily="Bricolage Grotesque, serif" fontWeight="800" fontSize="14" fill="#1E3A6F" fontStyle="italic">nice.</text>
    </svg>
  ),
  squiggle: (
    <svg width="140" height="40" viewBox="0 0 140 40">
      <path d="M5 20 Q15 5 25 20 T45 20 T65 20 T85 20 T105 20 T125 20 T135 20" stroke="#E85A3C" strokeWidth="4" fill="none" strokeLinecap="round"/>
    </svg>
  ),
  dot: (
    <svg width="80" height="80" viewBox="0 0 80 80">
      <circle cx="40" cy="40" r="30" fill="#E85A3C" stroke="#1E3A6F" strokeWidth="3"/>
      <text x="40" y="47" textAnchor="middle" fontFamily="monospace" fontWeight="700" fontSize="14" fill="#F5EFE4">CTRL</text>
    </svg>
  ),
  z: (
    <svg width="80" height="80" viewBox="0 0 80 80">
      <rect x="8" y="8" width="64" height="64" rx="10" fill="#5AC4B9" stroke="#1E3A6F" strokeWidth="3"/>
      <text x="40" y="56" textAnchor="middle" fontFamily="Bricolage Grotesque, serif" fontWeight="800" fontSize="44" fill="#1E3A6F">Z</text>
    </svg>
  ),
};

window.Sticker = Sticker;
window.STICKER_SVGS = STICKER_SVGS;
