TaskCard.tsx

'use client';

import Link from 'next/link';
import { PlayCircleIcon, CheckmarkCircle01Icon, LinkCircleIcon, Cancel01Icon, ArrowTurnBackwardIcon, Loading03Icon, BookOpen01Icon } from '@hugeicons/react';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@/components/ui/tooltip';
import type { Task, TaskStatus, ProofRequirement } from '@/types';

/** Map backend TaskStatus to badge variant name. */
const STATUS_BADGE_VARIANT: Record<TaskStatus, string> = {
  BACKLOG: 'backlog',
  READY: 'ready',
  IN_PROGRESS: 'in-progress',
  DONE: 'done',
  BLOCKED: 'blocked',
  FAILED: 'failed',
  MERGED: 'merged',
};

/** Human-readable status labels. */
const STATUS_LABEL: Record<TaskStatus, string> = {
  BACKLOG: 'Backlog',
  READY: 'Ready',
  IN_PROGRESS: 'In Progress',
  DONE: 'Done',
  BLOCKED: 'Blocked',
  FAILED: 'Failed',
  MERGED: 'Merged',
};

interface TaskCardProps {
  task: Task;
  selectionMode: boolean;
  selected: boolean;
  onToggleSelect: (taskId: string) => void;
  onClick: (taskId: string) => void;
  onExecute: (taskId: string) => void;
  onMarkReady: (taskId: string) => void;
  /** Optional — when omitted, IN_PROGRESS cards silently hide the Stop button. TaskBoardView always provides this. */
  onStop?: (taskId: string) => void;
  /** Optional — when omitted, FAILED cards silently hide the Reset button. TaskBoardView always provides this. */
  onReset?: (taskId: string) => void;
  isLoading?: boolean;
  /** Map of requirement ID → ProofRequirement for badge lookup (shared SWR cache from parent). */
  requirementsMap?: Map<string, ProofRequirement>;
}

export function TaskCard({
  task,
  selectionMode,
  selected,
  onToggleSelect,
  onClick,
  onExecute,
  onMarkReady,
  onStop,
  onReset,
  isLoading = false,
  requirementsMap,
}: TaskCardProps) {
  const reqIds = task.requirement_ids ?? [];
  const firstReq = reqIds.length > 0 ? requirementsMap?.get(reqIds[0]) : undefined;
  const overflowCount = reqIds.length > 1 ? reqIds.length - 1 : 0;
  return (
    <Card
      className="cursor-pointer transition-colors hover:border-primary/50 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring"
      onClick={() => onClick(task.id)}
      onKeyDown={(e) => {
        if (e.target !== e.currentTarget) return;
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          onClick(task.id);
        }
      }}
      role="button"
      tabIndex={0}
      aria-label={`View details for ${task.title}`}
    >
      <CardContent className="p-3">
        {/* Top row: checkbox (if selection mode) + status badge */}
        <div className="mb-2 flex items-center justify-between gap-2">
          <div className="flex items-center gap-2">
            {selectionMode && (
              <Checkbox
                checked={selected}
                onCheckedChange={() => onToggleSelect(task.id)}
                onClick={(e) => e.stopPropagation()}
                aria-label={`Select ${task.title}`}
              />
            )}
            <Badge
              variant={STATUS_BADGE_VARIANT[task.status] as never}
            >
              {STATUS_LABEL[task.status]}
            </Badge>
          </div>
          {task.depends_on.length > 0 && (
            <TooltipProvider>
              <Tooltip>
                <TooltipTrigger asChild>
                  <span className="flex cursor-default items-center gap-1 text-xs text-muted-foreground">
                    <LinkCircleIcon className="h-3.5 w-3.5" />
                    {task.depends_on.length}
                  </span>
                </TooltipTrigger>
                <TooltipContent>
                  Depends on {task.depends_on.length} task{task.depends_on.length !== 1 ? 's' : ''}. This task will become READY when all dependencies complete.
                </TooltipContent>
              </Tooltip>
            </TooltipProvider>
          )}
        </div>

        {/* Title */}
        <h4 className="truncate text-sm font-medium">{task.title}</h4>

        {/* Description snippet */}
        {task.description && (
          <p className="mt-1 line-clamp-2 text-xs text-muted-foreground">
            {task.description}
          </p>
        )}

        {/* Requirement badges */}
        {reqIds.length > 0 && (
          <div
            className="mt-2 flex flex-wrap items-center gap-1"
            onClick={(e) => e.stopPropagation()}
            onKeyDown={(e) => e.stopPropagation()}
          >
            <BookOpen01Icon className="h-3 w-3 shrink-0 text-muted-foreground" />
            <Link href={`/proof/${encodeURIComponent(reqIds[0])}`}>
              <Badge variant="outline" className="h-5 cursor-pointer gap-1 px-1.5 text-[10px] hover:bg-accent">
                <span className="font-mono">{reqIds[0].slice(0, 10)}</span>
                {firstReq?.glitch_type && (
                  <span className="text-muted-foreground">· {firstReq.glitch_type}</span>
                )}
              </Badge>
            </Link>
            {overflowCount > 0 && (
              <span className="text-[10px] text-muted-foreground">+{overflowCount}</span>
            )}
          </div>
        )}

        {/* Action buttons */}
        {(task.status === 'READY' || task.status === 'BACKLOG' || task.status === 'IN_PROGRESS' || task.status === 'FAILED') && (
          <div className="mt-2 flex gap-1">
            {isLoading ? (
              <span role="status" aria-label="Loading">
                <Loading03Icon className="h-3.5 w-3.5 animate-spin text-muted-foreground" />
              </span>
            ) : (
              <>
                {task.status === 'READY' && (
                  <Button
                    size="sm"
                    variant="ghost"
                    className="h-7 gap-1 px-2 text-xs"
                    onClick={(e) => {
                      e.stopPropagation();
                      onExecute(task.id);
                    }}
                  >
                    <PlayCircleIcon className="h-3.5 w-3.5" />
                    Execute
                  </Button>
                )}
                {task.status === 'BACKLOG' && (
                  <Button
                    size="sm"
                    variant="ghost"
                    className="h-7 gap-1 px-2 text-xs"
                    onClick={(e) => {
                      e.stopPropagation();
                      onMarkReady(task.id);
                    }}
                  >
                    <CheckmarkCircle01Icon className="h-3.5 w-3.5" />
                    Mark Ready
                  </Button>
                )}
                {task.status === 'IN_PROGRESS' && onStop && (
                  <Button
                    size="sm"
                    variant="ghost"
                    className="h-7 gap-1 px-2 text-xs text-destructive"
                    onClick={(e) => {
                      e.stopPropagation();
                      onStop(task.id);
                    }}
                  >
                    <Cancel01Icon className="h-3.5 w-3.5" />
                    Stop
                  </Button>
                )}
                {task.status === 'FAILED' && onReset && (
                  <Button
                    size="sm"
                    variant="ghost"
                    className="h-7 gap-1 px-2 text-xs"
                    onClick={(e) => {
                      e.stopPropagation();
                      onReset(task.id);
                    }}
                  >
                    <ArrowTurnBackwardIcon className="h-3.5 w-3.5" />
                    Reset
                  </Button>
                )}
              </>
            )}
          </div>
        )}
      </CardContent>
    </Card>
  );
}