import React, { useState } from 'react';
import { StyleSheet, Alert } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { router, useFocusEffect } from 'expo-router';
import { ThemedView } from '@/components/themed-view';
import { ThemedText } from '@/components/themed-text';
import { TaskList } from '@/components/task-list';
import { FabButton } from '@/components/fab-button';
import { Task } from '@/types/gtd';
import { taskService } from '@/services';

export default function TodayScreen() {
  const [todayTasks, setTodayTasks] = useState<Task[]>([]);

  useFocusEffect(
    React.useCallback(() => {
      loadTasks();
    }, [])
  );

  const loadTasks = async () => {
    try {
      const today = await taskService.getTodayTasks();
      setTodayTasks(today);
    } catch {
      Alert.alert('Error', 'Failed to load tasks');
    }
  };

  const handleToggleComplete = async (taskId: string) => {
    try {
      const task = todayTasks.find(t => t.id === taskId);
      if (!task) return;

      if (task.completed) {
        await taskService.uncompleteTask(taskId);
        await loadTasks();
      } else {
        setTodayTasks(prevTasks => 
          prevTasks.map(t => t.id === taskId ? { ...t, completed: true } : t)
        );
        
        await taskService.completeTask(taskId);
        
        setTimeout(() => {
          loadTasks();
        }, 1700);
      }
    } catch {
      Alert.alert('Error', 'Failed to update task');
      await loadTasks();
    }
  };

  const handleTaskPress = (task: Task) => {
    router.push({ pathname: '/modal', params: { taskId: task.id } });
  };

  const handleAddTask = () => {
    router.push('/modal');
  };

  return (
    <ThemedView style={styles.container}>
      <SafeAreaView style={styles.safeArea} edges={['top']}>
        <ThemedView style={styles.header}>
          <ThemedText type="title">Today</ThemedText>
          <ThemedText style={styles.date}>
            {new Date().toLocaleDateString('de-DE', { 
              weekday: 'long', 
              day: 'numeric', 
              month: 'long' 
            })}
          </ThemedText>
        </ThemedView>
        
        <TaskList
          tasks={todayTasks}
          onTaskPress={handleTaskPress}
          onToggleComplete={handleToggleComplete}
          emptyMessage="☀️ No tasks for today!"
        />
        
        <FabButton onPress={handleAddTask} />
      </SafeAreaView>
    </ThemedView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  safeArea: {
    flex: 1,
  },
  header: {
    paddingHorizontal: 16,
    paddingTop: 16,
    paddingBottom: 20,
  },
  date: {
    fontSize: 14,
    opacity: 0.6,
    marginTop: 4,
  },
});