/** Coin package card for BuyCoinsScreen. */
import React from 'react';
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import {COLORS} from '../theme/colors';
import {RADIUS, SPACING} from '../theme/spacing';
import type {CoinPackage} from '../types/models';
import {formatCoins, formatINR} from '../utils/formatters';
import {Gradient} from './Gradient';

interface Props {
  pkg: CoinPackage;
  selected?: boolean;
  onSelect: (p: CoinPackage) => void;
}

export function CoinPackageCard({pkg, selected, onSelect}: Props): React.JSX.Element {
  const total = pkg.coins + pkg.bonus_coins;
  return (
    <TouchableOpacity activeOpacity={0.85} onPress={() => onSelect(pkg)} style={styles.wrap}>
      <Gradient
        colors={selected ? undefined : ['#1B1730', '#1B1730']}
        style={[styles.card, selected && styles.selected]}>
        {pkg.is_popular ? (
          <View style={styles.popular}>
            <Text style={styles.popularText}>★ POPULAR</Text>
          </View>
        ) : null}
        <Text style={styles.coins}>🪙 {formatCoins(total)}</Text>
        {pkg.bonus_coins > 0 ? (
          <Text style={styles.bonus}>
            +{formatCoins(pkg.bonus_coins)} bonus
          </Text>
        ) : (
          <Text style={styles.bonus}>{pkg.name}</Text>
        )}
        <View style={styles.pricePill}>
          <Text style={styles.price}>{formatINR(pkg.price_inr)}</Text>
        </View>
      </Gradient>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  wrap: {flex: 1, margin: 5},
  card: {
    borderRadius: RADIUS.l,
    padding: SPACING.l,
    alignItems: 'center',
    borderWidth: 2,
    borderColor: 'transparent',
  },
  selected: {borderColor: COLORS.magenta},
  popular: {
    position: 'absolute',
    top: 0,
    right: 0,
    backgroundColor: COLORS.pink,
    borderBottomLeftRadius: RADIUS.m,
    borderTopRightRadius: RADIUS.l,
    paddingHorizontal: 8,
    paddingVertical: 3,
  },
  popularText: {color: COLORS.white, fontSize: 9, fontWeight: '800'},
  coins: {color: COLORS.white, fontSize: 17, fontWeight: '800', marginTop: SPACING.xs},
  bonus: {color: COLORS.gold, fontSize: 11, fontWeight: '600', marginTop: 2, marginBottom: SPACING.m},
  pricePill: {
    backgroundColor: COLORS.purple,
    borderRadius: 99,
    paddingHorizontal: SPACING.l,
    paddingVertical: 5,
  },
  price: {color: COLORS.white, fontWeight: '800', fontSize: 13},
});