import { useRouter } from "expo-router";
import { useState } from "react";
import {
    ImageBackground,
    KeyboardAvoidingView,
    Platform,
    ScrollView,
    Text,
    TextInput,
    TouchableOpacity,
    View
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { styles } from "./styles";

const converterBgImage = require("../assets/images/todo.png");

export default function CoordinateConverter() {
  const router = useRouter();
  const [todos, setTodos] = useState<string[]>([]);
  const [newTodo, setNewTodo] = useState<string>("");

  const addTodo = () => {
    if (newTodo.trim().length > 0) {
      setTodos([...todos, newTodo.trim()]);
      setNewTodo("");
    }
  };

  const removeTodo = (index: number) => {
    const updatedTodos = todos.filter((_, i) => i !== index);
    setTodos(updatedTodos);
  };

  return (
    <View style={styles.converterScreenRoot}>
      <ImageBackground
        source={converterBgImage}
        style={styles.converterBackgroundImage}
        resizeMode="cover"
      >
        <View style={styles.converterBackgroundOverlay} />
      </ImageBackground>

      <SafeAreaView style={styles.converterContentWrapper}>
        <KeyboardAvoidingView
          style={styles.converterContainer}
          behavior={Platform.OS === "ios" ? "padding" : "height"}
        >
          <ScrollView contentContainerStyle={styles.converterScrollContent}>
            {/* Custom Back Button */}
            <TouchableOpacity
              onPress={() => router.back()}
              style={styles.backButton}
            >
              <Text style={styles.backButtonText}>← Go Back</Text>
            </TouchableOpacity>

            <Text style={styles.converterTitle}>Todo List</Text>

            {/* Todo Input Section */}
            <View style={styles.todoInputContainer}>
              <TextInput
                style={styles.todoInputField}
                placeholder="Add a new todo..."
                placeholderTextColor="#666"
                value={newTodo}
                onChangeText={setNewTodo}
                onSubmitEditing={addTodo}
              />
              <TouchableOpacity onPress={addTodo} style={styles.addTodoButton}>
                <Text style={styles.addTodoButtonText}>Add</Text>
              </TouchableOpacity>
            </View>

            {/* Todo List Display */}
            <View style={styles.todoListContainer}>
              {todos.length === 0 ? (
                <Text style={styles.placeholderText}>
                  Your todo list is empty. Add some tasks!
                </Text>
              ) : (
                todos.map((todo, index) => (
                  <View key={index} style={styles.todoItem}>
                    <Text style={styles.todoText}>{todo}</Text>
                    <TouchableOpacity
                      onPress={() => removeTodo(index)}
                      style={styles.removeTodoButton}
                    >
                      <Text style={styles.removeTodoButtonText}>X</Text>
                    </TouchableOpacity>
                  </View>
                ))
              )}
            </View>
          </ScrollView>
        </KeyboardAvoidingView>
      </SafeAreaView>
    </View>
  );
}