vfxreview/components/schedule/ScheduleTaskBlock.tsx

"use client";

import { useDraggable } from "@dnd-kit/core";
import {
  format,
  isAfter,
  parseISO,
} from "date-fns";
import { useRouter } from "next/navigation";
import { cn } from "@/lib/utils";
import { CalendarDays, Clock, ExternalLink, CalendarOff } from "lucide-react";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";
import { TaskStatus, TaskType } from "@prisma/client";
import {
  ScheduleTask,
  ActiveDragData,
} from "@/app/(dashboard)/schedule/SchedulePageClient";
import { TASK_TYPE_LABELS } from "@/components/tasks/TaskCard";
import { shotThumbnail } from "@/lib/shot-thumbnail";

const STATUS_STYLES: Record<
  TaskStatus,
  { bg: string; border: string; text: string; dot: string }
> = {
  TODO: {
    bg: "bg-zinc-800/80",
    border: "border-zinc-600/60",
    text: "text-zinc-300",
    dot: "bg-zinc-500",
  },
  IN_PROGRESS: {
    bg: "bg-blue-900/50",
    border: "border-blue-600/60",
    text: "text-blue-200",
    dot: "bg-blue-400",
  },
  INTERNAL_REVIEW: {
    bg: "bg-purple-900/50",
    border: "border-purple-600/60",
    text: "text-purple-200",
    dot: "bg-purple-400",
  },
  CLIENT_REVIEW: {
    bg: "bg-amber-900/50",
    border: "border-amber-600/60",
    text: "text-amber-200",
    dot: "bg-amber-400",
  },
  CHANGES: {
    bg: "bg-orange-900/50",
    border: "border-orange-600/60",
    text: "text-orange-200",
    dot: "bg-orange-400",
  },
  DONE: {
    bg: "bg-emerald-900/50",
    border: "border-emerald-600/60",
    text: "text-emerald-200",
    dot: "bg-emerald-400",
  },
};

function toDate(val: string | null | undefined): Date | null {
  if (!val) return null;
  try {
    return parseISO(val);
  } catch {
    return new Date(val);
  }
}

interface ScheduleTaskBlockProps {
  task: ScheduleTask;
  dayIndex: number;
  duration: number;
  artistIndex: number;
  viewStart: Date;
  days: Date[];
  canEdit: boolean;
  isDragging: boolean;
  laneTop: number;
  taskHeight: number;
  onResizeMouseDown: (
    taskId: string,
    currentEndDate: string
  ) => (e: React.MouseEvent) => void;
  onUnschedule: (taskId: string) => void;
  dayWidth: number;
}

