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

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

interface WeekData {
	weekNumber: number;
	year: number;
	startDate: Date;
	endDate: Date;
	memos: number;
	memories: number;
	duration: number;
	words: number;
}

interface WeekCardProps {
	weekData: WeekData;
	isLatest?: boolean;
}

/**
 * Beautiful card component for displaying individual week statistics
 */
const WeekCard: React.FC<WeekCardProps> = ({ weekData, isLatest = false }) => {
	const { isDark, themeVariant } = useTheme();
	const { t } = useTranslation();

	const textColor = isDark ? '#FFFFFF' : '#000000';
	const textSecondaryColor = isDark ? '#CCCCCC' : '#666666';
	const contentBackgroundColor = isDark
		? (colors as any).theme?.extend?.colors?.dark?.[themeVariant]?.contentBackground
		: (colors as any).theme?.extend?.colors?.[themeVariant]?.contentBackground;
	const borderColor = isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
	const primaryColor = isDark
		? (colors as any).theme?.extend?.colors?.dark?.[themeVariant]?.primary
		: (colors as any).theme?.extend?.colors?.[themeVariant]?.primary;

	const formatDuration = (seconds: number): string => {
		const hours = Math.floor(seconds / 3600);
		const minutes = Math.floor((seconds % 3600) / 60);

		if (hours > 0) {
			return `${hours}h ${minutes}m`;
		} else if (minutes > 0) {
			return `${minutes}m`;
		} else {
			return `${seconds}s`;
		}
	};

	const formatDateRange = (start: Date, end: Date) => {
		const startStr = start.toLocaleDateString('de-DE', {
			day: '2-digit',
			month: '2-digit',
		});
		const endStr = end.toLocaleDateString('de-DE', {
			day: '2-digit',
			month: '2-digit',
		});
		return `${startStr} - ${endStr}`;
	};

	const getProductivityLevel = () => {
		if (weekData.memos >= 10)
			return { level: t('statistics.very_high'), color: '#4CAF50', icon: 'trending-up' };
		if (weekData.memos >= 5)
			return { level: t('statistics.high'), color: '#8BC34A', icon: 'trending-up' };
		if (weekData.memos >= 3)
			return { level: t('statistics.medium'), color: '#FFC107', icon: 'remove' };
		if (weekData.memos >= 1)
			return { level: t('statistics.low'), color: '#FF9800', icon: 'trending-down' };
		return { level: t('statistics.none'), color: '#F44336', icon: 'trending-down' };
	};

	const productivity = getProductivityLevel();

	return (
		<View
			style={{
				backgroundColor: contentBackgroundColor,
				borderRadius: 16,
				borderWidth: isLatest ? 2 : 1.5,
				borderColor: isLatest ? primaryColor : borderColor,
				padding: 20,
				marginBottom: 12,
				...(isLatest && {
					shadowColor: primaryColor,
					shadowOffset: { width: 0, height: 4 },
					shadowOpacity: 0.3,
					shadowRadius: 8,
					elevation: 8,
				}),
			}}
		>
			{/* Header */}
			<View
				style={{
					flexDirection: 'row',
					justifyContent: 'space-between',
					alignItems: 'center',
					marginBottom: 16,
				}}
			>
				<View>
					<View
						style={{
							flexDirection: 'row',
							alignItems: 'center',
							gap: 8,
						}}
					>
						<Text
							style={{
								fontSize: 20,
								fontWeight: 'bold',
								color: textColor,
							}}
						>
							{t('statistics.week_abbr')} {weekData.weekNumber}
						</Text>
						{isLatest && (
							<View
								style={{
									backgroundColor: primaryColor,
									paddingHorizontal: 8,
									paddingVertical: 2,
									borderRadius: 12,
								}}
							>
								<Text
									style={{
										fontSize: 10,
										fontWeight: 'bold',
										color: '#FFFFFF',
									}}
								>
									{t('statistics.current')}
								</Text>
							</View>
						)}
					</View>
					<Text
						style={{
							fontSize: 14,
							color: textSecondaryColor,
							marginTop: 2,
						}}
					>
						{formatDateRange(weekData.startDate, weekData.endDate)} • {weekData.year}
					</Text>
				</View>

				<View
					style={{
						flexDirection: 'row',
						alignItems: 'center',
						gap: 6,
					}}
				>
					<Icon name={productivity.icon} size={16} color={productivity.color} />
					<Text
						style={{
							fontSize: 12,
							color: productivity.color,
							fontWeight: '500',
						}}
					>
						{productivity.level}
					</Text>
				</View>
			</View>

			{/* Stats Grid */}
			<View
				style={{
					flexDirection: 'row',
					flexWrap: 'wrap',
					gap: 16,
				}}
			>
				{/* Memos */}
				<View
					style={{
						flex: 1,
						minWidth: 120,
						alignItems: 'center',
						backgroundColor: isDark ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.03)',
						borderRadius: 12,
						padding: 12,
					}}
				>
					<Icon name="document-text-outline" size={20} color={primaryColor} />
					<Text
						style={{
							fontSize: 18,
							fontWeight: 'bold',
							color: textColor,
							marginTop: 8,
						}}
					>
						{weekData.memos}
					</Text>
					<Text
						style={{
							fontSize: 12,
							color: textSecondaryColor,
						}}
					>
						{t('statistics.memos')}
					</Text>
				</View>

				{/* Memories */}
				<View
					style={{
						flex: 1,
						minWidth: 120,
						alignItems: 'center',
						backgroundColor: isDark ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.03)',
						borderRadius: 12,
						padding: 12,
					}}
				>
					<Icon name="sparkles-outline" size={20} color={primaryColor} />
					<Text
						style={{
							fontSize: 18,
							fontWeight: 'bold',
							color: textColor,
							marginTop: 8,
						}}
					>
						{weekData.memories}
					</Text>
					<Text
						style={{
							fontSize: 12,
							color: textSecondaryColor,
						}}
					>
						{t('statistics.memories')}
					</Text>
				</View>

				{/* Duration */}
				<View
					style={{
						flex: 1,
						minWidth: 120,
						alignItems: 'center',
						backgroundColor: isDark ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.03)',
						borderRadius: 12,
						padding: 12,
					}}
				>
					<Icon name="volume-high-outline" size={20} color={primaryColor} />
					<Text
						style={{
							fontSize: 18,
							fontWeight: 'bold',
							color: textColor,
							marginTop: 8,
						}}
					>
						{formatDuration(weekData.duration)}
					</Text>
					<Text
						style={{
							fontSize: 12,
							color: textSecondaryColor,
						}}
					>
						{t('statistics.recordings')}
					</Text>
				</View>

				{/* Words */}
				<View
					style={{
						flex: 1,
						minWidth: 120,
						alignItems: 'center',
						backgroundColor: isDark ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.03)',
						borderRadius: 12,
						padding: 12,
					}}
				>
					<Icon name="text-outline" size={20} color={primaryColor} />
					<Text
						style={{
							fontSize: 18,
							fontWeight: 'bold',
							color: textColor,
							marginTop: 8,
						}}
					>
						{weekData.words.toLocaleString()}
					</Text>
					<Text
						style={{
							fontSize: 12,
							color: textSecondaryColor,
						}}
					>
						{t('statistics.words')}
					</Text>
				</View>
			</View>

			{/* Progress Bar */}
			<View
				style={{
					marginTop: 16,
					paddingTop: 16,
					borderTopWidth: 1,
					borderTopColor: borderColor,
				}}
			>
				<View
					style={{
						flexDirection: 'row',
						justifyContent: 'space-between',
						alignItems: 'center',
						marginBottom: 8,
					}}
				>
					<Text
						style={{
							fontSize: 12,
							color: textSecondaryColor,
						}}
					>
						{t('statistics.activity_level')}
					</Text>
					<Text
						style={{
							fontSize: 12,
							color: productivity.color,
							fontWeight: '500',
						}}
					>
						{weekData.memos} / 10 {t('statistics.memos')}
					</Text>
				</View>

				<View
					style={{
						height: 6,
						backgroundColor: isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)',
						borderRadius: 3,
						overflow: 'hidden',
					}}
				>
					<View
						style={{
							height: '100%',
							width: `${Math.min(100, (weekData.memos / 10) * 100)}%`,
							backgroundColor: productivity.color,
							borderRadius: 3,
						}}
					/>
				</View>
			</View>
		</View>
	);
};

export default WeekCard;