import { Text, View, StyleSheet, Pressable } from 'react-native';
import { useTranslation } from 'react-i18next';
import { color, radius, spacing, typography } from '../theme';

interface Props {
  error: Error;
  retry: () => void;
}

/**
 * Rendered by Expo Router's `ErrorBoundary` export when a route throws.
 */
export function ErrorBoundaryView({ error, retry }: Props) {
  const { t } = useTranslation();
  return (
    <View style={styles.root}>
      <Text style={styles.title}>{t('states.error')}</Text>
      <Text style={styles.body}>{t('states.unexpectedBody')}</Text>
      <Text style={styles.detail} numberOfLines={4}>
        {error.message}
      </Text>
      <Pressable style={styles.btn} onPress={retry} accessibilityRole="button">
        <Text style={styles.btnLabel}>{t('actions.retry')}</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  root: { flex: 1, backgroundColor: color.bg[0], padding: spacing[6], gap: spacing[3], justifyContent: 'center' },
  title: { fontSize: typography.scale.h2.size, fontWeight: '700', color: color.ink[900] },
  body: { fontSize: typography.scale.body.size, color: color.ink[700] },
  detail: { color: color.ink[500], fontSize: typography.scale.caption.size, marginTop: spacing[2] },
  btn: {
    marginTop: spacing[4], height: 52, borderRadius: radius.lg,
    backgroundColor: color.blue[600], alignItems: 'center', justifyContent: 'center',
  },
  btnLabel: { color: color.bg[0], fontWeight: '600' },
});