import { StyleSheet, Text, View } from 'react-native';
import Card from './Card';
import { colors, fonts } from '../theme';

export default function Seat({ seat, highlight }) {
  const isEmpty = !seat.username;

  return (
    <View style={[styles.seat, highlight && styles.highlight]}>
      <Text style={styles.name}>{isEmpty ? 'Üres hely' : seat.username}</Text>
      {!isEmpty && seat.bet > 0 && (
        <Text style={styles.bet}>Tet: {seat.bet} Ft</Text>
      )}
      {!isEmpty && seat.hand?.length > 0 && (
        <View style={styles.hand}>
          {seat.hand.map((card, idx) => (
            <Card key={`${card.rank}-${card.suit}-${idx}`} rank={card.rank} suit={card.suit} hidden={card.hidden} />
          ))}
        </View>
      )}
      {!isEmpty && seat.result && (
        <Text style={styles.result}>
          {seat.result.outcome === 'win' && 'Nyereség'}
          {seat.result.outcome === 'blackjack' && 'Blackjack!'}
          {seat.result.outcome === 'push' && 'Döntetlen'}
          {seat.result.outcome === 'bust' && 'Bukás'}
          {seat.result.outcome === 'lose' && 'Vesztettél'}
          {seat.result.outcome === 'left' && 'Kilépett'}
          {seat.result.outcome === 'disconnect' && 'Eltűnt'}
          {seat.result.outcome === 'moved' && 'Átült'}
        </Text>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  seat: {
    padding: 8,
    borderRadius: 12,
    backgroundColor: 'rgba(0,0,0,0.3)',
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.1)'
  },
  highlight: {
    borderColor: colors.goldBright,
    shadowColor: colors.goldBright,
    shadowOpacity: 0.6,
    shadowRadius: 8
  },
  name: {
    color: colors.text,
    fontSize: 12,
    fontFamily: fonts.body,
    fontWeight: '600'
  },
  bet: {
    color: colors.goldBright,
    fontSize: 11,
    marginTop: 2,
    fontFamily: fonts.mono
  },
  hand: {
    flexDirection: 'row',
    marginTop: 4
  },
  result: {
    marginTop: 4,
    color: colors.muted,
    fontSize: 10,
    fontFamily: fonts.body
  }
});