/**
 * ARIA Cockpit - Haupteinstiegspunkt
 *
 * Stefans primaere Schnittstelle zu ARIA.
 * Bottom-Tab-Navigation mit Chat und Einstellungen.
 */

import React, { useEffect } from 'react';
import { StatusBar, StyleSheet } from 'react-native';
import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import ChatScreen from './src/screens/ChatScreen';
import SettingsScreen from './src/screens/SettingsScreen';
import rvs from './src/services/rvs';

// --- Navigation ---

const Tab = createBottomTabNavigator();

// Dunkles Theme fuer die gesamte App
const DarkTheme = {
  ...DefaultTheme,
  dark: true,
  colors: {
    ...DefaultTheme.colors,
    primary: '#0096FF',
    background: '#0D0D1A',
    card: '#12122A',
    text: '#FFFFFF',
    border: '#1E1E2E',
    notification: '#FF3B30',
  },
};

// Tab-Icons (Text-basiert, kein Icon-Paket noetig)
const TAB_ICONS: Record<string, { active: string; inactive: string }> = {
  Chat: { active: '\uD83D\uDCAC', inactive: '\uD83D\uDCAC' },
  Einstellungen: { active: '\u2699\uFE0F', inactive: '\u2699\uFE0F' },
};

// --- App ---

const App: React.FC = () => {
  // Beim Start: gespeicherte RVS-Konfiguration laden und verbinden
  useEffect(() => {
    const initConnection = async () => {
      const config = await rvs.loadConfig();
      if (config) {
        rvs.setConfig(config);
        rvs.connect();
      }
    };
    initConnection();

    // Beim Beenden: Verbindung sauber trennen
    return () => {
      rvs.disconnect();
    };
  }, []);

  return (
    <>
      <StatusBar barStyle="light-content" backgroundColor="#0D0D1A" />
      <NavigationContainer theme={DarkTheme}>
        <Tab.Navigator
          screenOptions={({ route }) => ({
            headerStyle: styles.header,
            headerTitleStyle: styles.headerTitle,
            headerTintColor: '#FFFFFF',
            tabBarStyle: styles.tabBar,
            tabBarActiveTintColor: '#0096FF',
            tabBarInactiveTintColor: '#555570',
            tabBarIcon: ({ focused }) => {
              const icons = TAB_ICONS[route.name];
              return (
                <React.Fragment>
                  {/* Emoji als Icon */}
                  {React.createElement(
                    require('react-native').Text,
                    {
                      style: {
                        fontSize: 22,
                        opacity: focused ? 1 : 0.5,
                      },
                    },
                    icons ? (focused ? icons.active : icons.inactive) : '?',
                  )}
                </React.Fragment>
              );
            },
          })}
        >
          <Tab.Screen
            name="Chat"
            component={ChatScreen}
            options={{
              title: 'ARIA Chat',
              headerTitle: 'ARIA Cockpit',
            }}
          />
          <Tab.Screen
            name="Einstellungen"
            component={SettingsScreen}
            options={{
              title: 'Einstellungen',
            }}
          />
        </Tab.Navigator>
      </NavigationContainer>
    </>
  );
};

// --- Styles ---

const styles = StyleSheet.create({
  header: {
    backgroundColor: '#12122A',
    elevation: 0,
    shadowOpacity: 0,
    borderBottomWidth: 1,
    borderBottomColor: '#1E1E2E',
  },
  headerTitle: {
    color: '#FFFFFF',
    fontSize: 18,
    fontWeight: '700',
  },
  tabBar: {
    backgroundColor: '#12122A',
    borderTopColor: '#1E1E2E',
    borderTopWidth: 1,
    height: 60,
    paddingBottom: 6,
    paddingTop: 4,
  },
});

export default App;