import 
{ 
    StyleSheet, Text, View, KeyboardAvoidingView, 
    Platform, Pressable, TextInput, ScrollView
} from "react-native";
import { router, } from "expo-router";
import { useNotes } from "@/src/notes/NotesContext";
import { useState, useRef } from "react";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useHeaderHeight } from "@react-navigation/elements";



export default function NewNoteScreen() 
{
    const { addNote, errorMessage } = useNotes()
    const [title, setTitle] = useState("")
    const [content, setContent] = useState("")
    const [isSaving, setIsSaving] = useState(false)
    const [localErrorMessage, setLocalErrorMessage] = useState<string | null>(null)
    const insets = useSafeAreaInsets()
    const headerHeight = useHeaderHeight()
    const [contentHeight, setContentHeight] = useState(160)
    const scrollRef = useRef<ScrollView>(null)

    const onSave = async () => 
    {
        if(!title.trim() || !content.trim()) {
            setLocalErrorMessage("Title and content are required.")
            return
        }

        setIsSaving(true)
        setLocalErrorMessage(null)

        const wasSaved = await addNote(title, content)

        setIsSaving(false)

        if (wasSaved) {
            router.back()
        }
    }

    return (
      <KeyboardAvoidingView style={{ flex: 1}} behavior={Platform.OS === "ios" ? "padding" : undefined}
      keyboardVerticalOffset={headerHeight}>
        <View style={styles.container}>
            <ScrollView ref={scrollRef} contentContainerStyle={{ padding: 16, paddingBottom: 120, gap: 10}}
            keyboardShouldPersistTaps="handled">
                <Text style={styles.label}>Title</Text>
                <TextInput value={title} onChangeText={setTitle}
                placeholder="Give it a title..." style={styles.input}
                returnKeyType="next"/>

                <Text style={styles.label}>Content</Text>
                <TextInput value={content} onChangeText={setContent} placeholder="Write your note..."
                style={[styles.input, { height: Math.max(160, contentHeight) }]} multiline 
                textAlignVertical="top"
                onContentSizeChange={(e) => {setContentHeight(e.nativeEvent.contentSize.height); 
                    scrollRef.current?.scrollToEnd({ animated: true });
                }}/>

                {localErrorMessage ? (
                    <Text style={styles.errorText}>{localErrorMessage}</Text>
                ) : null}

                {!localErrorMessage && errorMessage ? (
                    <Text style={styles.errorText}>{errorMessage}</Text>
                ) : null}

            </ScrollView>
            <View>
                <Pressable disabled={isSaving} onPress={onSave}
                    style={[styles.saveFloating, { bottom: insets.bottom + 16 }]}>
                    <Text style={styles.saveFloatingText}>
                        {isSaving ? "Saving..." : "Save"}
                    </Text>
                </Pressable>
            </View>
        </View>
      </KeyboardAvoidingView>
    );
}

const styles = StyleSheet.create(
    { 
        container: { flex: 1, gap: 10 },
        label: { fontSize: 14, fontWeight: "600" },
        input: 
        { 
            borderWidth: 1, borderRadius: 7, 
            padding: 12, fontSize: 16
        },
        saveBtn:
        {
            borderRadius: 12,
            paddingVertical: 14, alignItems: "center",
            backgroundColor: "grey"
        },
        saveText: { color: "white", fontSize: 16, fontWeight: "700"},
        saveBar: 
        {
            position: "absolute",
            left: 0,
            right: 0,
            bottom: 0,
            paddingTop: 12,
            paddingHorizontal: 16,
            backgroundColor: "white",
            borderTopWidth: 1
        },
        saveFloating: 
        {
            position: "absolute",
            left: 16,
            right: 16,
            borderRadius: 12,
            paddingVertical: 14,
            alignItems: "center",
            backgroundColor: "#111"
        },
        saveFloatingText: 
        {
            color: "white",
            fontSize: 16,
            fontWeight: "700"
        },
        errorText: {
            color: "#c62828"
        },
    }
);