import '../global.css';

import React, { useEffect } from 'react';
import { Stack } from 'expo-router';
import { StatusBar } from 'expo-status-bar';
import { View } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { loadKeyFile, loadSettings } from '@/lib/storage';
import { setNodeUrl } from '@/lib/api';
import { useStore } from '@/lib/store';

export default function RootLayout() {
  const setKeyFile  = useStore(s => s.setKeyFile);
  const setSettings = useStore(s => s.setSettings);

  // Bootstrap: load key + settings from storage
  useEffect(() => {
    (async () => {
      const [kf, settings] = await Promise.all([loadKeyFile(), loadSettings()]);
      if (kf) setKeyFile(kf);
      setSettings(settings);
      setNodeUrl(settings.nodeUrl);
    })();
  }, []);

  return (
    <SafeAreaProvider>
      <View className="flex-1 bg-background">
        <StatusBar style="light" />
        <Stack
          screenOptions={{
            headerShown:   false,
            contentStyle:  { backgroundColor: '#0b1220' },
            animation:     'slide_from_right',
          }}
        />
      </View>
    </SafeAreaProvider>
  );
}