import React, { useEffect, useRef } from "react";
import { View, Animated, StyleSheet, Text } from "react-native";
import Svg, { Circle } from "react-native-svg";
import { useTheme } from "../contexts/ThemeContext";

const AnimatedCircle = Animated.createAnimatedComponent(Circle);

interface ActivityRingProps {
  size?: number;
  strokeWidth?: number;
  progress: number;
  current: number;
  goal: number;
  label: string;
  color: string;
  icon?: React.ReactNode;
}

export function ActivityRing({
  size = 100,
  strokeWidth = 10,
  progress,
  current,
  goal,
  label,
  color,
  icon,
}: ActivityRingProps) {
  const { colors, typography } = useTheme();
  const animatedValue = useRef(new Animated.Value(0)).current;
  const radius = (size - strokeWidth) / 2;
  const circumference = radius * 2 * Math.PI;

  useEffect(() => {
    Animated.timing(animatedValue, {
      toValue: Math.min(progress, 100),
      duration: 1200,
      useNativeDriver: true,
    }).start();
  }, [progress]);

  const strokeDashoffset = animatedValue.interpolate({
    inputRange: [0, 100],
    outputRange: [circumference, 0],
  });

  return (
    <View style={styles.container}>
      <View
        style={{
          width: size,
          height: size,
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
          <Circle
            cx={size / 2}
            cy={size / 2}
            r={radius}
            stroke={colors.surfaceElevated}
            strokeWidth={strokeWidth}
            fill="transparent"
          />
          <AnimatedCircle
            cx={size / 2}
            cy={size / 2}
            r={radius}
            stroke={color}
            strokeWidth={strokeWidth}
            fill="transparent"
            strokeDasharray={circumference}
            strokeDashoffset={strokeDashoffset}
            strokeLinecap="round"
            rotation="-90"
            origin={`${size / 2}, ${size / 2}`}
          />
        </Svg>
        <View
          style={[
            StyleSheet.absoluteFillObject,
            { justifyContent: "center", alignItems: "center" },
          ]}
        >
          {icon ? (
            <View style={styles.iconContainer}>{icon}</View>
          ) : (
            <Text
              style={[
                typography.statLarge,
                { color: colors.textPrimary, fontSize: size * 0.28 },
              ]}
            >
              {Math.round(current)}
            </Text>
          )}
        </View>
      </View>
      <Text
        style={[
          typography.label,
          { color: colors.textTertiary, marginTop: 8, textAlign: "center" },
        ]}
      >
        {label}
      </Text>
      <Text
        style={[
          typography.caption,
          { color: colors.textSecondary, marginTop: 2 },
        ]}
      >
        / {goal.toLocaleString()}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: "center",
  },
  iconContainer: {
    justifyContent: "center",
    alignItems: "center",
  },
});
