import { SELECTED_SURFACE } from "~/ui/tones";
import { useState } from "react";
import {
  editDiscussionComment,
  markDiscussionAnswer,
  replyToDiscussion,
  toggleDiscussionVote,
} from "~/fns/discussions";
import { useAction } from "~/hooks/use-action";
import type { getDiscussion } from "~/fns/discussions";
import { MarkdownEditor } from "./MarkdownEditor";
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 { cn } from "~/utils/cn";
import { ReportLink } from "./ReportLink";

type Data = Awaited<ReturnType<typeof getDiscussion>>;
type Thread = Data["threads"][number];
type Comment = Thread["replies"][number];
type Context = { owner: string; repo: string; number: number; signedIn: boolean };

export function UpvoteButton({
  context,
  subjectId,
  count,
  voted,
}: {
  context: Context;
  subjectId: string;
  count: number;
  voted: boolean;
}) {
  const vote = useAction(toggleDiscussionVote);
  return (
    <button
      type="button"
      aria-pressed={voted}
      aria-label={`Upvote (${count})`}
      title={context.signedIn ? undefined : "Sign in to upvote"}
      disabled={!context.signedIn || vote.pending}
      onClick={() =>
        vote.run({ data: { owner: context.owner, repo: context.repo, number: context.number, subjectId } })
      }
      className={cn(
        "flex w-10 shrink-0 flex-col items-center rounded-md border py-1 text-xs",
        voted ? SELECTED_SURFACE : "border-kumo-hairline text-kumo-subtle hover:border-kumo-interact",
      )}
    >
      <span aria-hidden>▲</span>
      {count}
    </button>
  );
}

function CommentBody({ context, comment, reply }: { context: Context; comment: Comment; reply: boolean }) {
  const [editing, setEditing] = useState(false);
  const [draft, setDraft] = useState(comment.body);
  const edit = useAction(editDiscussionComment);
  const ref = { owner: context.owner, repo: context.repo };
  return (
    <div id={`discussion-comment-${comment.id}`} className="min-w-0 flex-1">
      <div className="flex items-center gap-2 text-sm">
        <Avatar name={comment.author} size="sm" />
        <span className="font-medium text-kumo-strong">{comment.author}</span>
        <span className="text-kumo-subtle">
          <RelativeTime timestamp={comment.createdAt} />
          {comment.edited && " · edited"}
        </span>
        <ReportLink
          owner={comment.author}
          path={`/${context.owner}/${context.repo}/discussions/${context.number}`}
          hash={`#discussion-comment-${comment.id}`}
        />
        {comment.canEdit && !editing && (
          <div className="ml-auto flex gap-1">
            <Button size="sm" variant="ghost" onClick={() => setEditing(true)}>
              Edit
            </Button>
            <Button
              size="sm"
              variant="ghost"
              onClick={() =>
                window.confirm(reply ? "Delete this reply?" : "Delete this comment and its replies?") &&
                edit.run({ data: { ...ref, commentId: comment.id, body: null } })
              }
            >
              Delete
            </Button>
          </div>
        )}
      </div>
      {editing ? (
        <div className="mt-2 space-y-2">
          <MarkdownEditor value={draft} onChange={setDraft} owner={context.owner} repo={context.repo} />
          <div className="flex justify-end gap-2">
            <Button size="sm" variant="ghost" onClick={() => setEditing(false)}>
              Cancel
            </Button>
            <Button
              size="sm"
              variant="primary"
              pending={edit.pending}
              onClick={async () => {
                if (await edit.run({ data: { ...ref, commentId: comment.id, body: draft } })) setEditing(false);
              }}
            >
              Save
            </Button>
          </div>
        </div>
      ) : (
        <Markdown html={comment.html} className="mt-2" />
      )}
      <div className="mt-2">
        <ReactionBar
          owner={context.owner}
          repo={context.repo}
          subjectType="discussion_comment"
          subjectId={comment.id}
          reactions={comment.reactions}
          canReact={context.signedIn}
        />
      </div>
    </div>
  );
}

