import React from 'react';
import { View, Text, StyleSheet, SafeAreaView } from 'react-native';
import { Header } from '@/components/Header';
import { CategoryFilter } from '@/components/CategoryFilter';
import { TaskList } from '@/components/TaskList';
import { QuickAddBar } from '@/components/QuickAddBar';
import { useDatabase } from '@/hooks/useDatabase';
import { useSettings } from '@/theme';

export default function TasksScreen() {
  const { isReady } = useDatabase();
  const { theme } = useSettings();
  const [selectedCategory, setSelectedCategory] = React.useState<string>('all');
  const [selectionActive, setSelectionActive] = React.useState(false);

  if (!isReady) {
    return (
      <View style={[styles.container, { backgroundColor: theme.background }]}>
        <Text style={{ color: theme.textFaint }}>Loading...</Text>
      </View>
    );
  }

  return (
    <SafeAreaView style={[styles.container, { backgroundColor: theme.background }]}>
      <Header title="TODO" showLogo={true} />
      <CategoryFilter selected={selectedCategory} onSelect={setSelectedCategory} />
      <TaskList categoryId={selectedCategory} onSelectionChange={setSelectionActive} />
      <QuickAddBar />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});
