fitaiProto/apps/mobile/src/components/PerformanceMetrics.tsx

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { Ionicons } from '@expo/vector-icons';
import { theme } from '../styles/theme';

interface MetricProps {
  title: string;
  value: string | number;
  change: string;
  trend: 'up' | 'down';
  icon: string;
  colorScheme: 'blue' | 'green' | 'purple' | 'orange';
}

const getColorScheme = (colorScheme: 'blue' | 'green' | 'purple' | 'orange') => {
  const schemes = {
    blue: {
      colors: ['#1e3a8a', '#0c4a6e'],
      text: '#ffffff',
      label: '#93c5fd',
      badge: '#3b82f6',
      badgeText: '#ffffff',
      icon: '#60a5fa',
    },
    green: {
      colors: ['#064e3b', '#047857'],
      text: '#ffffff',
      label: '#86efac',
      badge: '#10b981',
      badgeText: '#ffffff',
      icon: '#34d399',
    },
    purple: {
      colors: ['#581c87', '#7c3aed'],
      text: '#ffffff',
      label: '#d8b4fe',
      badge: '#a855f7',
      badgeText: '#ffffff',
      icon: '#c084fc',
    },
    orange: {
      colors: ['#92400e', '#b45309'],
      text: '#ffffff',
      label: '#fcd34d',
      badge: '#f97316',
      badgeText: '#ffffff',
      icon: '#fb923c',
    },
  };
  return schemes[colorScheme];
};

const MetricCard: React.FC<MetricProps> = ({ title, value, change, trend, icon, colorScheme }) => {
  const colors = getColorScheme(colorScheme);
  const isPositive = trend === 'up';
  const trendIcon = isPositive ? 'arrow-up' : 'arrow-down';

  return (
    <LinearGradient
      colors={colors.colors as any}
      start={{ x: 0, y: 0 }}
      end={{ x: 1, y: 1 }}
      style={styles.card}
    >
      <View style={styles.cardContent}>
        <View style={styles.header}>
          <Text style={[styles.label, { color: colors.label }]}>{title}</Text>
          <View style={[styles.iconContainer, { backgroundColor: colors.icon + '40' }]}>
            <Ionicons name={icon as any} size={20} color={colors.text} />
          </View>
        </View>

        <Text style={[styles.value, { color: colors.text }]}>{value}</Text>

        <View style={styles.changeContainer}>
          <View style={[styles.trendBadge, { backgroundColor: colors.badge }]}>
            <Ionicons
              name={trendIcon}
              size={12}
              color={colors.badgeText}
              style={{ marginRight: 4 }}
            />
            <Text style={[styles.changeText, { color: colors.badgeText, fontWeight: '700' }]}>
              {trend === 'up' ? '↑' : '↓'} {change}
            </Text>
          </View>
          <Text style={[styles.compareText, { color: colors.text }]}>vs month</Text>
        </View>
      </View>
    </LinearGradient>
  );
};

export const PerformanceMetrics: React.FC = () => {
  const metrics: MetricProps[] = [
    {
      title: 'Total Users',
      value: '0',
      change: '+12%',
      trend: 'up',
      icon: 'people',
      colorScheme: 'blue',
    },
    {
      title: 'Active Clients',
      value: '0',
      change: '+5%',
      trend: 'up',
      icon: 'person-add',
      colorScheme: 'green',
    },
    {
      title: 'Revenue',
      value: '$0.00',
      change: '0%',
      trend: 'down',
      icon: 'wallet',
      colorScheme: 'purple',
    },
    {
      title: 'Growth',
      value: '24%',
      change: '-2%',
      trend: 'down',
      icon: 'trending-up',
      colorScheme: 'orange',
    },
  ];

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.title}>Performance metrics & athlete insights</Text>
      </View>

      <View style={styles.metricsGrid}>
        {metrics.map((metric, index) => (
          <View key={index} style={styles.metricWrapper}>
            <MetricCard {...metric} />
          </View>
        ))}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 20,
    marginBottom: 24,
  },
  header: {
    marginBottom: 16,
  },
  title: {
    fontSize: 14,
    fontWeight: '600',
    color: '#4b5563',
    letterSpacing: 0.3,
  },
  metricsGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
    gap: 12,
  },
  metricWrapper: {
    width: '48%',
  },
  card: {
    borderRadius: 20,
    overflow: 'hidden',
    elevation: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.2,
    shadowRadius: 12,
  },
  cardContent: {
    padding: 16,
    minHeight: 160,
    justifyContent: 'space-between',
  },
  iconContainer: {
    width: 36,
    height: 36,
    borderRadius: 10,
    justifyContent: 'center',
    alignItems: 'center',
  },
  label: {
    fontSize: 11,
    fontWeight: '700',
    letterSpacing: 0.6,
    marginBottom: 12,
    textTransform: 'uppercase',
  },
  value: {
    fontSize: 28,
    fontWeight: '800',
    marginBottom: 12,
  },
  changeContainer: {
    alignItems: 'flex-start',
  },
  trendBadge: {
    flexDirection: 'row',
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 6,
    alignItems: 'center',
    marginBottom: 6,
  },
  changeText: {
    fontSize: 11,
    fontWeight: '700',
  },
  compareText: {
    fontSize: 10,
    fontWeight: '500',
  },
});