import React, { useEffect, useState } from 'react';
import { StatusBar } from 'expo-status-bar';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { ActivityIndicator, View, Text, TouchableOpacity } from 'react-native';
import DatabaseService from './src/services/DatabaseService';
import LoginScreen from './src/screens/LoginScreen';
import RegisterScreen from './src/screens/RegisterScreen';
import OnboardingScreen from './src/screens/OnboardingScreen';
import HomeScreen from './src/screens/HomeScreen';
import SearchScreen from './src/screens/SearchScreen';
import AlbumsScreen from './src/screens/AlbumsScreen';

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

/**
 * MainTabs - Bottom tab navigator for logged-in users
 * Tabs: Home (Library), Search, Albums
 */
function MainTabs({ route }) {
  const { userId } = route.params || {};

  return (
    <Tab.Navigator
      screenOptions={{
        headerShown: false,
        tabBarActiveTintColor: '#1a73e8',
        tabBarInactiveTintColor: '#5f6368',
        tabBarStyle: {
          backgroundColor: '#fff',
          borderTopColor: '#e0e0e0',
          borderTopWidth: 1,
          height: 56,
          paddingBottom: 6,
          paddingTop: 6,
        },
        tabBarLabelStyle: {
          fontSize: 11,
          fontWeight: '500',
        },
      }}
    >
      <Tab.Screen
        name="Photos"
        component={HomeScreen}
        initialParams={{ userId }}
        options={{
          tabBarLabel: 'Photos',
          tabBarIcon: ({ color }) => (
            <Text style={{ fontSize: 22, color }}>🖼️</Text>
          ),
        }}
      />
      <Tab.Screen
        name="Search"
        component={SearchScreen}
        initialParams={{ userId }}
        options={{
          tabBarLabel: 'Search',
          tabBarIcon: ({ color }) => (
            <Text style={{ fontSize: 22, color }}>🔍</Text>
          ),
        }}
      />
      <Tab.Screen
        name="Albums"
        component={AlbumsScreen}
        initialParams={{ userId }}
        options={{
          tabBarLabel: 'Albums',
          tabBarIcon: ({ color }) => (
            <Text style={{ fontSize: 22, color }}>📁</Text>
          ),
        }}
      />
    </Tab.Navigator>
  );
}

/**
 * AppNavigator - Root stack navigator
 * Handles auth flow (Login/Register/Onboarding) then MainTabs
 */
function AppNavigator() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: false,
      }}
    >
      <Stack.Screen name="Login" component={LoginScreen} />
      <Stack.Screen name="Register" component={RegisterScreen} />
      <Stack.Screen name="Onboarding" component={OnboardingScreen} />
      <Stack.Screen name="MainTabs" component={MainTabs} />
    </Stack.Navigator>
  );
}

export default function App() {
  const [isReady, setIsReady] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    initializeApp();
  }, []);

  const initializeApp = async () => {
    try {
      setError(null);
      await DatabaseService.initDatabase();
      setIsReady(true);
    } catch (err) {
      console.error('Database initialization failed:', err);
      setError(err.message || 'Database initialization failed');
      setIsReady(false);
    }
  };

  if (!isReady && !error) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#fff' }}>
        <ActivityIndicator size="large" color="#1a73e8" />
      </View>
    );
  }

  if (error) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 20, backgroundColor: '#fff' }}>
        <Text style={{ fontSize: 16, color: '#333', marginBottom: 12, textAlign: 'center' }}>
          {error}
        </Text>
        <TouchableOpacity
          onPress={initializeApp}
          style={{ backgroundColor: '#1a73e8', paddingHorizontal: 16, paddingVertical: 10, borderRadius: 6 }}
        >
          <Text style={{ color: '#fff', fontWeight: '600' }}>Retry</Text>
        </TouchableOpacity>
      </View>
    );
  }

  return (
    <>
      <NavigationContainer>
        <AppNavigator />
      </NavigationContainer>
      <StatusBar style="dark" backgroundColor="#fff" />
    </>
  );
}