import { useState, useEffect } from "react";
import { Pencil, Trash2, Check, X, Plus } from "lucide-react";

export default function TodoList() {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState("");
  const [editingId, setEditingId] = useState(null);
  const [editText, setEditText] = useState("");

  useEffect(() => {
    fetchTodos();
  }, []);

  const fetchTodos = async () => {
    try {
      const response = await fetch('http://localhost:3000/api/LUTdMX/todos');
      const data = await response.json();
      setTodos(data.document || []);
    } catch (error) {
      console.error('Error fetching todos:', error);
    }
  };

  const addTodo = async (e) => {
    e.preventDefault();
    if (!newTodo.trim()) return;

    const todo = {
      text: newTodo,
      notes: "",
      completed: false,
    };

    try {
      await fetch('http://localhost:3000/api/LUTdMX/todos', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ document: todo }),
      });
      fetchTodos();
      setNewTodo("");
    } catch (error) {
      console.error('Error adding todo:', error);
    }
  };

  const toggleComplete = async (todo) => {
    try {
      await fetch(`http://localhost:3000/api/LUTdMX/todos`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          document: {
            _id: todo._id,
            ...todo,
            completed: !todo.completed
          }
        }),
      });
      fetchTodos();
    } catch (error) {
      console.error('Error updating todo:', error);
    }
  };

  const deleteTodo = async (id) => {
    try {
      await fetch(`http://localhost:3000/api/LUTdMX/todos`, {
        method: 'DELETE',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          document: { _id: id }
        }),
      });
      fetchTodos();
    } catch (error) {
      console.error('Error deleting todo:', error);
    }
  };

  const updateTodo = async (id) => {
    const todo = todos.find(t => t._id === id);
    if (!todo) return;

    try {
      await fetch(`http://localhost:3000/api/LUTdMX/todos`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          document: {
            ...todo,
            text: editText
          }
        }),
      });
      setEditingId(null);
      fetchTodos();
    } catch (error) {
      console.error('Error updating todo:', error);
    }
  };

  const updateNotes = async (todo, notes) => {
    try {
      await fetch(`http://localhost:3000/api/LUTdMX/todos`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          document: {
            ...todo,
            notes
          }
        }),
      });
      fetchTodos();
    } catch (error) {
      console.error('Error updating notes:', error);
    }
  };

  return (
    <div className="min-h-screen bg-gray-50 py-8">
      <div className="max-w-4xl mx-auto px-4">
        <h1 className="text-3xl font-bold text-gray-900 mb-8">Todo List</h1>
        
        <form onSubmit={addTodo} className="mb-8 flex gap-2">
          <input
            type="text"
            value={newTodo}
            onChange={(e) => setNewTodo(e.target.value)}
            placeholder="Add a new todo..."
            className="flex-1 rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 p-2"
          />
          <button
            type="submit"
            className="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 flex items-center gap-2"
          >
            <Plus size={20} /> Add
          </button>
        </form>

        <div className="space-y-4">
          {todos.map((todo) => (
            <div
              key={todo._id}
              className="bg-white rounded-lg shadow p-4 transition-all hover:shadow-md"
            >
              <div className="flex items-start gap-4">
                <button
                  onClick={() => toggleComplete(todo)}
                  className={`mt-1 w-5 h-5 rounded border flex items-center justify-center ${
                    todo.completed
                      ? "bg-green-500 border-green-500 text-white"
                      : "border-gray-300"
                  }`}
                >
                  {todo.completed && <Check size={16} />}
                </button>

                <div className="flex-1">
                  {editingId === todo._id ? (
                    <div className="flex gap-2">
                      <input
                        type="text"
                        value={editText}
                        onChange={(e) => setEditText(e.target.value)}
                        className="flex-1 rounded border-gray-300 p-1"
                      />
                      <button
                        onClick={() => updateTodo(todo._id)}
                        className="text-green-500 hover:text-green-600"
                      >
                        <Check size={20} />
                      </button>
                      <button
                        onClick={() => setEditingId(null)}
                        className="text-red-500 hover:text-red-600"
                      >
                        <X size={20} />
                      </button>
                    </div>
                  ) : (
                    <div className="flex items-center justify-between">
                      <span
                        className={`text-lg ${
                          todo.completed ? "line-through text-gray-500" : ""
                        }`}
                      >
                        {todo.text}
                      </span>
                      <div className="flex gap-2">
                        <button
                          onClick={() => {
                            setEditingId(todo._id);
                            setEditText(todo.text);
                          }}
                          className="text-gray-500 hover:text-gray-700"
                        >
                          <Pencil size={20} />
                        </button>
                        <button
                          onClick={() => deleteTodo(todo._id)}
                          className="text-red-500 hover:text-red-600"
                        >
                          <Trash2 size={20} />
                        </button>
                      </div>
                    </div>
                  )}

                  <textarea
                    value={todo.notes}
                    onChange={(e) => updateNotes(todo, e.target.value)}
                    placeholder="Add notes..."
                    className="mt-2 w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 min-h-[100px] p-2"
                  />
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}