import React from 'react';
import { View, StyleSheet } from 'react-native';
import { Skeleton, SkeletonText } from '../ui/Skeleton';
import { useTheme } from '../../theme/ThemeContext';

/**
 * Skeleton para tarjeta de balance de créditos
 */
export function CreditBalanceSkeleton() {
  const { colors } = useTheme();

  return (
    <View style={[styles.balanceCard, { backgroundColor: colors.primary }]}>
      <SkeletonText width={100} height={14} style={{ opacity: 0.5 }} />
      <Skeleton width={120} height={40} borderRadius={8} style={{ marginTop: 8 }} />
      <View style={styles.balanceStats}>
        <View style={styles.balanceStat}>
          <SkeletonText width={50} height={12} style={{ opacity: 0.5 }} />
          <SkeletonText width={40} height={16} style={{ marginTop: 4, opacity: 0.5 }} />
        </View>
        <View style={styles.balanceStat}>
          <SkeletonText width={50} height={12} style={{ opacity: 0.5 }} />
          <SkeletonText width={40} height={16} style={{ marginTop: 4, opacity: 0.5 }} />
        </View>
      </View>
    </View>
  );
}

/**
 * Skeleton para transacción
 */
export function TransactionSkeleton() {
  const { colors } = useTheme();

  return (
    <View style={[styles.transaction, { borderBottomColor: colors.border }]}>
      <View style={styles.transactionIcon}>
        <Skeleton width={40} height={40} borderRadius={20} />
      </View>
      <View style={styles.transactionContent}>
        <SkeletonText width="60%" height={14} />
        <SkeletonText width="40%" height={12} style={{ marginTop: 4 }} />
      </View>
      <SkeletonText width={50} height={16} />
    </View>
  );
}

/**
 * Lista de skeletons de transacciones
 */
export function TransactionListSkeleton({ count = 5 }: { count?: number }) {
  return (
    <View>
      {Array.from({ length: count }).map((_, index) => (
        <TransactionSkeleton key={index} />
      ))}
    </View>
  );
}

/**
 * Skeleton para paquete de créditos
 */
export function CreditPackageSkeleton() {
  const { colors } = useTheme();

  return (
    <View style={[styles.package, { backgroundColor: colors.card }]}>
      <Skeleton width={48} height={48} borderRadius={24} />
      <View style={styles.packageContent}>
        <SkeletonText width={80} height={18} />
        <SkeletonText width={60} height={12} style={{ marginTop: 4 }} />
      </View>
      <SkeletonText width={70} height={24} />
    </View>
  );
}

/**
 * Lista de skeletons de paquetes
 */
export function CreditPackageListSkeleton({ count = 4 }: { count?: number }) {
  return (
    <View style={styles.packageList}>
      {Array.from({ length: count }).map((_, index) => (
        <CreditPackageSkeleton key={index} />
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  balanceCard: {
    borderRadius: 20,
    padding: 24,
    margin: 16,
  },
  balanceStats: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    marginTop: 20,
    paddingTop: 16,
    borderTopWidth: 1,
    borderTopColor: 'rgba(255,255,255,0.2)',
  },
  balanceStat: {
    alignItems: 'center',
  },
  transaction: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 12,
    borderBottomWidth: 1,
  },
  transactionIcon: {
    marginRight: 12,
  },
  transactionContent: {
    flex: 1,
  },
  package: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 16,
    borderRadius: 12,
    marginBottom: 12,
  },
  packageContent: {
    flex: 1,
    marginLeft: 12,
  },
  packageList: {
    padding: 16,
  },
});