// Cosmic background: gradient sky, drifting clouds, twinkling stars, shooting stars,
// constellation lines, and small planets. All hand-built in SVG/CSS.

const PALETTES = {
  dawn: {
    top: '#3d2d66',
    mid: '#b487d9',
    bottom: '#f5c7dc',
    cloud: 'rgba(253, 228, 239, 0.55)',
    cloud2: 'rgba(217, 199, 245, 0.5)',
    star: '#fff4e8',
    accent: '#ffe38a',
    pop: '#f096c2',
  },
  twilight: {
    top: '#1a1030',
    mid: '#3d2d66',
    bottom: '#b487d9',
    cloud: 'rgba(217, 199, 245, 0.35)',
    cloud2: 'rgba(240, 150, 194, 0.28)',
    star: '#fff4e8',
    accent: '#ffe38a',
    pop: '#c7f5dc',
  },
  mint: {
    top: '#2a3a52',
    mid: '#6fa8a1',
    bottom: '#c7f5dc',
    cloud: 'rgba(199, 245, 220, 0.5)',
    cloud2: 'rgba(253, 228, 239, 0.4)',
    star: '#fff4e8',
    accent: '#ffe38a',
    pop: '#f096c2',
  },
};

function seedRandom(seed) {
  let s = seed;
  return () => {
    s = (s * 9301 + 49297) % 233280;
    return s / 233280;
  };
}

function StarField({ density = 120, palette }) {
  const stars = React.useMemo(() => {
    const r = seedRandom(42);
    return Array.from({ length: density }, (_, i) => {
      const v = r();
      return {
        x: r() * 100,
        y: r() * 100,
        size: 0.15 + r() * 0.35,
        delay: r() * 8,
        duration: 3.5 + r() * 4.5,
        baseOpacity: 0.35 + r() * 0.4,
        peakOpacity: 0.7 + r() * 0.3,
        kind: v > 0.985 ? 'sparkle' : 'dot',
      };
    });
  }, [density]);

  return (
    <svg
      style={{
        position: 'absolute', inset: 0, width: '100%', height: '100%',
        pointerEvents: 'none',
      }}
      preserveAspectRatio="xMidYMid slice"
      viewBox="0 0 100 100"
    >
      {stars.map((s, i) => {
        const isSparkle = s.kind !== 'dot';
        const r = isSparkle ? s.size * 1.4 : s.size * 1.1;
        const fill = isSparkle ? palette.accent : palette.star;
        const baseOp = isSparkle ? s.baseOpacity * 0.75 : s.baseOpacity;
        const peakOp = s.peakOpacity;
        const lowOp = isSparkle ? s.baseOpacity * 0.35 : s.baseOpacity;
        const dur = isSparkle ? s.duration * 1.5 : s.duration;
        return (
          <circle
            key={i}
            cx={s.x}
            cy={s.y}
            r={r}
            fill={fill}
            opacity={baseOp}
          >
            <animate
              attributeName="opacity"
              values={`${lowOp};${peakOp};${lowOp}`}
              dur={`${dur}s`}
              begin={`${s.delay}s`}
              repeatCount="indefinite"
              calcMode="spline"
              keySplines="0.4 0 0.6 1;0.4 0 0.6 1"
              keyTimes="0;0.5;1"
            />
          </circle>
        );
      })}
    </svg>
  );
}

