"use client"

import "react-native-gesture-handler"
import React, { useEffect, useState } from "react"
import { NavigationContainer } from "@react-navigation/native"
import { StatusBar } from "expo-status-bar"
import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context"
import * as SplashScreen from "expo-splash-screen"
import NetInfo from "@react-native-community/netinfo"
import { AuthProvider } from "./src/contexts/AuthContext"
import { SyncProvider } from "./src/contexts/SyncContext"
import { DeliveriesProvider } from "./src/contexts/DeliveriesContext"
import { OfflineProvider } from "./src/contexts/OfflineContext"
import { OfflineModeProvider } from "./src/contexts/OfflineModeContext"
import Navigation, { navigationRef } from "./src/navigation"
import { registerForPushNotificationsAsync } from "./src/services/notifications"
import { setupDatabase, storageInfo } from "./src/services/database"
import { I18nManager, Text, View, Platform } from "react-native"
import { COLORS } from "./src/constants/theme"
import FloatingPanicButton from './components/FloatingPanicButton'
import { GestureHandlerRootView } from 'react-native-gesture-handler'

// Forçar LTR (Left-to-Right) para evitar problemas com idiomas RTL
if (I18nManager.isRTL) {
	I18nManager.allowRTL(false)
	I18nManager.forceRTL(false)
}

// Garantir que o Text padrão não use fontes estranhas
(Text as any).defaultProps = (Text as any).defaultProps || {};
(Text as any).defaultProps.allowFontScaling = false;

// Keep the splash screen visible while we fetch resources
SplashScreen.preventAutoHideAsync()

export default function App() {
	const [appIsReady, setAppIsReady] = useState(false)
	const [isConnected, setIsConnected] = useState(true)
	const [dbInitError, setDbInitError] = useState<string | null>(null)

	useEffect(() => {
		async function prepare() {
			try {
				// Inicializar banco de dados
				await setupDatabase()
				console.log(`Banco de dados inicializado com sucesso usando ${storageInfo.type}`)

				// Registrar para notificações push
				await registerForPushNotificationsAsync()

				// Atraso artificial para uma tela de splash mais suave
				await new Promise((resolve) => setTimeout(resolve, 1000))
			} catch (e) {
				console.warn("Erro ao carregar recursos:", e)
				let msg = 'Erro desconhecido'
				if (e instanceof Error) msg = e.message
				setDbInitError(`Erro ao inicializar: ${msg}`)
			} finally {
				setAppIsReady(true)
			}
		}

		prepare()
	}, [])

	useEffect(() => {
		// Inscrever-se para atualizações de estado da rede
		const unsubscribe = NetInfo.addEventListener((state) => {
			setIsConnected(state.isConnected !== null ? state.isConnected : false)
		})

		return () => unsubscribe()
	}, [])

	const onLayoutRootView = React.useCallback(async () => {
		if (appIsReady) {
			await SplashScreen.hideAsync()
		}
	}, [appIsReady])

	const handlePanic = (location?: { latitude: number; longitude: number } | null) => {
		if (location && location.latitude && location.longitude) {
			alert(`Pânico acionado! Sua localização foi enviada para a central:\nLat: ${location.latitude}\nLng: ${location.longitude}`);
		} else {
			alert('Pânico acionado! Não foi possível obter sua localização.');
		}
	}

	if (!appIsReady) {
		return null
	}

	// Se houver um erro na inicialização do banco de dados, mostrar uma tela de erro
	if (dbInitError) {
		return (
			<View style={{ flex: 1, justifyContent: "center", alignItems: "center", padding: 20 }}>
				<Text style={{ fontSize: 18, fontWeight: "bold", marginBottom: 10, textAlign: "center" }}>
					Erro na inicialização do aplicativo
				</Text>
				<Text style={{ textAlign: "center", marginBottom: 20 }}>{dbInitError}</Text>
				<Text style={{ textAlign: "center" }}>Usando: {storageInfo.type}</Text>
			</View>
		)
	}

	return (
		<GestureHandlerRootView style={{ flex: 1 }}>
			<SafeAreaProvider onLayout={onLayoutRootView}>
				<AuthProvider>
					<OfflineModeProvider>
						<DeliveriesProvider>
							<SyncProvider>
								<OfflineProvider>
									<NavigationContainer ref={navigationRef}>
										{Platform.OS === 'android' ? (
											<SafeAreaView style={{ flex: 1 }} edges={['bottom']}>
												<Navigation />
											</SafeAreaView>
										) : (
											<Navigation />
										)}
										<StatusBar style="light" backgroundColor={COLORS.primary} />
									</NavigationContainer>
								</OfflineProvider>
							</SyncProvider>
						</DeliveriesProvider>
					</OfflineModeProvider>
				</AuthProvider>
				{/* <FloatingPanicButton onPanic={handlePanic} /> */}
			</SafeAreaProvider>
		</GestureHandlerRootView>
	)
}