import { useRouter } from 'expo-router';
import { useCallback, useState } from 'react';
import { ScrollView, StyleSheet, Text, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

import { BrandPressable } from '@/components/brand-pressable';
import { GameTile } from '@/components/game-tile';
import { Brand, BrandFont } from '@/constants/theme';
import { GAMES } from '@/data/games';

/**
 * Frames `20-21` (initial, nothing selected) and `24-46` (2 games selected).
 * The two Figma frames are the same screen with different local state, so we
 * model them as a single screen with a `Set<string>` of selected ids.
 */
export default function SelectGamesScreen() {
  const router = useRouter();
  const insets = useSafeAreaInsets();
  const [selected, setSelected] = useState<Set<string>>(new Set());

  const toggle = useCallback((id: string) => {
    setSelected((prev) => {
      const next = new Set(prev);
      if (next.has(id)) {
        next.delete(id);
      } else {
        next.add(id);
      }
      return next;
    });
  }, []);

  return (
    <View style={[styles.root, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>
      <View style={styles.header}>
        <Text style={styles.title}>Which games do you play?</Text>
        <Text style={styles.subtitle}>
          Pick the games you play the most to personalize your experience.
        </Text>
      </View>

      <ScrollView
        contentContainerStyle={styles.grid}
        showsVerticalScrollIndicator={false}>
        {GAMES.map((game) => (
          <GameTile
            key={game.id}
            id={game.id}
            name={game.name}
            genre={game.genre}
            gradient={game.gradient}
            selected={selected.has(game.id)}
            onPress={() => toggle(game.id)}
          />
        ))}
      </ScrollView>

      <View style={styles.footer}>
        <BrandPressable
          label={`Continue${selected.size > 0 ? ` (${selected.size})` : ''}`}
          disabled={selected.size === 0}
          onPress={() => router.push('/(auth)/search-games')}
        />
        <Text
          onPress={() => router.push('/(auth)/search-games')}
          style={styles.link}>
          Search for a game
        </Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  root: {
    flex: 1,
    backgroundColor: Brand.bg,
    paddingHorizontal: 24,
  },
  header: {
    paddingTop: 16,
    paddingBottom: 16,
    gap: 6,
  },
  title: {
    color: Brand.text,
    fontSize: 22,
    lineHeight: 28,
    fontFamily: BrandFont.montserratBold,
  },
  subtitle: {
    color: Brand.textMuted,
    fontSize: 13,
    lineHeight: 18,
    fontFamily: BrandFont.poppinsRegular,
  },
  grid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
    paddingVertical: 8,
    rowGap: 16,
  },
  footer: {
    paddingTop: 16,
    gap: 8,
    alignItems: 'center',
  },
  link: {
    color: Brand.accent,
    fontSize: 13,
    lineHeight: 18,
    fontFamily: BrandFont.poppinsMedium,
    paddingVertical: 6,
  },
});