import {
  Manrope_400Regular,
  Manrope_600SemiBold,
  Manrope_700Bold,
  Manrope_800ExtraBold,
  useFonts,
} from '@expo-google-fonts/manrope';
import NetInfo from '@react-native-community/netinfo';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister';
import { onlineManager, QueryClient } from '@tanstack/react-query';
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
import { Stack } from 'expo-router';
import { StatusBar } from 'expo-status-bar';
import { useEffect, useState } from 'react';
import { HorsLigneProvider } from '@/auth/session';
import { chargerFile } from '@/file/store';
import { rejouer } from '@/file/synchro';
import { useTokens } from '@/theme/tokens';

/** Racine de l'app (D1 validée) : le cache TanStack est PERSISTÉ dans
 *  AsyncStorage — les OT lus restent lisibles hors-ligne, y compris après
 *  redémarrage. NetInfo pilote onlineManager (pas de retry dans le vide)
 *  et le drapeau hors-ligne des écrans. */

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 60_000,
      gcTime: 7 * 24 * 3600_000, // une semaine de lecture hors-ligne
      retry: 1,
    },
  },
});

const persister = createAsyncStoragePersister({
  storage: AsyncStorage,
  key: 'siop.cache',
});

export default function RacineApp() {
  const t = useTokens();
  const [horsLigne, setHorsLigne] = useState(false);
  const [polices] = useFonts({
    Manrope_400Regular,
    Manrope_600SemiBold,
    Manrope_700Bold,
    Manrope_800ExtraBold,
  });

  useEffect(() => {
    // D1 : la file survit au redémarrage — on la recharge avant tout.
    void chargerFile().then(() => rejouer(queryClient));
    return NetInfo.addEventListener((etat) => {
      const enLigne = !!etat.isConnected;
      onlineManager.setOnline(enLigne);
      setHorsLigne(!enLigne);
      if (enLigne) void rejouer(queryClient); // le retour du réseau vide la file
    });
  }, []);

  if (!polices) return null;

  return (
    <PersistQueryClientProvider
      client={queryClient}
      persistOptions={{ persister, maxAge: 7 * 24 * 3600_000 }}
    >
      <HorsLigneProvider valeur={horsLigne}>
        <StatusBar style="auto" />
        <Stack
          screenOptions={{
            headerShown: false,
            contentStyle: { backgroundColor: t.fond },
          }}
        />
      </HorsLigneProvider>
    </PersistQueryClientProvider>
  );
}