import { Link } from "@tanstack/react-router";
import { Badge, EmptyState, LabelChip, RelativeTime } from "./ui/Primitives";
import { cn } from "~/utils/cn";

type Item = {
  number: number;
  title: string;
  state: "open" | "closed";
  author: { name: string };
  commentsCount: number;
  createdAt: number;
  labels: Array<{ id: string; name: string; color: string }>;
  draft: boolean;
  merged: boolean;
};

function StateIcon({ item, kind }: { item: Item; kind: "issue" | "pull" }) {
  const tone = item.merged
    ? "text-violet-400"
    : item.state === "open"
      ? item.draft
        ? "text-gray-400"
        : "text-emerald-400"
      : kind === "pull"
        ? "text-red-400"
        : "text-violet-400";
  const glyph = kind === "pull" ? (item.merged ? "⇢" : "⇄") : item.state === "open" ? "◉" : "✓";
  return (
    <span aria-hidden className={cn("w-4 text-center font-mono", tone)}>
      {glyph}
    </span>
  );
}

export function IssueList({
  owner,
  repo,
  items,
  kind,
}: {
  owner: string;
  repo: string;
  items: Item[];
  kind: "issue" | "pull";
}) {
  if (items.length === 0) return <EmptyState title={kind === "pull" ? "No pull requests" : "No issues"} />;
  return (
    <ul className="divide-y divide-gray-800/70">
      {items.map((item) => (
        <li key={item.number} className="flex items-start gap-3 px-4 py-3">
          <StateIcon item={item} kind={kind} />
          <div className="min-w-0 flex-1">
            <div className="flex flex-wrap items-center gap-2">
              <Link
                to={kind === "pull" ? "/$owner/$repo/pull/$number" : "/$owner/$repo/issues/$number"}
                params={{ owner, repo, number: String(item.number) }}
                className="font-medium text-gray-100 hover:text-accent-400"
              >
                {item.title}
              </Link>
              {item.draft && <Badge>Draft</Badge>}
              {item.labels.map((label) => (
                <LabelChip key={label.id} name={label.name} color={label.color} />
              ))}
            </div>
            <div className="mt-0.5 text-xs text-gray-500">
              #{item.number} opened <RelativeTime timestamp={item.createdAt} /> by {item.author.name}
            </div>
          </div>
          {item.commentsCount > 0 && <span className="text-xs text-gray-500">💬 {item.commentsCount}</span>}
        </li>
      ))}
    </ul>
  );
}