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

export default function Planet({ size = 120, glowIntensity = 1, showOrbit = false, progress = 0 }) {
  const pulse = useRef(new Animated.Value(1)).current;

  useEffect(() => {
    const animation = Animated.loop(
      Animated.sequence([
        Animated.timing(pulse, { toValue: 1.1, duration: 2000, useNativeDriver: true }),
        Animated.timing(pulse, { toValue: 1, duration: 2000, useNativeDriver: true }),
      ])
    );
    animation.start();
    return () => animation.stop();
  }, []);

  return (
    <View style={[styles.container, { width: size * 2.5, height: size * 2.5 }]}>
      {showOrbit && (
        <View
          style={[
            styles.orbit,
            {
              width: size * 2,
              height: size * 2,
              borderRadius: size,
              borderColor: colors.orbitLine,
            },
          ]}
        >
          <View
            style={[
              styles.orbitDot,
              {
                transform: [
                  { rotate: `${(progress / 40) * 360}deg` },
                  { translateY: -size },
                ],
              },
            ]}
          >
            <View style={styles.dot} />
          </View>
        </View>
      )}

      <Animated.View
        style={[
          styles.glow,
          {
            width: size * 1.6,
            height: size * 1.6,
            borderRadius: size * 0.8,
            opacity: 0.3 * glowIntensity,
            transform: [{ scale: pulse }],
          },
        ]}
      />

      <View
        style={[
          styles.planet,
          { width: size, height: size, borderRadius: size / 2 },
        ]}
      >
        <View
          style={[
            styles.highlight,
            {
              width: size * 0.3,
              height: size * 0.3,
              borderRadius: size * 0.15,
              top: size * 0.15,
              left: size * 0.15,
            },
          ]}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  planet: {
    backgroundColor: colors.planetCore,
    position: 'absolute',
    shadowColor: colors.primary,
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.8,
    shadowRadius: 20,
    elevation: 10,
  },
  highlight: {
    backgroundColor: 'rgba(255, 255, 255, 0.15)',
    position: 'absolute',
  },
  glow: {
    backgroundColor: colors.planetGlow,
    position: 'absolute',
  },
  orbit: {
    borderWidth: 1.5,
    position: 'absolute',
    borderStyle: 'dashed',
  },
  orbitDot: {
    position: 'absolute',
    top: '50%',
    left: '50%',
    marginLeft: -6,
    marginTop: -6,
  },
  dot: {
    width: 12,
    height: 12,
    borderRadius: 6,
    backgroundColor: colors.orbitActive,
    shadowColor: colors.accent,
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 1,
    shadowRadius: 8,
    elevation: 5,
  },
});
