import { issueStateTone } from "~/ui/tones";
import { Link } from "@tanstack/react-router";
import { setLinkedIssue } from "~/fns/pull-review";
import { useAction } from "~/hooks/use-action";
import { Badge } from "~/ui/Badge";
import { Button } from "~/ui/Button";
import { inputClass } from "~/ui/Field";
import { cn } from "~/utils/cn";
import { SidebarSection } from "~/ui/Heading";

type Props = {
  owner: string;
  repo: string;
  number: number;
  issues: Array<{ number: number; title: string; state: "open" | "closed"; source: "manual" | "keyword" }>;
  canEdit: boolean;
};

/** "Development" sidebar: issues this pull request resolves, from closing keywords or manual links. */
export function LinkedIssues({ owner, repo, number, issues, canEdit }: Props) {
  const link = useAction(setLinkedIssue);
  return (
    <SidebarSection title="Development">
      {issues.length === 0 && <p className="text-kumo-subtle">No linked issues</p>}
      {issues.map((issue) => (
        <div key={issue.number} className="flex items-center gap-2 text-kumo-default">
          <Badge tone={issueStateTone(issue.state)}>{issue.state}</Badge>
          <Link
            to="/$owner/$repo/issues/$number"
            params={{ owner, repo, number: String(issue.number) }}
            className="min-w-0 flex-1 truncate hover:text-accent-400"
          >
            #{issue.number} {issue.title}
          </Link>
          {canEdit && issue.source === "manual" && (
            <button
              type="button"
              title="Unlink"
              className="text-xs text-kumo-subtle hover:text-kumo-danger"
              onClick={() => link.run({ data: { owner, repo, number, issueNumber: issue.number, linked: false } })}
            >
              ×
            </button>
          )}
        </div>
      ))}
      {link.error && <p className="text-xs text-kumo-danger">{link.error}</p>}
      {canEdit && (
        <form
          className="flex gap-1"
          onSubmit={async (event) => {
            event.preventDefault();
            const form = event.currentTarget;
            const value = Number(String(new FormData(form).get("issue") ?? "").replace(/^#/, ""));
            if (!Number.isInteger(value) || value <= 0) return;
            if (await link.run({ data: { owner, repo, number, issueNumber: value, linked: true } })) form.reset();
          }}
        >
          <label htmlFor="link-issue" className="sr-only">
            Link an issue
          </label>
          <input id="link-issue" name="issue" placeholder="#issue" className={cn(inputClass, "h-7 text-xs")} />
          <Button type="submit" size="sm" pending={link.pending}>
            Link
          </Button>
        </form>
      )}
    </SidebarSection>
  );
}