import { SymbolView } from 'expo-symbols';
import { Image } from 'expo-image';
import { LinearGradient } from 'expo-linear-gradient';
import { Pressable, StyleSheet, Text, View } from 'react-native';

import { Brand, BrandFont } from '@/constants/theme';

export type GameTileProps = {
  id: string;
  name: string;
  genre: string;
  gradient: readonly [string, string];
  /** When true, draws the magenta selection border + checkmark. */
  selected?: boolean;
  /** Optional image source; falls back to the gradient placeholder. */
  imageSource?: string;
  onPress?: () => void;
};

/**
 * 166×246 game card used on the "Which games do you play?" and "Search games"
 * screens. The card is pressable; when `selected`, it gets a 4px magenta
 * border and a small white checkmark in the top-right corner (frame 2 in the
 * Figma).
 */
export function GameTile({
  name,
  genre,
  gradient,
  selected = false,
  imageSource,
  onPress,
}: GameTileProps) {
  return (
    <Pressable
      accessibilityRole="button"
      accessibilityState={{ selected }}
      accessibilityLabel={`${name} (${genre})`}
      onPress={onPress}
      style={({ pressed }) => [
        styles.card,
        selected && styles.cardSelected,
        pressed && styles.pressed,
      ]}>
      <View style={styles.artwork}>
        {imageSource ? (
          <Image source={{ uri: imageSource }} style={StyleSheet.absoluteFill} contentFit="cover" />
        ) : (
          <LinearGradient
            colors={[...gradient]}
            start={{ x: 0, y: 0 }}
            end={{ x: 1, y: 1 }}
            style={StyleSheet.absoluteFill}
          />
        )}
      </View>
      <View style={styles.body}>
        <Text numberOfLines={1} style={styles.name}>
          {name}
        </Text>
        <Text numberOfLines={1} style={styles.genre}>
          {genre}
        </Text>
      </View>
      {selected ? (
        <View style={styles.checkmark}>
          <SymbolView
            name="checkmark"
            tintColor={Brand.text}
            size={12}
            weight="bold"
          />
        </View>
      ) : null}
    </Pressable>
  );
}

const styles = StyleSheet.create({
  card: {
    width: 166,
    height: 246,
    backgroundColor: Brand.surface,
    borderRadius: 8,
    overflow: 'hidden',
    borderWidth: 4,
    borderColor: 'transparent',
  },
  cardSelected: {
    borderColor: Brand.accent,
  },
  pressed: {
    opacity: 0.85,
  },
  artwork: {
    height: 170,
    width: '100%',
  },
  body: {
    flex: 1,
    paddingHorizontal: 12,
    paddingTop: 10,
    gap: 2,
  },
  name: {
    color: Brand.text,
    fontSize: 15,
    lineHeight: 20,
    fontFamily: BrandFont.montserratSemiBold,
  },
  genre: {
    color: Brand.textMuted,
    fontSize: 12,
    lineHeight: 16,
    fontFamily: BrandFont.poppinsRegular,
  },
  checkmark: {
    position: 'absolute',
    top: 12,
    right: 12,
    width: 18,
    height: 18,
    borderRadius: 9,
    backgroundColor: Brand.accent,
    alignItems: 'center',
    justifyContent: 'center',
  },
});
