/**
 * KPI metric widget for dashboards and analytics (Sisu replacement).
 */

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { useTheme } from '../themes/ThemeProvider';

interface KPIWidgetProps {
  label: string;
  value: string | number;
  change?: number; // percentage change
  prefix?: string;
  suffix?: string;
  size?: 'sm' | 'md' | 'lg';
}

export default function KPIWidget({
  label,
  value,
  change,
  prefix = '',
  suffix = '',
  size = 'md',
}: KPIWidgetProps) {
  const { theme } = useTheme();

  const fontSizes = {
    sm: { value: 20, label: 11, change: 10 },
    md: { value: 28, label: 12, change: 11 },
    lg: { value: 36, label: 14, change: 12 },
  };

  const fs = fontSizes[size];

  return (
    <View style={[styles.container, theme.shadow.sm, { backgroundColor: theme.colors.card }]}>
      <Text style={[styles.label, { color: theme.colors.textSecondary, fontSize: fs.label }]}>
        {label}
      </Text>
      <Text style={[styles.value, { color: theme.colors.text, fontSize: fs.value }]}>
        {prefix}{typeof value === 'number' ? value.toLocaleString() : value}{suffix}
      </Text>
      {change !== undefined && (
        <View style={styles.changeRow}>
          <Text
            style={[
              styles.change,
              {
                color: change >= 0 ? theme.colors.success : theme.colors.error,
                fontSize: fs.change,
              },
            ]}
          >
            {change >= 0 ? '↑' : '↓'} {Math.abs(change).toFixed(1)}%
          </Text>
          <Text style={[styles.changeLabel, { color: theme.colors.textSecondary, fontSize: fs.change }]}>
            vs last month
          </Text>
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    borderRadius: 12,
    padding: 16,
    minWidth: 140,
  },
  label: {
    fontWeight: '500',
    textTransform: 'uppercase',
    letterSpacing: 0.5,
    marginBottom: 6,
  },
  value: {
    fontWeight: '800',
  },
  changeRow: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 6,
    gap: 4,
  },
  change: {
    fontWeight: '600',
  },
  changeLabel: {
    fontWeight: '400',
  },
});