// src/components/content/content-card.tsx
"use client";

import { useDraggable } from "@dnd-kit/core";
import { CSS } from "@dnd-kit/utilities";
import { FileTextIcon } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Flag } from "@/components/ui/flag";
import { isOverdue } from "@/lib/content/board";
import type { ContentItem } from "@/lib/content/types";
import { CONTENT_KIND_LABEL } from "@/lib/content/types";

export function ContentCard({
  item,
  nowIso,
  onOpen,
}: {
  item: ContentItem;
  nowIso: string;
  onOpen: (item: ContentItem) => void;
}) {
  const { attributes, listeners, setNodeRef, transform, isDragging } =
    useDraggable({ id: item.id });
  return (
    <button
      type="button"
      ref={setNodeRef}
      {...listeners}
      {...attributes}
      onClick={() => onOpen(item)}
      style={{ transform: CSS.Translate.toString(transform) }}
      className={`w-full rounded-md border bg-card p-3 text-left text-sm shadow-sm ${
        isDragging ? "opacity-50" : ""
      }`}
    >
      <div className="font-medium">{item.title}</div>
      {item.kind === "optimize" || item.warnedPageUrl ? (
        <div className="mt-2 flex flex-wrap items-center gap-1.5">
          {item.kind === "optimize" ? (
            <Badge variant="outline" className="font-normal">
              {CONTENT_KIND_LABEL.optimize}
            </Badge>
          ) : null}
          {item.warnedPageUrl ? (
            <Badge
              variant="destructive"
              className="font-normal"
              title={`Cannibalisation possible avec ${item.warnedPageUrl}`}
            >
              ⚠️ Cannibalisation
            </Badge>
          ) : null}
        </div>
      ) : null}
      <div className="mt-2 flex items-center gap-2 text-muted-foreground text-xs">
        {item.keywordTerm ? (
          <span className="inline-flex items-center gap-1">
            <Flag code={item.keywordCountry ?? item.country} />
            <span className="max-w-[10rem] truncate">{item.keywordTerm}</span>
          </span>
        ) : null}
        {item.hasBrief ? (
          <FileTextIcon className="size-3.5" aria-label="brief" />
        ) : null}
        {item.assignee ? (
          <span className="ml-auto rounded-full bg-muted px-1.5">
            {item.assignee}
          </span>
        ) : null}
        {item.dueDate ? (
          <span
            className={
              isOverdue(item.dueDate, nowIso) ? "text-destructive" : ""
            }
          >
            {item.dueDate.slice(0, 10)}
          </span>
        ) : null}
      </div>
    </button>
  );
}