function ReplyBox({ context, parentId }: { context: Context; parentId: string | null }) {
  const [body, setBody] = useState("");
  const [open, setOpen] = useState(parentId === null);
  const reply = useAction(replyToDiscussion);
  if (!open)
    return (
      <Button size="sm" variant="ghost" onClick={() => setOpen(true)}>
        Reply
      </Button>
    );
  return (
    <div className="space-y-2">
      {reply.error && <p className="text-xs text-kumo-danger">{reply.error}</p>}
      <MarkdownEditor
        value={body}
        onChange={setBody}
        owner={context.owner}
        repo={context.repo}
        rows={parentId ? 3 : 6}
        placeholder={parentId ? "Write a reply" : "Add to the discussion"}
      />
      <div className="flex justify-end gap-2">
        {parentId && (
          <Button size="sm" variant="ghost" onClick={() => setOpen(false)}>
            Cancel
          </Button>
        )}
        <Button
          size="sm"
          variant="primary"
          disabled={!body.trim()}
          pending={reply.pending}
          onClick={async () => {
            const ok = await reply.run({
              data: { owner: context.owner, repo: context.repo, number: context.number, parentId, body },
            });
            if (ok) {
              setBody("");
              if (parentId) setOpen(false);
            }
          }}
        >
          {parentId ? "Reply" : "Comment"}
        </Button>
      </div>
    </div>
  );
}

/** Threaded discussion comments with upvotes, replies and answer marking. */
export function DiscussionThreads({ data, context }: { data: Data; context: Context }) {
  const answer = useAction(markDiscussionAnswer);
  const { discussion } = data;
  const threads = [...data.threads].sort((left, right) => Number(right.isAnswer) - Number(left.isAnswer));
  return (
    <div className="space-y-4">
      <h2 className="text-sm font-medium text-kumo-default">{data.threads.length} comments</h2>
      {answer.error && <p className="text-xs text-kumo-danger">{answer.error}</p>}
      {threads.map((thread) => (
        <article
          key={thread.id}
          className={cn("rounded-lg border p-4", thread.isAnswer ? "border-success-700" : "border-kumo-hairline")}
        >
          <div className="flex gap-3">
            <UpvoteButton context={context} subjectId={thread.id} count={thread.upvotes} voted={thread.viewerVoted} />
            <CommentBody context={context} comment={thread} reply={false} />
          </div>
          <div className="mt-3 flex items-center gap-2 pl-13">
            {thread.isAnswer && <Badge tone="success">✓ Marked as answer</Badge>}
            {discussion.answerable && data.canAnswer && (
              <Button
                size="sm"
                variant="ghost"
                pending={answer.pending}
                onClick={() =>
                  answer.run({
                    data: {
                      owner: context.owner,
                      repo: context.repo,
                      number: context.number,
                      commentId: thread.isAnswer ? null : thread.id,
                    },
                  })
                }
              >
                {thread.isAnswer ? "Unmark as answer" : "Mark as answer"}
              </Button>
            )}
          </div>
          {(thread.replies.length > 0 || data.canComment) && (
            <div className="mt-3 ml-13 space-y-3 border-l border-kumo-hairline pl-4">
              {thread.replies.map((reply) => (
                <div key={reply.id} className="flex gap-3">
                  <CommentBody context={context} comment={reply} reply />
                </div>
              ))}
              {data.canComment && <ReplyBox context={context} parentId={thread.id} />}
            </div>
          )}
        </article>
      ))}
      {data.canComment ? (
        <ReplyBox context={context} parentId={null} />
      ) : (
        <p className="text-sm text-kumo-subtle">
          {context.signedIn ? "This discussion is locked." : "Sign in to join the discussion."}
        </p>
      )}
    </div>
  );
}