export function ScheduleTaskBlock({
  task,
  dayIndex,
  duration,
  canEdit,
  isDragging,
  laneTop,
  taskHeight,
  onResizeMouseDown,
  onUnschedule,
  dayWidth,
}: ScheduleTaskBlockProps) {
  const router = useRouter();
  const { attributes, listeners, setNodeRef, transform } = useDraggable({
    id: task.id,
    disabled: !canEdit,
    data: {
      type: "scheduled",
      taskId: task.id,
      duration,
    } as ActiveDragData,
  });

  const taskWidth = Math.max(20, (task.estimatedHours ?? 8) / 8 * dayWidth - 4);

  const style = {
    position: "absolute" as const,
    left: Math.max(0, dayIndex) * dayWidth + 2,
    width: taskWidth,
    top: laneTop,
    height: taskHeight,
    transform: transform
      ? `translate3d(${transform.x}px, ${transform.y}px, 0)`
      : undefined,
    zIndex: isDragging ? 10 : 1,
  };

  const statusStyle = STATUS_STYLES[task.status];
  const contextCode = task.shot?.shotCode ?? task.asset?.assetCode;
  const contextName = task.shot?.shotCode ?? task.asset?.name ?? task.title;
  const thumbnail = shotThumbnail(task.shot);

  const isOverdue =
    task.dueDate &&
    task.scheduledEndDate &&
    isAfter(
      toDate(task.scheduledEndDate)!,
      toDate(task.dueDate)!
    );

  const dueDate = toDate(task.dueDate);
  const tooNarrow = (task.estimatedHours ?? 8) < 3; // < 3h = too narrow for labels
  const tooShort = taskHeight < 16;

  return (
    <ContextMenu>
      <ContextMenuTrigger asChild>
        <Tooltip>
          <TooltipTrigger asChild>
        <div
          ref={setNodeRef}
          style={style}
          className={cn(
            "absolute rounded-md border flex items-center overflow-hidden select-none group",
            "transition-opacity duration-100",
            statusStyle.bg,
            statusStyle.border,
            isDragging && "opacity-30",
            canEdit && "cursor-grab active:cursor-grabbing",
            isOverdue && "ring-1 ring-red-500/50"
          )}
          {...listeners}
          {...attributes}
        >
          {/* Status dot */}
          <div
            className={cn(
              "shrink-0 w-1 self-stretch rounded-l-md",
              statusStyle.dot
            )}
          />

          {/* Thumbnail */}
          {thumbnail && !tooNarrow && (
            // eslint-disable-next-line @next/next/no-img-element
            <img
              src={thumbnail}
              alt=""
              className="shrink-0 h-full object-cover"
              style={{ width: taskHeight * 2.39, minWidth: 0 }}
            />
          )}

          {/* Content */}
          <div className="flex-1 min-w-0 flex items-center gap-1 overflow-hidden px-1">
            {!tooShort && (
              <span
                className={cn(
                  "text-[10px] font-mono font-semibold truncate shrink-0 max-w-[50%]",
                  statusStyle.text
                )}
              >
                {contextName}
              </span>
            )}
            {!tooNarrow && !tooShort && (
              <span className="text-[9px] text-zinc-400 truncate">
                {TASK_TYPE_LABELS[task.type as TaskType]}
              </span>
            )}
            {!tooNarrow && !tooShort && task.estimatedHours && (
              <span className="text-[9px] text-zinc-500 shrink-0 ml-auto">
                {task.estimatedHours}h
              </span>
            )}
          </div>

          {/* Overdue indicator */}
          {isOverdue && (
            <div className="shrink-0 w-1.5 h-1.5 rounded-full bg-red-400 mr-1" />
          )}

          {/* Resize handle */}
          {canEdit && task.scheduledEndDate && (
            <div
              className="absolute right-0 top-0 bottom-0 w-2 cursor-ew-resize flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
              onPointerDown={(e) => e.stopPropagation()}
              onMouseDown={onResizeMouseDown(task.id, task.scheduledEndDate)}
              onClick={(e) => e.stopPropagation()}
            >
              <div className="w-0.5 h-3/4 rounded-full bg-current opacity-50" />
            </div>
          )}
        </div>
      </TooltipTrigger>
      <TooltipContent
        side="top"
        className="bg-zinc-900 border-zinc-700 text-zinc-100 max-w-[240px]"
      >
        <div className="space-y-1">
          <div className="font-medium text-xs">
            {contextCode && (
              <span className="text-amber-400 mr-1">{contextCode}</span>
            )}
            {task.title}
          </div>
          <div className="text-[11px] text-zinc-400">
            {TASK_TYPE_LABELS[task.type as TaskType]} ·{" "}
            {task.project.code}
          </div>
          {task.scheduledStartDate && task.scheduledEndDate && (
            <div className="flex items-center gap-1 text-[11px] text-zinc-400">
              <CalendarDays className="h-3 w-3" />
              {format(toDate(task.scheduledStartDate)!, "MMM d")} →{" "}
              {format(toDate(task.scheduledEndDate)!, "MMM d")}
            </div>
          )}
          {task.estimatedHours && (
            <div className="flex items-center gap-1 text-[11px] text-zinc-400">
              <Clock className="h-3 w-3" />
              {task.estimatedHours}h estimated
            </div>
          )}
          {dueDate && (
            <div
              className={cn(
                "flex items-center gap-1 text-[11px]",
                isOverdue ? "text-red-400" : "text-zinc-400"
              )}
            >
              <CalendarDays className="h-3 w-3" />
              Due {format(dueDate, "MMM d")}
              {isOverdue && " — Late!"}
            </div>
          )}
        </div>
      </TooltipContent>
        </Tooltip>
      </ContextMenuTrigger>

      <ContextMenuContent className="bg-zinc-900 border-zinc-700 text-zinc-100 w-48">
        <ContextMenuItem
          className="gap-2 cursor-pointer focus:bg-zinc-800 focus:text-white"
          onSelect={() => router.push(`/tasks/${task.id}`)}
        >
          <ExternalLink className="h-3.5 w-3.5 text-zinc-400" />
          View Task
        </ContextMenuItem>
        {canEdit && (
          <>
            <ContextMenuSeparator className="bg-zinc-800" />
            <ContextMenuItem
              className="gap-2 cursor-pointer focus:bg-zinc-800 focus:text-red-400 text-red-400"
              onSelect={() => onUnschedule(task.id)}
            >
              <CalendarOff className="h-3.5 w-3.5" />
              Unschedule
            </ContextMenuItem>
          </>
        )}
      </ContextMenuContent>
    </ContextMenu>
  );
}