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

const DOT_SIZE_DEFAULT = 6;
const DOT_SIZE_CURRENT = 12;
const DOT_SIZE_COMPLETED = 7;

function OrbitDot({ index, x, y, status, onPress }) {
  // status: 'completed' | 'current' | 'future'
  const pulseAnim = useRef(new Animated.Value(1)).current;
  const glowOpacity = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    if (status === 'current') {
      const pulse = Animated.loop(
        Animated.sequence([
          Animated.timing(pulseAnim, { toValue: 1.6, duration: 1200, useNativeDriver: true }),
          Animated.timing(pulseAnim, { toValue: 1, duration: 1200, useNativeDriver: true }),
        ])
      );
      const glow = Animated.loop(
        Animated.sequence([
          Animated.timing(glowOpacity, { toValue: 0.8, duration: 1200, useNativeDriver: true }),
          Animated.timing(glowOpacity, { toValue: 0.2, duration: 1200, useNativeDriver: true }),
        ])
      );
      pulse.start();
      glow.start();
      return () => { pulse.stop(); glow.stop(); };
    }
  }, [status]);

  const isCurrent = status === 'current';
  const isCompleted = status === 'completed';
  const isFuture = status === 'future';

  const dotSize = isCurrent ? DOT_SIZE_CURRENT : isCompleted ? DOT_SIZE_COMPLETED : DOT_SIZE_DEFAULT;

  const dotColor = isCurrent
    ? colors.orbitActive
    : isCompleted
    ? colors.primary
    : 'rgba(108, 99, 255, 0.15)';

  const content = (
    <>
      {/* Glow ring for current day */}
      {isCurrent && (
        <Animated.View
          style={[
            styles.glowRing,
            {
              width: DOT_SIZE_CURRENT * 2.5,
              height: DOT_SIZE_CURRENT * 2.5,
              borderRadius: DOT_SIZE_CURRENT * 1.25,
              opacity: glowOpacity,
              transform: [{ scale: pulseAnim }],
            },
          ]}
        />
      )}

      {/* Completed glow */}
      {isCompleted && (
        <Animated.View
          style={[
            styles.completedGlow,
            {
              width: dotSize * 2.2,
              height: dotSize * 2.2,
              borderRadius: dotSize * 1.1,
            },
          ]}
        />
      )}

      {/* Dot */}
      <Animated.View
        style={[
          styles.dot,
          {
            width: dotSize,
            height: dotSize,
            borderRadius: dotSize / 2,
            backgroundColor: dotColor,
            ...(isCurrent && {
              shadowColor: colors.orbitActive,
              shadowOffset: { width: 0, height: 0 },
              shadowOpacity: 1,
              shadowRadius: 10,
              elevation: 8,
            }),
            ...(isCompleted && {
              shadowColor: colors.primary,
              shadowOffset: { width: 0, height: 0 },
              shadowOpacity: 0.6,
              shadowRadius: 4,
              elevation: 3,
            }),
          },
        ]}
      />
    </>
  );

  const containerStyle = [
    styles.container,
    {
      left: x - DOT_SIZE_CURRENT * 1.25,
      top: y - DOT_SIZE_CURRENT * 1.25,
      width: DOT_SIZE_CURRENT * 2.5,
      height: DOT_SIZE_CURRENT * 2.5,
    },
  ];

  if (onPress && (isCurrent || isCompleted)) {
    return (
      <Pressable style={containerStyle} onPress={() => onPress(index, status)}>
        {content}
      </Pressable>
    );
  }

  return <Animated.View style={containerStyle}>{content}</Animated.View>;
}

export default memo(OrbitDot);

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    alignItems: 'center',
    justifyContent: 'center',
  },
  dot: {},
  glowRing: {
    position: 'absolute',
    backgroundColor: 'rgba(0, 229, 255, 0.2)',
  },
  completedGlow: {
    position: 'absolute',
    backgroundColor: 'rgba(108, 99, 255, 0.15)',
  },
});
