import React, { useEffect } from 'react';
import { LogBox, StatusBar } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

LogBox.ignoreAllLogs();
import { TodoProvider, useTodoState } from './state';
import * as db from './db';
import MainScreen from './components/MainScreen';
import TodoForm from './components/TodoForm';

function AppContent() {
  const { state, dispatch } = useTodoState();

  useEffect(() => {
    (async () => {
      try {
        await db.initDb();
        const todos = await db.getAllTodos();
        dispatch({ type: 'TODOS_LOADED', rows: todos });
      } catch (err) {
        console.error('SQLite init error:', err);
      }
    })();
  }, []);

  return (
    <>
      <StatusBar barStyle="light-content" backgroundColor="#6200EE" />
      <MainScreen />
      {state.showForm && <TodoForm />}
    </>
  );
}

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <TodoProvider>
        <AppContent />
      </TodoProvider>
    </GestureHandlerRootView>
  );
}
