import React, { useMemo } from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';
import { theme } from '../theme';

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

interface Star {
  x: number;
  y: number;
  size: number;
  isGold: boolean;
}

const generateStars = (count: number, size: number, isGold: boolean = false): Star[] => {
  const stars: Star[] = [];
  for (let i = 0; i < count; i++) {
    stars.push({
      x: Math.random() * SCREEN_WIDTH,
      y: Math.random() * SCREEN_HEIGHT,
      size,
      isGold,
    });
  }
  return stars;
};

const StarComponent: React.FC<Star> = ({ x, y, size, isGold }) => {
  return (
    <View
      style={[
        styles.star,
        {
          left: x,
          top: y,
          width: size,
          height: size,
          borderRadius: size / 2,
          backgroundColor: isGold ? theme.colors.primary : theme.colors.text,
          opacity: 0.6 + Math.random() * 0.4,
        },
      ]}
    />
  );
};

export const Starfield: React.FC = () => {
  const smallStars = useMemo(() => generateStars(30, 1), []);
  const mediumStars = useMemo(() => generateStars(15, 1.5), []);
  const largeStars = useMemo(() => generateStars(8, 2, true), []);

  return (
    <View style={styles.container}>
      {/* Radial gradient background simulation */}
      <View style={styles.radialGlow} />
      
      {/* Stars */}
      {smallStars.map((star, i) => (
        <StarComponent key={`small-${i}`} {...star} />
      ))}
      {mediumStars.map((star, i) => (
        <StarComponent key={`medium-${i}`} {...star} />
      ))}
      {largeStars.map((star, i) => (
        <StarComponent key={`large-${i}`} {...star} />
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: theme.colors.background,
  },
  radialGlow: {
    position: 'absolute',
    top: SCREEN_HEIGHT * 0.2,
    left: SCREEN_WIDTH / 2 - 150,
    width: 300,
    height: 300,
    borderRadius: 150,
    backgroundColor: theme.colors.primarySoft,
  },
  star: {
    position: 'absolute',
  },
});