import { View, Text, Pressable } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { colors } from '../../lib/theme';

type Props = {
  postsCount: number;
  followersCount: number;
  approvedDomainsCount: number;
  onPostsPress?: () => void;
  onFollowersPress?: () => void;
  onApprovedDomainsPress?: () => void;
};

type CardProps = {
  value: string;
  label: string;
  icon?: React.ComponentProps<typeof Ionicons>['name'];
  onPress?: () => void;
};

function StatCard({ value, label, icon, onPress }: CardProps) {
  return (
    <Pressable
      onPress={onPress}
      style={({ pressed }) => ({
        flex: 1,
        opacity: pressed ? 0.6 : 1,
        alignItems: 'center',
        justifyContent: 'center',
        paddingVertical: 16,
        paddingHorizontal: 8,
      })}
    >
      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
        <Text
          style={{
            fontSize: 30,
            color: colors.text,
            fontFamily: 'Nunito_700Bold',
            letterSpacing: -0.5,
          }}
        >
          {value}
        </Text>
        {icon ? (
          <Ionicons name={icon} size={16} color={colors.textMuted} style={{ marginTop: 4 }} />
        ) : null}
      </View>
      <Text
        style={{
          marginTop: 4,
          fontSize: 12,
          color: colors.textMuted,
          fontFamily: 'Nunito_600SemiBold',
          textAlign: 'center',
        }}
      >
        {label}
      </Text>
    </Pressable>
  );
}

function Divider() {
  return (
    <View
      style={{
        width: 1,
        backgroundColor: 'rgba(0,0,0,0.08)',
        marginVertical: 14,
      }}
    />
  );
}

/**
 * Community-Stats: 3 prominente Cards in einer zentrierten Reihe.
 * - Posts / Follower / Approved Domains
 * - Approved Domains: PLAIN INTEGER (kein Cap), Trophy-Icon als Community-Beitrag-Hint
 */
export function StatsBar({
  postsCount,
  followersCount,
  approvedDomainsCount,
  onPostsPress,
  onFollowersPress,
  onApprovedDomainsPress,
}: Props) {
  return (
    <View style={{ paddingHorizontal: 16, alignItems: 'center' }}>
      <View
        style={{
          flexDirection: 'row',
          alignItems: 'stretch',
          backgroundColor: '#fafafa',
          borderRadius: 18,
          borderWidth: 1,
          borderColor: '#ececec',
          width: '100%',
          maxWidth: 420,
        }}
      >
        <StatCard value={String(postsCount)} label="Posts" onPress={onPostsPress} />
        <Divider />
        <StatCard value={String(followersCount)} label="Follower" onPress={onFollowersPress} />
        <Divider />
        <StatCard
          value={String(approvedDomainsCount)}
          label="Approved Domains"
          icon="trophy-outline"
          onPress={onApprovedDomainsPress}
        />
      </View>
    </View>
  );
}