import { useState } from "react";
import { editComment } from "~/fns/issues";
import { useAction } from "~/hooks/use-action";
import { useViewer } from "~/hooks/use-viewer";
import { ReactionBar } from "./ReactionBar";
import { MarkdownEditor } from "./MarkdownEditor";
import { Avatar } from "~/ui/Avatar";
import { Badge } from "~/ui/Badge";
import { Markdown } from "~/ui/Markdown";
import { RelativeTime } from "~/ui/RelativeTime";
import { Button } from "~/ui/Button";
import type { getIssue } from "~/fns/issues";
import type { JsonValue } from "~/lib/types";
import { pullEventText } from "~/lib/pull-event-text";
import { TextLink } from "~/ui/TextLink";
import { ReportLink } from "./ReportLink";

type TimelineItem = Awaited<ReturnType<typeof getIssue>>["timeline"][number];

const REVIEW_COPY: Record<string, { label: string; tone: "success" | "danger" | "neutral" }> = {
  approved: { label: "approved these changes", tone: "success" },
  changes_requested: { label: "requested changes", tone: "danger" },
  commented: { label: "reviewed", tone: "neutral" },
  dismissed: { label: "review dismissed", tone: "neutral" },
};

function list(value: JsonValue | undefined): string {
  return Array.isArray(value) ? value.map(String).join(", ") : typeof value === "string" ? value : "";
}

function eventText(kind: string, data: { [key: string]: JsonValue }): string {
  switch (kind) {
    case "closed":
      return data.commit ? `closed this in ${String(data.commit).slice(0, 7)}` : "closed this";
    case "reopened":
      return "reopened this";
    case "renamed":
      return `changed the title from “${list(data.from)}” to “${list(data.to)}”`;
    case "labeled":
      return `set labels: ${list(data.labels) || "none"}`;
    case "assigned":
      return `set assignees: ${list(data.usernames) || "none"}`;
    case "merged":
      return `merged commit ${String(data.sha ?? "").slice(0, 7)} (${list(data.method)})`;
    case "head_pushed":
      return `pushed ${String(data.after ?? "").slice(0, 7)}`;
    case "head_ref_deleted":
      return `deleted the ${list(data.ref)} branch`;
    case "base_changed":
      return `changed the base branch from ${list(data.from)} to ${list(data.to)}${data.reason ? ` because ${list(data.reason)}` : ""}`;
    case "review_requested":
      return `requested review from ${list(data.usernames)}`;
    case "converted_to_draft":
      return "marked this as a draft";
    case "ready_for_review":
      return "marked this ready for review";
    case "locked":
      return "locked the conversation";
    case "unlocked":
      return "unlocked the conversation";
    case "milestoned":
      return `added this to the ${list(data.milestone)} milestone`;
    case "demilestoned":
      return "removed this from its milestone";
    case "typed":
      return data.type ? `set the type to ${list(data.type)}` : "cleared the issue type";
    case "sub_issue_added":
      return `added sub-issue #${String(data.number ?? "")}`;
    case "sub_issue_removed":
      return `removed sub-issue #${String(data.number ?? "")}`;
    case "pinned":
      return "pinned this issue";
    case "transferred":
      return `transferred this issue from ${list(data.from)}`;
    case "converted_to_discussion":
      return `converted this issue into discussion #${String(data.number ?? "")}`;
    default:
      return pullEventText(kind, data) ?? kind.replace(/_/g, " ");
  }
}

function CommentCard({
  item,
  owner,
  repo,
}: {
  item: Extract<TimelineItem, { type: "comment" }>;
  owner: string;
  repo: string;
}) {
  const [editing, setEditing] = useState(false);
  const [draft, setDraft] = useState(item.body);
  const save = useAction(editComment);
  const viewer = useViewer();
  return (
    <div id={`comment-${item.id}`} className="flex gap-3">
      <Avatar name={item.author.name} />
      <div className="min-w-0 flex-1 overflow-hidden rounded-lg border border-kumo-hairline">
        <div className="flex items-center gap-2 border-b border-kumo-hairline bg-kumo-base/60 px-4 py-2 text-sm">
          <TextLink to="/$owner" params={{ owner: item.author.name }} tone="subtle" className="font-medium">
            {item.author.name}
          </TextLink>
          <span className="text-kumo-subtle">
            commented <RelativeTime timestamp={item.createdAt} />
            {item.edited && " · edited"}
          </span>
          <span className="ml-auto" />
          <ReportLink owner={item.author.name} hash={`#comment-${item.id}`} />
          {item.canEdit && !editing && (
            <div className="flex gap-1">
              <Button size="sm" variant="ghost" onClick={() => setEditing(true)}>
                Edit
              </Button>
              <Button
                size="sm"
                variant="ghost"
                onClick={() =>
                  window.confirm("Delete this comment?") &&
                  save.run({ data: { owner, repo, commentId: item.id, body: null } })
                }
              >
                Delete
              </Button>
            </div>
          )}
        </div>
        {editing ? (
          <div className="space-y-2 p-3">
            <MarkdownEditor value={draft} onChange={setDraft} owner={owner} repo={repo} />
            <div className="flex justify-end gap-2">
              <Button size="sm" variant="ghost" onClick={() => setEditing(false)}>
                Cancel
              </Button>
              <Button
                size="sm"
                variant="primary"
                pending={save.pending}
                onClick={async () => {
                  if (await save.run({ data: { owner, repo, commentId: item.id, body: draft } })) setEditing(false);
                }}
              >
                Save
              </Button>
            </div>
          </div>
        ) : (
          <div className="px-4 py-3">
            <Markdown html={item.html} />
            <div className="mt-3">
              <ReactionBar
                owner={owner}
                repo={repo}
                subjectType="comment"
                subjectId={item.id}
                reactions={item.reactions}
                canReact={Boolean(viewer)}
              />
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

export function Timeline({ items, owner, repo }: { items: TimelineItem[]; owner: string; repo: string }) {
  return (
    <ol className="relative space-y-4 before:absolute before:top-0 before:bottom-0 before:left-4 before:w-px before:bg-gray-800">
      {items.map((item) => (
        <li key={item.id} className="relative">
          {item.type === "comment" && <CommentCard item={item} owner={owner} repo={repo} />}
          {item.type === "event" && (
            <div className="ml-2 flex items-center gap-2 pl-0 text-sm text-kumo-subtle">
              <span className="z-10 size-4 rounded-full border-2 border-gray-950 bg-kumo-interact" />
              <span className="font-medium text-kumo-default">{item.actor.name}</span>
              {eventText(item.kind, item.data)}
              <RelativeTime timestamp={item.createdAt} />
            </div>
          )}
          {item.type === "review" && (
            <div className="flex gap-3">
              <Avatar name={item.author.name} />
              <div className="min-w-0 flex-1 rounded-lg border border-kumo-hairline px-4 py-2.5">
                <div className="flex items-center gap-2 text-sm">
                  <span className="font-medium text-kumo-strong">{item.author.name}</span>
                  <Badge tone={REVIEW_COPY[item.state]?.tone ?? "neutral"}>
                    {REVIEW_COPY[item.state]?.label ?? item.state}
                  </Badge>
                  <span className="text-xs text-kumo-subtle">
                    <RelativeTime timestamp={item.createdAt} />
                  </span>
                </div>
                {item.html.trim() && <Markdown html={item.html} className="mt-2" />}
              </div>
            </div>
          )}
        </li>
      ))}
    </ol>
  );
}