import { useEffect, useMemo, useState } from "react";

const STORAGE_KEY = "kanban.tasks.v1";

const COLUMNS = [
  { id: "todo", title: "To Do" },
  { id: "in-progress", title: "In Progress" },
  { id: "done", title: "Done" }
];

function loadTasks() {
  try {
    const stored = localStorage.getItem(STORAGE_KEY);
    return stored ? JSON.parse(stored) : [];
  } catch {
    return [];
  }
}

function createTask(title, description) {
  return {
    id: crypto.randomUUID(),
    title: title.trim(),
    description: description.trim(),
    status: "todo",
    createdAt: new Date().toISOString()
  };
}

export default function App() {
  const [tasks, setTasks] = useState(loadTasks);
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");

  useEffect(() => {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(tasks));
  }, [tasks]);

  const groupedTasks = useMemo(() => {
    return COLUMNS.reduce((acc, column) => {
      acc[column.id] = tasks.filter((task) => task.status === column.id);
      return acc;
    }, {});
  }, [tasks]);

  const addTask = (event) => {
    event.preventDefault();
    if (!title.trim()) {
      return;
    }
    setTasks((current) => [createTask(title, description), ...current]);
    setTitle("");
    setDescription("");
  };

  const updateTaskStatus = (taskId, direction) => {
    setTasks((current) =>
      current.map((task) => {
        if (task.id !== taskId) {
          return task;
        }
        const currentIndex = COLUMNS.findIndex((column) => column.id === task.status);
        const nextIndex = currentIndex + direction;
        if (nextIndex < 0 || nextIndex >= COLUMNS.length) {
          return task;
        }
        return { ...task, status: COLUMNS[nextIndex].id };
      })
    );
  };

  const removeTask = (taskId) => {
    setTasks((current) => current.filter((task) => task.id !== taskId));
  };

  return (
    <main className="app">
      <header className="header">
        <h1>Kanban Task Manager</h1>
        <p>All data stays in your browser via localStorage.</p>
      </header>

      <section className="create-task">
        <form onSubmit={addTask}>
          <input
            type="text"
            placeholder="Task title"
            value={title}
            onChange={(event) => setTitle(event.target.value)}
            aria-label="Task title"
          />
          <textarea
            placeholder="Task description (optional)"
            value={description}
            onChange={(event) => setDescription(event.target.value)}
            rows={3}
            aria-label="Task description"
          />
          <button type="submit">Add Task</button>
        </form>
      </section>

      <section className="board">
        {COLUMNS.map((column, columnIndex) => (
          <article key={column.id} className="column">
            <h2>{column.title}</h2>
            <div className="task-list">
              {groupedTasks[column.id]?.length ? (
                groupedTasks[column.id].map((task) => (
                  <div key={task.id} className="task">
                    <h3>{task.title}</h3>
                    {task.description && <p>{task.description}</p>}
                    <div className="task-actions">
                      <button
                        type="button"
                        onClick={() => updateTaskStatus(task.id, -1)}
                        disabled={columnIndex === 0}
                      >
                        ←
                      </button>
                      <button
                        type="button"
                        onClick={() => updateTaskStatus(task.id, 1)}
                        disabled={columnIndex === COLUMNS.length - 1}
                      >
                        →
                      </button>
                      <button type="button" className="danger" onClick={() => removeTask(task.id)}>
                        Delete
                      </button>
                    </div>
                  </div>
                ))
              ) : (
                <p className="empty">No tasks yet.</p>
              )}
            </div>
          </article>
        ))}
      </section>
    </main>
  );
}