import { useState } from "react";
import { replyReviewComment, resolveReviewThread } from "~/fns/reviews";
import { useAction } from "~/hooks/use-action";
import { Avatar, Badge, Markdown, RelativeTime } from "./ui/Primitives";
import { Button } from "./ui/Button";
import { inputClass } from "./ui/Field";
import type { getPullFiles } from "~/fns/pulls";
import { cn } from "~/utils/cn";

export type ReviewComment = Awaited<ReturnType<typeof getPullFiles>>["comments"][number];

type Props = {
  owner: string;
  repo: string;
  number: number;
  root: ReviewComment;
  replies: ReviewComment[];
  canReply: boolean;
};

export function ReviewThread({ owner, repo, number, root, replies, canReply }: Props) {
  const [reply, setReply] = useState("");
  const [collapsed, setCollapsed] = useState(root.resolved);
  const send = useAction(replyReviewComment);
  const resolve = useAction(resolveReviewThread);

  return (
    <div className="m-2 overflow-hidden rounded-md border border-gray-700 bg-gray-950 font-sans">
      <div className="flex items-center gap-2 border-b border-gray-800 px-3 py-1.5 text-xs text-gray-500">
        {root.outdated && <Badge tone="amber">Outdated</Badge>}
        {root.resolved && <Badge tone="green">Resolved</Badge>}
        <button type="button" className="ml-auto hover:text-white" onClick={() => setCollapsed((value) => !value)}>
          {collapsed ? "Show" : "Hide"}
        </button>
        {canReply && (
          <button
            type="button"
            className="hover:text-white"
            onClick={() => resolve.run({ data: { owner, repo, number, commentId: root.id, resolved: !root.resolved } })}
          >
            {root.resolved ? "Unresolve" : "Resolve"}
          </button>
        )}
      </div>
      {!collapsed && (
        <>
          {[root, ...replies].map((comment) => (
            <div key={comment.id} className="flex gap-2 border-b border-gray-800/60 px-3 py-2 last:border-b-0">
              <Avatar name={comment.author.name} size="sm" />
              <div className="min-w-0 flex-1">
                <div className="text-xs text-gray-500">
                  <span className="font-medium text-gray-200">{comment.author.name}</span>{" "}
                  <RelativeTime timestamp={comment.createdAt} />
                </div>
                <Markdown html={comment.html} className="text-sm" />
              </div>
            </div>
          ))}
          {canReply && (
            <form
              className="flex gap-2 p-2"
              onSubmit={async (event) => {
                event.preventDefault();
                if (!reply.trim()) return;
                const ok = await send.run({
                  data: {
                    owner,
                    repo,
                    number,
                    commentId: root.id,
                    comment: { path: root.path, line: root.line, side: root.side, body: reply },
                  },
                });
                if (ok) setReply("");
              }}
            >
              <label htmlFor={`reply-${root.id}`} className="sr-only">
                Reply
              </label>
              <input
                id={`reply-${root.id}`}
                value={reply}
                onChange={(event) => setReply(event.target.value)}
                placeholder="Reply…"
                className={cn(inputClass, "h-8 text-xs")}
              />
              <Button type="submit" size="sm" pending={send.pending}>
                Reply
              </Button>
            </form>
          )}
        </>
      )}
    </div>
  );
}