// ═══════════════════════════════════════════════════════════════════
// Plaaayground v2 — Board Card (Option A: Left Accent Line)
// Bible Section 9: Card Anatomy — category dot + title + menu + tasks + progress
// DD: Hover = shadow lift (CSS only). Press = scale 0.98 with spring.snappy.
// DD: Checkbox spring pulse on check. Inline edit task text.
// DD: 44px min touch targets. prefers-reduced-motion respected.
// Spatial canvas — no sortable deps, positioning handled by CanvasCard
// ═══════════════════════════════════════════════════════════════════

import { useState, memo } from "react";
import { motion, AnimatePresence } from "framer-motion";
import {
  MoreHorizontal,
  ChevronDown,
  ChevronUp,
  MessageSquare,
  Wrench,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { useBoardStore } from "@/stores/boardStore";
import { spring, useReducedMotion } from "@/lib/motion";
import { CATEGORY_HEX_COLORS } from "@/types/board";
import type { Card } from "@/types/board";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { TaskItem } from "./TaskItem";
import { AddTask } from "./AddTask";

// ── Constants ──────────────────────────────────────────────────

const CARD_WIDTH = 280;

const SHADOW_DEFAULT = "none";
const SHADOW_DRAG = "none";

// ── BoardCard ──────────────────────────────────────────────────

interface BoardCardProps {
  card: Card;
  isDragOverlay?: boolean;
  onAskAI?: (cardId: string) => void;
}

export const BoardCard = memo(function BoardCard({ card, isDragOverlay, onAskAI }: BoardCardProps) {
  const [expanded, setExpanded] = useState(false);
  const [pressed, setPressed] = useState(false);
  const toggleTask = useBoardStore((s) => s.toggleTask);
  const addTask = useBoardStore((s) => s.addTask);
  const removeCard = useBoardStore((s) => s.removeCard);
  const updateTaskText = useBoardStore((s) => s.updateTaskText);
  const removeTask = useBoardStore((s) => s.removeTask);
  const reducedMotion = useReducedMotion();

  const completedCount = card.tasks.filter((t) => t.completed).length;
  const totalCount = card.tasks.length;
  const allComplete = totalCount > 0 && completedCount === totalCount;
  const hasTools = card.tasks.some((t) => t.toolRecommendation);
  const categoryColor = CATEGORY_HEX_COLORS[card.category];

  // Visible tasks -- collapsed shows max 3, expanded shows all
  const visibleTasks = expanded ? card.tasks : card.tasks.slice(0, 3);

  // Progress percentage
  const progress = totalCount > 0 ? (completedCount / totalCount) * 100 : 0;

  return (
    <motion.div
      animate={{
        scale: pressed && !isDragOverlay ? 0.98 : 1,
      }}
      transition={reducedMotion ? { duration: 0.01 } : spring.snappy}
      onMouseDown={() => setPressed(true)}
      onMouseUp={() => setPressed(false)}
      onMouseLeave={() => setPressed(false)}
      className={cn(
        "group select-none",
        "border-l-2",
        // Hover shadow lift — CSS only transition, no Framer on hover (DD rule)
        !isDragOverlay && "hover:bg-black/[0.02]",
        "transition-colors duration-150 ease-out"
      )}
      style={{
        width: CARD_WIDTH,
        borderLeftColor: categoryColor,
        background: allComplete
          ? "linear-gradient(135deg, #FFFFFF 0%, #F0FDF4 100%)"
          : "#FFFFFF",
      }}
    >
      <div className="overflow-hidden">
        {/* ── Card Header ──────────────────────────────────── */}
        <div className="px-4 pt-4 pb-2">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2 min-w-0">
              {/* Category dot — 6px circle */}
              <span
                className="shrink-0 rounded-full"
                style={{
                  width: 6,
                  height: 6,
                  backgroundColor: categoryColor,
                }}
              />
              <h4 className="text-sm font-medium text-foreground truncate leading-tight">
                {card.title}
              </h4>
            </div>

            {/* Overflow menu — visible on hover, 44px touch target */}
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <button
                  className={cn(
                    "opacity-0 group-hover:opacity-100 transition-opacity duration-150",
                    "p-2 -m-1 hover:bg-black/[0.04] shrink-0",
                    "min-w-[44px] min-h-[44px] flex items-center justify-center"
                  )}
                  onClick={(e) => e.stopPropagation()}
                >
                  <MoreHorizontal className="w-4 h-4 text-muted-foreground" />
                </button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" className="bg-card border-border w-44">
                <DropdownMenuItem
                  onClick={() => onAskAI?.(card.id)}
                  className="gap-2 text-[13px] cursor-pointer"
                >
                  <MessageSquare className="w-3.5 h-3.5" />
                  Ask AI about this
                </DropdownMenuItem>
                <DropdownMenuItem
                  onClick={() => removeCard(card.id)}
                  className="gap-2 text-[13px] cursor-pointer text-destructive focus:text-destructive"
                >
                  Remove card
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </div>

        {/* ── Task List ────────────────────────────────────── */}
        <div className="px-4 pb-2 space-y-0.5">
          {totalCount === 0 && (
            /* Empty state placeholder — hidden once AddTask is used */
            <div className="py-3 text-center">
              <span className="text-xs text-muted-foreground/50">
                No tasks yet
              </span>
            </div>
          )}

          {totalCount > 0 && (
            <AnimatePresence initial={false}>
              {visibleTasks.map((task) => (
                <TaskItem
                  key={task.id}
                  task={task}
                  onToggle={(taskId) => toggleTask(card.id, taskId)}
                  onUpdate={(taskId, text) => updateTaskText(card.id, taskId, text)}
                  onDelete={(taskId) => removeTask(card.id, taskId)}
                  reducedMotion={reducedMotion}
                />
              ))}
            </AnimatePresence>
          )}

          {/* Show more / less toggle */}
          {card.tasks.length > 3 && (
            <button
              onClick={(e) => {
                e.stopPropagation();
                setExpanded(!expanded);
              }}
              className={cn(
                "flex items-center gap-1 text-[11px] text-muted-foreground/60",
                "hover:text-muted-foreground transition-colors py-1",
                "min-h-[44px]"
              )}
            >
              {expanded ? (
                <>
                  <ChevronUp className="w-3 h-3" />
                  Show less
                </>
              ) : (
                <>
                  <ChevronDown className="w-3 h-3" />
                  {card.tasks.length - 3} more
                </>
              )}
            </button>
          )}

          {/* Inline add task input */}
          <AddTask
            onAdd={(text) => addTask(card.id, text)}
            reducedMotion={reducedMotion}
          />
        </div>

        {/* ── Footer: Progress + Count + Tool Indicator ──── */}
        {totalCount > 0 && (
          <div className="px-4 pb-4 pt-1 flex items-center gap-2">
            {/* Progress bar */}
            <div className="flex-1 h-1 rounded-full bg-black/[0.06] overflow-hidden">
              <motion.div
                className={cn(
                  "h-full rounded-full",
                  allComplete ? "bg-green-500" : "bg-brand"
                )}
                initial={{ width: 0 }}
                animate={{ width: `${progress}%` }}
                transition={reducedMotion ? { duration: 0.01 } : spring.default}
              />
            </div>
            {/* Count */}
            <span className="text-[10px] text-muted-foreground/50 tabular-nums shrink-0">
              {completedCount}/{totalCount}
            </span>
            {/* Tool indicator */}
            {hasTools && (
              <Wrench className="w-3 h-3 text-muted-foreground/30 shrink-0" />
            )}
          </div>
        )}
      </div>
    </motion.div>
  );
});

export default BoardCard;
BoardCard

Source Code
