import { Award, Percent } from 'lucide-react-native';
import { FlatList, StyleSheet, Text, View } from 'react-native';
import { useProfileData } from '../lib/ProfileDataContext';

export function BonusesTab() {
  const { bonuses } = useProfileData();

  const formatAmount = (amount: number) => {
    return new Intl.NumberFormat('uz-UZ').format(amount) + " so'm";
  };

  return (
    <FlatList
      data={bonuses}
      keyExtractor={(item) => item.id}
      contentContainerStyle={styles.list}
      renderItem={({ item }) => (
        <View style={styles.card}>
          <View style={styles.header}>
            <View style={styles.iconContainer}>
              <Award size={24} color="#fbbf24" />
            </View>
            <View style={styles.percentageBadge}>
              <Percent size={14} color="#10b981" />
              <Text style={styles.percentageText}>{item.percentage}%</Text>
            </View>
          </View>

          <Text style={styles.title}>{item.title}</Text>
          <Text style={styles.description}>{item.description}</Text>

          <View style={styles.divider} />

          <View style={styles.footer}>
            <View style={styles.amountContainer}>
              <Text style={styles.amountLabel}>Bonus miqdori</Text>
              <Text style={styles.amount}>{formatAmount(item.bonusAmount)}</Text>
            </View>
            <View style={styles.dateContainer}>
              <Text style={styles.dateLabel}>Yaratilgan sana</Text>
              <Text style={styles.date}>
                {new Date(item.createdAt).toLocaleDateString('uz-UZ')}
              </Text>
            </View>
          </View>
        </View>
      )}
      ListEmptyComponent={
        <View style={styles.emptyContainer}>
          <Award size={48} color="#475569" />
          <Text style={styles.emptyText}>Hozircha bonuslar yo'q</Text>
          <Text style={styles.emptySubtext}>Faoliyat ko'rsating va bonuslar qo'lga kiriting</Text>
        </View>
      }
    />
  );
}

const styles = StyleSheet.create({
  list: {
    padding: 16,
    gap: 16,
    paddingBottom: 100,
  },
  card: {
    backgroundColor: '#1e293b',
    borderRadius: 16,
    padding: 20,
    gap: 12,
    borderWidth: 1,
    borderColor: '#fbbf2420',
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  iconContainer: {
    width: 56,
    height: 56,
    borderRadius: 28,
    backgroundColor: '#fbbf2420',
    alignItems: 'center',
    justifyContent: 'center',
  },
  percentageBadge: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
    paddingHorizontal: 12,
    paddingVertical: 8,
    borderRadius: 20,
    backgroundColor: '#10b98120',
  },
  percentageText: {
    fontSize: 16,
    fontWeight: '700' as const,
    color: '#10b981',
  },
  title: {
    fontSize: 20,
    fontWeight: '700' as const,
    color: '#f8fafc',
  },
  description: {
    fontSize: 14,
    color: '#94a3b8',
    lineHeight: 20,
  },
  divider: {
    height: 1,
    backgroundColor: '#334155',
    marginVertical: 4,
  },
  footer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
  },
  amountContainer: {
    gap: 6,
  },
  amountLabel: {
    fontSize: 13,
    color: '#64748b',
    fontWeight: '500' as const,
  },
  amount: {
    fontSize: 22,
    fontWeight: '700' as const,
    color: '#fbbf24',
  },
  dateContainer: {
    gap: 6,
    alignItems: 'flex-end',
  },
  dateLabel: {
    fontSize: 13,
    color: '#64748b',
    fontWeight: '500' as const,
  },
  date: {
    fontSize: 14,
    color: '#94a3b8',
    fontWeight: '600' as const,
  },
  emptyContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 80,
    gap: 12,
  },
  emptyText: {
    fontSize: 18,
    fontWeight: '600' as const,
    color: '#64748b',
  },
  emptySubtext: {
    fontSize: 14,
    color: '#475569',
    textAlign: 'center',
    paddingHorizontal: 40,
  },
});