import { useState, useEffect } from "react";
import { Moon, Sun, Plus, Trash2, Edit, Check, X, Filter } from "lucide-react";

export default function TaskApp() {
  const [darkMode, setDarkMode] = useState(false);
  const [tasks, setTasks] = useState([
    { id: 1, text: "Complete project proposal", completed: true, createdAt: new Date() },
    { id: 2, text: "Schedule team meeting", completed: false, createdAt: new Date() },
    { id: 3, text: "Research new technologies", completed: false, createdAt: new Date() },
    { id: 4, text: "Prepare presentation slides", completed: false, createdAt: new Date() }
  ]);
  const [newTask, setNewTask] = useState("");
  const [editingId, setEditingId] = useState(null);
  const [editText, setEditText] = useState("");
  const [filter, setFilter] = useState("all"); // all, active, completed

  // Toggle dark mode
  useEffect(() => {
    if (darkMode) {
      document.documentElement.classList.add("dark");
    } else {
      document.documentElement.classList.remove("dark");
    }
  }, [darkMode]);

  // Add a new task
  const addTask = () => {
    if (newTask.trim() !== "") {
      const newTaskItem = {
        id: Date.now(),
        text: newTask,
        completed: false,
        createdAt: new Date()
      };
      setTasks([...tasks, newTaskItem]);
      setNewTask("");
    }
  };

  // Handle key press in the input field
  const handleKeyPress = (e) => {
    if (e.key === "Enter") {
      addTask();
    }
  };

  // Toggle task completion status
  const toggleComplete = (id) => {
    setTasks(
      tasks.map(task =>
        task.id === id ? { ...task, completed: !task.completed } : task
      )
    );
  };

  // Delete a task
  const deleteTask = (id) => {
    setTasks(tasks.filter(task => task.id !== id));
  };

  // Start editing a task
  const startEdit = (id, text) => {
    setEditingId(id);
    setEditText(text);
  };

  // Save edited task
  const saveEdit = () => {
    if (editText.trim() !== "") {
      setTasks(
        tasks.map(task =>
          task.id === editingId ? { ...task, text: editText } : task
        )
      );
      setEditingId(null);
    }
  };

  // Cancel editing
  const cancelEdit = () => {
    setEditingId(null);
  };

  // Filter tasks based on current filter
  const filteredTasks = tasks.filter(task => {
    if (filter === "active") return !task.completed;
    if (filter === "completed") return task.completed;
    return true; // "all" filter
  });

  return (
    <div className={`min-h-screen transition-colors duration-200 ${darkMode ? 'bg-gray-900 text-white' : 'bg-gray-50 text-gray-900'}`}>
      <div className="container mx-auto max-w-2xl p-4">
        {/* Header */}
        <header className="flex justify-between items-center mb-8 pt-4">
          <h1 className="text-3xl font-bold text-indigo-600 dark:text-indigo-400">TaskMaster</h1>
          <button
            onClick={() => setDarkMode(!darkMode)}
            className="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
            aria-label={darkMode ? "Switch to light mode" : "Switch to dark mode"}
          >
            {darkMode ? <Sun size={20} /> : <Moon size={20} />}
          </button>
        </header>

        {/* Add Task Form */}
        <div className={`flex mb-6 p-4 rounded-lg shadow-md ${darkMode ? 'bg-gray-800' : 'bg-white'}`}>
          <input
            type="text"
            value={newTask}
            onChange={(e) => setNewTask(e.target.value)}
            onKeyPress={handleKeyPress}
            placeholder="Add a new task..."
            className={`flex-grow px-4 py-2 mr-2 rounded-md border focus:outline-none focus:ring-2 focus:ring-indigo-500 ${
              darkMode 
                ? 'bg-gray-700 border-gray-600 text-white' 
                : 'bg-gray-50 border-gray-300 text-gray-900'
            }`}
          />
          <button
            onClick={addTask}
            className="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition-colors flex items-center"
          >
            <Plus size={18} className="mr-1" /> Add
          </button>
        </div>

        {/* Filter Controls */}
        <div className="flex justify-between items-center mb-4">
          <div className="text-sm font-medium">
            {tasks.length} {tasks.length === 1 ? 'task' : 'tasks'} • {tasks.filter(t => t.completed).length} completed
          </div>
          <div className="flex items-center">
            <Filter size={16} className="mr-2 text-gray-500 dark:text-gray-400" />
            <select
              value={filter}
              onChange={(e) => setFilter(e.target.value)}
              className={`text-sm rounded-md border px-2 py-1 focus:outline-none focus:ring-2 focus:ring-indigo-500 ${
                darkMode 
                  ? 'bg-gray-700 border-gray-600 text-white' 
                  : 'bg-gray-50 border-gray-300 text-gray-900'
              }`}
            >
              <option value="all">All</option>
              <option value="active">Active</option>
              <option value="completed">Completed</option>
            </select>
          </div>
        </div>

        {/* Task List */}
        <div className={`rounded-lg shadow-md overflow-hidden ${darkMode ? 'bg-gray-800' : 'bg-white'}`}>
          {filteredTasks.length === 0 ? (
            <div className="p-8 text-center text-gray-500 dark:text-gray-400">
              {filter === "all" 
                ? "No tasks yet. Add one above!" 
                : filter === "active" 
                  ? "No active tasks. Great job!" 
                  : "No completed tasks yet."}
            </div>
          ) : (
            <ul>
              {filteredTasks.map((task, index) => (
                <li 
                  key={task.id} 
                  className={`border-b last:border-b-0 ${
                    darkMode ? 'border-gray-700' : 'border-gray-200'
                  } ${task.completed ? 'bg-gray-50 dark:bg-gray-900/30' : ''}`}
                >
                  <div className="p-4 flex items-center">
                    {editingId === task.id ? (
                      // Edit mode
                      <div className="flex-grow flex items-center">
                        <input
                          type="text"
                          value={editText}
                          onChange={(e) => setEditText(e.target.value)}
                          className={`flex-grow px-3 py-1 mr-2 rounded-md border focus:outline-none focus:ring-2 focus:ring-indigo-500 ${
                            darkMode 
                              ? 'bg-gray-700 border-gray-600 text-white' 
                              : 'bg-gray-50 border-gray-300 text-gray-900'
                          }`}
                          autoFocus
                        />
                        <button
                          onClick={saveEdit}
                          className="p-1 text-green-600 hover:text-green-800 dark:text-green-400 dark:hover:text-green-300 mr-1"
                          aria-label="Save"
                        >
                          <Check size={18} />
                        </button>
                        <button
                          onClick={cancelEdit}
                          className="p-1 text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300"
                          aria-label="Cancel"
                        >
                          <X size={18} />
                        </button>
                      </div>
                    ) : (
                      // View mode
                      <>
                        <button
                          onClick={() => toggleComplete(task.id)}
                          className={`flex-shrink-0 w-5 h-5 mr-3 rounded-full border ${
                            task.completed 
                              ? 'bg-indigo-600 border-indigo-600 dark:bg-indigo-500 dark:border-indigo-500' 
                              : darkMode ? 'border-gray-600' : 'border-gray-300'
                          } flex items-center justify-center`}
                          aria-label={task.completed ? "Mark as incomplete" : "Mark as complete"}
                        >
                          {task.completed && <Check size={12} className="text-white" />}
                        </button>
                        <span 
                          className={`flex-grow ${
                            task.completed ? 'line-through text-gray-500 dark:text-gray-400' : ''
                          }`}
                        >
                          {task.text}
                        </span>
                        <div className="flex-shrink-0 flex">
                          <button
                            onClick={() => startEdit(task.id, task.text)}
                            className="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 mr-1"
                            aria-label="Edit task"
                          >
                            <Edit size={18} />
                          </button>
                          <button
                            onClick={() => deleteTask(task.id)}
                            className="p-1 text-gray-500 hover:text-red-600 dark:text-gray-400 dark:hover:text-red-400"
                            aria-label="Delete task"
                          >
                            <Trash2 size={18} />
                          </button>
                        </div>
                      </>
                    )}
                  </div>
                </li>
              ))}
            </ul>
          )}
        </div>
        
        {/* Footer */}
        <footer className="mt-8 text-center text-sm text-gray-500 dark:text-gray-400 py-4">
          <p>TaskMaster • Your simple task management solution</p>
        </footer>
      </div>
    </div>
  );
}