import React, { useMemo, forwardRef } from "react";

const AlphabetNavigator = forwardRef(function AlphabetNavigator(
  { selectedLetter, onLetterClick, sightData, selectedLanguage, isDisabled },
  ref
) {
  // Генерируем алфавит на основе доступных достопримечательностей
  const availableLetters = useMemo(() => {
    if (!sightData || sightData.length === 0) {
      return [];
    }

    // Получаем уникальные первые символы из названий достопримечательностей
    const letters = new Set();

    sightData.forEach((sight) => {
      if (sight.name && sight.name.trim()) {
        let firstChar = sight.name.trim().charAt(0);

        // Для китайского языка используем пиньинь (если доступен) или иероглиф
        if (selectedLanguage === "zh") {
          if (sight.name_pinyin) {
            firstChar = sight.name_pinyin.trim().toUpperCase().charAt(0);
          } else {
            // Если пиньинь нет, используем первый иероглиф
            firstChar = sight.name.trim().charAt(0);
          }
        } else {
          firstChar = firstChar.toUpperCase();
        }

        // Проверяем, что символ подходит для алфавита
        if (
          firstChar &&
          (/[A-ZА-ЯЁ]/.test(firstChar) ||
            (selectedLanguage === "zh" && /[\u4e00-\u9fff]/.test(firstChar)))
        ) {
          letters.add(firstChar);
        }
      }
    });

    // Сортируем символы в зависимости от языка
    const sortedLetters = Array.from(letters).sort((a, b) => {
      if (selectedLanguage === "zh") {
        // Для китайского языка сортируем по пиньинь или по Unicode
        if (/[A-Z]/.test(a) && /[A-Z]/.test(b)) {
          // Если оба символа - латинские буквы (пиньинь)
          return a.localeCompare(b, "en", { sensitivity: "base" });
        } else if (/[\u4e00-\u9fff]/.test(a) && /[\u4e00-\u9fff]/.test(b)) {
          // Если оба символа - иероглифы, сортируем по Unicode
          return a.localeCompare(b, "zh", { sensitivity: "base" });
        } else {
          // Смешанные символы: сначала латинские, потом иероглифы
          return /[A-Z]/.test(a) ? -1 : 1;
        }
      }
      return a.localeCompare(b, selectedLanguage, { sensitivity: "base" });
    });

    return sortedLetters;
  }, [sightData, selectedLanguage]);

  // Если нет доступных букв, не показываем компонент
  if (availableLetters.length === 0) {
    return null;
  }

  return (
    <div
      className={`alphabet ${isDisabled ? "alphabet-disabled" : ""}`}
      ref={ref}
    >
      {availableLetters.map((letter) => (
        <span
          key={letter}
          className={`alphabet-letter ${
            selectedLetter === letter ? "active" : ""
          }`}
          onPointerUp={() => !isDisabled && onLetterClick(letter)}
          role="button"
          tabIndex="0"
          data-lang={selectedLanguage === "zh" ? "zh" : undefined}
          aria-label={
            selectedLanguage === "en"
              ? `Scroll to sights starting with letter ${letter}`
              : selectedLanguage === "zh"
              ? `滚动到以字母 ${letter} 开头的景点`
              : `Прокрутить к достопримечательностям на букву ${letter}`
          }
        >
          {letter}
        </span>
      ))}
    </div>
  );
});

export default AlphabetNavigator;
