import { ScrollView, StyleSheet, Text, View } from 'react-native';

import { colors } from '../theme/colors';

interface Props {
  error: Error;
}

// Last-resort fallback. Renders whenever AppBootstrap's init effect throws or
// when the global JS error handler catches an unhandled exception. The
// env-diagnostic line ("env-ok" / "env-missing") makes future bug reports
// triageable from a single screenshot.
export function BootError({ error }: Props) {
  const envOk = Boolean(process.env.EXPO_PUBLIC_SUPABASE_URL);
  return (
    <ScrollView contentContainerStyle={styles.container}>
      <Text style={styles.title}>App-Start fehlgeschlagen</Text>
      <Text style={styles.message}>{error.message}</Text>
      <View style={styles.diagnostic}>
        <Text style={styles.diagnosticLabel}>EXPO_PUBLIC_SUPABASE_URL:</Text>
        <Text style={[styles.diagnosticValue, envOk ? styles.ok : styles.bad]}>
          {envOk ? 'env-ok' : 'env-missing'}
        </Text>
      </View>
      {error.stack && <Text style={styles.stack}>{error.stack}</Text>}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flexGrow: 1,
    backgroundColor: colors.bg,
    padding: 24,
    paddingTop: 64,
    gap: 12,
  },
  title: { color: colors.text, fontSize: 20, fontWeight: '700' },
  message: { color: colors.danger, fontSize: 14, lineHeight: 20 },
  diagnostic: { flexDirection: 'row', gap: 8, marginTop: 8 },
  diagnosticLabel: { color: colors.textMuted, fontSize: 12 },
  diagnosticValue: { fontSize: 12, fontWeight: '700' },
  ok: { color: colors.success },
  bad: { color: colors.danger },
  stack: {
    color: colors.textDim,
    fontSize: 11,
    fontFamily: 'Courier',
    marginTop: 16,
  },
});