function DriftingCloud({ top, left, scale, duration, delay, color, flip }) {
  return (
    <svg
      style={{
        position: 'absolute',
        top: `${top}%`,
        left: `${left}%`,
        width: `${scale * 30}%`,
        height: 'auto',
        transform: flip ? 'scaleX(-1)' : 'none',
        animation: `drift ${duration}s ease-in-out ${delay}s infinite alternate`,
        filter: 'blur(2px)',
        pointerEvents: 'none',
        opacity: 0.9,
      }}
      viewBox="0 0 300 120"
      preserveAspectRatio="xMidYMid meet"
    >
      <defs>
        <radialGradient id={`cg-${top}-${left}`} cx="50%" cy="60%" r="60%">
          <stop offset="0%" stopColor={color} stopOpacity="1" />
          <stop offset="100%" stopColor={color} stopOpacity="0" />
        </radialGradient>
      </defs>
      <ellipse cx="70" cy="80" rx="55" ry="30" fill={`url(#cg-${top}-${left})`} />
      <ellipse cx="140" cy="60" rx="70" ry="40" fill={`url(#cg-${top}-${left})`} />
      <ellipse cx="210" cy="75" rx="60" ry="32" fill={`url(#cg-${top}-${left})`} />
      <ellipse cx="160" cy="85" rx="90" ry="25" fill={`url(#cg-${top}-${left})`} />
    </svg>
  );
}

function ShootingStar({ top, left, delay, color }) {
  return (
    <div
      style={{
        position: 'absolute',
        top: `${top}%`,
        left: `${left}%`,
        width: '120px',
        height: '2px',
        pointerEvents: 'none',
        transform: 'rotate(-25deg)',
        animation: `shoot 7s ease-out ${delay}s infinite`,
        opacity: 0,
      }}
    >
      <div style={{
        width: '100%', height: '100%',
        background: `linear-gradient(90deg, transparent, ${color})`,
        borderRadius: '2px',
        boxShadow: `0 0 8px ${color}`,
      }} />
    </div>
  );
}

function MilkyWay({ palette, speedMult }) {
  const stars = React.useMemo(() => {
    const r = seedRandom(7);
    const arms = 3;
    const pts = [];
    const N = 1400;
    for (let i = 0; i < N; i++) {
      const t = Math.pow(r(), 0.55);
      const radius = 8 + t * 220;
      const arm = Math.floor(r() * arms);
      const baseAng = (arm / arms) * Math.PI * 2 + t * 4.2;
      const spread = (1 - t) * 0.55 + 0.12;
      const ang = baseAng + (r() - 0.5) * spread;
      const rr = radius + (r() - 0.5) * radius * 0.12;
      const x = Math.cos(ang) * rr;
      const y = Math.sin(ang) * rr * 0.95;
      const coreLike = 1 - t;
      const kind = r() < 0.04 ? 'dust' : 'star';
      pts.push({
        x, y,
        size: kind === 'dust' ? 3 + r() * 6 : 0.35 + r() * (coreLike * 0.8 + 0.2),
        alpha: kind === 'dust' ? 0.08 + r() * 0.12 : 0.25 + r() * 0.55 * (1 - t * 0.4),
        warm: coreLike,
        kind,
      });
    }
    return pts;
  }, []);

  return (
    <svg
      style={{
        position: 'absolute',
        top: '-5%',
        right: '-10%',
        width: 'min(78%, 600px)',
        height: 'auto',
        maxHeight: '120%',
        pointerEvents: 'none',
        mixBlendMode: 'screen',
        transformOrigin: 'center',
        animation: `galaxySpin ${480 * speedMult}s linear infinite`,
        opacity: 0.85,
      }}
      viewBox="-260 -260 520 520"
    >
      <defs>
        <radialGradient id="mwCore" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#fff4e8" stopOpacity="0.85" />
          <stop offset="30%" stopColor="#ffd98a" stopOpacity="0.55" />
          <stop offset="60%" stopColor="#f096c2" stopOpacity="0.25" />
          <stop offset="100%" stopColor="#f096c2" stopOpacity="0" />
        </radialGradient>
        <radialGradient id="mwHalo" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor={palette.pop} stopOpacity="0.18" />
          <stop offset="60%" stopColor={palette.accent} stopOpacity="0.08" />
          <stop offset="100%" stopColor={palette.accent} stopOpacity="0" />
        </radialGradient>
      </defs>
      <circle cx="0" cy="0" r="240" fill="url(#mwHalo)" />
      <circle cx="0" cy="0" r="55" fill="url(#mwCore)" />
      {stars.map((s, i) => {
        if (s.kind === 'dust') {
          return (
            <circle key={i}
              cx={s.x.toFixed(1)} cy={s.y.toFixed(1)}
              r={s.size.toFixed(1)}
              fill={palette.pop}
              opacity={s.alpha.toFixed(2)}
              style={{ filter: 'blur(3px)' }}
            />
          );
        }
        const color = s.warm > 0.6 ? '#fff4e8'
          : s.warm > 0.35 ? '#ffd98a' : palette.star;
        return (
          <circle key={i}
            cx={s.x.toFixed(1)} cy={s.y.toFixed(1)}
            r={s.size.toFixed(2)}
            fill={color}
            opacity={s.alpha.toFixed(2)}
          />
        );
      })}
    </svg>
  );
}

