/** Room discovery card — used in Explore + Home "Voice Party" rails. */
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, SHADOW, SPACING} from '../theme/spacing';
import type {Room} from '../types/models';
import {formatCount} from '../utils/formatters';
import {Avatar} from './Avatar';
import {Badge} from './Badge';
import {Gradient} from './Gradient';

interface Props {
  room: Room;
  onPress: (room: Room) => void;
  wide?: boolean;
  style?: ViewStyle;
}

export function RoomCard({room, onPress, wide, style}: Props): React.JSX.Element {
  return (
    <TouchableOpacity
      activeOpacity={0.85}
      onPress={() => onPress(room)}
      style={[styles.card, wide && styles.wide, style]}>
      <Gradient angle={160} style={styles.cover}>
        {room.cover_url ? (
          <Image source={{uri: room.cover_url}} style={StyleSheet.absoluteFill} resizeMode="cover" />
        ) : null}
        <View style={styles.coverRow}>
          <Badge text={room.category} variant="chip" small />
          {room.is_private ? (
            <Icon name="lock-closed" size={12} color={COLORS.gold} />
          ) : null}
        </View>
        <View style={styles.hostRow}>
          <Avatar uri={room.host.avatar_url} name={room.host.full_name} size={44} vip={room.host.vip_badge} />
          <View style={{flex: 1}}>
            <Text style={styles.name} numberOfLines={1}>
              {room.name}
            </Text>
            <Text style={styles.host} numberOfLines={1}>
              @{room.host.username}
            </Text>
          </View>
        </View>
      </Gradient>
      <View style={styles.stats}>
        <View style={styles.stat}>
          <Icon name="people" size={13} color={COLORS.purple} />
          <Text style={styles.statText}>{formatCount(room.participant_count)}</Text>
        </View>
        <View style={styles.stat}>
          <Icon name="mic" size={13} color={COLORS.magenta} />
          <Text style={styles.statText}>
            {formatCount(room.mic_active_count)}/{room.seat_count}
          </Text>
        </View>
        {room.has_password ? (
          <View style={styles.stat}>
            <Icon name="key" size={13} color={COLORS.gold} />
          </View>
        ) : null}
      </View>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  card: {
    width: 190,
    backgroundColor: COLORS.cardBg,
    borderRadius: RADIUS.l,
    overflow: 'hidden',
    ...SHADOW.card,
  },
  wide: {width: '100%'},
  cover: {padding: SPACING.m, gap: 10, height: 128},
  coverRow: {flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'},
  hostRow: {flexDirection: 'row', alignItems: 'center', gap: 8, marginTop: 'auto'},
  name: {color: COLORS.white, fontWeight: '800', fontSize: 14},
  host: {color: COLORS.secondaryText, fontSize: 11},
  stats: {
    flexDirection: 'row',
    gap: SPACING.l,
    padding: SPACING.m,
  },
  stat: {flexDirection: 'row', alignItems: 'center', gap: 4},
  statText: {color: COLORS.secondaryText, fontSize: 12, fontWeight: '600'},
});