managarten/apps-archived/memoro/apps/mobile/components/statistics/EngagementCard.tsx

import React from 'react';
import { View, Text, StyleSheet, ScrollView } from 'react-native';
import { useTheme } from '~/features/theme/ThemeProvider';
import { useTranslation } from 'react-i18next';
import { useRouter } from 'expo-router';
import GlassCard from './GlassCard';
import StatRow from './StatRow';
import ClickableStatRow from './ClickableStatRow';

interface EngagementCardProps {
	mostViewedMemo: { id: string; title: string; viewCount: number } | null;
	lastViewedMemo: { id: string; title: string; lastViewed: string } | null;
	unreadMemos: number;
	memoCount: number;
}

const EngagementCard: React.FC<EngagementCardProps> = ({
	mostViewedMemo,
	lastViewedMemo,
	unreadMemos,
	memoCount,
}) => {
	const { isDark } = useTheme();
	const { t } = useTranslation();
	const router = useRouter();

	const textColor = isDark ? '#FFFFFF' : '#000000';
	const sectionTitleColor = isDark ? '#CCCCCC' : '#666666';

	// Calculate read percentage
	const readMemos = memoCount - unreadMemos;
	const readPercentage = memoCount > 0 ? Math.round((readMemos / memoCount) * 100) : 0;

	return (
		<GlassCard>
			<ScrollView showsVerticalScrollIndicator={false}>
				<Text style={[styles.title, { color: textColor }]}>Engagement</Text>

				{/* View Statistics */}
				<Text style={[styles.sectionTitle, { color: sectionTitleColor }]}>
					{t('statistics.section_engagement') || 'Aufrufe'}
				</Text>
				<View style={styles.statsContainer}>
					{mostViewedMemo && (
						<ClickableStatRow
							title={t('statistics.most_viewed_memo')}
							value={`${mostViewedMemo.viewCount}x`}
							icon="eye-outline"
							subtitle={mostViewedMemo.title}
							onPress={() => router.push(`/(protected)/(memo)/${mostViewedMemo.id}`)}
						/>
					)}
					{lastViewedMemo && (
						<ClickableStatRow
							title={t('statistics.last_viewed_memo')}
							value={new Date(lastViewedMemo.lastViewed).toLocaleDateString()}
							icon="time-outline"
							subtitle={lastViewedMemo.title}
							onPress={() => router.push(`/(protected)/(memo)/${lastViewedMemo.id}`)}
						/>
					)}
				</View>

				<View style={styles.divider} />

				{/* Reading Statistics */}
				<Text style={[styles.sectionTitle, { color: sectionTitleColor }]}>Lesestatus</Text>
				<View style={styles.statsContainer}>
					<StatRow
						title={t('statistics.unread_memos') || 'Ungelesene Memos'}
						value={unreadMemos.toString()}
						icon="mail-unread-outline"
					/>
					<StatRow
						title="Gelesene Memos"
						value={readMemos.toString()}
						icon="checkmark-done-outline"
					/>
					<StatRow
						title="Gelesen"
						value={`${readPercentage}%`}
						icon="stats-chart-outline"
						subtitle={`${readMemos} von ${memoCount} Memos`}
					/>
				</View>

				{unreadMemos > 0 && (
					<>
						<View style={styles.divider} />
						<View style={styles.hintContainer}>
							<Text style={[styles.hintText, { color: sectionTitleColor }]}>
								💡 Du hast noch {unreadMemos} ungelesene {unreadMemos === 1 ? 'Memo' : 'Memos'}
							</Text>
						</View>
					</>
				)}
			</ScrollView>
		</GlassCard>
	);
};

const styles = StyleSheet.create({
	title: {
		fontSize: 26,
		fontWeight: '700',
		marginBottom: 20,
	},
	sectionTitle: {
		fontSize: 15,
		fontWeight: '600',
		marginBottom: 10,
		marginTop: 4,
		textTransform: 'uppercase',
		letterSpacing: 0.5,
	},
	statsContainer: {
		gap: 6,
	},
	divider: {
		height: 0,
		marginVertical: 18,
	},
	hintContainer: {
		backgroundColor: 'rgba(255, 255, 255, 0.05)',
		borderRadius: 12,
		padding: 14,
	},
	hintText: {
		fontSize: 13,
		lineHeight: 18,
	},
});

export default EngagementCard;