import type { Card, Column, Label } from "@/types/board";
import { LabelDots } from "@/components/board/LabelDots";
import { ChecklistBar } from "@/components/board/ChecklistBar";
import { format, isPast, isToday } from "date-fns";

interface CardOverlayProps {
  card: Card;
  boardLabels: Label[];
}

export function CardOverlay({ card, boardLabels }: CardOverlayProps) {
  const hasDueDate = card.dueDate != null;
  const dueDate = hasDueDate ? new Date(card.dueDate!) : null;
  const overdue = dueDate != null && isPast(dueDate) && !isToday(dueDate);

  return (
    <div className="w-[260px] rotate-2 scale-[1.03] rounded-lg bg-pylon-surface p-3 opacity-90 shadow-xl">
      {/* Label dots */}
      {card.labels.length > 0 && (
        <div className="mb-2">
          <LabelDots labelIds={card.labels} boardLabels={boardLabels} />
        </div>
      )}

      {/* Card title */}
      <p className="text-sm font-medium text-pylon-text">{card.title}</p>

      {/* Footer row: due date + checklist */}
      {(hasDueDate || card.checklist.length > 0) && (
        <div className="mt-2 flex items-center gap-3">
          {dueDate && (
            <span
              className={`font-mono text-xs ${
                overdue
                  ? "rounded bg-pylon-danger/10 px-1 py-0.5 text-pylon-danger"
                  : "text-pylon-text-secondary"
              }`}
            >
              {format(dueDate, "MMM d")}
            </span>
          )}
          {card.checklist.length > 0 && (
            <ChecklistBar checklist={card.checklist} />
          )}
        </div>
      )}
    </div>
  );
}

interface ColumnOverlayProps {
  column: Column;
}

export function ColumnOverlay({ column }: ColumnOverlayProps) {
  return (
    <div className="w-[280px] rotate-1 scale-[1.02] rounded-lg bg-pylon-column p-3 opacity-90 shadow-xl">
      <div className="flex items-center gap-2 border-b border-border pb-2">
        <span className="truncate font-mono text-xs font-semibold uppercase tracking-widest text-pylon-text-secondary">
          {column.title}
        </span>
        <span className="shrink-0 font-mono text-xs text-pylon-text-secondary">
          {column.cardIds.length}
        </span>
      </div>
      <div className="mt-2 space-y-1">
        {column.cardIds.slice(0, 3).map((_, i) => (
          <div
            key={i}
            className="h-6 rounded bg-pylon-surface/50"
          />
        ))}
        {column.cardIds.length > 3 && (
          <p className="text-center font-mono text-xs text-pylon-text-secondary">
            +{column.cardIds.length - 3} more
          </p>
        )}
      </div>
    </div>
  );
}