"use client";

import { useState } from "react";
import { Smile } from "lucide-react";
import { Popover, PopoverContent, PopoverTrigger } from "@/presentation/components/ui/popover";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/presentation/components/ui/tooltip";

const EMOJIS = [
  "😀", "😃", "😄", "😁", "😅", "😂", "🙂", "😉",
  "😊", "😍", "🤩", "😎", "🤔", "🤨", "😐", "🙄",
  "😮", "😢", "😭", "😬", "🥳", "🙌", "👏", "🙏",
  "👍", "👎", "👌", "💪", "🤝", "👋", "✅", "❌",
  "⚠️", "❓", "❗", "💡", "🔥", "⭐", "❤️", "🎉",
  "🚗", "🚙", "🚚", "🔧", "⛽", "🔋", "📍", "📅",
  "⏰", "📄", "📎", "📷", "💶", "🔑", "📞", "✉️",
];

interface EmojiPickerProps {
  label: string;
  onSelect: (emoji: string) => void;
  disabled?: boolean;
}

export function EmojiPicker({ label, onSelect, disabled }: EmojiPickerProps) {
  const [open, setOpen] = useState(false);

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <Tooltip>
        <TooltipTrigger asChild>
          <PopoverTrigger asChild>
            <button
              type="button"
              disabled={disabled}
              className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-50"
            >
              <Smile className="h-4 w-4" />
            </button>
          </PopoverTrigger>
        </TooltipTrigger>
        <TooltipContent>{label}</TooltipContent>
      </Tooltip>
      <PopoverContent
        side="top"
        align="start"
        className="w-auto p-2"
        // Focus goes back to the message field, not to the emoji button.
        onCloseAutoFocus={(e) => e.preventDefault()}
      >
        <div className="grid grid-cols-8 gap-0.5">
          {EMOJIS.map((emoji) => (
            <button
              key={emoji}
              type="button"
              onClick={() => { onSelect(emoji); setOpen(false); }}
              className="flex h-8 w-8 items-center justify-center rounded-md text-lg transition-transform hover:scale-110 hover:bg-muted"
            >
              {emoji}
            </button>
          ))}
        </div>
      </PopoverContent>
    </Popover>
  );
}