/* global React, gsap */

// brand sticker 5-point star: colored fill + thick white outline (paint-order) + soft shadow
const STAR_PATH = 'M50 4 L62 36 L96 38 L69 60 L79 94 L50 74 L21 94 L31 60 L4 38 L38 36 Z';

function StarSticker({ size = 40, color = '#F50CA0', rot = 0, style = {} }) {
  return (
    <svg width={size} height={size} viewBox="0 0 100 100"
      style={{ transform: `rotate(${rot}deg)`, filter: 'drop-shadow(0 3px 2px rgba(20,40,60,0.18))', display: 'block', ...style }}>
      <path d={STAR_PATH} fill={color} stroke="#fff" strokeWidth="13" strokeLinejoin="round" paintOrder="stroke" />
      <path d={STAR_PATH} fill="none" stroke="rgba(0,0,0,0.10)" strokeWidth="2.5" strokeLinejoin="round" />
    </svg>
  );
}

const MOODS = {
  sky: {
    label: 'Sky blue',
    bg: '#48ceea',
    dot: 'rgba(255,255,255,0.92)',
    stars: ['#F50CA0', '#D6219E', '#F5A94E', '#B5751E'],
  },
  pink: {
    label: 'Pink pop',
    bg: '#ec23a6',
    dot: 'rgba(255,255,255,0.9)',
    stars: ['#48ceea', '#F5A94E', '#ffffff', '#B5751E'],
  },
  sunset: {
    label: 'Sunset',
    bg: '#f7a445',
    dot: 'rgba(255,255,255,0.92)',
    stars: ['#F50CA0', '#48ceea', '#ffffff', '#D6219E'],
  },
  dreamy: {
    label: 'Dreamy',
    bg: 'linear-gradient(165deg, #6fd6ef 0%, #8fd0f0 38%, #f6aede 100%)',
    dot: 'rgba(255,255,255,0.95)',
    stars: ['#F50CA0', '#F5A94E', '#ffffff', '#D6219E'],
  },
};

// deterministic pseudo-random so re-renders are stable per index
function rng(seed) {
  let s = seed * 9301 + 49297;
  return () => { s = (s * 9301 + 49297) % 233280; return s / 233280; };
}

function buildField(count, moodKey) {
  const mood = MOODS[moodKey] || MOODS.sky;
  const r = rng(count * 13 + 7);
  const stars = [];
  const dots = [];
  for (let i = 0; i < count; i++) {
    stars.push({
      id: 'st' + i,
      x: r() * 100, y: r() * 100,
      size: 18 + r() * 46,
      color: mood.stars[Math.floor(r() * mood.stars.length)],
      rot: r() * 360,
      dur: 3 + r() * 4,
      delay: r() * 3,
      drift: 10 + r() * 22,
    });
  }
  for (let i = 0; i < count * 3; i++) {
    dots.push({ id: 'dt' + i, x: r() * 100, y: r() * 100, size: 3 + r() * 7, dur: 1.6 + r() * 2.6, delay: r() * 3 });
  }
  return { stars, dots, mood };
}

function Sky({ density = 16, mood = 'sky', children }) {
  const ref = React.useRef(null);
  const field = React.useMemo(() => buildField(density, mood), [density, mood]);

  React.useEffect(() => {
    if (typeof gsap === 'undefined' || !ref.current) return;
    const ctx = gsap.context(() => {
      gsap.utils.toArray('[data-star]').forEach((el) => {
        const drift = parseFloat(el.dataset.drift);
        const dur = parseFloat(el.dataset.dur);
        const delay = parseFloat(el.dataset.delay);
        gsap.to(el, { y: `+=${drift}`, x: `+=${drift * 0.4}`, rotation: '+=14', duration: dur, delay, yoyo: true, repeat: -1, ease: 'sine.inOut', transformOrigin: '50% 50%' });
        gsap.to(el, { scale: 1.12, opacity: 0.78, duration: dur * 0.7, delay, yoyo: true, repeat: -1, ease: 'sine.inOut' });
      });
      gsap.utils.toArray('[data-dot]').forEach((el) => {
        gsap.to(el, { opacity: 0.25, scale: 0.6, duration: parseFloat(el.dataset.dur), delay: parseFloat(el.dataset.delay), yoyo: true, repeat: -1, ease: 'sine.inOut' });
      });
    }, ref);
    return () => ctx.revert();
  }, [field]);

  return (
    <div ref={ref} style={{
      position: 'fixed', inset: 0, overflow: 'hidden',
      background: field.mood.bg,
    }}>
      {field.dots.map((d) => (
        <span key={d.id} data-dot data-dur={d.dur} data-delay={d.delay} style={{
          position: 'absolute', left: `${d.x}%`, top: `${d.y}%`,
          width: d.size, height: d.size, borderRadius: '50%',
          background: field.mood.dot, willChange: 'transform, opacity',
        }} />
      ))}
      {field.stars.map((s) => (
        <span key={s.id} data-star data-drift={s.drift} data-dur={s.dur} data-delay={s.delay} style={{
          position: 'absolute', left: `${s.x}%`, top: `${s.y}%`, willChange: 'transform', pointerEvents: 'none',
        }}>
          <StarSticker size={s.size} color={s.color} rot={s.rot} />
        </span>
      ))}
      <div style={{ position: 'relative', zIndex: 2, width: '100%', height: '100%' }}>{children}</div>
    </div>
  );
}

Object.assign(window, { StarSticker, Sky, MOODS, STAR_PATH });