import React from 'react';
import { View, StyleSheet } from 'react-native';
import { Text, useTheme } from 'react-native-paper';
import SettingsScreen from '../src/screens/SettingsScreen';

/**
 * Écran d'installation initiale — affiché au premier lancement.
 * Partage le composant SettingsScreen avec un en-tête de bienvenue.
 * Après sauvegarde, le root layout redirige automatiquement vers les tabs.
 */
export default function SetupScreen() {
  const theme = useTheme();

  return (
    <View style={[styles.container, { backgroundColor: theme.colors.background }]}>
      <View style={styles.header}>
        <Text
          variant="headlineMedium"
          style={[styles.title, { color: theme.colors.primary }]}
        >
          n8n Pilot
        </Text>
        <Text
          variant="bodyMedium"
          style={{ color: theme.colors.onSurfaceVariant, textAlign: 'center' }}
        >
          Configurez votre instance n8n pour commencer
        </Text>
      </View>
      <SettingsScreen />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    paddingHorizontal: 24,
    paddingTop: 24,
    paddingBottom: 8,
    alignItems: 'center',
    gap: 4,
  },
  title: {
    fontWeight: '700',
  },
});