project-standalo-todo-super/app/components/TaskList.tsx

"use client";

import { useEffect, useState } from "react";
import TaskCard from "./TaskCard";

interface Task {
  id: string;
  name: string;
  description: string;
  points: number;
  type: "daily" | "quiz" | "survey" | "referral" | "learning";
  completed?: boolean;
}

export default function TaskList() {
  const [tasks, setTasks] = useState<Task[]>([]);
  const [loading, setLoading] = useState(true);
  const [filter, setFilter] = useState<string>("all");

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

  const fetchTasks = async () => {
    try {
      const token = localStorage.getItem("token");
      const response = await fetch("/api/tasks", {
        headers: { Authorization: `Bearer ${token}` },
      });
      const data = await response.json();
      if (data.success && data.data) {
        // API returns { available: Task[], completed: CompletedTask[] }
        const availableTasks = data.data.available || [];
        const completedIds = new Set((data.data.completed || []).map((c: { taskId: string }) => c.taskId));
        // Mark tasks as completed if in completed list
        const tasksWithStatus = availableTasks.map((task: Task) => ({
          ...task,
          completed: completedIds.has(task.id),
        }));
        setTasks(tasksWithStatus);
      } else if (Array.isArray(data)) {
        setTasks(data);
      }
    } catch (error) {
      console.error("Failed to fetch tasks:", error);
    } finally {
      setLoading(false);
    }
  };

  const handleComplete = async (taskId: string) => {
    try {
      const token = localStorage.getItem("token");
      const response = await fetch(`/api/tasks/${taskId}/complete`, {
        method: "POST",
        headers: { Authorization: `Bearer ${token}` },
      });
      if (response.ok) {
        setTasks(tasks.map(task =>
          task.id === taskId ? { ...task, completed: true } : task
        ));
      }
    } catch (error) {
      console.error("Failed to complete task:", error);
    }
  };

  const groupedTasks = tasks.reduce((acc, task) => {
    if (!acc[task.type]) {
      acc[task.type] = [];
    }
    acc[task.type].push(task);
    return acc;
  }, {} as Record<string, Task[]>);

  const filteredTasks = filter === "all"
    ? tasks
    : tasks.filter(task => task.type === filter);

  const categories = [
    { id: "all", label: "All Tasks", count: tasks.length },
    { id: "daily", label: "Daily", count: groupedTasks.daily?.length || 0 },
    { id: "quiz", label: "Quizzes", count: groupedTasks.quiz?.length || 0 },
    { id: "survey", label: "Surveys", count: groupedTasks.survey?.length || 0 },
    { id: "referral", label: "Referrals", count: groupedTasks.referral?.length || 0 },
    { id: "learning", label: "Learning", count: groupedTasks.learning?.length || 0 },
  ];

  if (loading) {
    return (
      <div className="flex items-center justify-center py-12">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-yellow-500"></div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="flex flex-wrap gap-2">
        {categories.map(category => (
          <button
            key={category.id}
            onClick={() => setFilter(category.id)}
            className={`px-4 py-2 rounded-lg font-medium transition ${
              filter === category.id
                ? "bg-gradient-to-r from-yellow-500 to-orange-500 text-white"
                : "bg-gray-800 text-gray-300 hover:bg-gray-700"
            }`}
          >
            {category.label}
            <span className="ml-2 text-xs opacity-75">({category.count})</span>
          </button>
        ))}
      </div>

      {filteredTasks.length === 0 ? (
        <div className="text-center py-12 bg-gray-800 rounded-xl border border-gray-700">
          <div className="text-gray-400 mb-2">
            <svg className="w-16 h-16 mx-auto opacity-50" fill="currentColor" viewBox="0 0 20 20">
              <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 000 2h6a1 1 0 100-2H7z" clipRule="evenodd" />
            </svg>
          </div>
          <p className="text-gray-400">No tasks available in this category</p>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {filteredTasks.map(task => (
            <TaskCard key={task.id} task={task} onComplete={handleComplete} />
          ))}
        </div>
      )}
    </div>
  );
}