import { useState } from 'react';
import { useLocalStorage } from './hooks/useLocalStorage';

function TodoApp() {
  const [todos, setTodos] = useLocalStorage('todos', []);
  const [inputValue, setInputValue] = useState('');
  const [filter, setFilter] = useState('all');

  const addTodo = () => {
    if (inputValue.trim()) {
      setTodos([...todos, {
        id: Date.now(),
        text: inputValue,
        completed: false
      }]);
      setInputValue('');
    }
  };

  const toggleTodo = (id) => {
    setTodos(todos.map(todo => 
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    ));
  };

  const filteredTodos = todos.filter(todo => {
    if (filter === 'active') return !todo.completed;
    if (filter === 'completed') return todo.completed;
    return true;
  });

  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-900 to-indigo-900 p-4">
      {/* Todo App UI */}
      <div className="glass-card p-6 rounded-2xl max-w-md mx-auto">
        <h1 className="text-2xl font-bold mb-6 text-white">Todo App</h1>
        {/* Todo input */}
        <div className="flex mb-6">
          <input
            type="text"
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
            onKeyPress={(e) => e.key === 'Enter' && addTodo()}
            className="flex-1 px-4 py-2 rounded-l-lg bg-white/10 text-white placeholder-purple-200 focus:outline-none"
            placeholder="Add a new task..."
          />
          <button
            onClick={addTodo}
            className="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-r-lg text-white"
          >
            Add
          </button>
        </div>
        {/* Todo list */}
        <div className="space-y-2 mb-6">
          {filteredTodos.map(todo => (
            <div key={todo.id} className="flex items-center p-3 bg-white/10 rounded-lg">
              <input
                type="checkbox"
                checked={todo.completed}
                onChange={() => toggleTodo(todo.id)}
                className="mr-3 h-5 w-5 rounded focus:ring-purple-500"
              />
              <span className={`flex-1 ${todo.completed ? 'line-through text-purple-300' : 'text-white'}`}>
                {todo.text}
              </span>
            </div>
          ))}
        </div>
        {/* Filters */}
        <div className="flex justify-center space-x-4">
          {['all', 'active', 'completed'].map((f) => (
            <button
              key={f}
              onClick={() => setFilter(f)}
              className={`px-3 py-1 rounded-full text-sm ${filter === f ? 'bg-purple-600 text-white' : 'bg-white/10 text-purple-200'}`}
            >
              {f.charAt(0).toUpperCase() + f.slice(1)}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

export default TodoApp;