/**
 * QueueItem -- a single row in the queue list.
 *
 * Shows type badge, staleness indicator, title, project/IID, and requestedBy.
 * Clicking sets this item as THE ONE THING.
 */

import type { FocusItem, FocusItemType, Staleness } from "@/lib/types";
import { computeStaleness } from "@/lib/types";
import { formatIid } from "@/lib/format";

export interface QueueItemProps {
  item: FocusItem;
  onClick: (id: string) => void;
  isFocused?: boolean;
  isDragging?: boolean;
}

const TYPE_LABELS: Record<FocusItemType, string> = {
  mr_review: "MR REVIEW",
  issue: "ISSUE",
  mr_authored: "MR AUTHORED",
  manual: "TASK",
};

const STALENESS_DOT: Record<Staleness, string> = {
  fresh: "bg-mc-fresh",
  normal: "bg-zinc-500",
  amber: "bg-mc-amber",
  urgent: "bg-mc-urgent animate-pulse",
};

const STALENESS_LABEL: Record<Staleness, string> = {
  fresh: "Updated recently",
  normal: "Updated 1-2 days ago",
  amber: "Updated 3-6 days ago",
  urgent: "Needs attention - over a week old",
};

export function QueueItem({
  item,
  onClick,
  isFocused = false,
  isDragging = false,
}: QueueItemProps): React.ReactElement {
  const staleness = computeStaleness(item.updatedAt);

  return (
    <button
      type="button"
      data-staleness={staleness}
      data-focused={isFocused}
      data-dragging={isDragging}
      onClick={() => onClick(item.id)}
      className={`flex w-full items-center gap-3 rounded-lg border px-4 py-3 text-left transition-colors ${
        isDragging
          ? "border-mc-fresh/40 bg-surface-overlay shadow-lg"
          : isFocused
            ? "border-mc-fresh/30 bg-mc-fresh/5"
            : "border-zinc-800 bg-surface-raised hover:border-zinc-700 hover:bg-surface-overlay/50"
      }`}
    >
      {/* Staleness dot with accessible label */}
      <span
        className={`h-2.5 w-2.5 flex-shrink-0 rounded-full ${STALENESS_DOT[staleness]}`}
        role="img"
        aria-label={STALENESS_LABEL[staleness]}
      />

      {/* Type badge */}
      <span className="flex-shrink-0 rounded bg-zinc-800 px-2 py-0.5 text-[10px] font-bold tracking-wider text-zinc-400">
        {TYPE_LABELS[item.type]}
      </span>

      {/* IID */}
      <span className="flex-shrink-0 text-xs text-zinc-500">
        {formatIid(item.type, item.iid)}
      </span>

      {/* Title */}
      <span className="min-w-0 flex-1 truncate text-sm text-zinc-200">
        {item.title}
      </span>

      {/* Project */}
      <span className="flex-shrink-0 text-xs text-zinc-600">
        {item.project}
      </span>

      {/* Requested by */}
      {item.requestedBy && (
        <span className="flex-shrink-0 text-xs text-zinc-500">
          @{item.requestedBy}
        </span>
      )}
    </button>
  );
}