import React from 'react';
import { StyleSheet, TouchableOpacity, View } from 'react-native';

import { ThemedView } from '@/components/themed-view';
import { ThemedText } from '@/components/themed-text';
import { useThemeColor } from '@/hooks/use-theme-color';
import { IconSymbol } from '@/components/ui/icon-symbol';

interface BalanceCardProps {
  balance: number;
  onRecharge: () => void;
  onHistory?: () => void;
}

export function BalanceCard({ balance, onRecharge, onHistory }: BalanceCardProps) {
  const tintColor = useThemeColor({}, 'tint');
  const cardColor = useThemeColor({}, 'card');
  const borderColor = useThemeColor({}, 'cardBorder');

  return (
    <ThemedView style={[styles.container, { backgroundColor: cardColor, borderColor }]}>
      <View style={styles.header}>
        <View style={styles.titleContainer}>
          <IconSymbol name="dollarsign.circle" size={24} color={tintColor} />
          <ThemedText style={styles.title}>账户余额</ThemedText>
        </View>
        {onHistory && (
          <TouchableOpacity onPress={onHistory} style={styles.historyButton}>
            <ThemedText style={[styles.historyText, { color: tintColor }]}>
              消费记录
            </ThemedText>
          </TouchableOpacity>
        )}
      </View>

      <View style={styles.balanceContainer}>
        <ThemedText style={styles.currency}>¥</ThemedText>
        <ThemedText style={styles.balance}>{balance.toFixed(2)}</ThemedText>
      </View>

      <TouchableOpacity
        style={[styles.rechargeButton, { backgroundColor: tintColor }]}
        onPress={onRecharge}
        activeOpacity={0.8}
      >
        <IconSymbol name="plus.circle.fill" size={20} color="white" />
        <ThemedText style={styles.rechargeText}>充值</ThemedText>
      </TouchableOpacity>

      <View style={styles.tips}>
        <IconSymbol name="info.circle" size={14} color="#999" />
        <ThemedText style={styles.tipsText}>
          余额用于支付生成内容的消费
        </ThemedText>
      </View>
    </ThemedView>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
    borderRadius: 20,
    borderWidth: 1,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 16,
  },
  titleContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  title: {
    fontSize: 16,
    fontWeight: '600',
  },
  historyButton: {
    paddingHorizontal: 12,
    paddingVertical: 6,
  },
  historyText: {
    fontSize: 14,
    fontWeight: '500',
  },
  balanceContainer: {
    flexDirection: 'row',
    alignItems: 'flex-end',
    justifyContent: 'center',
    marginVertical: 24,
  },
  currency: {
    fontSize: 24,
    fontWeight: '600',
    marginBottom: 4,
  },
  balance: {
    fontSize: 48,
    fontWeight: 'bold',
    lineHeight: 48,
  },
  rechargeButton: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 24,
    gap: 8,
    alignSelf: 'center',
  },
  rechargeText: {
    color: 'white',
    fontSize: 16,
    fontWeight: '600',
  },
  tips: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 6,
    marginTop: 16,
    paddingTop: 16,
    borderTopWidth: 1,
    borderTopColor: '#f0f0f0',
  },
  tipsText: {
    fontSize: 12,
    color: '#666',
    flex: 1,
  },
});