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;
}

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

const PRIORITY_ICONS: Record<string, string> = {
  urgent: "\u25c6",
  high: "\u25b2",
  medium: "\u25cf",
  low: "\u25bd",
};

const STATUS_DOT_COLORS: Record<string, string> = {
  pending: "#9CA3AF",
  in_progress: "#F59E0B",
  done: "#22C55E",
  completed: "#22C55E",
  cancelled: "#EF4444",
};

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

function isInProgress(status: string): boolean {
  return status === "in_progress";
}

/** Generate a consistent color from a string (user ID) */
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];
}

/** Get initials from user ID (first 2 chars uppercase) */
function userInitials(userId: string): string {
  return userId.slice(0, 2).toUpperCase();
}

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

  const SWIPE_THRESHOLD = 120;
  const MAX_AVATARS = 3;
  const assignees = task.assigned_to || [];
  const visibleAssignees = assignees.slice(0, MAX_AVATARS);
  const extraCount = assignees.length - MAX_AVATARS;

  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" : ""}`}
            style={{ minHeight: 44 }}
          >
            <div className="px-3 py-2 flex items-center gap-2.5" style={{ minHeight: 44 }}>

              {/* LEFT: User avatars (overlapping circles) */}
              <div className="flex-shrink-0 flex items-center" style={{ minWidth: assignees.length > 0 ? 28 : 0 }}>
                {visibleAssignees.length > 0 && (
                  <div className="flex items-center" style={{ position: "relative" }}>
                    {visibleAssignees.map((userId, idx) => (
                      <div
                        key={userId}
                        style={{
                          width: 22, height: 22,
                          borderRadius: "50%",
                          background: userColor(userId),
                          border: "2px solid var(--background, #fff)",
                          display: "flex", alignItems: "center", justifyContent: "center",
                          fontSize: 9, fontWeight: 700, color: "#fff",
                          marginLeft: idx > 0 ? -8 : 0,
                          position: "relative", zIndex: MAX_AVATARS - idx,
                        }}
                        title={userId}
                      >
                        {userInitials(userId)}
                      </div>
                    ))}
                    {extraCount > 0 && (
                      <div
                        style={{
                          width: 22, height: 22,
                          borderRadius: "50%",
                          background: "var(--muted, #6B7280)",
                          border: "2px solid var(--background, #fff)",
                          display: "flex", alignItems: "center", justifyContent: "center",
                          fontSize: 8, fontWeight: 700, color: "#fff",
                          marginLeft: -8,
                          position: "relative", zIndex: 0,
                        }}
                      >
                        +{extraCount}
                      </div>
                    )}
                  </div>
                )}
              </div>

              {/* Status dot — big colored circle */}
              <div
                className={`flex-shrink-0 ${taskActive ? "status-dot-active" : ""}`}
                style={{
                  width: 14, height: 14,
                  borderRadius: "50%",
                  background: statusDotColor,
                  boxShadow: taskActive ? `0 0 6px ${statusDotColor}80` : "none",
                }}
                title={t(`tasks.status.${task.status}`)}
              />

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

              {/* RIGHT: Group icon */}
              {task.group_icon && (
                <span className="text-sm flex-shrink-0 leading-none opacity-70">{task.group_icon}</span>
              )}

              {/* RIGHT: Priority indicator */}
              <span
                className="flex-shrink-0 text-xs font-bold"
                style={{ color: priorityColor, lineHeight: 1 }}
                title={t(`tasks.priority.${task.priority}`)}
              >
                {priorityIcon}
              </span>
            </div>
          </div>
        </Link>
      </div>
    </div>
  );
}