bw-expo-app/app/recharge.tsx

import { router } from 'expo-router';
import { StatusBar } from 'expo-status-bar';
import { X, Zap } from 'lucide-react';
import React, { useState } from 'react';
import {
  Alert,
  Pressable,
  ScrollView,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';

import { ThemedView } from '@/components/themed-view';

const pointBundles = [
  { id: 'bundle-500', amount: 500, price: 35 },
  { id: 'bundle-2000', amount: 2000, price: 140 },
  { id: 'bundle-5000', amount: 5000, price: 350 },
  { id: 'bundle-10000', amount: 10000, price: 700 },
];

export default function RechargeScreen() {
  const insets = useSafeAreaInsets();
  const [selectedBundleId, setSelectedBundleId] = useState<string | null>(null);

  const handleBundleSelection = (bundleId: string) => {
    setSelectedBundleId(bundleId);
  };

  const handlePurchase = () => {
    if (!selectedBundleId) {
      Alert.alert(
        'Choose a pack',
        'Select the points pack that fits your journey before proceeding.'
      );
      return;
    }

    const selectedBundle = pointBundles.find(bundle => bundle.id === selectedBundleId);
    if (!selectedBundle) {
      Alert.alert('Unavailable pack', 'The chosen points pack is no longer available.');
      return;
    }

    Alert.alert(
      'Purchase in progress',
      `Preparing ${selectedBundle.amount} points for ¥${selectedBundle.price}.`
    );
  };

  return (
    <ThemedView style={styles.canvas} lightColor="#050505" darkColor="#050505">
      <StatusBar style="light" />
      <SafeAreaView style={styles.safeArea} edges={['top', 'left', 'right']}>
        <View style={styles.frame}>
          <ScrollView
            showsVerticalScrollIndicator={false}
            contentContainerStyle={styles.scrollContent}
          >
            <View style={styles.headerRow}>
              <Pressable
                accessibilityRole="button"
                accessibilityLabel="Close recharge"
                onPress={() => router.back()}
                style={styles.dismissButton}
              >
                <X color="#FFFFFF" size={22} strokeWidth={2.2} />
              </Pressable>

              <Pressable
                accessibilityRole="button"
                accessibilityLabel="View points details"
                onPress={() => router.push('/points')}
                style={styles.pointsDetails}
              >
                <Text style={styles.pointsDetailsText}>Points Details</Text>
              </Pressable>
            </View>

            <View style={styles.balanceBlock}>
              <View style={styles.balanceRow}>
                <Zap color="#FFCE38" size={30} strokeWidth={2.2} />
                <Text style={styles.balanceValue}>60</Text>
              </View>
              <Text style={styles.balanceCaption}>No active subscription plans</Text>
            </View>

            <View style={styles.tabStrip}>
              <Text style={styles.tabInactive}>Subscription</Text>
              <View style={styles.tabActive}>
                <Text style={styles.tabActiveText}>points pack</Text>
                <View style={styles.tabIndicator} />
              </View>
            </View>

            <View style={styles.bundleGrid}>
              {pointBundles.map(bundle => (
                <Pressable
                  key={bundle.id}
                  accessibilityRole="button"
                  accessibilityLabel={`Purchase ${bundle.amount} points for ¥${bundle.price}`}
                  onPress={() => handleBundleSelection(bundle.id)}
                  style={({ pressed }) => [
                    styles.bundleCard,
                    selectedBundleId === bundle.id && styles.bundleCardActive,
                    pressed && styles.bundleCardPressed,
                  ]}
                >
                  <View style={styles.bundleHeader}>
                    <Zap color="#FFCE38" size={22} strokeWidth={2.2} />
                    <Text
                      style={[
                        styles.bundleAmount,
                        selectedBundleId === bundle.id && styles.bundleAmountActive,
                      ]}
                    >
                      {bundle.amount}
                    </Text>
                  </View>
                  <Text
                    style={[
                      styles.bundlePrice,
                      selectedBundleId === bundle.id && styles.bundlePriceActive,
                    ]}
                  >
                    ¥ {bundle.price}
                  </Text>
                </Pressable>
              ))}
            </View>
          </ScrollView>

          <View style={[styles.footer, { paddingBottom: Math.max(insets.bottom, 16) }]}>
            <Pressable
              accessibilityRole="button"
              accessibilityLabel="Purchase points"
              onPress={handlePurchase}
              style={({ pressed }) => [
                styles.purchaseButton,
                pressed && styles.purchaseButtonPressed,
              ]}
            >
              <Text style={styles.purchaseButtonText}>Purchase points</Text>
            </Pressable>
          </View>
        </View>
      </SafeAreaView>
    </ThemedView>
  );
}

const styles = StyleSheet.create({
  canvas: {
    flex: 1,
  },
  safeArea: {
    flex: 1,
  },
  frame: {
    flex: 1,
    paddingHorizontal: 20,
  },
  scrollContent: {
    paddingBottom: 32,
  },
  headerRow: {
    marginTop: 12,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  dismissButton: {
    width: 40,
    height: 40,
    alignItems: 'center',
    justifyContent: 'center',
  },
  pointsDetails: {
    backgroundColor: '#181818',
    borderRadius: 20,
    borderWidth: 1,
    borderColor: '#2C2C2C',
    paddingHorizontal: 16,
    paddingVertical: 8,
  },
  pointsDetailsText: {
    color: '#F1F1F1',
    fontSize: 14,
    fontWeight: '500',
    letterSpacing: 0.3,
  },
  balanceBlock: {
    marginTop: 32,
    alignItems: 'center',
  },
  balanceRow: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  balanceValue: {
    marginLeft: 12,
    fontSize: 48,
    fontWeight: '700',
    color: '#FFFFFF',
    letterSpacing: 0.5,
  },
  balanceCaption: {
    marginTop: 12,
    fontSize: 16,
    color: '#8E8E8E',
    letterSpacing: 0.2,
  },
  tabStrip: {
    marginTop: 40,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'flex-end',
  },
  tabInactive: {
    marginRight: 32,
    fontSize: 16,
    color: '#555555',
    fontWeight: '500',
    textTransform: 'capitalize',
  },
  tabActive: {
    alignItems: 'center',
  },
  tabActiveText: {
    fontSize: 16,
    color: '#FFFFFF',
    fontWeight: '600',
    textTransform: 'capitalize',
  },
  tabIndicator: {
    marginTop: 10,
    height: 2,
    width: 70,
    backgroundColor: '#FFD84E',
    borderRadius: 2,
  },
  bundleGrid: {
    marginTop: 32,
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
  },
  bundleCard: {
    width: '47%',
    backgroundColor: '#111111',
    borderRadius: 24,
    paddingVertical: 24,
    paddingHorizontal: 18,
    borderWidth: 1,
    borderColor: '#1F1F1F',
    justifyContent: 'space-between',
    marginBottom: 20,
  },
  bundleCardActive: {
    borderColor: '#FFD84E',
  },
  bundleCardPressed: {
    transform: [{ scale: 0.98 }],
  },
  bundleHeader: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  bundleAmount: {
    marginLeft: 12,
    fontSize: 22,
    fontWeight: '600',
    color: '#FFFFFF',
    letterSpacing: 0.3,
  },
  bundleAmountActive: {
    color: '#FFD84E',
  },
  bundlePrice: {
    marginTop: 24,
    fontSize: 18,
    fontWeight: '500',
    color: '#A4A4A4',
    letterSpacing: 0.2,
  },
  bundlePriceActive: {
    color: '#FFD84E',
  },
  footer: {
    paddingTop: 16,
  },
  purchaseButton: {
    height: 56,
    borderRadius: 28,
    backgroundColor: '#CFFF21',
    alignItems: 'center',
    justifyContent: 'center',
  },
  purchaseButtonPressed: {
    opacity: 0.9,
  },
  purchaseButtonText: {
    fontSize: 18,
    fontWeight: '700',
    color: '#101010',
    letterSpacing: 0.4,
  },
});