"use client";

import { useState, useRef, useEffect } from "react";
import data from "@emoji-mart/data";
import Picker from "@emoji-mart/react";

interface EmojiPickerProps {
  onSelect: (emoji: string) => void;
}

export function EmojiPicker({ onSelect }: EmojiPickerProps) {
  const [open, setOpen] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);

  // Close on outside click
  useEffect(() => {
    if (!open) return;
    function handleClick(e: MouseEvent) {
      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
        setOpen(false);
      }
    }
    document.addEventListener("mousedown", handleClick);
    return () => document.removeEventListener("mousedown", handleClick);
  }, [open]);

  // Close on Escape
  useEffect(() => {
    if (!open) return;
    function handleKey(e: KeyboardEvent) {
      if (e.key === "Escape") setOpen(false);
    }
    document.addEventListener("keydown", handleKey);
    return () => document.removeEventListener("keydown", handleKey);
  }, [open]);

  return (
    <div ref={containerRef} className="relative inline-block">
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        aria-label="Insert emoji"
        aria-expanded={open}
        className="inline-flex items-center gap-1 rounded-md border border-gray-200 bg-white px-2.5 py-2 sm:py-1 min-h-[44px] sm:min-h-0 text-xs font-medium text-gray-700 hover:bg-gray-50 transition-colors"
      >
        <span>😊</span>
        <span className="hidden sm:inline">Emoji</span>
      </button>

      {open && (
        <div className="absolute mt-1 left-0 sm:left-auto sm:right-0" style={{ zIndex: 9999 }}>
          <div className="hidden sm:block">
            <Picker
              data={data}
              onEmojiSelect={(emoji: { native: string }) => {
                onSelect(emoji.native);
                setOpen(false);
              }}
              theme="light"
              previewPosition="none"
              skinTonePosition="search"
              maxFrequentRows={2}
            />
          </div>
          <div className="sm:hidden">
            <Picker
              data={data}
              onEmojiSelect={(emoji: { native: string }) => {
                onSelect(emoji.native);
                setOpen(false);
              }}
              theme="light"
              previewPosition="none"
              skinTonePosition="search"
              perLine={7}
              maxFrequentRows={1}
              navPosition="bottom"
            />
          </div>
        </div>
      )}
    </div>
  );
}