rebreak-monorepo/apps/rebreak-native/components/games/GameOverScreen.tsx

import { useEffect, useRef, useState } from 'react';
import {
  ActivityIndicator,
  Animated,
  Easing,
  Keyboard,
  Modal,
  Platform,
  ScrollView,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';
import { useTranslation } from 'react-i18next';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import * as Haptics from 'expo-haptics';
import { Ionicons } from '@expo/vector-icons';
import { RiveAvatar } from '../RiveAvatar';
import { StarRating } from './StarRating';
import { useColors } from '../../lib/theme';
import { apiFetch } from '../../lib/api';

export type GameOverScreenProps = {
  score: number;
  bestScore: number;
  gameName: string;
  scoreLabel?: string;
  goodScore?: number;
  onRetry: () => void;
  onExit: () => void;
  isNewBest?: boolean;
};

function lyraMsg(
  gameName: string,
  score: number,
  goodScore: number,
  isNewBest: boolean,
  t: (k: string) => string
): { title: string; body: string } {
  if (isNewBest) return { title: t('gameOver.lyra_title_record'), body: t('gameOver.lyra_body_record') };
  if (score >= goodScore) return { title: t('gameOver.lyra_title_good'), body: t('gameOver.lyra_body_good') };
  if (score > 0) return { title: t('gameOver.lyra_title_ok'), body: t('gameOver.lyra_body_ok') };
  return { title: t('gameOver.lyra_title_low'), body: t('gameOver.lyra_body_low') };
}

export function GameOverScreen({
  score,
  bestScore,
  gameName,
  scoreLabel,
  goodScore = 5,
  onRetry,
  onExit,
  isNewBest = false,
}: GameOverScreenProps) {
  const { t } = useTranslation();
  const colors = useColors();
  const insets = useSafeAreaInsets();

  // Slide-In Spring für den Sheet-Auftritt (eigene Bouncy-Animation behalten)
  const slideAnim = useRef(new Animated.Value(500)).current;
  // Keyboard-Lift via plain RN Keyboard.addListener (funktioniert in Modals,
  // anders als react-native-keyboard-controller's useKeyboardAnimation).
  const keyboardLift = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
    const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
    const showSub = Keyboard.addListener(showEvent, (e) => {
      Animated.timing(keyboardLift, {
        toValue: e.endCoordinates.height,
        duration: Platform.OS === 'ios' ? (e.duration ?? 250) : 220,
        easing: Easing.out(Easing.cubic),
        useNativeDriver: true,
      }).start();
    });
    const hideSub = Keyboard.addListener(hideEvent, (e) => {
      Animated.timing(keyboardLift, {
        toValue: 0,
        duration: Platform.OS === 'ios' ? (e?.duration ?? 250) : 220,
        easing: Easing.out(Easing.cubic),
        useNativeDriver: true,
      }).start();
    });
    return () => {
      showSub.remove();
      hideSub.remove();
    };
  }, [keyboardLift]);

  const [rating, setRating] = useState(0);
  const [feedback, setFeedback] = useState('');
  const [saving, setSaving] = useState(false);
  const [saved, setSaved] = useState(false);

  const [shareSectionOpen, setShareSectionOpen] = useState(false);
  const [shareText, setShareText] = useState('');
  const [shareTextLoading, setShareTextLoading] = useState(false);
  const [sharing, setSharing] = useState(false);
  const [posted, setPosted] = useState(false);
  const [postError, setPostError] = useState(false);

  const emotion = isNewBest || score >= goodScore ? 'happy' : 'empathy';
  const msg = lyraMsg(gameName, score, goodScore, isNewBest, t);
  const displayScore = score;
  const displayBest = Math.max(score, bestScore);

  useEffect(() => {
    Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success).catch(() => {});
    Animated.spring(slideAnim, {
      toValue: 0,
      useNativeDriver: true,
      damping: 22,
      stiffness: 200,
      mass: 0.8,
    }).start();
  }, []);

  // Negativer Lift — translateY -keyboardHeight schiebt Sheet nach oben.
  const keyboardLiftY = Animated.multiply(keyboardLift, -1);

  function handleExit() {
    Animated.timing(slideAnim, {
      toValue: 500,
      duration: 220,
      useNativeDriver: true,
    }).start(() => onExit());
  }

  async function submitRating() {
    setSaving(true);
    try {
      await apiFetch('/api/games/rating', {
        method: 'POST',
        body: {
          gameName: gameName.toLowerCase(),
          stars: rating,
          feedback: feedback.trim() || null,
          score,
        },
      });
      setSaved(true);
    } catch {
      // endpoint not yet live — silent
    } finally {
      setSaving(false);
    }
  }

  async function openShareSection() {
    setShareTextLoading(true);
    setShareSectionOpen(true);
    try {
      const data = await apiFetch<{ text: string }>('/api/games/share-text', {
        method: 'POST',
        body: {
          gameName: gameName.toLowerCase(),
          score,
          scoreLabel,
          bestScore,
          isNewRecord: score > bestScore,
          mode: 'game',
        },
      });
      setShareText(data.text || `${gameName}: ${score} ${scoreLabel ?? 'Punkte'}\n${t('gameOver.share_challenge')}`);
    } catch {
      setShareText(`${gameName}: ${score} ${scoreLabel ?? 'Punkte'}\n${t('gameOver.share_challenge')}`);
    } finally {
      setShareTextLoading(false);
    }
  }

  async function submitCommunityPost() {
    if (!shareText.trim()) return;
    setSharing(true);
    setPostError(false);
    try {
      const scoreLine = `${scoreLabel ?? 'Score'}: ${score}`;
      await apiFetch('/api/community/post', {
        method: 'POST',
        body: {
          category: 'game_share',
          content: `${gameName}\n${scoreLine}\n${shareText.trim()}`,
        },
      });
      setPosted(true);
      setShareSectionOpen(false);
      setTimeout(() => handleExit(), 1500);
    } catch (err) {
      console.error('[gameover/post] failed:', err);
      setPostError(true);
    } finally {
      setSharing(false);
    }
  }

  const pillBg = colors.surfaceElevated;
  const pillText = colors.text;
  const pillMuted = colors.textMuted;

  return (
    <Modal visible transparent animationType="none" onRequestClose={handleExit}>
      <View style={{ flex: 1, justifyContent: 'flex-end' }}>
        <TouchableOpacity onPress={handleExit} activeOpacity={1} style={{ flex: 1 }} />
        <Animated.View
          style={{
            transform: [
              { translateY: slideAnim },
              { translateY: keyboardLiftY },
            ],
            backgroundColor: colors.surface,
            borderTopLeftRadius: 28,
            borderTopRightRadius: 28,
            paddingTop: 12,
            paddingHorizontal: 20,
            paddingBottom: insets.bottom + 24,
          }}
        >
          {/* Grab-handle */}
          <View
            style={{
              alignSelf: 'center',
              width: 36,
              height: 5,
              borderRadius: 3,
              backgroundColor: colors.textMuted,
              opacity: 0.3,
              marginBottom: 16,
            }}
          />

          <ScrollView
            keyboardShouldPersistTaps="handled"
            showsVerticalScrollIndicator={false}
            contentContainerStyle={{ gap: 16, paddingBottom: 8 }}
          >
            {/* Lyra avatar + message */}
            <View style={{ alignItems: 'center', gap: 8 }}>
              <RiveAvatar emotion={emotion} size="md" />
              <Text style={{ fontSize: 11, color: colors.textMuted, fontFamily: 'Nunito_600SemiBold' }}>
                Lyra
              </Text>
              <Text style={{ fontFamily: 'Nunito_800ExtraBold', fontSize: 18, color: colors.text, textAlign: 'center' }}>
                {msg.title}
              </Text>
              <Text style={{ fontFamily: 'Nunito_400Regular', fontSize: 13, color: colors.textMuted, textAlign: 'center', lineHeight: 18, paddingHorizontal: 4 }}>
                {msg.body}
              </Text>
            </View>

            {/* Score pills */}
            <View style={{ flexDirection: 'row', justifyContent: 'center', gap: 10 }}>
              <View style={{ flex: 1, backgroundColor: pillBg, borderRadius: 14, paddingVertical: 12, paddingHorizontal: 8, alignItems: 'center', gap: 2 }}>
                <Text style={{ fontFamily: 'Nunito_800ExtraBold', fontSize: 20, color: pillText }}>
                  {displayScore}
                </Text>
                <Text style={{ fontSize: 10, color: pillMuted, textTransform: 'uppercase', letterSpacing: 1, fontFamily: 'Nunito_600SemiBold' }}>
                  {scoreLabel ?? t('gameOver.score')}
                </Text>
              </View>
              <View
                style={{
                  flex: 1,
                  backgroundColor: isNewBest ? '#e7f0ff' : pillBg,
                  borderRadius: 12,
                  borderWidth: isNewBest ? 1.5 : 0,
                  borderColor: isNewBest ? '#007AFF' : 'transparent',
                  paddingVertical: 12,
                  paddingHorizontal: 8,
                  alignItems: 'center',
                  gap: 2,
                }}
              >
                <Text style={{ fontFamily: 'Nunito_800ExtraBold', fontSize: 20, color: isNewBest ? '#0051d4' : pillMuted }}>
                  {displayBest}
                </Text>
                <Text style={{ fontSize: 10, color: isNewBest ? '#0051d4' : pillMuted, textTransform: 'uppercase', letterSpacing: 1, fontFamily: 'Nunito_600SemiBold' }}>
                  {isNewBest ? t('gameOver.newBest') : t('gameOver.best')}
                </Text>
              </View>
            </View>

            {/* Star rating */}
            <View style={{ alignItems: 'center', gap: 6 }}>
              <StarRating
                value={rating}
                size="lg"
                interactive={!saved}
                filledColor="#007AFF"
                onChange={(v) => { if (!saved) setRating(v); }}
              />
              {saved ? (
                <Text style={{ fontSize: 11, color: colors.textMuted, fontFamily: 'Nunito_400Regular' }}>
                  {t('gameOver.rating_saved')}
                </Text>
              ) : null}
            </View>

            {/* Feedback textarea + save */}
            {rating > 0 && !saved ? (
              <View style={{ gap: 8 }}>
                <TextInput
                  value={feedback}
                  onChangeText={setFeedback}
                  placeholder={t('gameOver.feedback_placeholder')}
                  placeholderTextColor={colors.textMuted}
                  multiline
                  numberOfLines={2}
                  style={{
                    backgroundColor: colors.surfaceElevated,
                    borderRadius: 12,
                    padding: 12,
                    fontSize: 13,
                    fontFamily: 'Nunito_400Regular',
                    color: colors.text,
                    minHeight: 56,
                    textAlignVertical: 'top',
                  }}
                />
                <TouchableOpacity
                  onPress={submitRating}
                  disabled={saving}
                  activeOpacity={0.7}
                  style={{
                    backgroundColor: '#007AFF',
                    borderRadius: 12,
                    minHeight: 40,
                    paddingVertical: 14,
                    paddingHorizontal: 20,
                    alignItems: 'center',
                    justifyContent: 'center',
                    opacity: saving ? 0.65 : 1,
                  }}
                >
                  <Text style={{ fontFamily: 'Nunito_700Bold', fontSize: 16, color: '#ffffff' }}>
                    {saving ? t('common.loading') : t('gameOver.save_rating')}
                  </Text>
                </TouchableOpacity>
              </View>
            ) : null}

            {/* Primary action row */}
            <View style={{ flexDirection: 'row', gap: 12 }}>
              <TouchableOpacity
                onPress={() => {
                  Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium).catch(() => {});
                  onRetry();
                }}
                activeOpacity={0.85}
                style={{
                  flex: 1,
                  backgroundColor: '#007AFF',
                  borderRadius: 12,
                  minHeight: 40,
                  paddingVertical: 10,
                  paddingHorizontal: 16,
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
              >
                <Text style={{ fontFamily: 'Nunito_700Bold', fontSize: 16, color: '#ffffff' }}>
                  {t('gameOver.retry')}
                </Text>
              </TouchableOpacity>

              <TouchableOpacity
                onPress={() => {
                  Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light).catch(() => {});
                  handleExit();
                }}
                activeOpacity={0.75}
                style={{
                  flex: 1,
                  backgroundColor: '#e5e7eb',
                  borderRadius: 12,
                  minHeight: 40,
                  paddingVertical: 14,
                  paddingHorizontal: 20,
                  alignItems: 'center',
                  justifyContent: 'center',
                  borderWidth: 1,
                  borderColor: 'rgba(0,0,0,0.08)',
                }}
              >
                <Text style={{ fontFamily: 'Nunito_700Bold', fontSize: 16, color: '#374151' }}>
                  {t('gameOver.exit')}
                </Text>
              </TouchableOpacity>
            </View>

            {/* Share section */}
            {posted ? (
              <View style={{ alignItems: 'center', paddingVertical: 4, flexDirection: 'row', justifyContent: 'center', gap: 6 }}>
                <Ionicons name="checkmark-circle" size={15} color={colors.success} />
                <Text style={{ fontSize: 13, color: colors.success, fontFamily: 'Nunito_600SemiBold' }}>
                  {t('gameOver.posted')}
                </Text>
              </View>
            ) : !shareSectionOpen ? (
              <TouchableOpacity
                onPress={openShareSection}
                activeOpacity={0.6}
                style={{ alignItems: 'center', paddingVertical: 4 }}
              >
                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
                  <Ionicons name="people-outline" size={15} color={colors.textMuted} />
                  <Text style={{ fontSize: 13, color: colors.textMuted, fontFamily: 'Nunito_600SemiBold' }}>
                    {t('gameOver.share_result')}
                  </Text>
                </View>
              </TouchableOpacity>
            ) : (
              <View style={{ gap: 10 }}>
                {shareTextLoading ? (
                  <View style={{ alignItems: 'center', paddingVertical: 12 }}>
                    <ActivityIndicator size="small" color={colors.textMuted} />
                    <Text style={{ fontSize: 12, color: colors.textMuted, fontFamily: 'Nunito_400Regular', marginTop: 6 }}>
                      {t('gameOver.share_loading')}
                    </Text>
                  </View>
                ) : (
                  <TextInput
                    value={shareText}
                    onChangeText={setShareText}
                    multiline
                    numberOfLines={4}
                    style={{
                      backgroundColor: colors.surfaceElevated,
                      borderRadius: 12,
                      padding: 14,
                      fontSize: 14,
                      fontFamily: 'Nunito_400Regular',
                      color: colors.text,
                      minHeight: 100,
                      textAlignVertical: 'top',
                    }}
                  />
                )}

                {postError ? (
                  <Text style={{ fontSize: 12, color: colors.error, fontFamily: 'Nunito_600SemiBold', textAlign: 'center' }}>
                    {t('gameOver.post_error')}
                  </Text>
                ) : null}

                <View style={{ flexDirection: 'row', gap: 12 }}>
                  <TouchableOpacity
                    onPress={() => { setShareSectionOpen(false); setShareText(''); setPostError(false); }}
                    activeOpacity={0.7}
                    style={{
                      flex: 1,
                      backgroundColor: '#e5e7eb',
                      borderRadius: 12,
                      minHeight: 40,
                      paddingVertical: 14,
                      paddingHorizontal: 20,
                      alignItems: 'center',
                      justifyContent: 'center',
                      borderWidth: 1,
                      borderColor: 'rgba(0,0,0,0.08)',
                    }}
                  >
                    <Text style={{ fontFamily: 'Nunito_700Bold', fontSize: 16, color: '#374151' }}>
                      {t('common.cancel')}
                    </Text>
                  </TouchableOpacity>

                  <TouchableOpacity
                    onPress={submitCommunityPost}
                    disabled={!shareText.trim() || sharing || shareTextLoading}
                    activeOpacity={0.85}
                    style={{
                      flex: 1,
                      backgroundColor: '#007AFF',
                      borderRadius: 12,
                      minHeight: 40,
                      paddingVertical: 14,
                      paddingHorizontal: 20,
                      alignItems: 'center',
                      justifyContent: 'center',
                      flexDirection: 'row',
                      gap: 6,
                      opacity: sharing || !shareText.trim() || shareTextLoading ? 0.55 : 1,
                    }}
                  >
                    {sharing ? (
                      <ActivityIndicator size="small" color="#ffffff" />
                    ) : (
                      <Ionicons name="paper-plane-outline" size={16} color="#ffffff" />
                    )}
                    <Text style={{ fontFamily: 'Nunito_700Bold', fontSize: 16, color: '#ffffff' }}>
                      {t('gameOver.post_to_community')}
                    </Text>
                  </TouchableOpacity>
                </View>
              </View>
            )}
          </ScrollView>
        </Animated.View>
      </View>
    </Modal>
  );
}