import React, { useMemo } from "react";
import styled from "styled-components";
import useTranslation from "../../hooks/useTranslation.jsx";
import wordStore from "../../mc/wordStore.json";

import data from "emojibase-data/en/data.json";

// NOTE: SearchComponent is no longer needed/imported
// import { SearchComponent } from "../index.js";

const EmojiModal = ({ onChange }) => {
  const { findText } = useTranslation(wordStore);
  const HIGH_PRIORITY_GROUPS = [0, 1];

  // 1. Removed useState and handleSearchChange as search is removed

  const displayedEmojis = useMemo(() => {
    if (!Array.isArray(data)) return [];

    // Helper to extract text sources once
    const getTextSources = (emoji) => {
      return [
        emoji.annotation,
        emoji.name,
        emoji.shortcodes && emoji.shortcodes.join?.(" "),
        emoji.keywords && emoji.keywords.join?.(" "),
      ]
        .filter(Boolean)
        .join(" ")
        .toLowerCase();
    };

    const isFaceOrHand = (emoji) => {
      const emojiChar = emoji.emoji || "";
      const textSources = getTextSources(emoji);

      // --- 1. EXCLUSION: TARGETED EMOJIS (UPDATED) ---

      // NEW EXCLUSION LIST: Blue Heart, Shaking Face, Flying Saucer, Pushing Hands, Goose
      if (
        emojiChar === "🩶" ||
        emojiChar === "🩵" || // NEW: Light Blue Heart
        emojiChar === "𫸸" || // NEW: Rightwards Pushing Hand (if standard emoji)
        emojiChar === "𫆶" || // NEW: Goose (if standard emoji)
        emojiChar === "𫩠" || // NEW: Wing (if standard emoji)
        emojiChar === "𫩞" // NEW: Coral (if standard emoji)
      )
        return false;

      // NOTE: 𫸸, 𫆶, etc., are in the private use area and might not render/filter properly
      // depending on how emojibase handles them. Using the more common representations:
      if (
        emojiChar === "🫨" || // Shaking Face
        emojiChar === "🫩" || // Mini Jet
        emojiChar === "🫷" || // Leftwards Pushing Hand
        emojiChar === "🫸" || // Rightwards Pushing Hand
        emojiChar === "🫆" // Goose
      )
        return false;

      // Exclude Directional Action ZWJ sequences (e.g., 🏃‍♂️‍➡️)
      if (emojiChar.includes("➡️") || emojiChar.includes("←")) return false;

      // Exclude ZWJ faces with arrows (↕️, ↔️)
      if (
        emojiChar.includes("↕️") ||
        emojiChar.includes("↔️") ||
        emojiChar.includes("⬆️") ||
        emojiChar.includes("⬇️")
      )
        return false;

      // Exclude ZWJ job roles (💻, ⚕️, 🌾, 🧑‍)
      if (
        emojiChar.includes("💻") ||
        emojiChar.includes("⚕️") ||
        emojiChar.includes("🌾") ||
        emojiChar.includes("🧑‍")
      )
        return false;

      // Arrow/Direction Text Exclusion (for non-face symbols)
      if (
        textSources.includes("arrow") ||
        textSources.includes("direction") ||
        (emoji.group === 6 &&
          (textSources.includes("right") || textSources.includes("left")))
      ) {
        return false;
      }

      // --- 2. INCLUSION: Logic to keep faces/hands/hearts ---
      const subgroup = emoji.subgroup;
      if (typeof subgroup === "string") {
        const s = subgroup.toLowerCase();
        if (s.startsWith("face") || s.startsWith("hand") || s.includes("hand"))
          return true;
      }

      if (
        typeof emoji.group === "number" &&
        HIGH_PRIORITY_GROUPS.includes(emoji.group)
      )
        return true;

      if (textSources) {
        if (
          textSources.includes("face") ||
          textSources.includes("hand") ||
          textSources.includes("finger") ||
          textSources.includes("heart") ||
          textSources.includes("love")
        ) {
          return true;
        }
      }
      return false;
    };

    // 1. Filtering (only Faces, Hands, Hearts remain, with all exclusions applied)
    const filtered = data.filter(isFaceOrHand);

    // 2. Sorting (Priority groups 0 and 1 remain at the top)
    filtered.sort((a, b) => {
      const isAPriority = HIGH_PRIORITY_GROUPS.includes(a.group);
      const isBPriority = HIGH_PRIORITY_GROUPS.includes(b.group);

      if (isAPriority && !isBPriority) return -1;
      if (!isAPriority && isBPriority) return 1;

      if (a.group !== b.group) return (a.group ?? 0) - (b.group ?? 0);

      return (a.order ?? 0) - (b.order ?? 0);
    });

    return filtered;
  }, [data]); // Removed searchQuery from dependencies

  return (
    <Container>
      <Grid>
        {displayedEmojis?.map((emoji) => (
          <button
            key={emoji?.hexcode}
            onClick={() => onChange(emoji)}
            title={emoji?.label}
          >
            {emoji?.emoji}
          </button>
        ))}
      </Grid>
    </Container>
  );
};

// ... (Styled components remain the same) ...
const Container = styled.div`
  background-color: #fff;
  width: fit-content;
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: 40px;
  width: 263px;
  border-radius: 12px;
  padding: 12px;

  .epr-main {
    background-color: #fff !important;
  }

  .epr-header,
  .epr-emoji-category-label {
    display: none !important;
  }

  .epr-body {
    overflow-y: auto !important;
    max-height: 300px !important;
    scrollbar-width: thin;
    will-change: transform;
    transform: translateZ(0);
  }
`;

export const Grid = styled.div`
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  gap: 8px;
  height: 280px;
  overflow-y: auto;
  button {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    font-size: 24px;
    cursor: pointer;
    border: none;
    background: none;
    border-radius: 10px;
    transition: background 0.2s ease, transform 0.15s ease;

    &:hover {
      background: rgba(0, 0, 0, 0.08); /* light gray hover */
      transform: scale(1.05);
    }

    &:active {
      transform: scale(0.97);
      background: rgba(0, 0, 0, 0.12);
    }
  }
`;

export default EmojiModal;
