import {
  Canvas,
  DashPathEffect,
  Path,
  Shadow,
  Skia,
  SweepGradient,
  vec,
} from "@shopify/react-native-skia";
import React, { useEffect } from "react";
import { StyleSheet, TextInput, View, ViewStyle } from "react-native";
import Animated, {
  Easing,
  useAnimatedProps,
  useDerivedValue,
  useSharedValue,
  withTiming,
} from "react-native-reanimated";
import { useTheme } from "../../theme";

const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);

interface CircularProgressBarProps {
  size?: number;
  strokeWidth?: number;
  backgroundColor?: string;
  progressColors?: string[];
  lineCap?: "butt" | "round" | "square";
  customText?: string;
  textColor?: string;
  fontSize?: number;
  style?: ViewStyle;
  innerShadowColor?: string;
  duration?: number;
  variant?: "progress" | "steps";
  progress?: number;
  progressPadding?: number;
  currentStep?: number;
  totalSteps?: number;
  stepGap?: number;
  fontFamily?: string;
}

const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
  size = 120,
  strokeWidth = 8,
  backgroundColor,
  progressColors,
  lineCap = "round",
  customText,
  textColor,
  fontSize = size / 4,
  style,
  innerShadowColor,
  duration = 1000,
  variant = "progress",
  progress = 0,
  progressPadding = 0,
  currentStep = 0,
  totalSteps = 4,
  stepGap = 15,
  fontFamily,
}) => {
  const { theme } = useTheme();
  const animatedValue = useSharedValue(0);

  const finalColors = progressColors || [
    theme.primary,
    theme.primaryVariant,
    theme.primary,
  ];
  const finalBackgroundColor = backgroundColor || theme.disabled;
  const finalTextColor = textColor || theme.onSurface;

  const radius = (size - strokeWidth) / 2;
  const circumference = 2 * Math.PI * radius;
  const center = vec(size / 2, size / 2);

  const path = Skia.Path.Make();
  path.addCircle(size / 2, size / 2, radius);

  const progressStrokeWidth = Math.max(0, strokeWidth - progressPadding * 2);

  useEffect(() => {
    const targetValue =
      variant === "steps" ? currentStep / (totalSteps || 1) : progress / 100;
    animatedValue.value = withTiming(targetValue, {
      duration,
      easing: Easing.out(Easing.cubic),
    });
  }, [progress, currentStep, totalSteps, duration, variant, animatedValue]);

  const textToDisplay = useDerivedValue(() => {
    if (customText !== undefined) {
      return customText;
    }
    if (variant === "steps") {
      const displayStep = Math.round(animatedValue.value * (totalSteps || 1));
      return `${displayStep}/${totalSteps}`;
    }
    return `${Math.round(animatedValue.value * 100)}%`;
  }, [customText, variant, animatedValue, totalSteps]);

  const animatedProps = useAnimatedProps(() => {
    return {
      text: textToDisplay.value,
    } as any;
  });

  const getInitialText = () => {
    if (customText !== undefined) return customText;
    if (variant === "steps") return `${currentStep}/${totalSteps}`;
    return `${progress}%`;
  };

  const renderSteps = () => {
    const totalGapDegrees = (totalSteps || 1) * stepGap;
    const totalArcDegrees = 360 - totalGapDegrees;
    const stepArcLength =
      (totalArcDegrees / (totalSteps || 1) / 360) * circumference;
    const gapLength = (stepGap / 360) * circumference;
    const dashPattern = [stepArcLength, gapLength];

    return (
      <>
        <Path
          path={path}
          style="stroke"
          strokeWidth={strokeWidth}
          strokeCap={lineCap}
          color={finalBackgroundColor}
        >
          <DashPathEffect intervals={dashPattern} />
        </Path>
        <Path
          path={path}
          style="stroke"
          strokeWidth={strokeWidth}
          strokeCap={lineCap}
          color={finalColors[0]}
          start={0}
          end={animatedValue}
        >
          <DashPathEffect intervals={dashPattern} />
          {innerShadowColor && (
            <Shadow dx={0} dy={0} blur={4} color={innerShadowColor} inner />
          )}
        </Path>
      </>
    );
  };

  const renderProgress = () => (
    <>
      <Path
        path={path}
        style="stroke"
        strokeWidth={strokeWidth}
        strokeCap={lineCap}
        color={finalBackgroundColor}
      />
      <Path
        path={path}
        style="stroke"
        strokeWidth={progressStrokeWidth}
        strokeCap={lineCap}
        // color={finalProgressColor}
        start={0}
        end={animatedValue}
      >
        <SweepGradient c={center} colors={finalColors} origin={center} />
        {innerShadowColor && (
          <Shadow dx={0} dy={0} blur={4} color={innerShadowColor} inner />
        )}
      </Path>
    </>
  );

  return (
    <View
      style={[
        {
          width: size,
          height: size,
          justifyContent: "center",
          alignItems: "center",
        },
        style,
      ]}
    >
      <Canvas style={StyleSheet.absoluteFill}>
        {variant === "steps" ? renderSteps() : renderProgress()}
      </Canvas>
      <AnimatedTextInput
        editable={false}
        defaultValue={getInitialText()}
        style={[
          {
            color: finalTextColor,
            fontSize: fontSize,

            textAlign: "center",
            padding: 0,
          },
          fontFamily && { fontFamily },
        ]}
        animatedProps={animatedProps}
      />
    </View>
  );
};

export default CircularProgressBar;