function CosmicBackground({ palette, starDensity, motionIntensity }) {
  const p = PALETTES[palette] || PALETTES.twilight;
  const speedMult = motionIntensity === 'low' ? 1.6 : motionIntensity === 'high' ? 0.6 : 1;

  return (
    <div style={{
      position: 'fixed',
      inset: 0,
      zIndex: 0,
      background: `linear-gradient(180deg, ${p.top} 0%, ${p.mid} 50%, ${p.bottom} 100%)`,
      overflow: 'hidden',
    }}>
      {/* soft nebula blobs */}
      <div style={{
        position: 'absolute', top: '10%', left: '-10%',
        width: '60%', height: '60%',
        background: `radial-gradient(circle, ${p.pop}33 0%, transparent 60%)`,
        filter: 'blur(40px)',
        animation: `pulse ${20 * speedMult}s ease-in-out infinite`,
      }} />
      <div style={{
        position: 'absolute', top: '40%', right: '-15%',
        width: '70%', height: '70%',
        background: `radial-gradient(circle, ${p.accent}22 0%, transparent 60%)`,
        filter: 'blur(60px)',
        animation: `pulse ${28 * speedMult}s ease-in-out 3s infinite`,
      }} />

      <MilkyWay palette={p} speedMult={speedMult} />

      <StarField density={starDensity} palette={p} />

      <DriftingCloud top={12} left={-5} scale={2.5} duration={18 * speedMult} delay={0} color={p.cloud} />
      <DriftingCloud top={35} left={70} scale={2} duration={22 * speedMult} delay={2} color={p.cloud2} flip />
      <DriftingCloud top={62} left={10} scale={3} duration={25 * speedMult} delay={1} color={p.cloud} />
      <DriftingCloud top={78} left={55} scale={2.8} duration={20 * speedMult} delay={4} color={p.cloud2} />
      <DriftingCloud top={90} left={0} scale={4} duration={30 * speedMult} delay={0} color={p.cloud} />

      <ShootingStar top={15} left={80} delay={2} color={p.star} />
      <ShootingStar top={45} left={20} delay={11} color={p.accent} />

      <div style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(ellipse at center top, transparent 50%, ${p.top}88 100%)`,
        pointerEvents: 'none',
      }} />

      <style>{`
        @keyframes twinkle {
          0%, 100% { opacity: 0.3; transform: scale(0.8); }
          50% { opacity: 1; transform: scale(1.2); }
        }
        @keyframes drift {
          0% { transform: translateX(0) translateY(0); }
          100% { transform: translateX(30px) translateY(-10px); }
        }
        @keyframes pulse {
          0%, 100% { opacity: 0.7; transform: scale(1); }
          50% { opacity: 1; transform: scale(1.1); }
        }
        @keyframes shoot {
          0% { transform: rotate(-25deg) translateX(0); opacity: 0; }
          5% { opacity: 1; }
          20% { transform: rotate(-25deg) translateX(-400px); opacity: 0; }
          100% { opacity: 0; }
        }
        @keyframes chromeShift {
          0%, 100% { background-position: 0% 50%; }
          50% { background-position: 100% 50%; }
        }
        @keyframes galaxySpin {
          from { transform: rotate(0deg); }
          to { transform: rotate(360deg); }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { CosmicBackground, PALETTES, MilkyWay });