import { router } from 'expo-router';
import { StatusBar } from 'expo-status-bar';
import { useState } from 'react';
import { KeyboardAvoidingView, Platform, ScrollView, Text, TextInput, TouchableOpacity, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { getDB } from '../db';

export default function AddGoalScreen() {
    const insets = useSafeAreaInsets();
    const [name, setName] = useState('');
    const [targetAmount, setTargetAmount] = useState('');
    const [currentAmount, setCurrentAmount] = useState('');
    const [deadline, setDeadline] = useState('');

    const handleSave = async () => {
        if (!name || !targetAmount) {
            alert('Please fill in name and target amount');
            return;
        }

        try {
            const db = getDB();
            await db.runAsync(
                'INSERT INTO goals (name, target_amount, current_amount, deadline) VALUES (?, ?, ?, ?)',
                [name, parseFloat(targetAmount), currentAmount ? parseFloat(currentAmount) : 0, deadline]
            );
            router.back();
        } catch (error) {
            console.error(error);
            alert('Failed to save goal');
        }
    };

    return (
        <View className="flex-1 bg-gray-100 dark:bg-gray-900">
            <StatusBar style={Platform.OS === 'ios' ? 'light' : 'auto'} />

            <View className="bg-teal-600 pt-4 pb-6 px-6 rounded-b-3xl shadow-lg">
                <Text className="text-white text-2xl font-bold mt-8 text-center">New Goal</Text>
            </View>

            <KeyboardAvoidingView
                behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
                className="flex-1"
            >
                <ScrollView className="flex-1 px-6 pt-6">

                    {/* Target Amount Input */}
                    <View className="bg-white dark:bg-gray-800 rounded-2xl p-6 mb-4 shadow-sm">
                        <Text className="text-gray-500 text-sm mb-2">Target Amount</Text>
                        <View className="flex-row items-center">
                            <Text className="text-3xl font-bold text-gray-900 dark:text-white mr-2">€</Text>
                            <TextInput
                                className="flex-1 text-4xl font-bold text-gray-900 dark:text-white"
                                placeholder="1000.00"
                                keyboardType="numeric"
                                value={targetAmount}
                                onChangeText={setTargetAmount}
                                placeholderTextColor="#9CA3AF"
                            />
                        </View>
                    </View>

                    {/* Details Form */}
                    <View className="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-sm space-y-4">
                        <View>
                            <Text className="text-gray-500 text-sm mb-2">Goal Name</Text>
                            <TextInput
                                className="w-full bg-gray-50 dark:bg-gray-700 p-4 rounded-xl text-gray-900 dark:text-white"
                                placeholder="e.g. New Car, Vacation"
                                value={name}
                                onChangeText={setName}
                                placeholderTextColor="#9CA3AF"
                            />
                        </View>

                        <View className="mt-4">
                            <Text className="text-gray-500 text-sm mb-2">Current Savings (Optional)</Text>
                            <TextInput
                                className="w-full bg-gray-50 dark:bg-gray-700 p-4 rounded-xl text-gray-900 dark:text-white"
                                placeholder="0.00"
                                keyboardType="numeric"
                                value={currentAmount}
                                onChangeText={setCurrentAmount}
                                placeholderTextColor="#9CA3AF"
                            />
                        </View>

                        <View className="mt-4">
                            <Text className="text-gray-500 text-sm mb-2">Deadline (Optional)</Text>
                            <TextInput
                                className="w-full bg-gray-50 dark:bg-gray-700 p-4 rounded-xl text-gray-900 dark:text-white"
                                placeholder="YYYY-MM-DD"
                                value={deadline}
                                onChangeText={setDeadline}
                                placeholderTextColor="#9CA3AF"
                            />
                        </View>
                    </View>

                </ScrollView>

                <View className="p-6 bg-white dark:bg-gray-900 border-t border-gray-100 dark:border-gray-800" style={{ paddingBottom: Math.max(insets.bottom, 24) }}>
                    <TouchableOpacity
                        className="w-full bg-teal-600 py-4 rounded-2xl shadow-lg active:bg-teal-700"
                        onPress={handleSave}
                    >
                        <Text className="text-white text-center font-bold text-lg">Save Goal</Text>
                    </TouchableOpacity>
                </View>
            </KeyboardAvoidingView>
        </View>
    );
}