import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { useTheme } from '@/shared/styles/useTheme';

interface KPIWidgetProps {
  title: string;
  value: string | number;
  subtitle?: string;
  icon: string;
  color: string;
  backgroundColor?: string;
  onPress?: () => void;
  trend?: {
    value: number;
    isPositive: boolean;
  };
}

const KPIWidget: React.FC<KPIWidgetProps> = ({
  title,
  value,
  subtitle,
  icon,
  color,
  backgroundColor,
  onPress,
  trend,
}) => {
  const { colors, fonts, spacing, shadows } = useTheme();

  const formatValue = (val: string | number): string => {
    if (typeof val === 'number') {
      return val.toLocaleString();
    }
    return val;
  };

  const WidgetContent = () => (
    <View style={[
      styles.container,
      {
        backgroundColor: backgroundColor || colors.surface,
        borderColor: colors.border,
        ...shadows.light,
      }
    ]}>
      <View style={styles.header}>
        <View style={styles.iconContainer}>
          <Icon name={icon} size={20} color={color} />
        </View>
        {trend && (
          <View style={[
            styles.trendContainer,
            { backgroundColor: trend.isPositive ? '#E9FAF2' : '#FEF2F2' }
          ]}>
            <Icon
              name={trend.isPositive ? 'trending-up' : 'trending-down'}
              size={12}
              color={trend.isPositive ? '#10B981' : '#EF4444'}
            />
            <Text style={[
              styles.trendText,
              {
                color: trend.isPositive ? '#10B981' : '#EF4444',
                fontFamily: fonts.medium,
              }
            ]}>
              {Math.abs(trend.value)}%
            </Text>
          </View>
        )}
      </View>

      <View style={styles.content}>
        <Text style={[
          styles.title,
          { color: colors.textLight, fontFamily: fonts.regular }
        ]}>
          {title}
        </Text>
        
        <Text style={[
          styles.value,
          { color: colors.text, fontFamily: fonts.bold }
        ]}>
          {formatValue(value)}
        </Text>
        
        {subtitle && (
          <Text style={[
            styles.subtitle,
            { color: colors.textLight, fontFamily: fonts.regular }
          ]}>
            {subtitle}
          </Text>
        )}
      </View>
    </View>
  );

  if (onPress) {
    return (
      <TouchableOpacity onPress={onPress} activeOpacity={0.8}>
        <WidgetContent />
      </TouchableOpacity>
    );
  }

  return <WidgetContent />;
};

const styles = StyleSheet.create({
  container: {
    borderRadius: 12,
    borderWidth: 1,
    padding: 16,
    marginBottom: 12,
    minHeight: 120,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 12,
  },
  iconContainer: {
    width: 36,
    height: 36,
    borderRadius: 8,
    backgroundColor: 'rgba(0, 0, 0, 0.05)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  trendContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 6,
    paddingVertical: 2,
    borderRadius: 4,
  },
  trendText: {
    fontSize: 10,
    marginLeft: 2,
  },
  content: {
    flex: 1,
  },
  title: {
    fontSize: 12,
    marginBottom: 4,
  },
  value: {
    fontSize: 24,
    marginBottom: 4,
  },
  subtitle: {
    fontSize: 11,
  },
});

export default KPIWidget;
