import { useState } from "react";
import { deleteReviewComment, editReviewComment, replyReviewComment, resolveReviewThread } from "~/fns/reviews";
import { useAction } from "~/hooks/use-action";
import { ReactionBar } from "./ReactionBar";
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 { inputClass } from "~/ui/Field";
import type { getPullFiles } from "~/fns/pulls";
import { cn } from "~/utils/cn";
import { ReportLink } from "./ReportLink";

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="merged">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>
  );
}

function CommentBody({
  owner,
  repo,
  number,
  comment,
}: {
  owner: string;
  repo: string;
  number: number;
  comment: ReviewComment;
}) {
  const [editing, setEditing] = useState(false);
  const [draft, setDraft] = useState(comment.body);
  const edit = useAction(editReviewComment);
  const remove = useAction(deleteReviewComment);
  if (!editing) {
    return (
      <>
        <Markdown html={comment.html} className="text-sm" />
        {comment.canEdit && (
          <div className="mt-1 flex gap-2 text-xs text-kumo-subtle">
            <button type="button" className="hover:text-kumo-strong" onClick={() => setEditing(true)}>
              Edit
            </button>
            <button
              type="button"
              className="hover:text-kumo-danger"
              disabled={remove.pending}
              onClick={() => remove.run({ data: { owner, repo, number, commentId: comment.id } })}
            >
              Delete
            </button>
          </div>
        )}
      </>
    );
  }
  return (
    <form
      className="mt-1 space-y-1"
      onSubmit={async (event) => {
        event.preventDefault();
        if (!draft.trim()) return;
        const ok = await edit.run({ data: { owner, repo, number, commentId: comment.id, body: draft } });
        if (ok) setEditing(false);
      }}
    >
      <textarea
        value={draft}
        onChange={(event) => setDraft(event.target.value)}
        className={cn(inputClass, "min-h-20 text-xs")}
        aria-label="Edit comment"
      />
      <div className="flex gap-1">
        <Button type="submit" size="sm" pending={edit.pending}>
          Save
        </Button>
        <Button type="button" size="sm" variant="ghost" onClick={() => setEditing(false)}>
          Cancel
        </Button>
      </div>
    </form>
  );
}

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-kumo-line bg-kumo-canvas font-sans">
      <div className="flex items-center gap-2 border-b border-kumo-hairline px-3 py-1.5 text-xs text-kumo-subtle">
        {rangeLabel(root) && <span className="font-mono">{rangeLabel(root)}</span>}
        {root.outdated && <Badge tone="warning">Outdated</Badge>}
        {root.resolved && <Badge tone="success">Resolved</Badge>}
        <button
          type="button"
          className="ml-auto hover:text-kumo-strong"
          onClick={() => setCollapsed((value) => !value)}
        >
          {collapsed ? "Show" : "Hide"}
        </button>
        {canReply && (
          <button
            type="button"
            className="hover:text-kumo-strong"
            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}
              id={`review-comment-${comment.id}`}
              className="flex gap-2 border-b border-kumo-hairline 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-kumo-subtle">
                  <span className="font-medium text-kumo-default">{comment.author.name}</span>{" "}
                  <RelativeTime timestamp={comment.createdAt} />{" "}
                  <ReportLink
                    owner={comment.author.name}
                    path={`/${owner}/${repo}/pull/${number}`}
                    hash={`#review-comment-${comment.id}`}
                  />
                </div>
                <CommentBody owner={owner} repo={repo} number={number} comment={comment} />
                <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>
  );
}