/**
 * VotePreview 投票预览组件
 * 用于帖子列表中显示投票预览，类似微博风格
 */

import React from 'react';
import {
  View,
  TouchableOpacity,
  StyleSheet,
} from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { colors, spacing, fontSizes, borderRadius } from '../../theme';
import Text from '../common/Text';

interface VotePreviewProps {
  totalVotes?: number;
  optionsCount?: number;
  onPress?: () => void;
}

const VotePreview: React.FC<VotePreviewProps> = ({
  totalVotes = 0,
  optionsCount = 0,
  onPress,
}) => {
  // 格式化票数
  const formatVoteCount = (count: number): string => {
    if (count >= 10000) {
      return (count / 10000).toFixed(1) + '万';
    }
    if (count >= 1000) {
      return (count / 1000).toFixed(1) + 'k';
    }
    return count.toString();
  };

  // 判断是否有真实数据
  const hasData = totalVotes > 0 || optionsCount > 0;

  return (
    <TouchableOpacity
      style={styles.container}
      onPress={onPress}
      activeOpacity={0.8}
    >
      <View style={styles.iconContainer}>
        <MaterialCommunityIcons
          name="vote"
          size={18}
          color={colors.primary.main}
        />
      </View>
      <View style={styles.content}>
        <Text style={styles.title}>
          正在进行投票
        </Text>
        <Text style={styles.subtitle}>
          {hasData 
            ? `${optionsCount} 个选项 · ${formatVoteCount(totalVotes)} 人参与`
            : '点击查看详情'
          }
        </Text>
      </View>
      <MaterialCommunityIcons
        name="chevron-right"
        size={20}
        color={colors.text.hint}
      />
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: colors.primary.light + '08',
    borderRadius: borderRadius.md,
    padding: spacing.md,
    marginTop: spacing.sm,
    borderWidth: 1,
    borderColor: colors.primary.light + '30',
  },
  iconContainer: {
    width: 36,
    height: 36,
    borderRadius: borderRadius.md,
    backgroundColor: colors.primary.light + '20',
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: spacing.sm,
  },
  content: {
    flex: 1,
  },
  title: {
    fontSize: fontSizes.md,
    fontWeight: '600',
    color: colors.text.primary,
    marginBottom: 2,
  },
  subtitle: {
    fontSize: fontSizes.sm,
    color: colors.text.secondary,
  },
});

export default VotePreview;