import React, { useMemo, useEffect, useRef } from 'react';
import { View, StyleSheet, Dimensions, Animated } from 'react-native';
import { colors } from '../utils/theme';

const { width, height } = Dimensions.get('window');

function Star({ x, y, size, delay, glow }) {
  const opacity = useRef(new Animated.Value(0.15)).current;

  useEffect(() => {
    const duration = 2000 + Math.random() * 2500;
    const animation = Animated.loop(
      Animated.sequence([
        Animated.timing(opacity, {
          toValue: glow ? 0.9 : 1,
          duration,
          delay,
          useNativeDriver: true,
        }),
        Animated.timing(opacity, {
          toValue: glow ? 0.2 : 0.15,
          duration,
          useNativeDriver: true,
        }),
      ])
    );
    animation.start();
    return () => animation.stop();
  }, []);

  return (
    <View style={{ position: 'absolute', left: x - (glow ? size : 0), top: y - (glow ? size : 0) }}>
      {/* Glow halo for larger stars */}
      {glow && (
        <Animated.View
          style={{
            position: 'absolute',
            width: size * 3,
            height: size * 3,
            borderRadius: size * 1.5,
            backgroundColor: 'rgba(108, 99, 255, 0.15)',
            opacity,
          }}
        />
      )}
      <Animated.View
        style={[
          styles.star,
          {
            left: glow ? size : 0,
            top: glow ? size : 0,
            width: size,
            height: size,
            borderRadius: size / 2,
            opacity,
          },
        ]}
      />
    </View>
  );
}

export default function StarField({ count = 50 }) {
  const stars = useMemo(() => {
    const items = [];

    // Regular small stars
    const smallCount = Math.floor(count * 0.6);
    for (let i = 0; i < smallCount; i++) {
      items.push({
        id: i,
        x: Math.random() * width,
        y: Math.random() * height,
        size: Math.random() * 3 + 1.5,  // 1.5–4.5px
        delay: Math.random() * 3000,
        glow: false,
      });
    }

    // Medium stars
    const medCount = Math.floor(count * 0.25);
    for (let i = 0; i < medCount; i++) {
      items.push({
        id: smallCount + i,
        x: Math.random() * width,
        y: Math.random() * height,
        size: Math.random() * 3 + 4,  // 4–7px
        delay: Math.random() * 3000,
        glow: false,
      });
    }

    // Large glowing stars
    const glowCount = count - smallCount - medCount;
    for (let i = 0; i < glowCount; i++) {
      items.push({
        id: smallCount + medCount + i,
        x: Math.random() * width,
        y: Math.random() * height,
        size: Math.random() * 3 + 5,  // 5–8px with glow halo
        delay: Math.random() * 4000,
        glow: true,
      });
    }

    return items;
  }, [count]);

  return (
    <View style={styles.container} pointerEvents="none">
      {stars.map((star) => (
        <Star key={star.id} {...star} />
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
  },
  star: {
    position: 'absolute',
    backgroundColor: colors.star,
  },
});
