import { useState } from "react";
import { replyReviewComment, resolveReviewThread } from "~/fns/reviews";
import { useAction } from "~/hooks/use-action";
import { ReactionBar } from "./ReactionBar";
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;
  suggestion?: SuggestionControls;
};

export type SuggestionControls = {
  inBatch: boolean;
  pending: boolean;
  onCommit: () => void;
  onToggleBatch: () => void;
};

function rangeLabel(comment: ReviewComment): string | null {
  if (!comment.startLine) return null;
  const prefix = (side: string | null) => (side === "LEFT" ? "L" : "R");
  return `Lines ${prefix(comment.startSide)}${comment.startLine}–${prefix(comment.side)}${comment.line}`;
}

function SuggestionBar({ comment, controls }: { comment: ReviewComment; controls?: SuggestionControls }) {
  if (!comment.hasSuggestion) return null;
  if (comment.suggestionApplied) return <Badge tone="purple">Suggestion applied</Badge>;
  if (!controls) return <Badge tone="neutral">Suggested change</Badge>;
  return (
    <span className="flex gap-1">
      <Button size="sm" variant="primary" pending={controls.pending} onClick={controls.onCommit}>
        Commit suggestion
      </Button>
      <Button size="sm" variant="ghost" onClick={controls.onToggleBatch}>
        {controls.inBatch ? "Remove from batch" : "Add to batch"}
      </Button>
    </span>
  );
}

export function ReviewThread({ owner, repo, number, root, replies, canReply, suggestion }: 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">
        {rangeLabel(root) && <span className="font-mono">{rangeLabel(root)}</span>}
        {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 className="mt-1.5">
                  <ReactionBar
                    owner={owner}
                    repo={repo}
                    subjectType="review_comment"
                    subjectId={comment.id}
                    reactions={comment.reactions}
                    canReact={canReply}
                  />
                </div>
                <SuggestionBar
                  comment={comment}
                  controls={comment.id === root.id && !comment.outdated ? suggestion : undefined}
                />
              </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>
  );
}