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 StatusBadge from "./StatusBadge";
import Link from "next/link";
import { useSwipeable } from "react-swipeable";

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

const PRIORITY_COLORS: Record<string, string> = {
  urgent: "#ef4444",
  high: "#f97316",
  medium: "#eab308",
  low: "#22c55e",
};

function isDone(status: string): boolean {
  return status === "done" || status === "completed";
}

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

  const SWIPE_THRESHOLD = 120;

  const swipeHandlers = useSwipeable({
    onSwiping: (e) => {
      if (e.dir === "Right" && !taskDone && onComplete) {
        const offset = Math.min(e.deltaX, 160);
        setSwipeOffset(offset);
      }
    },
    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 rounded-lg" ref={cardRef}>
      {/* Swipe background - green complete indicator */}
      {onComplete && !taskDone && (
        <div
          className={`absolute inset-0 flex items-center pl-4 rounded-lg 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 group">
          <div className={`relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden hover:shadow-md transition-all duration-150 active:scale-[0.99] ${swiped ? "opacity-0 transition-opacity duration-300" : ""}`}>
            {/* Priority line on left edge */}
            <div
              className="absolute left-0 top-0 bottom-0 w-0.5"
              style={{ backgroundColor: priorityColor }}
            />

            <div className="pl-3 pr-2.5 py-2 flex items-center gap-2">
              {/* Group icon */}
              {task.group_icon && (
                <span className="text-base flex-shrink-0 leading-none">{task.group_icon}</span>
              )}

              {/* Title - single line, truncated */}
              <h3
                className={`text-sm font-medium truncate flex-1 min-w-0 ${
                  taskDone ? "line-through text-muted" : ""
                }`}
              >
                {task.title}
              </h3>

              {/* Status badge */}
              <div className="flex-shrink-0">
                <StatusBadge status={task.status} size="sm" />
              </div>

              {/* Priority dot */}
              <div
                className="w-2 h-2 rounded-full flex-shrink-0"
                style={{ backgroundColor: priorityColor }}
                title={t(`tasks.priority.${task.priority}`)}
              />
            </div>
          </div>
        </Link>
      </div>
    </div>
  );
}