/** Feed post card with like + comment actions and media grid. */
import React from 'react';
import {Image, StyleSheet, Text, TouchableOpacity, View, ViewStyle} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import {COLORS} from '../theme/colors';
import {RADIUS, SPACING} from '../theme/spacing';
import type {SocialPost} from '../types/models';
import {formatCount, timeAgo} from '../utils/formatters';
import {Avatar} from './Avatar';
import {Badge} from './Badge';

interface Props {
  post: SocialPost;
  onPressUser?: (userId: number) => void;
  onLike: (post: SocialPost) => void;
  onComment: (post: SocialPost) => void;
  onDelete?: (post: SocialPost) => void;
  style?: ViewStyle;
}

export function PostCard({post, onPressUser, onLike, onComment, onDelete, style}: Props): React.JSX.Element {
  return (
    <View style={[styles.card, style]}>
      <TouchableOpacity
        style={styles.header}
        disabled={!onPressUser}
        onPress={() => onPressUser?.(post.user.id)}>
        <Avatar uri={post.user.avatar_url} name={post.user.full_name} size={42} vip={post.user.vip_badge} />
        <View style={{flex: 1, marginLeft: SPACING.s}}>
          <View style={{flexDirection: 'row', alignItems: 'center', gap: 6}}>
            <Text style={styles.fullName} numberOfLines={1}>
              {post.user.full_name}
            </Text>
            <Badge text={`Lv.${post.user.level}`} small />
          </View>
          <Text style={styles.time}>{timeAgo(post.created_at)} · @{post.user.username}</Text>
        </View>
        {onDelete ? (
          <TouchableOpacity onPress={() => onDelete(post)} hitSlop={8}>
            <Icon name="trash-outline" size={18} color={COLORS.secondaryText} />
          </TouchableOpacity>
        ) : null}
      </TouchableOpacity>

      <Text style={styles.content}>{post.content}</Text>

      {post.media?.length > 0 && (
        <View style={styles.mediaRow}>
          {post.media.slice(0, 3).map(m =>
            m.type === 'image' ? (
              <Image key={m.id} source={{uri: m.url}} style={styles.media} />
            ) : (
              <View key={m.id} style={[styles.media, styles.video]}>
                <Icon name="play" size={26} color={COLORS.white} />
              </View>
            ),
          )}
        </View>
      )}

      <View style={styles.actions}>
        <TouchableOpacity style={styles.action} onPress={() => onLike(post)}>
          <Icon
            name={post.liked_by_me ? 'heart' : 'heart-outline'}
            size={20}
            color={post.liked_by_me ? COLORS.pink : COLORS.secondaryText}
          />
          <Text style={[styles.actionText, post.liked_by_me && {color: COLORS.pink}]}>
            {formatCount(post.likes_count)}
          </Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.action} onPress={() => onComment(post)}>
          <Icon name="chatbubble-outline" size={20} color={COLORS.secondaryText} />
          <Text style={styles.actionText}>{formatCount(post.comments_count)}</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: COLORS.cardBg,
    borderRadius: RADIUS.l,
    padding: SPACING.l,
    marginBottom: SPACING.m,
  },
  header: {flexDirection: 'row', alignItems: 'center', marginBottom: SPACING.m},
  fullName: {color: COLORS.white, fontWeight: '700', flexShrink: 1},
  time: {color: COLORS.secondaryText, fontSize: 11, marginTop: 2},
  content: {color: COLORS.white, fontSize: 14, lineHeight: 20, marginBottom: SPACING.m},
  mediaRow: {flexDirection: 'row', gap: 6, marginBottom: SPACING.m},
  media: {
    flex: 1,
    aspectRatio: 1.1,
    borderRadius: RADIUS.m,
    backgroundColor: COLORS.inputBg,
  },
  video: {alignItems: 'center', justifyContent: 'center', backgroundColor: '#0B081A'},
  actions: {flexDirection: 'row', gap: SPACING.xl, borderTopWidth: 1, borderTopColor: COLORS.divider, paddingTop: SPACING.m},
  action: {flexDirection: 'row', alignItems: 'center', gap: 6},
  actionText: {color: COLORS.secondaryText, fontSize: 13, fontWeight: '600'},
});