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, locale } = useTranslation();
  const groupColor = task.group_color || "#6b7280";
  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 dateLocale = locale === "ua" ? "uk-UA" : locale === "cs" ? "cs-CZ" : locale === "he" ? "he-IL" : "ru-RU";

  const swipeHandlers = useSwipeable({
    onSwiping: (e) => {
      // Only allow right swipe for complete gesture
      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-xl" ref={cardRef}>
      {/* Swipe background - green complete indicator */}
      {onComplete && !taskDone && (
        <div
          className={`absolute inset-0 flex items-center pl-5 rounded-xl transition-colors ${
            swipeOffset > SWIPE_THRESHOLD
              ? "bg-green-500"
              : "bg-green-400/80"
          }`}
        >
          <div
            className={`flex items-center gap-2 text-white font-medium transition-opacity ${
              showCompleteHint ? "opacity-100" : "opacity-0"
            }`}
          >
            <svg className="w-6 h-6" 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-sm">{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-xl overflow-hidden hover:shadow-lg transition-all duration-200 active:scale-[0.98] ${swiped ? "opacity-0 transition-opacity duration-300" : ""}`}>
            {/* Priority dot on left edge */}
            <div
              className="absolute left-0 top-0 bottom-0 w-1 rounded-l-xl"
              style={{ backgroundColor: priorityColor }}
            />

            {/* Group color accent bar on top (mobile) */}
            <div
              className="absolute top-0 left-1 right-0 h-0.5 sm:hidden"
              style={{ backgroundColor: groupColor }}
            />

            <div className="pl-4 pr-3 py-3">
              {/* Mobile: compact one-line layout */}
              <div className="flex items-center gap-2.5">
                {/* Group icon */}
                {task.group_icon && (
                  <span className="text-lg flex-shrink-0">{task.group_icon}</span>
                )}

                {/* Content - mobile compact */}
                <div className="flex-1 min-w-0">
                  {/* Title + status on one line on mobile */}
                  <div className="flex items-center gap-2">
                    <h3
                      className={`font-semibold text-[15px] leading-snug truncate flex-1 ${
                        taskDone ? "line-through text-muted" : ""
                      }`}
                    >
                      {task.title}
                    </h3>
                    <div className="flex-shrink-0 hidden sm:block">
                      <StatusBadge status={task.status} />
                    </div>
                  </div>

                  {/* Description - hidden on very small screens */}
                  {task.description && (
                    <p className="text-sm text-muted mt-0.5 line-clamp-1 sm:line-clamp-2 leading-relaxed">
                      {task.description}
                    </p>
                  )}

                  {/* Meta row */}
                  <div className="flex items-center gap-2 mt-1.5 flex-wrap">
                    <div className="sm:hidden">
                      <StatusBadge status={task.status} size="sm" />
                    </div>
                    {task.group_name && (
                      <span
                        className="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-medium text-white"
                        style={{ backgroundColor: groupColor }}
                      >
                        {task.group_name}
                      </span>
                    )}
                    {task.due_at && (
                      <span className="text-[11px] text-muted flex items-center gap-1">
                        <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                        </svg>
                        {new Date(task.due_at).toLocaleDateString(dateLocale)}
                      </span>
                    )}
                  </div>
                </div>

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