import React, {
  useState,
  useRef,
  useEffect,
  forwardRef,
  useImperativeHandle,
} from 'react';

// Main React component for the Emoji Input
// Manages its own state internally (uncontrolled behavior)
import useTranslation from "../../hooks/useTranslation.jsx";
import wordStore from "../../mc/wordStore.json";
const EmojiInput = forwardRef(
  (
    {
      containerStyle,
      inputStyle,
      buttonStyle,
      pickerStyle,
      onChange,
      // Exposed onChange prop
      onPaste,
      // Exposed onPaste prop
      onFocus,
      // Exposed onFocus prop
      onBlur,
      // Exposed onBlur prop
      onKeyDown,
      // Exposed onKeyDown prop
      onKeyUp,
      // Exposed onKeyUp prop
      onKeyPress,
      // Exposed onKeyPress prop
      onEnter,
      // Exposed onEnter prop for handling single Enter key press
      disabled = false,
      // Disabled prop
      readOnly = false,
      // ReadOnly prop
      fontSize = "16px",
      // Font size prop
      lineHeight = "20px", // Line height prop
      // Removed 'value' prop for uncontrolled behavior
    },
    ref,
  ) => {
    const { findText } = useTranslation(wordStore);
    // Internal state is the source of truth for the input value
    const [internalValue, setInternalValue] = useState('');

    // State to manage the visibility of the emoji picker
    const [showPicker, setShowPicker] = useState(false);
    // State to manage the position of the emoji picker ('top' or 'bottom')
    const [pickerPosition, setPickerPosition] = useState('bottom'); // Default to bottom (above input)
    // State to manage the emoji search term
    const [searchTerm, setSearchTerm] = useState('');

    // Ref to access the textarea element directly
    const textareaRef = useRef(null);
    // Ref to access the input container element
    const containerRef = useRef(null);
    // Ref to access the emoji picker element
    const emojiPickerRef = useRef(null);
    // Ref to access the emoji toggle button element
    const emojiToggleRef = useRef(null);

    // Expose imperative methods to the parent component via the ref
    useImperativeHandle(ref, () => ({
      // Method to get the current input value (from internal state)
      getValue: () => internalValue,
      // Method to set the input value (updates internal state and calls onChange)
      setValue: (newValue) => {
        setInternalValue(newValue);
        // Manually trigger onChange with the new value
        if (onChange) {
          const event = {
            target: {
              value: newValue,
            },
          };
          onChange(event);
        }
      },
      // Method to focus the textarea
      focus: () => {
        if (textareaRef.current) {
          textareaRef.current.focus();
        }
      },
      // Method to clear the input (updates internal state to empty and calls onChange)
      clear: () => {
        setInternalValue('');
        // Manually trigger onChange with empty string
        if (onChange) {
          const event = {
            target: {
              value: "",
            },
          };
          onChange(event);
        }
      },
      // Method to toggle the emoji picker visibility
      toggleEmojiPicker: () => togglePicker(),
      // Method to show the emoji picker
      showEmojiPicker: () => setShowPicker(true),
      // Method to hide the emoji picker
      hideEmojiPicker: () => setShowPicker(false),
      // You can expose other methods as needed
    }));

    // Expanded list of emojis with names/keywords for search
    const allEmojisWithNames = [
      {
        emoji: "😊",
        name: "Smiling Face with Smiling Eyes",
      },
      {
        emoji: "😂",
        name: "Face with Tears of Joy",
      },
      {
        emoji: "😍",
        name: "Smiling Face with Heart-Eyes",
      },
      {
        emoji: "🥰",
        name: "Smiling Face with Hearts",
      },
      {
        emoji: "😘",
        name: "Face Blowing a Kiss",
      },
      {
        emoji: "😗",
        name: "Kissing Face",
      },
      {
        emoji: "😙",
        name: "Kissing Face with Smiling Eyes",
      },
      {
        emoji: "😚",
        name: "Kissing Face with Closed Eyes",
      },
      {
        emoji: "😋",
        name: "Face Savoring Food",
      },
      {
        emoji: "😛",
        name: "Face with Tongue",
      },
      {
        emoji: "😜",
        name: "Winking Face with Tongue",
      },
      {
        emoji: "🤪",
        name: "Zany Face",
      },
      {
        emoji: "🤨",
        name: "Face with Raised Eyebrow",
      },
      {
        emoji: "🧐",
        name: "Face with Monocle",
      },
      {
        emoji: "🤓",
        name: "Nerd Face",
      },
      {
        emoji: "😎",
        name: "Smiling Face with Sunglasses",
      },
      {
        emoji: "🤩",
        name: "Star-Struck",
      },
      {
        emoji: "🥳",
        name: "Partying Face",
      },
      {
        emoji: "😏",
        name: "Smirking Face",
      },
      {
        emoji: "😒",
        name: "Unamused Face",
      },
      {
        emoji: "😞",
        name: "Disappointed Face",
      },
      {
        emoji: "😔",
        name: "Pensive Face",
      },
      {
        emoji: "😟",
        name: "Worried Face",
      },
      {
        emoji: "😕",
        name: "Confused Face",
      },
      {
        emoji: "🙁",
        name: "Slightly Frowning Face",
      },
      {
        emoji: "☹️",
        name: "Frowning Face",
      },
      {
        emoji: "😣",
        name: "Persevering Face",
      },
      {
        emoji: "😖",
        name: "Confounded Face",
      },
      {
        emoji: "😫",
        name: "Tired Face",
      },
      {
        emoji: "😩",
        name: "Weary Face",
      },
      {
        emoji: "🥺",
        name: "Pleading Face",
      },
      {
        emoji: "😢",
        name: "Crying Face",
      },
      {
        emoji: "😭",
        name: "Loudly Crying Face",
      },
      {
        emoji: "😤",
        name: "Face with Steam From Nose",
      },
      {
        emoji: "😠",
        name: "Angry Face",
      },
      {
        emoji: "😡",
        name: "Pouting Face",
      },
      {
        emoji: "🤬",
        name: "Face with Symbols on Mouth",
      },
      {
        emoji: "😈",
        name: "Smiling Face with Horns",
      },
      {
        emoji: "👿",
        name: "Angry Face with Horns",
      },
      {
        emoji: "💀",
        name: "Skull",
      },
      {
        emoji: "👻",
        name: "Ghost",
      },
      {
        emoji: "👽",
        name: "Alien",
      },
      {
        emoji: "🤖",
        name: "Robot",
      },
      {
        emoji: "🎃",
        name: "Jack-O-Lantern",
      },
      {
        emoji: "😺",
        name: "Grinning Cat",
      },
      {
        emoji: "😸",
        name: "Grinning Cat with Smiling Eyes",
      },
      {
        emoji: "😹",
        name: "Cat with Tears of Joy",
      },
      {
        emoji: "😻",
        name: "Smiling Cat with Heart-Eyes",
      },
      {
        emoji: "😼",
        name: "Cat with Wry Smile",
      },
      {
        emoji: "😽",
        name: "Kissing Cat",
      },
      {
        emoji: "🙀",
        name: "Weary Cat",
      },
      {
        emoji: "😿",
        name: "Crying Cat",
      },
      {
        emoji: "😾",
        name: "Pouting Cat",
      },
      {
        emoji: "👍",
        name: "Thumbs Up",
      },
      {
        emoji: "👎",
        name: "Thumbs Down",
      },
      {
        emoji: "👏",
        name: "Clapping Hands",
      },
      {
        emoji: "🙌",
        name: "Raising Hands",
      },
      {
        emoji: "🤲",
        name: "Palms Up Together",
      },
      {
        emoji: "🤝",
        name: "Handshake",
      },
      {
        emoji: "🙏",
        name: "Folded Hands",
      },
      {
        emoji: "💪",
        name: "Flexed Biceps",
      },
      {
        emoji: "👈",
        name: "Backhand Index Pointing Left",
      },
      {
        emoji: "👉",
        name: "Backhand Index Pointing Right",
      },
      {
        emoji: "☝️",
        name: "Index Pointing Up",
      },
      {
        emoji: "👆",
        name: "Index Pointing Up",
      },
      // Duplicate, can be refined
      {
        emoji: "👇",
        name: "Index Pointing Down",
      },
      {
        emoji: "✌️",
        name: "Victory Hand",
      },
      {
        emoji: "🤞",
        name: "Crossed Fingers",
      },
      {
        emoji: "🖖",
        name: "Vulcan Salute",
      },
      {
        emoji: "🤘",
        name: "Sign of the Horns",
      },
      {
        emoji: "🤙",
        name: "Call Me Hand",
      },
      {
        emoji: "🖐️",
        name: "Hand with Fingers Splayed",
      },
      {
        emoji: "✋",
        name: "Raised Hand",
      },
      {
        emoji: "👌",
        name: "OK Hand",
      },
      {
        emoji: "🤏",
        name: "Pinched Fingers",
      },
      {
        emoji: "👋",
        name: "Waving Hand",
      },
      {
        emoji: "🤚",
        name: "Raised Back of Hand",
      },
      {
        emoji: "❤️",
        name: "Red Heart",
      },
      {
        emoji: "🧡",
        name: "Orange Heart",
      },
      {
        emoji: "💛",
        name: "Yellow Heart",
      },
      {
        emoji: "💚",
        name: "Green Heart",
      },
      {
        emoji: "💙",
        name: "Blue Heart",
      },
      {
        emoji: "💜",
        name: "Purple Heart",
      },
      {
        emoji: "🖤",
        name: "Black Heart",
      },
      {
        emoji: "🤍",
        name: "White Heart",
      },
      {
        emoji: "🤎",
        name: "Brown Heart",
      },
      {
        emoji: "💔",
        name: "Broken Heart",
      },
      {
        emoji: "❣️",
        name: "Heart Exclamation",
      },
      {
        emoji: "💕",
        name: "Two Hearts",
      },
      {
        emoji: "💞",
        name: "Revolving Hearts",
      },
      {
        emoji: "💓",
        name: "Beating Heart",
      },
      {
        emoji: "💗",
        name: "Growing Heart",
      },
      {
        emoji: "💖",
        name: "Sparkling Heart",
      },
      {
        emoji: "💘",
        name: "Heart with Arrow",
      },
      {
        emoji: "💝",
        name: "Heart with Ribbon",
      },
      {
        emoji: "💯",
        name: "Hundred Points",
      },
      {
        emoji: "💢",
        name: "Anger Symbol",
      },
      {
        emoji: "💥",
        name: "Collision",
      },
      {
        emoji: "💫",
        name: "Dizzy",
      },
      {
        emoji: "💦",
        name: "Sweat Droplets",
      },
      {
        emoji: "💨",
        name: "Dashing Away",
      },
      {
        emoji: "💩",
        name: "Pile of Poo",
      },
      {
        emoji: "🍎",
        name: "Red Apple",
      },
      {
        emoji: "🍌",
        name: "Banana",
      },
      {
        emoji: "🍒",
        name: "Cherries",
      },
      {
        emoji: "🍓",
        name: "Strawberry",
      },
      {
        emoji: "🍔",
        name: "Hamburger",
      },
      {
        emoji: "🍕",
        name: "Pizza",
      },
      {
        emoji: "🍟",
        name: "French Fries",
      },
      {
        emoji: "🍦",
        name: "Soft Ice Cream",
      },
      {
        emoji: "🍩",
        name: "Doughnut",
      },
      {
        emoji: "☕",
        name: "Hot Beverage",
      },
      {
        emoji: "🍵",
        name: "Teacup Without Handle",
      },
      {
        emoji: "🍺",
        name: "Beer Bottle",
      },
      {
        emoji: "🍷",
        name: "Wine Glass",
      },
      {
        emoji: "🍸",
        name: "Cocktail Glass",
      },
      {
        emoji: "🍹",
        name: "Tropical Drink",
      },
      {
        emoji: "🍾",
        name: "Bottle with Popping Cork",
      },
      {
        emoji: "🌍",
        name: "Earth Globe Europe-Africa",
      },
      {
        emoji: "🌎",
        name: "Earth Globe Americas",
      },
      {
        emoji: "🌏",
        name: "Earth Globe Asia-Australia",
      },
      {
        emoji: "🌞",
        name: "Sun with Face",
      },
      {
        emoji: "🌝",
        name: "Full Moon Face",
      },
      {
        emoji: "🌚",
        name: "New Moon Face",
      },
      {
        emoji: "🌙",
        name: "Crescent Moon",
      },
      {
        emoji: "⭐",
        name: "Star",
      },
      {
        emoji: "🌟",
        name: "Glowing Star",
      },
      {
        emoji: "✨",
        name: "Sparkles",
      },
      {
        emoji: "⚡",
        name: "High Voltage",
      },
      {
        emoji: "🔥",
        name: "Fire",
      },
      {
        emoji: "💧",
        name: "Droplet",
      },
      {
        emoji: "🌊",
        name: "Water Wave",
      },
      {
        emoji: "🌈",
        name: "Rainbow",
      },
      {
        emoji: "☁️",
        name: "Cloud",
      },
      {
        emoji: "🐶",
        name: "Dog Face",
      },
      {
        emoji: "🐱",
        name: "Cat Face",
      },
      {
        emoji: "🐭",
        name: "Mouse Face",
      },
      {
        emoji: "🐹",
        name: "Hamster Face",
      },
      {
        emoji: "🐰",
        name: "Rabbit Face",
      },
      {
        emoji: "🦊",
        name: "Fox Face",
      },
      {
        emoji: "🐻",
        name: "Bear",
      },
      {
        emoji: "🐼",
        name: "Panda",
      },
      {
        emoji: "🐨",
        name: "Koala",
      },
      {
        emoji: "🐯",
        name: "Tiger Face",
      },
      {
        emoji: "🦁",
        name: "Lion",
      },
      {
        emoji: "🐮",
        name: "Cow Face",
      },
      {
        emoji: "🐷",
        name: "Pig Face",
      },
      {
        emoji: "🐸",
        name: "Frog",
      },
      {
        emoji: "🐵",
        name: "Monkey Face",
      },
      {
        emoji: "🐔",
        name: "Chicken",
      },
      {
        emoji: "⚽",
        name: "Soccer Ball",
      },
      {
        emoji: "🏀",
        name: "Basketball",
      },
      {
        emoji: "🏈",
        name: "American Football",
      },
      {
        emoji: "⚾",
        name: "Baseball",
      },
      {
        emoji: "🎾",
        name: "Tennis Racquet and Ball",
      },
      {
        emoji: "🏐",
        name: "Volleyball",
      },
      {
        emoji: "🏉",
        name: "Rugby Football",
      },
      {
        emoji: "🎱",
        name: "Pool 8 Ball",
      },
      {
        emoji: "🏓",
        name: "Table Tennis Paddle and Ball",
      },
      {
        emoji: "🏸",
        name: "Badminton Racquet and Shuttlecock",
      },
      {
        emoji: "🏒",
        name: "Ice Hockey Stick and Puck",
      },
      {
        emoji: "🥅",
        name: "Goal Net",
      },
      {
        emoji: "⛳",
        name: "Flag in Hole",
      },
      {
        emoji: "🏹",
        name: "Bow and Arrow",
      },
      {
        emoji: "🎣",
        name: "Fishing Pole",
      },
      {
        emoji: "🥊",
        name: "Boxing Glove",
      },
    ];

    // Filter emojis based on the search term (case-insensitive)
    const filteredEmojis = allEmojisWithNames.filter((item) => {
      const lowerCaseSearchTerm = searchTerm.toLowerCase();
      // Check if the search term is included in the emoji's name
      return (
        searchTerm === '' ||
        item.name.toLowerCase().includes(lowerCaseSearchTerm)
      );
    });

    // Function to insert an emoji at the current cursor position
    const insertEmoji = (emoji) => {
      const textarea = textareaRef.current;
      if (!textarea) return; // Ensure textarea is available

      const cursorPosition = textarea.selectionStart;
      const textBefore = internalValue.substring(0, cursorPosition);
      const textAfter = internalValue.substring(cursorPosition);

      // Calculate the new value
      const newValue = textBefore + emoji + textAfter;

      // Update internal state
      setInternalValue(newValue);

      // Manually trigger onChange with the new value
      if (onChange) {
        const event = {
          target: {
            value: newValue,
          },
        };
        onChange(event);
      }

      // Move cursor to after the inserted emoji
      const newCursorPosition = cursorPosition + emoji.length;

      // Use a timeout to ensure the state updates before setting selection
      // This is a common pattern in React for DOM manipulations after state updates
      setTimeout(() => {
        textarea.selectionStart = newCursorPosition;
        textarea.selectionEnd = newCursorPosition;
        textarea.focus(); // Focus the textarea after inserting
      }, 0);

      // Optionally hide the picker after selection
      // setShowPicker(false);
    };

    // Effect to handle clicks outside the emoji picker to close it
    useEffect(() => {
      const handleClickOutside = (event) => {
        // Check if the click was outside the picker and not on the toggle button or the picker itself
        if (
          emojiPickerRef.current &&
          !emojiPickerRef.current.contains(event.target) &&
          event.target !== emojiToggleRef.current &&
          !emojiToggleRef.current.contains(event.target)
        ) {
          setShowPicker(false);
          setSearchTerm(''); // Clear search term when closing
        }
      };

      // Add the event listener
      document.addEventListener('click', handleClickOutside);

      // Cleanup the event listener on component unmount
      return () => {
        document.removeEventListener('click', handleClickOutside);
      };
    }, [showPicker]); // Re-run effect if showPicker changes

    // Function to determine picker position based on available space
    const determinePickerPosition = () => {
      const container = containerRef.current;
      if (!container) return 'bottom'; // Default to bottom if container not found

      const rect = container.getBoundingClientRect();
      const viewportHeight = window.innerHeight;

      // Calculate space above and below the input container
      const spaceAbove = rect.top;
      const spaceBelow = viewportHeight - rect.bottom;

      // Assume picker needs at least 200px height (based on max-height)
      const requiredSpace = 200; // Match max-height of picker

      // If there's enough space below, position below. Otherwise, position above.
      // Prioritize below if space is sufficient, otherwise check above.
      if (spaceBelow >= requiredSpace) {
        return 'top'; // Position below the input (top: 100%)
      } else if (spaceAbove >= requiredSpace) {
        return 'bottom'; // Position above the input (bottom: 100%)
      } else {
        // If neither has enough space, position where there is more space
        return spaceBelow > spaceAbove ? 'top' : 'bottom';
      }
    };

    // Toggle emoji picker visibility and determine position
    const togglePicker = () => {
      if (!showPicker) {
        // If about to show, determine the best position
        setPickerPosition(determinePickerPosition());
      } else {
        setSearchTerm(''); // Clear search term when hiding
      }
      setShowPicker(!showPicker);
    };
    return (
      // Apply containerStyle prop
      <div
        className="input-container"
        style={containerStyle}
        ref={containerRef}
      >
        {/* Textarea for input */}
        {/* Apply inputStyle prop */}
        <textarea
          ref={textareaRef} // Attach ref to textarea
          className="text-input"
          rows="1" // Start with 1 row, max-height will control size
          placeholder={findText("Start typing...")} // Updated placeholder text
          // Use internal state as the source of truth
          value={internalValue}
          onChange={(e) => {
            // Update internal state
            setInternalValue(e.target.value);
            // Always call the passed-in onChange handler if it exists
            if (onChange) {
              onChange(e);
            }
          }}
          onPaste={(e) => {
            if (onPaste) {
              onPaste(e); // Call the passed-in onPaste handler
            }
            // onChange handler will be triggered by paste, updating internal state
          }}
          onFocus={(e) => {
            // Added onFocus handler
            if (onFocus) {
              onFocus(e);
            }
          }}
          onBlur={(e) => {
            // Added onBlur handler
            if (onBlur) {
              onBlur(e);
            }
          }}
          onKeyDown={(e) => {
            // Added onKeyDown handler
            // Check for Enter key press
            if (e.key === 'Enter') {
              // If Shift is NOT pressed, prevent default and call onEnter
              if (!e.shiftKey) {
                e.preventDefault();
                if (onEnter) {
                  onEnter(internalValue); // Pass current internal value to onEnter
                }
              }
              // If Shift IS pressed, allow default (new line)
            }

            // Always call the passed-in onKeyDown handler if it exists
            if (onKeyDown) {
              onKeyDown(e);
            }
          }}
          onKeyUp={(e) => {
            // Added onKeyUp handler
            if (onKeyUp) {
              onKeyUp(e);
            }
          }}
          onKeyPress={(e) => {
            // Added onKeyPress handler
            if (onKeyPress) {
              onKeyPress(e);
            }
          }}
          disabled={disabled} // Apply disabled prop
          readOnly={readOnly} // Apply readOnly prop
          style={{
            maxHeight: "52px",
            overflowY: "auto",
            fontSize: fontSize,
            // Apply fontSize prop
            lineHeight: lineHeight,
            // Apply lineHeight prop
            ...inputStyle, // Apply custom inputStyle prop
          }} // Set max height and overflow, apply inputStyle
        ></textarea>

        {/* Button to toggle the emoji picker */}
        {/* Apply buttonStyle prop */}
        <button
          ref={emojiToggleRef} // Attach ref to toggle button
          className="emoji-toggle-button"
          onClick={togglePicker} // Use the new togglePicker function
          // Disable button if input is disabled or readOnly
          disabled={disabled || readOnly}
          style={buttonStyle} // Apply buttonStyle
        >
          {/* SVG Icon */}
          <svg
            width="24"
            height="25"
            viewBox="0 0 24 25"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M19.0668 5.51844C23.0368 9.48844 22.9668 15.9684 18.8668 19.8584C15.0768 23.4484 8.92679 23.4484 5.12679 19.8584C1.01679 15.9684 0.946776 9.48844 4.92678 5.51844C8.82678 1.60844 15.1668 1.60844 19.0668 5.51844Z"
              stroke="currentColor"
              strokeWidth="1.5"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
            <path
              d="M15.834 16.6367C13.714 18.6367 10.2741 18.6367 8.16406 16.6367"
              stroke="currentColor"
              strokeWidth="1.5"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
            <path
              d="M8.66638 9.55859H8.67536"
              stroke="currentColor"
              strokeWidth="2.5"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
            <path
              d="M15.8383 9.55859H15.8472"
              stroke="currentColor"
              strokeWidth="2.5"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
          </svg>
        </button>

        {/* Emoji picker container, shown conditionally */}
        {showPicker && (
          // Apply pickerStyle prop and dynamic position class
          <div
            ref={emojiPickerRef} // Attach ref to picker container
            className={findText(
              "emoji-picker-container show {pickerPosition}",
              {
                pickerPosition: pickerPosition,
              }
            )} // Add pickerPosition class
            style={pickerStyle} // Apply pickerStyle
          >
            {/* Emoji Search Input */}
            <input
              type="text"
              placeholder={findText("Search emojis...")}
              className="emoji-search-input"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />

            {/* Emoji Grid */}
            <div className="emoji-grid">
              {/* Map over filtered emojis and create buttons */}
              {filteredEmojis.map((item, index) => (
                <button
                  key={index} // Use index as key (safe for static list)
                  className="emoji-button"
                  onClick={() => insertEmoji(item.emoji)} // Insert emoji on click
                  title={item.name} // Add title for accessibility
                >
                  {item.emoji}
                </button>
              ))}
              {filteredEmojis.length === 0 && (
                <p className="no-results">{findText("No emojis found.")}</p>
              )}
            </div>
          </div>
        )}
        {/* Plain CSS styles */}
        <style>{`
                  .input-container {
                      position: relative;
                      width: 100%;
                      max-width: 400px; /* Adjusted max-width slightly for a common input size */
                      margin: 20px auto;
                      /* Updated default border color */
                      border: 1px solid rgba(229, 229, 234, 1);
                      border-radius: 0.375rem; /* Default rounded-md */
                      /* Removed overflow: hidden; */
                      /* Default background, can be overridden by prop */
                      background-color: #ffffff;
                  }
  
                  .text-input {
                      display: block; /* Make it a block element */
                      width: 100%;
                      padding: 8px; /* p-2 */
                      padding-right: 40px; /* Adjust padding to make space for the button */
                      border: none; /* Removed border */
                      outline: none; /* Removed default outline */
                      resize: none; /* Disable resize handle */
                      max-height: 52px; /* Set the maximum height */
                      overflow-y: auto; /* Add scrollbar if content exceeds max-height */
                      font-family: sans-serif; /* Use a common sans-serif font */
                      box-sizing: border-box; /* Include padding and border in element's total width and height */
                      /* Default background, can be overridden by prop */
                      background-color: transparent; /* Make textarea background transparent to show container background */
                      color: #374151; /* Set text color to a shade of gray */
                      /* Removed hardcoded font-size and line-height here */
                  }
  
                   .text-input:disabled,
                   .text-input[readOnly] {
                       background-color: #f3f4f6; /* gray-100 */
                       cursor: not-allowed;
                   }
  
  
                  .emoji-toggle-button {
                      position: absolute;
                      top: 50%; /* Center vertically */
                      right: 8px; /* Position from the right */
                      transform: translateY(-50%); /* Adjust for vertical centering */
                      display: inline-flex;
                      align-items: center;
                      justify-content: center;
                      padding: 4px; /* p-1 */
                      color: #6b7280; /* gray-500 */
                      cursor: pointer;
                      background: none; /* No background */
                      border: none; /* No border */
                      transition: color 0.2s ease-in-out;
                  }
  
                  .emoji-toggle-button:hover:not(:disabled) {
                      color: #4b5563; /* gray-700 */
                  }
  
                   .emoji-toggle-button:disabled {
                       cursor: not-allowed;
                       opacity: 0.6;
                   }
  
  
                   .emoji-toggle-button svg {
                       stroke: currentColor; /* Make SVG stroke color match text color */
                   }
  
                  .emoji-picker-container {
                      display: none; /* Hidden by default */
                      position: absolute;
                      left: 0;
                      right: 0;
                      z-index: 10;
                      max-height: 192px; /* max-h-48 */
                      overflow-y: hidden; /* Hide overflow for the container itself */
                      background-color: #ffffff; /* bg-white */
                      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* shadow-md */
                      border: 1px solid #e5e7eb; /* gray-200 */
                      border-radius: 0.375rem; /* rounded-md */
                      padding: 8px; /* p-2 */
                      flex-direction: column; /* Stack search and grid vertically */
                  }
  
                  .emoji-picker-container.show {
                      display: flex; /* Show as flex container when 'show' class is present */
                  }
  
                  .emoji-search-input {
                      width: 100%;
                      padding: 8px;
                      margin-bottom: 8px; /* Space below search input */
                      border: 1px solid #d1d5db;
                      border-radius: 0.25rem;
                      outline: none;
                      box-sizing: border-box;
                  }
  
                  .emoji-grid {
                       display: grid; /* Use grid for layout */
                       grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)); /* Responsive columns */
                       gap: 4px; /* gap-1 */
                       overflow-y: auto; /* Add scrollbar to the grid */
                       max-height: calc(100% - 40px); /* Calculate remaining height for grid (adjust 40px based on search input height + margin) */
                       padding-right: 8px; /* Add padding for scrollbar */
                  }
  
  
                  /* Positioning classes */
                  .emoji-picker-container.bottom {
                      bottom: 100%; /* Position above the input */
                  }
  
                  .emoji-picker-container.top {
                      top: 100%; /* Position below the input */
                  }
  
  
                  .emoji-button {
                      cursor: pointer;
                      font-size: 1.25rem; /* text-xl */
                      text-align: center;
                      padding: 4px; /* p-1 */
                      border-radius: 0.25rem; /* rounded */
                      background: none; /* No background */
                      border: none; /* No border */
                      transition: background-color 0.2s ease-in-out;
                  }
  
                  .emoji-button:hover {
                      background-color: #f3f4f6; /* gray-100 */
                  }
  
                  .no-results {
                      text-align: center;
                      color: #6b7280; /* gray-500 */
                      grid-column: 1 / -1; /* Span across all columns in the grid */
                  }
               `}</style>
      </div>
    );
  },
);
export default EmojiInput; // Export the component with the new name
