import { useNavigate } from "@tanstack/react-router";
import { formatPrice } from "../lib/formatters";

interface ThreadCardProps {
  id: number;
  name: string;
  candidateCount: number;
  minPriceCents: number | null;
  maxPriceCents: number | null;
  createdAt: string;
  status: "active" | "resolved";
}

function formatDate(iso: string): string {
  const d = new Date(iso);
  return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
}

function formatPriceRange(
  min: number | null,
  max: number | null,
): string | null {
  if (min == null && max == null) return null;
  if (min === max) return formatPrice(min);
  return `${formatPrice(min)} - ${formatPrice(max)}`;
}

export function ThreadCard({
  id,
  name,
  candidateCount,
  minPriceCents,
  maxPriceCents,
  createdAt,
  status,
}: ThreadCardProps) {
  const navigate = useNavigate();

  const isResolved = status === "resolved";
  const priceRange = formatPriceRange(minPriceCents, maxPriceCents);

  return (
    <button
      type="button"
      onClick={() =>
        navigate({ to: "/threads/$threadId", params: { threadId: String(id) } })
      }
      className={`w-full text-left bg-white rounded-xl border border-gray-100 hover:border-gray-200 hover:shadow-sm transition-all p-4 ${
        isResolved ? "opacity-60" : ""
      }`}
    >
      <div className="flex items-start justify-between mb-2">
        <h3 className="text-sm font-semibold text-gray-900 truncate">
          {name}
        </h3>
        {isResolved && (
          <span className="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-500 shrink-0">
            Resolved
          </span>
        )}
      </div>
      <div className="flex flex-wrap gap-1.5">
        <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-purple-50 text-purple-700">
          {candidateCount} {candidateCount === 1 ? "candidate" : "candidates"}
        </span>
        <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-50 text-gray-600">
          {formatDate(createdAt)}
        </span>
        {priceRange && (
          <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-700">
            {priceRange}
          </span>
        )}
      </div>
    </button>
  );
}