"use client";

/**
 * The emoji row at the top of a message's long-press menu.
 *
 * Five quick reactions plus a "+" that opens the full set — a drawer on
 * mobile, a modal on desktop, reusing ResponsiveDialog so it behaves like
 * every other chat surface.
 *
 * It sits inside the context menu rather than being its own popover: long
 * press is one gesture, and two surfaces competing for it would mean neither
 * felt reliable.
 */

import { useState } from "react";
import { Plus } from "lucide-react";
import { EMOJI_GROUPS } from "@/components/ui/emoji-picker";
import { ResponsiveDialog } from "@/components/chat/responsive-dialog";
import { cn } from "@/lib/utils";

/** What a double-tap sends. Matches the server's own default. */
export const HEART_EMOJI = "❤️";

/** The five offered without opening the full set. */
export const QUICK_REACTIONS = [HEART_EMOJI, "😂", "🙏", "😮", "😢"];

export function ReactionRow({
  current,
  onPick,
}: {
  /** The viewer's existing reaction, so it can be shown as selected. */
  current?: string;
  /** Picking the current emoji again clears it — the caller decides. */
  onPick: (emoji: string) => void;
}) {
  const [browsing, setBrowsing] = useState(false);

  return (
    <>
      <div className="flex items-center gap-1 border-b border-border px-2 py-2">
        {QUICK_REACTIONS.map((emoji) => (
          <button
            key={emoji}
            type="button"
            onClick={() => onPick(emoji)}
            aria-label={`React ${emoji}`}
            aria-pressed={current === emoji}
            className={cn(
              "inline-flex size-9 items-center justify-center rounded-full text-lg transition-colors",
              current === emoji ? "bg-primary/15" : "hover:bg-muted",
            )}
          >
            {emoji}
          </button>
        ))}
        <button
          type="button"
          onClick={() => setBrowsing(true)}
          aria-label="More reactions"
          className="inline-flex size-9 items-center justify-center rounded-full text-muted-foreground hover:bg-muted hover:text-foreground"
        >
          <Plus className="size-4" />
        </button>
      </div>

      {browsing && (
        <ResponsiveDialog
          title="Pick a reaction"
          description="Choose any emoji to react with."
          onClose={() => setBrowsing(false)}
        >
          <div className="space-y-4 p-4">
            {EMOJI_GROUPS.map((group) => (
              <section key={group.label}>
                <h3 className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
                  {group.label}
                </h3>
                <div className="grid grid-cols-8 gap-1">
                  {group.emojis.map((emoji) => (
                    <button
                      key={emoji}
                      type="button"
                      onClick={() => {
                        setBrowsing(false);
                        onPick(emoji);
                      }}
                      aria-label={`React ${emoji}`}
                      className="inline-flex size-9 items-center justify-center rounded-md text-lg hover:bg-muted"
                    >
                      {emoji}
                    </button>
                  ))}
                </div>
              </section>
            ))}
          </div>
        </ResponsiveDialog>
      )}
    </>
  );
}