import { useEffect, useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Stack } from 'expo-router';
import { StatusBar } from 'expo-status-bar';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { QueryClientProvider } from '@tanstack/react-query';
import { queryClient } from '@/lib/queryClient';
import { getDb, getSetting, setSetting, syncPassagesFromServer } from '@/db/local';
import { seedPassagesIfNeeded } from '@/db/seed';
import { api } from '@/api/client';
import * as SecureStore from 'expo-secure-store';
import { getStoredUser } from '@/lib/auth';
import { AUTH_TOKEN_KEY } from '@/constants';
import { AuthContext } from '@/lib/authContext';
import { Colors, Typography } from '@/theme';
import LoginScreen from '@/screens/LoginScreen';
import type { AuthUser } from '@/types';

export default function RootLayout() {
  const [ready, setReady] = useState(false);
  const [seedProgress, setSeedProgress] = useState<number | null>(null);
  const [user, setUser] = useState<AuthUser | null | undefined>(undefined);

  useEffect(() => {
    async function init() {
      await getDb();
      try {
        await seedPassagesIfNeeded((pct) => setSeedProgress(pct));
      } catch (err) {
        console.error('[seed] failed:', err);
      }
      const stored = await getStoredUser();
      if (stored) {
        const token = await SecureStore.getItemAsync(AUTH_TOKEN_KEY);
        if (token) {
          setUser(stored);
          // One-time server sync to pick up passages not in the bundle
          const alreadySynced = await getSetting('passages_server_synced');
          if (!alreadySynced) {
            try {
              const inserted = await syncPassagesFromServer(
                () => api.get('/api/mobile/passages') as any,
              );
              if (inserted >= 0) await setSetting('passages_server_synced', '1');
            } catch {
              // Offline at launch — will retry next time this branch runs
            }
          }
        } else {
          setUser(null);
        }
      } else {
        setUser(null);
      }
      setReady(true);
    }
    init().catch(console.error);
  }, []);

  if (!ready) {
    return (
      <View style={styles.splash}>
        <Text style={styles.splashTitle}>ClassicsLens</Text>
        {seedProgress !== null ? (
          <>
            <Text style={styles.splashSub}>Loading passages… {seedProgress}%</Text>
            <View style={styles.progressBar}>
              <View style={[styles.progressFill, { width: `${seedProgress}%` }]} />
            </View>
          </>
        ) : (
          <Text style={styles.splashSub}>Starting…</Text>
        )}
      </View>
    );
  }

  if (!user) {
    return (
      <>
        <StatusBar style="light" />
        <LoginScreen onLogin={(u) => setUser(u)} />
      </>
    );
  }

  return (
    <AuthContext.Provider value={{ user, setUser }}>
      <GestureHandlerRootView style={{ flex: 1 }}>
        <QueryClientProvider client={queryClient}>
          <StatusBar style="auto" />
          <Stack screenOptions={{ headerShown: false }}>
            <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
            <Stack.Screen
              name="read/[id]"
              options={{
                headerShown: true,
                headerTitle: '',
                headerBackTitle: 'Back',
                presentation: 'card',
              }}
            />
            <Stack.Screen name="+not-found" />
          </Stack>
        </QueryClientProvider>
      </GestureHandlerRootView>
    </AuthContext.Provider>
  );
}

const styles = StyleSheet.create({
  splash: {
    flex: 1,
    backgroundColor: Colors.primary,
    alignItems: 'center',
    justifyContent: 'center',
    gap: 16,
    padding: 40,
  },
  splashTitle: {
    fontSize: 32,
    fontWeight: '700',
    color: Colors.parchment,
    letterSpacing: 1,
  },
  splashSub: {
    fontSize: Typography.size.sm,
    color: Colors.parchment,
    opacity: 0.7,
  },
  progressBar: {
    width: '70%',
    height: 4,
    backgroundColor: 'rgba(255,255,255,0.2)',
    borderRadius: 2,
    overflow: 'hidden',
  },
  progressFill: {
    height: '100%',
    backgroundColor: Colors.parchment,
    borderRadius: 2,
  },
});