import { Popover } from "@cloudflare/kumo/components/popover";
import { SELECTED_SURFACE } from "~/ui/tones";
import { useState } from "react";
import { useQueryClient } from "@tanstack/react-query";
import { reactorsQueryKey, useReactors } from "~/hooks/use-reactors";
import { toggleReaction } from "~/fns/reactions";
import { useOptimisticMutation } from "~/hooks/use-optimistic-mutation";
import { REACTION_CONTENTS, REACTION_EMOJI, reactorsLabel } from "~/lib/reactions";
import type { ReactionContent, ReactionSubject, ReactionSummary } from "~/lib/reactions";
import { cn } from "~/utils/cn";

type Props = {
  owner: string;
  repo: string;
  subjectType: ReactionSubject;
  subjectId: string;
  reactions: ReactionSummary[];
  canReact: boolean;
};

function toggleLocally(current: ReactionSummary[], content: ReactionContent): ReactionSummary[] {
  const existing = current.find((reaction) => reaction.content === content);
  if (!existing) return [...current, { content, count: 1, viewerReacted: true }];
  const next = existing.viewerReacted
    ? { ...existing, count: existing.count - 1, viewerReacted: false }
    : { ...existing, count: existing.count + 1, viewerReacted: true };
  return current.flatMap((reaction) => (reaction.content !== content ? [reaction] : next.count > 0 ? [next] : []));
}

type PillProps = {
  target: { owner: string; repo: string; subjectType: ReactionSubject; subjectId: string; content: ReactionContent };
  reaction: ReactionSummary;
  disabled: boolean;
  onToggle: () => void;
};

function ReactionPill({ target, reaction, disabled, onToggle }: PillProps) {
  const [hovered, setHovered] = useState(false);
  const reactors = useReactors(target, hovered);
  const label = reactors.data
    ? `${reactorsLabel(reactors.data, reaction.count)} reacted with ${REACTION_EMOJI[reaction.content]}`
    : "Loading…";
  return (
    <span
      className="relative"
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      onFocus={() => setHovered(true)}
      onBlur={() => setHovered(false)}
    >
      <button
        type="button"
        disabled={disabled}
        onClick={onToggle}
        aria-pressed={reaction.viewerReacted}
        aria-describedby={hovered ? `${target.subjectId}-${reaction.content}-reactors` : undefined}
        className={cn(
          "inline-flex h-6 items-center gap-1 rounded-full border px-2 text-xs",
          reaction.viewerReacted ? SELECTED_SURFACE : "border-kumo-line text-kumo-subtle hover:border-kumo-interact",
        )}
      >
        <span aria-hidden>{REACTION_EMOJI[reaction.content]}</span>
        <span className="sr-only">{reaction.content}</span>
        {reaction.count}
      </button>
      {hovered && (
        <span
          id={`${target.subjectId}-${reaction.content}-reactors`}
          role="tooltip"
          className="pointer-events-none absolute bottom-full left-0 z-30 mb-1.5 w-max max-w-64 rounded-md border border-kumo-line bg-kumo-canvas px-2 py-1 text-xs text-kumo-default shadow-xl shadow-black/50"
        >
          {label}
        </span>
      )}
    </span>
  );
}

/** Reaction pills plus an emoji picker; reusable on issues, PRs, comments, review comments and discussions. */
export function ReactionBar({ owner, repo, subjectType, subjectId, reactions, canReact }: Props) {
  const [open, setOpen] = useState(false);
  const queryClient = useQueryClient();
  const toggle = useOptimisticMutation(reactions, toggleLocally, async (content: ReactionContent) => {
    const result = await toggleReaction({ data: { owner, repo, subjectType, subjectId, content } });
    await queryClient.invalidateQueries({
      queryKey: reactorsQueryKey({ owner, repo, subjectType, subjectId, content }),
    });
    return result;
  });
  const react = (content: ReactionContent) => {
    setOpen(false);
    toggle.run(content);
  };
  if (!canReact && reactions.length === 0) return null;
  return (
    <div className="flex flex-wrap items-center gap-1.5">
      {toggle.state.map((reaction) => (
        <ReactionPill
          key={reaction.content}
          target={{ owner, repo, subjectType, subjectId, content: reaction.content }}
          reaction={reaction}
          disabled={!canReact}
          onToggle={() => react(reaction.content)}
        />
      ))}
      {canReact && (
        <Popover open={open} onOpenChange={setOpen}>
          <Popover.Trigger
            aria-label="Add reaction"
            render={
              <button
                type="button"
                className="inline-flex h-6 items-center rounded-full px-2 text-xs text-kumo-subtle ring ring-kumo-hairline hover:text-kumo-strong hover:ring-kumo-interact"
              />
            }
          >
            ☺+
          </Popover.Trigger>
          <Popover.Content side="top" align="start" className="rounded-full p-0.5">
            <fieldset aria-label="Pick a reaction" className="flex gap-0.5">
              {REACTION_CONTENTS.map((content) => (
                <button
                  key={content}
                  type="button"
                  aria-label={content}
                  onClick={() => react(content)}
                  className="rounded-full px-1.5 py-0.5 text-base leading-none hover:bg-kumo-tint"
                >
                  {REACTION_EMOJI[content]}
                </button>
              ))}
            </fieldset>
          </Popover.Content>
        </Popover>
      )}
      {toggle.error && <span className="text-xs text-kumo-danger">{toggle.error}</span>}
    </div>
  );
}