import { useState } from "react";
import { requestReviewers } from "~/fns/reviews";
import { dismissReview, rerequestPullReview } from "~/fns/pull-review";
import { usePull } from "~/hooks/use-pull";
import { useAction } from "~/hooks/use-action";
import { useViewer } from "~/hooks/use-viewer";
import { Avatar } from "~/ui/Avatar";
import { Badge } from "~/ui/Badge";
import { Button } from "~/ui/Button";
import { inputClass } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import { cn } from "~/utils/cn";
import { SidebarSection } from "~/ui/Heading";

const REVIEW_TONE = { approved: "success", changes_requested: "danger", dismissed: "neutral" } as const;

function toneOf(state: string) {
  return state in REVIEW_TONE ? REVIEW_TONE[state as keyof typeof REVIEW_TONE] : "neutral";
}

function DismissForm({ onDismiss, pending }: { onDismiss: (reason: string) => void; pending: boolean }) {
  const [reason, setReason] = useState("");
  return (
    <form
      className="flex gap-1"
      onSubmit={(event) => {
        event.preventDefault();
        if (reason.trim()) onDismiss(reason);
      }}
    >
      <label className="sr-only" htmlFor="dismiss-reason">
        Reason
      </label>
      <input
        id="dismiss-reason"
        value={reason}
        onChange={(event) => setReason(event.target.value)}
        placeholder="Reason for dismissal"
        className={cn(inputClass, "h-7 text-xs")}
      />
      <Button type="submit" size="sm" pending={pending}>
        Dismiss
      </Button>
    </form>
  );
}

export function PullReviewers({ owner, repo, number }: { owner: string; repo: string; number: number }) {
  const data = usePull();
  const viewer = useViewer();
  const request = useAction(requestReviewers);
  const rerequest = useAction(rerequestPullReview);
  const dismiss = useAction(dismissReview);
  const [dismissing, setDismissing] = useState<string | null>(null);
  const canRequest = data.canMerge;
  const isAuthor = viewer?.name === data.conversation.issue.author.name;
  const open = data.conversation.issue.state === "open";

  return (
    <SidebarSection title="Reviewers">
      <ErrorBanner message={request.error ?? rerequest.error ?? dismiss.error} />
      {data.reviews.map((review) => (
        <div key={review.id} className="space-y-1">
          <div className="flex items-center gap-2 text-kumo-default">
            <Avatar name={review.reviewer.name} size="sm" /> {review.reviewer.name}
            <span className="ml-auto flex items-center gap-1">
              {open && (canRequest || isAuthor) && (
                <button
                  type="button"
                  title="Re-request review"
                  className="text-xs text-kumo-subtle hover:text-accent-400"
                  onClick={() => rerequest.run({ data: { owner, repo, number, userId: review.reviewer.id } })}
                >
                  ↻
                </button>
              )}
              {open && canRequest && (review.state === "approved" || review.state === "changes_requested") && (
                <button
                  type="button"
                  title="Dismiss review"
                  className="text-xs text-kumo-subtle hover:text-kumo-danger"
                  onClick={() => setDismissing((current) => (current === review.id ? null : review.id))}
                >
                  ×
                </button>
              )}
              <Badge tone={toneOf(review.state)}>{review.state.replace("_", " ")}</Badge>
            </span>
          </div>
          {review.stale && review.state !== "dismissed" && (
            <p className="pl-7 text-2xs text-kumo-inactive">Reviewed an earlier commit</p>
          )}
          {review.dismissReason && <p className="pl-7 text-2xs text-kumo-subtle">Dismissed: {review.dismissReason}</p>}
          {dismissing === review.id && (
            <DismissForm
              pending={dismiss.pending}
              onDismiss={async (reason) => {
                if (await dismiss.run({ data: { owner, repo, number, reviewId: review.id, reason } })) {
                  setDismissing(null);
                }
              }}
            />
          )}
        </div>
      ))}
      {data.requestedReviewers.map((reviewer) => (
        <div key={reviewer.name} className="flex items-center gap-2 text-kumo-subtle">
          <Avatar name={reviewer.name} size="sm" /> {reviewer.name}
          {reviewer.codeOwner && <Badge>code owner</Badge>}
          <span className="ml-auto text-xs">pending</span>
        </div>
      ))}
      {canRequest && (
        <form
          className="flex gap-1"
          onSubmit={(event) => {
            event.preventDefault();
            const value = String(new FormData(event.currentTarget).get("reviewers") ?? "");
            const usernames = value
              .split(",")
              .map((name) => name.trim())
              .filter(Boolean);
            request.run({
              data: {
                owner,
                repo,
                number,
                usernames: [...new Set([...data.requestedReviewers.map((reviewer) => reviewer.name), ...usernames])],
              },
            });
          }}
        >
          <label htmlFor="request-reviewers" className="sr-only">
            Request reviewers
          </label>
          <input
            id="request-reviewers"
            name="reviewers"
            list="assignable-users"
            placeholder="Request review…"
            className={cn(inputClass, "h-7 text-xs")}
          />
          <datalist id="assignable-users">
            {data.assignable.map((name) => (
              <option key={name} value={name} />
            ))}
          </datalist>
          <Button type="submit" size="sm" pending={request.pending}>
            Add
          </Button>
        </form>
      )}
    </SidebarSection>
  );
}