managarten/apps-archived/memoro/apps/mobile/features/subscription/SubscriptionCard.tsx

import React from 'react';
import { View, Text } from 'react-native';
import { useTheme } from '../theme/ThemeProvider';
import { useTranslation } from 'react-i18next';
import SubscriptionButton from './SubscriptionButton';
import ManaIcon from './ManaIcon';
import colors from '~/tailwind.config.js';

export interface SubscriptionPlanProps {
	id: string;
	name: string;
	price: number;
	priceString: string;
	currencyCode: string;
	priceBreakdown?: string;
	monthlyMana: number;
	canGiftMana: boolean;
	popular?: boolean;
	billingCycle?: 'monthly' | 'yearly';
	monthlyEquivalent?: number;
	isTeamSubscription?: boolean;
	isEnterpriseSubscription?: boolean;
}

interface SubscriptionCardProps {
	plan: SubscriptionPlanProps;
	onSelect: (planId: string) => void;
	isCurrentPlan?: boolean;
	isLegacy?: boolean;
}

export const SubscriptionCard: React.FC<SubscriptionCardProps> = ({
	plan,
	onSelect,
	isCurrentPlan = false,
	isLegacy = false,
}) => {
	const { isDark, themeVariant, tw } = useTheme();
	const { t } = useTranslation();

	const formatPrice = (plan: SubscriptionPlanProps) => {
		// Use priceString from RevenueCat if available, otherwise format the price
		return plan.priceString || `${plan.price.toFixed(2).replace('.', ',')}€`;
	};

	// Theme-aware colors using the same system as MemoPreview and SettingsToggle
	const themeColors = (colors as any).theme?.extend?.colors;
	const textColor = isDark ? '#FFFFFF' : '#000000';
	const secondaryTextColor = isDark ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.7)';
	const bgColor = isDark
		? themeColors?.dark?.[themeVariant]?.contentBackground || '#1E1E1E'
		: themeColors?.[themeVariant]?.contentBackground || '#FFFFFF';
	const borderColor = isDark
		? themeColors?.dark?.[themeVariant]?.border || '#424242'
		: themeColors?.[themeVariant]?.border || '#e6e6e6';
	const accentColor = '#4287f5'; // Konsistente Mana-Farbe (identisch mit Tailwind mana)
	const cardBgColor = isDark ? 'rgba(255,255,255,0.03)' : 'rgba(0,0,0,0.02)';

	// Tier-specific background colors and sizes for Mana icon
	const getTierStyles = () => {
		switch (plan.id) {
			case 'free':
				return { bg: '#F5F5F5', icon: '#9E9E9E', bgSize: '30%' }; // Smallest background
			case 'Mana_Stream_Small_v1':
			case 'Mana_Stream_Small_Yearly_v1':
				return { bg: '#E3F2FD', icon: '#2196F3', bgSize: '45%' }; // Light blue 50 / Blue 500
			case 'Mana_Stream_Medium_v1':
			case 'Mana_Stream_Medium_Yearly_v1':
				return { bg: '#BBDEFB', icon: '#1976D2', bgSize: '60%' }; // Light blue 100 / Blue 700
			case 'Mana_Stream_Large_v1':
			case 'Mana_Stream_Large_Yearly_v1':
				return { bg: '#90CAF9', icon: '#1565C0', bgSize: '75%' }; // Light blue 200 / Blue 800
			case 'Mana_Stream_Giant_v1':
			case 'Mana_Stream_Giant_Yearly_v1':
				return { bg: '#64B5F6', icon: '#0D47A1', bgSize: '90%' }; // Light blue 300 / Blue 900 - Max size
			default:
				// Legacy plans get a neutral blue and medium size
				return { bg: '#E1F5FE', icon: '#0288D1', bgSize: '50%' };
		}
	};

	const tierStyles = getTierStyles();

	return (
		<View
			style={{
				backgroundColor: isCurrentPlan
					? isDark
						? 'rgba(66, 135, 245, 0.1)'
						: 'rgba(66, 135, 245, 0.05)'
					: bgColor,
				borderRadius: 12,
				padding: 16,
				borderWidth: isCurrentPlan ? 2 : 1,
				borderColor: isCurrentPlan ? accentColor : plan.popular ? accentColor : borderColor,
			}}
		>
			{isCurrentPlan && (
				<View
					style={{
						position: 'absolute',
						top: -10,
						left: 16,
						backgroundColor: accentColor,
						borderRadius: 12,
						paddingHorizontal: 10,
						paddingVertical: 4,
					}}
				>
					<Text style={{ color: '#FFFFFF', fontSize: 12, fontWeight: 'bold' as const }}>
						{isLegacy
							? t('subscription.legacy_plan', 'Legacy Plan')
							: t('subscription.current_plan', 'Current Plan')}
					</Text>
				</View>
			)}
			{plan.popular && !isCurrentPlan && (
				<View
					style={{
						position: 'absolute',
						top: -10,
						right: 16,
						backgroundColor: accentColor,
						borderRadius: 12,
						paddingHorizontal: 10,
						paddingVertical: 4,
					}}
				>
					<Text style={{ color: '#000000', fontSize: 12, fontWeight: 'bold' as const }}>
						{t('subscription.popular', 'Popular')}
					</Text>
				</View>
			)}

			{/* Tier Name - full width */}
			<Text
				style={{
					color: textColor,
					fontSize: 18,
					fontWeight: 'bold' as const,
					marginBottom: 16,
					textAlign: 'center',
				}}
			>
				{plan.name}
			</Text>

			{/* Three column layout */}
			<View
				style={{
					flexDirection: 'row',
					justifyContent: 'space-between',
					alignItems: 'center',
					marginBottom: 20,
					gap: 8,
				}}
			>
				{/* Mana Icon with background */}
				<View
					style={{
						flex: 1,
						aspectRatio: 1,
						backgroundColor: cardBgColor,
						borderRadius: 12,
						justifyContent: 'center',
						alignItems: 'center',
						minHeight: 80,
					}}
				>
					{/* Inner container that grows */}
					<View
						style={{
							width: tierStyles.bgSize,
							height: tierStyles.bgSize,
							backgroundColor: tierStyles.bg,
							borderRadius: 8,
							justifyContent: 'center',
							alignItems: 'center',
						}}
					>
						<ManaIcon size={32} color={tierStyles.icon} />
					</View>
				</View>

				{/* Mana Amount */}
				<View
					style={{
						flex: 1,
						aspectRatio: 1,
						backgroundColor: cardBgColor,
						borderRadius: 12,
						justifyContent: 'center',
						alignItems: 'center',
						minHeight: 80,
					}}
				>
					<Text
						style={{
							color: textColor,
							fontSize: 24,
							fontWeight: 'bold' as const,
							marginBottom: 2,
						}}
					>
						{plan.monthlyMana}
					</Text>
					<Text
						style={{
							color: secondaryTextColor,
							fontSize: 11,
							textAlign: 'center',
						}}
					>
						{t('subscription.per_month', 'pro Monat')}
					</Text>
				</View>

				{/* Price */}
				<View
					style={{
						flex: 1,
						aspectRatio: 1,
						backgroundColor: cardBgColor,
						borderRadius: 12,
						justifyContent: 'center',
						alignItems: 'center',
						minHeight: 80,
					}}
				>
					<Text
						style={{
							color: textColor,
							fontSize: 22,
							fontWeight: 'bold' as const,
						}}
					>
						{formatPrice(plan)}
					</Text>
					<Text
						style={{
							color: secondaryTextColor,
							fontSize: 11,
							marginTop: 2,
						}}
					>
						{plan.billingCycle === 'yearly'
							? t('subscription.per_year', 'pro Jahr')
							: t('subscription.per_month', 'pro Monat')}
					</Text>
					{plan.billingCycle === 'yearly' && plan.monthlyEquivalent && (
						<Text
							style={{
								color: secondaryTextColor,
								fontSize: 9,
								marginTop: 1,
							}}
						>
							({plan.monthlyEquivalent.toFixed(2).replace('.', ',')}€/Mo)
						</Text>
					)}
				</View>
			</View>

			{/* Button nur anzeigen wenn es NICHT der Free Plan ist */}
			{plan.id !== 'free' && (
				<SubscriptionButton
					label={
						isCurrentPlan
							? isLegacy
								? t('subscription.your_legacy_plan', 'Your Legacy Plan')
								: t('subscription.your_plan', 'Your Plan')
							: t('subscription.buy', 'Buy')
					}
					onPress={() => onSelect(plan.id)}
					iconName={isCurrentPlan ? 'checkmark-circle-outline' : 'arrow-forward-outline'}
					variant={isCurrentPlan ? 'secondary' : plan.popular ? 'accent' : 'primary'}
					disabled={isCurrentPlan}
				/>
			)}
		</View>
	);
};

export default SubscriptionCard;