stack/apps/web/src/components/tasks/TaskList.tsx

/* eslint-disable @typescript-eslint/no-unnecessary-condition */
import type { Task } from "@mosaic/shared";
import { TaskItem } from "./TaskItem";
import { getDateGroupLabel } from "@/lib/utils/date-format";

interface TaskListProps {
  tasks: Task[];
  isLoading: boolean;
}

export function TaskList({ tasks, isLoading }: TaskListProps): React.JSX.Element {
  if (isLoading) {
    return (
      <div className="flex justify-center items-center p-8">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
        <span className="ml-3 text-gray-600">Loading tasks...</span>
      </div>
    );
  }

  // Handle null/undefined tasks gracefully
  if (!tasks || tasks.length === 0) {
    return (
      <div className="text-center p-8 text-gray-500">
        <p className="text-lg">No tasks scheduled</p>
        <p className="text-sm mt-2">Your task list is clear</p>
      </div>
    );
  }

  // Group tasks by date
  const groupedTasks = tasks.reduce<Record<string, Task[]>>((groups, task) => {
    if (!task.dueDate) {
      return groups;
    }
    const label = getDateGroupLabel(task.dueDate);
    groups[label] ??= [];
    groups[label]?.push(task);
    return groups;
  }, {});

  const groupOrder = ["Today", "Tomorrow", "This Week", "Next Week", "Later"];

  return (
    <main className="space-y-6">
      {groupOrder.map((groupLabel) => {
        const groupTasks = groupedTasks[groupLabel];
        if (!groupTasks || groupTasks.length === 0) {
          return null;
        }

        return (
          <section key={groupLabel}>
            <h2 className="text-lg font-semibold text-gray-700 mb-3">{groupLabel}</h2>
            <ul className="space-y-2">
              {groupTasks.map((task) => (
                <li key={task.id}>
                  <TaskItem task={task} />
                </li>
              ))}
            </ul>
          </section>
        );
      })}
    </main>
  );
}