import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'
import { useRouter, useLocalSearchParams } from 'expo-router'
import { SafeAreaView } from 'react-native-safe-area-context'
import { Ionicons } from '@expo/vector-icons'

export default function CheckEmailScreen() {
  const router = useRouter()
  const { email } = useLocalSearchParams<{ email: string }>()

  return (
    <SafeAreaView style={styles.safeArea}>
      <View style={styles.content}>
        <View style={styles.iconBox}>
          <Ionicons name="checkmark-circle" size={46} color="#15803D" />
        </View>

        <Text style={styles.title}>E-Mail pruefen</Text>
        <Text style={styles.body}>Wir haben einen Login-Link gesendet an:</Text>

        <View style={styles.emailBox}>
          <Text style={styles.emailText} numberOfLines={1}>{email}</Text>
        </View>

        <Text style={styles.hint}>
          Bitte oeffnen Sie den Link in Ihrer E-Mail, um sich anzumelden.
        </Text>

        <TouchableOpacity
          onPress={() => router.back()}
          style={styles.backBtn}
          activeOpacity={0.8}
        >
          <Ionicons name="chevron-back" size={16} color="#003B7E" />
          <Text style={styles.backText}>Andere E-Mail verwenden</Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: '#FFFFFF',
  },
  content: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 28,
  },
  iconBox: {
    width: 88,
    height: 88,
    backgroundColor: '#DCFCE7',
    borderRadius: 44,
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 24,
  },
  title: {
    fontSize: 24,
    fontWeight: '800',
    color: '#0F172A',
    textAlign: 'center',
    marginBottom: 10,
  },
  body: {
    fontSize: 14,
    color: '#64748B',
    textAlign: 'center',
    marginBottom: 6,
  },
  emailBox: {
    backgroundColor: '#F8FAFC',
    borderWidth: 1,
    borderColor: '#E2E8F0',
    borderRadius: 14,
    paddingHorizontal: 16,
    paddingVertical: 10,
    marginBottom: 16,
  },
  emailText: {
    fontSize: 15,
    fontWeight: '700',
    color: '#0F172A',
  },
  hint: {
    fontSize: 13,
    color: '#64748B',
    textAlign: 'center',
    lineHeight: 19,
    paddingHorizontal: 8,
  },
  backBtn: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
    marginTop: 28,
  },
  backText: {
    fontSize: 14,
    fontWeight: '700',
    color: '#003B7E',
  },
})