import { Link } from "@tanstack/react-router";
import { Badge } from "~/ui/Badge";
import { EmptyState } from "~/ui/EmptyState";
import { LabelChip } from "~/ui/LabelChip";
import { RelativeTime } from "~/ui/RelativeTime";
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-merged-400"
    : item.state === "open"
      ? item.draft
        ? "text-kumo-subtle"
        : "text-kumo-success"
      : kind === "pull"
        ? "text-kumo-danger"
        : "text-kumo-subtle";
  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"}
        icon={kind === "pull" ? "pull" : "issue"}
      />
    );
  return (
    <ul className="divide-y divide-kumo-hairline">
      {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-kumo-strong 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-kumo-subtle">
              #{item.number} opened <RelativeTime timestamp={item.createdAt} /> by {item.author.name}
            </div>
          </div>
          {item.commentsCount > 0 && <span className="text-xs text-kumo-subtle">💬 {item.commentsCount}</span>}
        </li>
      ))}
    </ul>
  );
}