openpylon/src/components/boards/BoardCard.tsx

import { useState } from "react";
import { formatDistanceToNow } from "date-fns";
import { motion, useReducedMotion } from "framer-motion";
import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { fadeSlideUp, springs, subtleHover } from "@/lib/motion";
import { Trash2, Copy, FileDown, FileSpreadsheet, Bookmark } from "lucide-react";
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
  ContextMenuSeparator,
} from "@/components/ui/context-menu";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import type { BoardMeta } from "@/types/board";
import { useAppStore } from "@/stores/app-store";
import { useBoardStore } from "@/stores/board-store";
import { useToastStore } from "@/stores/toast-store";
import { deleteBoard, loadBoard, saveBoard, saveTemplate } from "@/lib/storage";
import { exportBoardAsJson, exportBoardAsCsv } from "@/lib/import-export";
import type { BoardTemplate } from "@/types/template";

interface BoardCardProps {
  board: BoardMeta;
  sortable?: boolean;
}

export function BoardCard({ board, sortable = false }: BoardCardProps) {
  const [confirmDelete, setConfirmDelete] = useState(false);
  const prefersReducedMotion = useReducedMotion();

  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({
    id: board.id,
    disabled: !sortable,
  });
  const addToast = useToastStore((s) => s.addToast);

  const setView = useAppStore((s) => s.setView);
  const addRecentBoard = useAppStore((s) => s.addRecentBoard);
  const refreshBoards = useAppStore((s) => s.refreshBoards);
  const openBoard = useBoardStore((s) => s.openBoard);

  const relativeTime = formatDistanceToNow(new Date(board.updatedAt), {
    addSuffix: true,
  });

  async function handleOpen() {
    await openBoard(board.id);
    setView({ type: "board", boardId: board.id });
    addRecentBoard(board.id);
  }

  async function handleDelete() {
    await deleteBoard(board.id);
    await refreshBoards();
    setConfirmDelete(false);
    addToast(`"${board.title}" deleted`, "info");
  }

  async function handleDuplicate() {
    const original = await loadBoard(board.id);
    const { ulid } = await import("ulid");
    const ts = new Date().toISOString();
    const duplicated = {
      ...original,
      id: ulid(),
      title: `${original.title} (copy)`,
      createdAt: ts,
      updatedAt: ts,
    };
    await saveBoard(duplicated);
    await refreshBoards();
    addToast(`"${board.title}" duplicated`, "success");
  }

  function downloadBlob(content: string, filename: string, mimeType: string) {
    const blob = new Blob([content], { type: mimeType });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  }

  async function handleExportJson() {
    const full = await loadBoard(board.id);
    const json = exportBoardAsJson(full);
    const safeName = board.title.replace(/[^a-zA-Z0-9-_]/g, "_");
    downloadBlob(json, `${safeName}.json`, "application/json");
    addToast("Board exported as JSON", "success");
  }

  async function handleExportCsv() {
    const full = await loadBoard(board.id);
    const csv = exportBoardAsCsv(full);
    const safeName = board.title.replace(/[^a-zA-Z0-9-_]/g, "_");
    downloadBlob(csv, `${safeName}.csv`, "text/csv");
    addToast("Board exported as CSV", "success");
  }

  async function handleSaveAsTemplate() {
    const full = await loadBoard(board.id);
    const { ulid } = await import("ulid");
    const template: BoardTemplate = {
      id: ulid(),
      name: full.title,
      color: full.color,
      columns: full.columns.map((c) => ({
        title: c.title,
        width: c.width,
        color: c.color,
        wipLimit: c.wipLimit,
      })),
      labels: full.labels,
      settings: full.settings,
    };
    await saveTemplate(template);
    addToast(`Template "${full.title}" saved`, "success");
  }

  if (isDragging) {
    return (
      <div
        ref={setNodeRef}
        style={{
          transform: CSS.Transform.toString(transform),
          transition,
        }}
        className="relative"
        {...attributes}
        {...listeners}
      >
        {/* Invisible clone to maintain grid row height */}
        <div className="invisible flex flex-col rounded-lg p-4">
          <div className="h-1" />
          <div className="flex flex-col gap-2">
            <h3 className="font-heading text-lg">&nbsp;</h3>
            <p className="font-mono text-xs">&nbsp;</p>
            <p className="font-mono text-xs">&nbsp;</p>
          </div>
        </div>
        <div className="absolute -left-2 top-0 bottom-0 w-[3px] rounded-full bg-pylon-accent shadow-[0_0_6px_var(--pylon-accent),0_0_14px_var(--pylon-accent)]" />
      </div>
    );
  }

  return (
    <motion.div
      ref={setNodeRef}
      style={{
        transform: CSS.Transform.toString(transform),
        transition,
      }}
      variants={fadeSlideUp}
      initial={prefersReducedMotion ? false : "hidden"}
      animate="visible"
      transition={springs.bouncy}
      whileHover={subtleHover.hover}
      whileTap={subtleHover.tap}
      {...attributes}
      {...(sortable ? listeners : {})}
    >
      <ContextMenu>
        <ContextMenuTrigger asChild>
          <button
            onClick={handleOpen}
            aria-label={`Open board: ${board.title} - ${board.cardCount} cards, ${board.columnCount} columns, updated ${relativeTime}`}
            className="group flex w-full flex-col rounded-lg bg-pylon-surface shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md text-left"
          >
            {/* Color accent stripe */}
            <div
              className="h-1 w-full rounded-t-lg"
              style={{ backgroundColor: board.color }}
            />

            <div className="flex flex-col gap-2 p-4">
              {/* Board title */}
              <h3 className="font-heading text-lg text-pylon-text">
                {board.title}
              </h3>

              {/* Stats line */}
              <p className="font-mono text-xs text-pylon-text-secondary">
                {board.cardCount} card{board.cardCount !== 1 ? "s" : ""} &middot;{" "}
                {board.columnCount} column{board.columnCount !== 1 ? "s" : ""}
              </p>

              {/* Relative time */}
              <p className="font-mono text-xs text-pylon-text-secondary">
                {relativeTime}
              </p>
            </div>
          </button>
        </ContextMenuTrigger>

        <ContextMenuContent>
          <ContextMenuItem onClick={handleDuplicate}>
            <Copy className="size-4" />
            Duplicate
          </ContextMenuItem>
          <ContextMenuItem onClick={handleSaveAsTemplate}>
            <Bookmark className="size-4" />
            Save as Template
          </ContextMenuItem>
          <ContextMenuSeparator />
          <ContextMenuItem onClick={handleExportJson}>
            <FileDown className="size-4" />
            Export as JSON
          </ContextMenuItem>
          <ContextMenuItem onClick={handleExportCsv}>
            <FileSpreadsheet className="size-4" />
            Export as CSV
          </ContextMenuItem>
          <ContextMenuSeparator />
          <ContextMenuItem
            variant="destructive"
            onClick={() => setConfirmDelete(true)}
          >
            <Trash2 className="size-4" />
            Delete
          </ContextMenuItem>
        </ContextMenuContent>
      </ContextMenu>

      {/* Delete confirmation dialog */}
      <Dialog open={confirmDelete} onOpenChange={setConfirmDelete}>
        <DialogContent className="bg-pylon-surface sm:max-w-sm">
          <DialogHeader>
            <DialogTitle className="font-heading text-pylon-text">
              Delete Board
            </DialogTitle>
            <DialogDescription className="text-pylon-text-secondary">
              Are you sure you want to delete &ldquo;{board.title}&rdquo;? This
              action cannot be undone.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button
              variant="ghost"
              onClick={() => setConfirmDelete(false)}
              className="text-pylon-text-secondary"
            >
              Cancel
            </Button>
            <Button variant="destructive" onClick={handleDelete}>
              Delete
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </motion.div>
  );
}