managarten/maerchenzauber/apps/mobile/components/story/EndScreen.tsx

import React from 'react';
import { View, StyleSheet, Platform, useWindowDimensions } from 'react-native';
import { BlurView } from 'expo-blur';
import { LinearGradient } from 'expo-linear-gradient';
import Text from '../atoms/Text';
import Button from '../atoms/Button';
import { getTimeOfDay } from '../../src/utils/timeOfDay';
import { getTimeOfDayTheme } from '../../src/constants/timeOfDayThemes';

interface EndScreenProps {
  onEnd: () => void;
  onRestart: () => void;
  onArchive: () => void;
  mockTimeOfDay?: 'morning' | 'day' | 'evening' | 'night'; // For testing different times
}

export default function EndScreen({
  onEnd,
  onRestart,
  onArchive,
  mockTimeOfDay,
}: EndScreenProps) {
  // Get current time of day and theme
  const timeOfDay = mockTimeOfDay || getTimeOfDay();
  const theme = getTimeOfDayTheme(timeOfDay);

  // Responsive font sizes
  const { width: windowWidth } = useWindowDimensions();
  const isTablet = windowWidth >= 768;
  const titleFontSize = isTablet ? 60 : 42;
  const subtitleFontSize = isTablet ? 20 : 16;

  return (
    <View style={styles.container}>
      {/* Title with dynamic message */}
      <View style={styles.titleContainer}>
        <Text
          variant="header"
          color={theme.textColor}
          style={[styles.title, { fontSize: titleFontSize }]}
        >
          {theme.title}
        </Text>
        {theme.subtitle && (
          <Text
            variant="subheader"
            color={theme.textColor}
            style={[styles.subtitle, { fontSize: subtitleFontSize }]}
          >
            {theme.subtitle}
          </Text>
        )}
      </View>

      {/* Action Buttons */}
      <View style={styles.actionsContainer}>
        <View style={styles.glassButtonWrapper}>
          {Platform.OS === 'ios' ? (
            <BlurView intensity={80} tint="dark" style={styles.glassButton}>
              <LinearGradient
                colors={['rgba(255, 255, 255, 0.25)', 'rgba(255, 255, 255, 0.15)']}
                style={styles.buttonGradient}
              >
                <Button
                  title="Ende"
                  onPress={onEnd}
                  color="transparent"
                  variant="primary"
                  size="lg"
                  style={styles.button}
                  iconName="house"
                  iconSet="sf-symbols"
                  iconPosition="left"
                />
              </LinearGradient>
            </BlurView>
          ) : (
            <LinearGradient
              colors={['rgba(255, 255, 255, 0.25)', 'rgba(255, 255, 255, 0.15)']}
              style={styles.glassButtonAndroid}
            >
              <Button
                title="Ende"
                onPress={onEnd}
                color="transparent"
                variant="primary"
                size="lg"
                style={styles.button}
                iconName="house"
                iconSet="sf-symbols"
                iconPosition="left"
              />
            </LinearGradient>
          )}
        </View>

        <View style={styles.glassButtonWrapper}>
          {Platform.OS === 'ios' ? (
            <BlurView intensity={80} tint="dark" style={styles.glassButton}>
              <LinearGradient
                colors={['rgba(255, 255, 255, 0.18)', 'rgba(255, 255, 255, 0.08)']}
                style={styles.buttonGradient}
              >
                <Button
                  title="Nochmal"
                  onPress={onRestart}
                  color="transparent"
                  variant="primary"
                  size="lg"
                  style={styles.button}
                  iconName="arrow.clockwise"
                  iconSet="sf-symbols"
                  iconPosition="left"
                />
              </LinearGradient>
            </BlurView>
          ) : (
            <LinearGradient
              colors={['rgba(255, 255, 255, 0.18)', 'rgba(255, 255, 255, 0.08)']}
              style={styles.glassButtonAndroid}
            >
              <Button
                title="Nochmal"
                onPress={onRestart}
                color="transparent"
                variant="primary"
                size="lg"
                style={styles.button}
                iconName="arrow.clockwise"
                iconSet="sf-symbols"
                iconPosition="left"
              />
            </LinearGradient>
          )}
        </View>

        <View style={styles.glassButtonWrapper}>
          {Platform.OS === 'ios' ? (
            <BlurView intensity={80} tint="dark" style={styles.glassButton}>
              <LinearGradient
                colors={['rgba(255, 255, 255, 0.12)', 'rgba(255, 255, 255, 0.04)']}
                style={styles.buttonGradient}
              >
                <Button
                  title="Archivieren"
                  onPress={onArchive}
                  color="transparent"
                  variant="primary"
                  size="lg"
                  style={styles.button}
                  iconName="archivebox"
                  iconSet="sf-symbols"
                  iconPosition="left"
                />
              </LinearGradient>
            </BlurView>
          ) : (
            <LinearGradient
              colors={['rgba(255, 255, 255, 0.12)', 'rgba(255, 255, 255, 0.04)']}
              style={styles.glassButtonAndroid}
            >
              <Button
                title="Archivieren"
                onPress={onArchive}
                color="transparent"
                variant="primary"
                size="lg"
                style={styles.button}
                iconName="archivebox"
                iconSet="sf-symbols"
                iconPosition="left"
              />
            </LinearGradient>
          )}
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-between',
    alignItems: 'center',
    width: '100%',
    height: '100%',
  },
  titleContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 24,
    zIndex: 1,
  },
  title: {
    fontWeight: 'bold',
    textAlign: 'center',
    letterSpacing: 1,
    textShadowColor: 'rgba(0, 0, 0, 0.5)',
    textShadowOffset: { width: 0, height: 3 },
    textShadowRadius: 6,
    fontFamily: 'Grandstander_700Bold',
    marginBottom: 16,
  },
  subtitle: {
    textAlign: 'center',
    opacity: 0.95,
    fontWeight: '500',
    textShadowColor: 'rgba(0, 0, 0, 0.3)',
    textShadowOffset: { width: 0, height: 2 },
    textShadowRadius: 4,
  },
  actionsContainer: {
    width: '100%',
    paddingHorizontal: 24,
    marginBottom: 40,
    zIndex: 1,
  },
  glassButtonWrapper: {
    width: '100%',
    marginBottom: 12,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.3,
    shadowRadius: 8,
    elevation: 8,
  },
  glassButton: {
    borderRadius: 12,
    overflow: 'hidden',
    borderWidth: 1,
    borderColor: 'rgba(255, 255, 255, 0.18)',
    backgroundColor: 'transparent',
  },
  glassButtonAndroid: {
    borderRadius: 12,
    overflow: 'hidden',
    backgroundColor: 'rgba(0, 0, 0, 0.3)',
    borderWidth: 1,
    borderColor: 'rgba(255, 255, 255, 0.18)',
  },
  buttonGradient: {
    // Use alignSelf: 'stretch' instead of width: '100%' to prevent CoreGraphics crashes
    alignSelf: 'stretch',
    justifyContent: 'center',
    alignItems: 'center',
    minWidth: 200, // Ensure CoreGraphics has valid dimensions
  },
  button: {
    width: '100%',
    backgroundColor: 'transparent',
  },
});