import React from 'react';
import { View, StyleSheet, Text } from 'react-native';
import Svg, { Circle } from 'react-native-svg';

import { useTheme } from '../theme/context';
import { GradientCard } from './GradientCard';

interface RadialGaugeProps {
  value: number;
  max: number;
  label: string;
}

export function RadialGauge({ value, max, label }: RadialGaugeProps) {
  const theme = useTheme();
  const size = 80;
  const stroke = 6;
  const radius = size / 2 - stroke;
  const circumference = radius * 2 * Math.PI;
  const strokeDashoffset = circumference - (value / max) * circumference;

  const percentage = Math.round((value / max) * 100);

  return (
    <GradientCard style={styles.container}>
      <View style={styles.content}>
        <View style={styles.gaugeContainer}>
          <Svg height={size} width={size} style={{ transform: [{ rotate: '-90deg' }] }}>
            <Circle
              stroke="rgba(255,255,255,0.1)"
              strokeWidth={stroke}
              fill="transparent"
              r={radius}
              cx={size / 2}
              cy={size / 2}
            />
            <Circle
              stroke="#FFD700"
              strokeWidth={stroke}
              strokeDasharray={`${circumference} ${circumference}`}
              strokeDashoffset={strokeDashoffset}
              strokeLinecap="round"
              fill="transparent"
              r={radius}
              cx={size / 2}
              cy={size / 2}
            />
          </Svg>
          <View style={styles.centerText}>
            <Text style={styles.percentText}>{percentage}%</Text>
          </View>
        </View>
        <View style={styles.infoContainer}>
          <Text style={[styles.label, { color: theme.colors.text.primary }]}>{label}</Text>
          <Text style={[styles.subText, { color: theme.colors.text.secondary }]}>
            ${value} of ${max} saved.
          </Text>
        </View>
      </View>
    </GradientCard>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 16,
    marginBottom: 16,
  },
  content: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  gaugeContainer: {
    position: 'relative',
    width: 80,
    height: 80,
  },
  centerText: {
    ...StyleSheet.absoluteFillObject,
    alignItems: 'center',
    justifyContent: 'center',
  },
  percentText: {
    fontSize: 16,
    fontWeight: '800',
    color: 'white',
  },
  infoContainer: {
    flex: 1,
    marginLeft: 16,
  },
  label: {
    fontSize: 16,
    fontWeight: '700',
    marginBottom: 2,
  },
  subText: {
    fontSize: 12,
    lineHeight: 16,
  },
});