rebreak-monorepo/apps/rebreak-native/app/games.tsx

import { useEffect, useState } from 'react';
import { View, Text, TouchableOpacity, ScrollView } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useRouter } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
import { useTranslation } from 'react-i18next';
import {
  GAME_META,
  type GameType,
  MemoryGame,
  TicTacToeGame,
  SnakeGame,
  TetrisGame,
} from '../components/urge/UrgeGames';
import { GameCard } from '../components/games/GameCard';
import { useColors } from '../lib/theme';
import { apiFetch } from '../lib/api';

type GameStat = { avgStars: number; count: number };
type GameStats = Record<GameType, GameStat>;

const EMPTY_STATS: GameStats = {
  memory: { avgStars: 0, count: 0 },
  tictactoe: { avgStars: 0, count: 0 },
  snake: { avgStars: 0, count: 0 },
  tetris: { avgStars: 0, count: 0 },
};

type LastScore = { game: GameType; score: number } | null;

export default function GamesScreen() {
  const router = useRouter();
  const { t } = useTranslation();
  const colors = useColors();
  const [active, setActive] = useState<GameType | null>(null);
  const [lastScore, setLastScore] = useState<LastScore>(null);
  const [gameStats, setGameStats] = useState<GameStats>(EMPTY_STATS);

  useEffect(() => {
    let cancelled = false;
    (async () => {
      try {
        // Backend response: { ratings, stats: [{ gameName, avgStars, count }] }
        const data = await apiFetch<{
          stats: Array<{ gameName: string; avgStars: number; count: number }>;
        }>('/api/games/ratings');
        if (cancelled) return;
        const next: GameStats = { ...EMPTY_STATS };
        for (const s of data.stats ?? []) {
          const key = s.gameName.toLowerCase() as GameType;
          if (key in next) {
            next[key] = { avgStars: s.avgStars ?? 0, count: s.count ?? 0 };
          }
        }
        setGameStats(next);
      } catch {
        // Silent fail — UI shows 0 stars/count, kein Crash
      }
    })();
    return () => {
      cancelled = true;
    };
  }, []);

  function exit(score?: number) {
    if (typeof score === 'number' && active) {
      setLastScore({ game: active, score });
    }
    setActive(null);
  }

  if (active) {
    return (
      <SafeAreaView style={{ flex: 1, backgroundColor: colors.bg }} edges={['top']}>
        <View
          style={{
            paddingHorizontal: 12,
            paddingVertical: 8,
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
            borderBottomWidth: 1,
            borderBottomColor: colors.border,
          }}
        >
          <TouchableOpacity
            onPress={() => exit()}
            hitSlop={10}
            activeOpacity={0.6}
            style={{ flexDirection: 'row', alignItems: 'center', gap: 4, paddingHorizontal: 6, paddingVertical: 6 }}
          >
            <Ionicons name="chevron-back" size={22} color={colors.text} />
            <Text style={{ fontSize: 15, fontFamily: 'Nunito_600SemiBold', color: colors.text }}>
              {t('games.back_to_picker')}
            </Text>
          </TouchableOpacity>
          {/* Title bewusst entfernt — der Game-Picker hat das Spiel schon ausgewählt,
              Wiederholung im Header lenkt nur ab. Spacer balanciert den Back-Button. */}
          <View style={{ flex: 1 }} />
          <View style={{ width: 60 }} />
        </View>

        <View style={{ flex: 1 }}>
          {active === 'memory' ? (
            <MemoryGame onComplete={(s) => exit(s)} onAbandon={() => exit()} />
          ) : null}
          {active === 'tictactoe' ? (
            <TicTacToeGame onComplete={(s) => exit(s)} onAbandon={() => exit()} />
          ) : null}
          {active === 'snake' ? (
            <SnakeGame onComplete={(s) => exit(s)} onAbandon={() => exit()} />
          ) : null}
          {active === 'tetris' ? (
            <TetrisGame onComplete={(s) => exit(s)} onAbandon={() => exit()} />
          ) : null}
        </View>
      </SafeAreaView>
    );
  }

  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: colors.bg }} edges={['top']}>
      <View
        style={{
          paddingHorizontal: 12,
          paddingTop: 4,
          paddingBottom: 12,
          flexDirection: 'row',
          alignItems: 'center',
          gap: 8,
          borderBottomWidth: 1,
          borderBottomColor: colors.border,
        }}
      >
        <TouchableOpacity
          onPress={() => router.back()}
          hitSlop={8}
          activeOpacity={0.6}
          style={{ width: 40, height: 40, alignItems: 'center', justifyContent: 'center' }}
        >
          <Ionicons name="chevron-back" size={26} color={colors.text} />
        </TouchableOpacity>
        <Text style={{ fontSize: 20, color: colors.text, fontFamily: 'Nunito_700Bold' }}>
          {t('games.title')}
        </Text>
      </View>

      <ScrollView
        style={{ flex: 1 }}
        contentContainerStyle={{ paddingHorizontal: 16, paddingTop: 16, paddingBottom: 60 }}
        showsVerticalScrollIndicator={false}
      >
        <Text
          style={{
            fontSize: 13,
            color: colors.textMuted,
            fontFamily: 'Nunito_400Regular',
            lineHeight: 19,
            marginBottom: 18,
            paddingHorizontal: 4,
          }}
        >
          {t('games.subtitle')}
        </Text>

        <View
          style={{
            flexDirection: 'row',
            flexWrap: 'wrap',
            gap: 12,
            justifyContent: 'space-between',
          }}
        >
          {GAME_META.map((game) => {
            const stat = gameStats[game.id] ?? { avgStars: 0, count: 0 };
            const recent = lastScore?.game === game.id ? lastScore.score : null;
            return (
              <View key={game.id} style={{ width: '47.5%' }}>
                <GameCard
                  id={game.id}
                  svg={game.svg}
                  titleKey={game.titleKey}
                  descKey={game.descKey}
                  avgStars={stat.avgStars}
                  count={stat.count}
                  onPress={(id) => setActive(id)}
                />
                {recent !== null ? (
                  <View
                    style={{
                      marginTop: 6,
                      paddingHorizontal: 8,
                      paddingVertical: 3,
                      borderRadius: 10,
                      backgroundColor: colors.brandOrange + '18',
                      alignSelf: 'center',
                    }}
                  >
                    <Text
                      style={{
                        fontSize: 11,
                        fontFamily: 'Nunito_700Bold',
                        color: colors.brandOrange,
                      }}
                    >
                      {t('games.last_score', { score: recent })}
                    </Text>
                  </View>
                ) : null}
              </View>
            );
          })}
        </View>

        <Text
          style={{
            textAlign: 'center',
            fontSize: 11,
            color: colors.textMuted,
            fontFamily: 'Nunito_400Regular',
            marginTop: 24,
            opacity: 0.7,
          }}
        >
          {t('games.skeleton_footer')}
        </Text>
      </ScrollView>
    </SafeAreaView>
  );
}