task-team/apps/tasks/app/tasks/page.tsx

"use client";

import { useEffect, useState, useCallback } from "react";
import { useRouter } from "next/navigation";
import { useAuth } from "@/lib/auth";
import { getTasks, getGroups, createTask, Task, Group } from "@/lib/api";
import TaskCard from "@/components/TaskCard";
import GroupSelector from "@/components/GroupSelector";
import TaskModal from "@/components/TaskModal";

type StatusFilter = "all" | "pending" | "in_progress" | "done" | "cancelled";

export default function TasksPage() {
  const { token } = useAuth();
  const router = useRouter();
  const [tasks, setTasks] = useState<Task[]>([]);
  const [groups, setGroups] = useState<Group[]>([]);
  const [loading, setLoading] = useState(true);
  const [selectedGroup, setSelectedGroup] = useState<string | null>(null);
  const [statusFilter, setStatusFilter] = useState<StatusFilter>("all");
  const [showForm, setShowForm] = useState(false);

  const loadData = useCallback(async () => {
    if (!token) return;
    setLoading(true);
    try {
      const params: Record<string, string> = {};
      if (selectedGroup) params.group_id = selectedGroup;
      if (statusFilter !== "all") params.status = statusFilter;

      const [tasksRes, groupsRes] = await Promise.all([
        getTasks(token, Object.keys(params).length > 0 ? params : undefined),
        getGroups(token),
      ]);
      setTasks(tasksRes.data || []);
      setGroups(groupsRes.data || []);
    } catch (err) {
      console.error("Chyba p\u0159i na\u010d\u00edt\u00e1n\u00ed:", err);
    } finally {
      setLoading(false);
    }
  }, [token, selectedGroup, statusFilter]);

  useEffect(() => {
    if (!token) {
      router.replace("/login");
      return;
    }
    loadData();
  }, [token, router, loadData]);

  async function handleCreateTask(data: Partial<Task>) {
    if (!token) return;
    await createTask(token, data);
    setShowForm(false);
    loadData();
  }

  const statusOptions: { value: StatusFilter; label: string }[] = [
    { value: "all", label: "V\u0161e" },
    { value: "pending", label: "\u010Cek\u00e1" },
    { value: "in_progress", label: "Prob\u00edh\u00e1" },
    { value: "done", label: "Hotovo" },
    { value: "cancelled", label: "Zru\u0161eno" },
  ];

  if (!token) return null;

  return (
    <div className="space-y-4 pb-24">
      {/* Group tabs */}
      <GroupSelector
        groups={groups}
        selected={selectedGroup}
        onSelect={setSelectedGroup}
      />

      {/* Status filter */}
      <div className="flex gap-1.5 overflow-x-auto scrollbar-hide pb-1">
        {statusOptions.map((opt) => (
          <button
            key={opt.value}
            onClick={() => setStatusFilter(opt.value)}
            className={`flex-shrink-0 px-3 py-1.5 rounded-lg text-xs font-medium transition-all min-h-[36px] ${
              statusFilter === opt.value
                ? "bg-gray-800 text-white dark:bg-white dark:text-gray-900"
                : "bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700"
            }`}
          >
            {opt.label}
          </button>
        ))}
      </div>

      {/* Task list */}
      {loading ? (
        <div className="flex justify-center py-12">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" />
        </div>
      ) : tasks.length === 0 ? (
        <div className="text-center py-16">
          <div className="text-5xl mb-4 opacity-50">&#9744;</div>
          <p className="text-muted text-lg font-medium">\u017d\u00e1dn\u00e9 \u00fakoly</p>
          <p className="text-muted text-sm mt-1">
            Vytvo\u0159te prvn\u00ed \u00fakol pomoc\u00ed tla\u010d\u00edtka +
          </p>
        </div>
      ) : (
        <div className="space-y-2">
          {tasks.map((task) => (
            <TaskCard key={task.id} task={task} />
          ))}
        </div>
      )}

      {/* Floating action button */}
      <button
        onClick={() => setShowForm(true)}
        className="fixed bottom-6 right-6 w-14 h-14 bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white rounded-full shadow-lg hover:shadow-xl active:shadow-md transition-all duration-200 flex items-center justify-center z-40 hover:scale-105 active:scale-95"
        aria-label="P\u0159idat \u00fakol"
      >
        <svg
          className="w-7 h-7"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          strokeWidth={2.5}
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            d="M12 4v16m8-8H4"
          />
        </svg>
      </button>

      {/* Add task modal */}
      {showForm && (
        <TaskModal
          groups={groups}
          onSubmit={handleCreateTask}
          onClose={() => setShowForm(false)}
        />
      )}
    </div>
  );
}