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

const TOTAL_DAYS = 40;

export default function OrbitContainer({
  size = 280,
  currentDay = 1,
  planetSize = 80,
  glowIntensity = 0.5,
  onDotPress,
}) {
  const radius = size / 2;
  const center = size / 2;
  const rotateAnim = useRef(new Animated.Value(0)).current;

  // Slow subtle orbit rotation
  useEffect(() => {
    const anim = Animated.loop(
      Animated.timing(rotateAnim, {
        toValue: 1,
        duration: 120000, // 2 minutes per rotation
        useNativeDriver: true,
      })
    );
    anim.start();
    return () => anim.stop();
  }, []);

  const rotation = rotateAnim.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '360deg'],
  });

  // Calculate dot positions
  const dots = useMemo(() => {
    const angleOffset = -Math.PI / 2; // Start from top
    return Array.from({ length: TOTAL_DAYS }, (_, i) => {
      const angle = angleOffset + (i / TOTAL_DAYS) * 2 * Math.PI;
      const x = center + radius * 0.88 * Math.cos(angle);
      const y = center + radius * 0.88 * Math.sin(angle);
      const dayNum = i + 1;

      let status = 'future';
      if (dayNum < currentDay) status = 'completed';
      else if (dayNum === currentDay) status = 'current';

      return { index: dayNum, x, y, status };
    });
  }, [currentDay, size]);

  return (
    <View style={[styles.container, { width: size, height: size }]}>
      {/* Orbit ring */}
      <View
        style={[
          styles.orbitRing,
          {
            width: size * 0.88 * 2,
            height: size * 0.88 * 2,
            borderRadius: size * 0.88,
          },
        ]}
      />

      {/* Gradient trail for completed portion */}
      {currentDay > 1 && (
        <View
          style={[
            styles.orbitTrail,
            {
              width: size * 0.88 * 2,
              height: size * 0.88 * 2,
              borderRadius: size * 0.88,
              borderColor: 'rgba(108, 99, 255, 0.12)',
            },
          ]}
        />
      )}

      {/* Rotating dot layer */}
      <Animated.View
        style={[
          styles.dotsLayer,
          { width: size, height: size, transform: [{ rotate: rotation }] },
        ]}
      >
        {dots.map((dot) => (
          <OrbitDot
            key={dot.index}
            index={dot.index}
            x={dot.x}
            y={dot.y}
            status={dot.status}
            onPress={onDotPress}
          />
        ))}
      </Animated.View>

      {/* Planet center (does not rotate) */}
      <View style={styles.planetWrapper}>
        <PlanetCore size={planetSize} glowIntensity={glowIntensity} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  orbitRing: {
    position: 'absolute',
    borderWidth: 1,
    borderColor: colors.orbitLine,
    borderStyle: 'dashed',
  },
  orbitTrail: {
    position: 'absolute',
    borderWidth: 1.5,
  },
  dotsLayer: {
    position: 'absolute',
  },
  planetWrapper: {
    position: 'absolute',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
