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

interface ClickableStatRowProps {
	title: string;
	value: string;
	icon: string;
	subtitle?: string;
	onPress?: () => void;
	isClickable?: boolean;
}

/**
 * Clickable version of StatRow for interactive elements like memo links
 */
const ClickableStatRow: React.FC<ClickableStatRowProps> = ({
	title,
	value,
	icon,
	subtitle,
	onPress,
	isClickable = true,
}) => {
	const { isDark, themeVariant } = useTheme();

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

	const contentBackgroundColor = isDark
		? (colors as any).theme?.extend?.colors?.dark?.[themeVariant]?.contentBackgroundHover
		: (colors as any).theme?.extend?.colors?.[themeVariant]?.contentBackgroundHover;

	const content = (isPressed?: boolean) => (
		<View
			style={{
				flexDirection: 'row',
				alignItems: 'center',
				paddingVertical: 10,
				paddingHorizontal: 12,
				backgroundColor: isPressed
					? isDark
						? 'rgba(255, 255, 255, 0.08)'
						: 'rgba(0, 0, 0, 0.05)'
					: isDark
						? 'rgba(255, 255, 255, 0.03)'
						: 'rgba(0, 0, 0, 0.02)',
				borderRadius: 12,
			}}
		>
			<Icon name={icon} size={22} color={primaryColor} />
			<View style={{ flex: 1, marginLeft: 14 }}>
				<Text
					style={{
						fontSize: 14,
						fontWeight: '500',
						color: textColor,
					}}
				>
					{title}
				</Text>
				{subtitle && (
					<Text
						style={{
							fontSize: 12,
							color: textSecondaryColor,
							marginTop: 2,
						}}
						numberOfLines={1}
						ellipsizeMode="tail"
					>
						{subtitle}
					</Text>
				)}
			</View>
			<View
				style={{
					flexDirection: 'row',
					alignItems: 'center',
					gap: 6,
				}}
			>
				<Text
					style={{
						fontSize: 17,
						fontWeight: '700',
						color: textColor,
						textAlign: 'right',
					}}
				>
					{value}
				</Text>
				{isClickable && onPress && (
					<Icon name="chevron-forward" size={18} color={textSecondaryColor} />
				)}
			</View>
		</View>
	);

	if (isClickable && onPress) {
		return (
			<Pressable
				onPress={onPress}
				style={({ pressed }) => ({
					opacity: pressed ? 0.7 : 1,
				})}
			>
				{({ pressed }) => content(pressed)}
			</Pressable>
		);
	}

	return content(false);
};

export default ClickableStatRow;