import { Text } from '@/aesthetics/Text';
import {
  font as fontSizes,
  getScoreColor,
  getScoreLabel,
  spacing,
  useColors,
} from '@/aesthetics/styles';
import { Canvas, Group, Path, Skia } from '@shopify/react-native-skia';
import { useEffect } from 'react';
import { StyleSheet, View } from 'react-native';
import { useSharedValue, withTiming } from 'react-native-reanimated';

type NutritionScoreOverviewProps = {
  score: number;
};

const RING_SIZE = 160;
const STROKE_WIDTH = 10;
const RADIUS = (RING_SIZE - STROKE_WIDTH) / 2;
const CENTER = RING_SIZE / 2;
const ANIMATION_DURATION = 800;

const circlePath = Skia.Path.Make();
circlePath.addCircle(CENTER, CENTER, RADIUS);

export function NutritionScoreOverview({ score }: NutritionScoreOverviewProps) {
  const c = useColors();
  const scoreColor = getScoreColor(score, c);
  const displayScore = Math.ceil(Math.max(0, Math.min(100, score)));

  const progress = useSharedValue(0);

  useEffect(() => {
    progress.value = withTiming(displayScore / 100, { duration: ANIMATION_DURATION });
  }, [displayScore]);

  return (
    <View style={styles.container}>
      <View style={styles.ringContainer}>
        <Canvas style={{ width: RING_SIZE, height: RING_SIZE }}>
          <Path path={circlePath} style="stroke" strokeWidth={STROKE_WIDTH} color={c.progressBg} />
          <Group origin={{ x: CENTER, y: CENTER }} transform={[{ rotate: -Math.PI / 2 }]}>
            <Path
              path={circlePath}
              style="stroke"
              strokeWidth={STROKE_WIDTH}
              color={scoreColor}
              strokeCap="round"
              start={0}
              end={progress}
            />
          </Group>
        </Canvas>
        <View style={styles.scoreContainer}>
          <Text style={[styles.scoreText, { color: scoreColor }]}>{displayScore}</Text>
          <Text style={[styles.scoreLabel, { color: c.tertiaryText }]}>{getScoreLabel(score)}</Text>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    paddingVertical: spacing.xl,
  },
  ringContainer: {
    width: RING_SIZE,
    height: RING_SIZE,
    alignItems: 'center',
    justifyContent: 'center',
  },
  scoreContainer: {
    position: 'absolute',
    alignItems: 'center',
    width: RING_SIZE,
  },
  scoreText: {
    fontSize: fontSizes.display,
    fontWeight: '700',
  },
  scoreLabel: {
    fontSize: fontSizes.xs,
    textTransform: 'uppercase',
    letterSpacing: 1,
    marginTop: 2,
  },
});