managarten/apps/manadeck/apps/mobile/examples/DeckCreationExample.tsx

/**
 * Example: How to integrate credit system into deck creation
 *
 * This is a reference implementation showing how to:
 * 1. Handle credit errors when creating a deck
 * 2. Show insufficient credits modal
 * 3. Display user's credit balance
 *
 * Copy this pattern to your actual deck creation screens.
 */

import React, { useState, useEffect } from 'react';
import { View, Text, TextInput, TouchableOpacity, Alert, StyleSheet } from 'react-native';
import { post } from '../utils/apiClient';
import { InsufficientCreditsModal } from '../components/InsufficientCreditsModal';
import { useInsufficientCredits } from '../hooks/useInsufficientCredits';
import { creditService } from '../services/creditService';

const BASE_API_URL =
	process.env.EXPO_PUBLIC_API_URL || 'https://manadeck-backend-111768794939.europe-west3.run.app';

export function DeckCreationExample() {
	const [deckName, setDeckName] = useState('');
	const [deckDescription, setDeckDescription] = useState('');
	const [loading, setLoading] = useState(false);
	const [creditBalance, setCreditBalance] = useState<number>(0);

	// Hook to manage insufficient credits modal
	const insufficientCredits = useInsufficientCredits();

	// Load credit balance on mount
	useEffect(() => {
		loadCreditBalance();
	}, []);

	const loadCreditBalance = async () => {
		try {
			const balance = await creditService.getBalance();
			setCreditBalance(balance);
		} catch (error) {
			console.error('Failed to load credit balance:', error);
		}
	};

	const handleCreateDeck = async () => {
		if (!deckName.trim()) {
			Alert.alert('Error', 'Please enter a deck name');
			return;
		}

		setLoading(true);

		try {
			const response = await post(`${BASE_API_URL}/v1/api/decks`, {
				name: deckName,
				description: deckDescription,
			});

			// Success!
			Alert.alert('Success', `Deck created successfully! ${response.creditsUsed} mana used.`, [
				{
					text: 'OK',
					onPress: () => {
						// Refresh credit balance
						loadCreditBalance();
						// Reset form
						setDeckName('');
						setDeckDescription('');
					},
				},
			]);
		} catch (error: any) {
			// Check if this is a credit error
			const isCreditError = insufficientCredits.handleCreditError(error);

			if (!isCreditError) {
				// Handle other errors
				console.error('Deck creation error:', error);
				Alert.alert('Error', error.message || 'Failed to create deck. Please try again.');
			}
		} finally {
			setLoading(false);
		}
	};

	const handlePurchaseCredits = () => {
		// Close modal
		insufficientCredits.hideInsufficientCredits();

		// Navigate to purchase screen or open purchase flow
		Alert.alert('Purchase Credits', 'This would navigate to the credit purchase screen');
		// In real implementation:
		// navigation.navigate('PurchaseCredits');
	};

	return (
		<View style={styles.container}>
			{/* Credit Balance Display */}
			<View style={styles.creditBanner}>
				<Text style={styles.creditLabel}>Your Mana:</Text>
				<Text style={styles.creditValue}>{creditBalance} ⚡</Text>
			</View>

			{/* Form */}
			<View style={styles.form}>
				<Text style={styles.label}>Deck Name</Text>
				<TextInput
					style={styles.input}
					value={deckName}
					onChangeText={setDeckName}
					placeholder="Enter deck name"
					editable={!loading}
				/>

				<Text style={styles.label}>Description (Optional)</Text>
				<TextInput
					style={[styles.input, styles.textArea]}
					value={deckDescription}
					onChangeText={setDeckDescription}
					placeholder="Enter deck description"
					multiline
					numberOfLines={4}
					editable={!loading}
				/>

				{/* Cost Info */}
				<View style={styles.costInfo}>
					<Text style={styles.costLabel}>Cost:</Text>
					<Text style={styles.costValue}>10 mana ⚡</Text>
				</View>

				{/* Create Button */}
				<TouchableOpacity
					style={[styles.button, loading && styles.buttonDisabled]}
					onPress={handleCreateDeck}
					disabled={loading}
				>
					<Text style={styles.buttonText}>{loading ? 'Creating...' : 'Create Deck'}</Text>
				</TouchableOpacity>
			</View>

			{/* Insufficient Credits Modal */}
			<InsufficientCreditsModal
				visible={insufficientCredits.visible}
				requiredCredits={insufficientCredits.requiredCredits}
				availableCredits={insufficientCredits.availableCredits}
				operation={insufficientCredits.operation}
				onClose={insufficientCredits.hideInsufficientCredits}
				onPurchase={handlePurchaseCredits}
			/>
		</View>
	);
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		padding: 16,
		backgroundColor: '#f5f5f5',
	},
	creditBanner: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
		backgroundColor: '#3b82f6',
		padding: 16,
		borderRadius: 12,
		marginBottom: 20,
	},
	creditLabel: {
		fontSize: 16,
		color: 'white',
		fontWeight: '500',
	},
	creditValue: {
		fontSize: 20,
		color: 'white',
		fontWeight: '700',
	},
	form: {
		backgroundColor: 'white',
		borderRadius: 12,
		padding: 16,
	},
	label: {
		fontSize: 14,
		fontWeight: '600',
		color: '#374151',
		marginBottom: 8,
		marginTop: 12,
	},
	input: {
		borderWidth: 1,
		borderColor: '#d1d5db',
		borderRadius: 8,
		padding: 12,
		fontSize: 16,
		backgroundColor: 'white',
	},
	textArea: {
		height: 100,
		textAlignVertical: 'top',
	},
	costInfo: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
		backgroundColor: '#f3f4f6',
		padding: 12,
		borderRadius: 8,
		marginTop: 16,
	},
	costLabel: {
		fontSize: 14,
		color: '#6b7280',
		fontWeight: '500',
	},
	costValue: {
		fontSize: 16,
		color: '#1f2937',
		fontWeight: '700',
	},
	button: {
		backgroundColor: '#3b82f6',
		padding: 16,
		borderRadius: 8,
		alignItems: 'center',
		marginTop: 20,
	},
	buttonDisabled: {
		backgroundColor: '#9ca3af',
	},
	buttonText: {
		color: 'white',
		fontSize: 16,
		fontWeight: '600',
	},
});