'use client'
import { FormEvent, useEffect, useState } from "react"
 
interface TodoProps {
    id: number,
    name: string,
    complete: boolean,
}
 
export default function TodoAppPage() {
 
    const [textInput, setTextInput] = useState("");
    const [todoList, setTodoList] = useState<TodoProps[]>([])
    const [errorMessage, setErrorMessage] = useState("");
    const [isMounted, setIsmounted] = useState(false);
 
    const handleAddTask = (e: FormEvent) => {
        e.preventDefault();
        
        setErrorMessage("");
        if (textInput === "") {
            setErrorMessage("Please type something to add to the list.");
            return;
        }
 
        const highestId = todoList.reduce((max, item) => {
            if (item.id > max) {
                return max = item.id;
            }
            return max
        }, 0)
 
        const newTask = {
            id: highestId + 1,
            name: textInput,
            complete: false,
        }
 
        setTodoList(prev => [...prev, newTask]);
        setTextInput("");
    }
 
    const sortList = (list: TodoProps[]) => {
        const updatedList = list.sort((a, b) => Number(a.complete) - Number(b.complete));
        setTodoList(updatedList);
        return updatedList;
    }
 
    const toggleCompletion = (id: number) => {
        const updatedList = todoList.map((item) => item.id === id ? {...item, complete: !item.complete} : item );
        setTodoList(sortList(updatedList));
    }
 
    useEffect(() => {
        setIsmounted(true);
    }, [])
 
    useEffect(() => {
        if (isMounted) {
            const saved = localStorage.getItem("savedTodoList");
            if (saved) {
                const parsed = JSON.parse(saved) as TodoProps[];
                setTodoList(parsed);
            }
        }
    }, [isMounted])
 
    useEffect(() => {
        if (isMounted) {
            localStorage.setItem("savedTodoList", JSON.stringify(todoList));
        }
    }, [todoList, isMounted])
 
    return (
        <div className="flex flex-col gap-4 w-full max-w-[500px] mx-auto py-8">
            <h1 className="font-semibold text-lg">My Todo App</h1>
            {errorMessage && <p className="text-amber-600 text-sm">{errorMessage}</p>}
            <form onSubmit={handleAddTask} className="flex w-full gap-2 justify-between items-center text-sm">
                <input
                    type="text"
                    value={textInput}
                    onChange={e => setTextInput(e.target.value)}
                    placeholder="Write task to add..."
                    className="w-full bg-gray-700 py-2 px-4"
                />
                <button
                    type="submit"
                    className="bg-sky-600 py-2 px-4 shrink-0 cursor-pointer"
                    >Add Task</button>
            </form>
 
            {todoList.length > 0 ? (
                <div>
                    {todoList.map((item) => (
                        <div key={item.id}
                            className="flex justify-between items-center w-full text-sm border-b-1 border-gray-700 py-2">
                            <p className="px-4">
                                {item.name}
                                <span 
                                    onClick={() => toggleCompletion(item.id)}
                                    className={`${item.complete ? "text-emerald-500" : "text-gray-600"} ml-2 cursor-pointer`}
                                >{item.complete ? "(completed)" : "(on-going)"}</span>
                            </p>
                            <button
                                className="bg-amber-600 py-2 px-4 shrink-0"
                                >Remove</button>
                        </div>
                    ))}
                </div>
            ) : <p className="text-gray-600 text-sm">There is no task to do</p>}
        </div>
    )
}

    const handleAddTask = (e: FormEvent) => {
        e.preventDefault();
        
        setErrorMessage("");
        if (textInput === "") {
            setErrorMessage("Please type something to add to the list.");
            return;
        }
 
        const highestId = todoList.reduce((max, item) => {
            if (item.id > max) {
                return max = item.id;
            }
            return max
        }, 0)
 
        const newTask = {
            id: highestId + 1,
            name: textInput,
            complete: false,
        }
 
        setTodoList(prev => [...prev, newTask]);
        setTextInput("");
    }

    const sortList = (list: TodoProps[]) => {
        const updatedList = list.sort((a, b) => Number(a.complete) - Number(b.complete));
        setTodoList(updatedList);
        return updatedList;
    }

    const toggleCompletion = (id: number) => {
        const updatedList = todoList.map((item) => item.id === id ? {...item, complete: !item.complete} : item );
        setTodoList(sortList(updatedList));
    }

    useEffect(() => {
        setIsmounted(true);
    }, [])
 
    useEffect(() => {
        if (isMounted) {
            const saved = localStorage.getItem("savedTodoList");
            if (saved) {
                const parsed = JSON.parse(saved) as TodoProps[];
                setTodoList(parsed);
            }
        }
    }, [isMounted])
 
    useEffect(() => {
        if (isMounted) {
            localStorage.setItem("savedTodoList", JSON.stringify(todoList));
        }
    }, [todoList, isMounted])