task-team/apps/tasks/components/TaskCard.tsx

"use client";

import { useState, useRef } from "react";
import { Task } from "@/lib/api";
import { useTranslation } from "@/lib/i18n";
import Link from "next/link";
import { useSwipeable } from "react-swipeable";

interface TaskCardProps {
  task: Task;
  onComplete?: (taskId: string) => void;
  onAssign?: (taskId: string) => void;
}

function statusColor(status: string): string {
  switch (status) {
    case "todo":
    case "pending":     return "#F59E0B"; // yellow
    case "in_progress": return "#3B82F6"; // blue
    case "done":        return "#22C55E"; // green
    case "cancelled":   return "#6B7280"; // gray
    default:            return "#F59E0B";
  }
}

function userColor(userId: string): string {
  const colors = [
    "#3B82F6", "#8B5CF6", "#EC4899", "#F59E0B",
    "#10B981", "#06B6D4", "#F97316", "#6366F1",
  ];
  let hash = 0;
  for (let i = 0; i < userId.length; i++) {
    hash = ((hash << 5) - hash) + userId.charCodeAt(i);
    hash |= 0;
  }
  return colors[Math.abs(hash) % colors.length];
}

function isDueSoon(dateStr: string): boolean {
  const due = new Date(dateStr).getTime();
  const now = Date.now();
  return due - now <= 7 * 24 * 60 * 60 * 1000;
}

function isPast(dateStr: string): boolean {
  return new Date(dateStr).getTime() < Date.now();
}

function formatDate(dateStr: string): string {
  return new Date(dateStr).toLocaleDateString(undefined, { month: "short", day: "numeric" });
}

export default function TaskCard({ task, onComplete, onAssign }: TaskCardProps) {
  const { t } = useTranslation();
  const taskDone = task.status === "done";
  const [swipeOffset, setSwipeOffset] = useState(0);
  const [swiped, setSwiped] = useState(false);
  const cardRef = useRef<HTMLDivElement>(null);

  const SWIPE_THRESHOLD = 120;
  const assignees = task.assigned_to || [];
  const visibleAssignees = assignees.slice(0, 3);
  const groupColor = task.group_color;
  const sColor = statusColor(task.status);

  const swipeHandlers = useSwipeable({
    onSwiping: (e) => {
      if (e.dir === "Right" && !taskDone && onComplete) {
        setSwipeOffset(Math.min(e.deltaX, 160));
      }
    },
    onSwipedRight: (e) => {
      if (e.absX > SWIPE_THRESHOLD && !taskDone && onComplete) {
        setSwiped(true);
        setTimeout(() => { onComplete(task.id); }, 300);
      } else {
        setSwipeOffset(0);
      }
    },
    onSwiped: () => {
      if (!swiped) setSwipeOffset(0);
    },
    trackMouse: false,
    trackTouch: true,
    preventScrollOnSwipe: false,
    delta: 10,
  });

  const showCompleteHint = swipeOffset > 40;

  return (
    <div className="relative overflow-hidden" ref={cardRef} style={{ margin: "0 0 5px" }}>
      {/* Swipe background */}
      {onComplete && !taskDone && (
        <div
          className={`absolute inset-0 flex items-center pl-4 rounded-xl transition-colors ${
            swipeOffset > SWIPE_THRESHOLD ? "bg-green-500" : "bg-green-400/80"
          }`}
        >
          <div
            className={`flex items-center gap-1.5 text-white font-medium transition-opacity ${
              showCompleteHint ? "opacity-100" : "opacity-0"
            }`}
          >
            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
              <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
            </svg>
            <span className="text-xs">{t("tasks.status.done")}</span>
          </div>
        </div>
      )}

      <div
        {...swipeHandlers}
        style={{
          transform: `translateX(${swipeOffset}px)`,
          transition: swipeOffset === 0 ? "transform 0.3s ease" : "none",
        }}
      >
        <Link href={`/tasks/${task.id}`} className="block">
          <div
            style={{
              padding: "10px 14px",
              borderRadius: 10,
              background: "#13131A",
              border: `1px solid ${groupColor ? groupColor + "30" : "#1E1E2E"}`,
              borderLeft: `3px solid ${groupColor || "#2A2A3A"}`,
              cursor: "pointer",
              display: "flex",
              alignItems: "center",
              gap: 10,
              opacity: swiped ? 0 : 1,
              transition: swiped ? "opacity 0.3s" : undefined,
            }}
          >
            {/* LEFT: title + optional due date */}
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{
                fontSize: 14,
                fontWeight: 500,
                overflow: "hidden",
                textOverflow: "ellipsis",
                whiteSpace: "nowrap",
                color: "#E8E8F0",
                textDecoration: taskDone ? "line-through" : "none",
                opacity: taskDone ? 0.5 : 1,
              }}>
                {task.title}
              </div>
              {task.due_at && isDueSoon(task.due_at) && (
                <div style={{
                  fontSize: 11,
                  color: isPast(task.due_at) ? "#EF4444" : "#F59E0B",
                  marginTop: 2,
                }}>
                  {formatDate(task.due_at)}
                </div>
              )}
            </div>

            {/* RIGHT: avatars + big status dot */}
            <div style={{ display: "flex", alignItems: "center", gap: 6, flexShrink: 0 }}>
              {/* Avatars */}
              <div style={{ display: "flex", alignItems: "center" }}>
                {visibleAssignees.map((userId, i) => (
                  <div
                    key={userId}
                    title={userId}
                    style={{
                      width: 26, height: 26,
                      borderRadius: "50%",
                      marginLeft: i > 0 ? -8 : 0,
                      border: "2px solid #13131A",
                      background: userColor(userId),
                      display: "flex", alignItems: "center", justifyContent: "center",
                      fontSize: 10, fontWeight: 700, color: "white",
                      zIndex: 3 - i,
                      position: "relative",
                      flexShrink: 0,
                    }}
                  >
                    {userId.slice(0, 2).toUpperCase()}
                  </div>
                ))}

                {/* + add user button */}
                <div
                  onClick={(e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    if (onAssign) onAssign(task.id);
                  }}
                  title="Přidat uživatele"
                  style={{
                    width: 26, height: 26,
                    borderRadius: "50%",
                    marginLeft: visibleAssignees.length > 0 ? -8 : 0,
                    border: "2px dashed #3A3A5A",
                    background: "transparent",
                    cursor: "pointer",
                    display: "flex", alignItems: "center", justifyContent: "center",
                    fontSize: 14, color: "#4A4A6A",
                    position: "relative", zIndex: 0,
                    flexShrink: 0,
                  }}
                >
                  +
                </div>
              </div>

              {/* Big colored status dot */}
              <div
                title={t(`tasks.status.${task.status}`)}
                style={{
                  width: 14, height: 14,
                  borderRadius: "50%",
                  background: sColor,
                  flexShrink: 0,
                  boxShadow: `0 0 6px ${sColor}80`,
                }}
              />
            </div>
          </div>
        </Link>
      </div>
    </div>
  );
}