import React from "react";
import { Icon } from "@iconify/react";
import { useAppSelector, useAppDispatch } from "../../store/hooks";
import { setSelectedTag } from "../../store/slices/notesSlice";
import { extractTags } from "../../utils/markdown";
import { Note } from "../../types/note";

interface TagsFilterProps {
  notes?: Note[];
}

export const TagsFilter: React.FC<TagsFilterProps> = ({ notes = [] }) => {
  const selectedTag = useAppSelector((state) => state.notes.selectedTag);
  const dispatch = useAppDispatch();

  // Получаем все уникальные теги из заметок
  // Группируем регистронезависимо, но сохраняем оригинальный регистр первого вхождения
  const getAllTags = () => {
    const tagCounts: Record<string, number> = {};
    const tagVariants: Record<string, string> = {}; // Хранит оригинальный регистр для каждого тега

    notes.forEach((note) => {
      const tags = extractTags(note.content);
      tags.forEach((tag) => {
        const tagKey = tag.toLowerCase();
        tagCounts[tagKey] = (tagCounts[tagKey] || 0) + 1;
        // Сохраняем первый вариант с оригинальным регистром
        if (!tagVariants[tagKey]) {
          tagVariants[tagKey] = tag;
        }
      });
    });

    // Преобразуем обратно в Record с оригинальными тегами
    const result: Record<string, number> = {};
    Object.keys(tagCounts).forEach((tagKey) => {
      result[tagVariants[tagKey]] = tagCounts[tagKey];
    });

    return result;
  };

  const tagCounts = getAllTags();
  const sortedTags = Object.keys(tagCounts).sort();

  const handleTagClick = (tag: string, event: React.MouseEvent<HTMLSpanElement>) => {
    event.preventDefault();
    // Всегда сохраняем тег в нижнем регистре для единообразия
    const tagLower = tag.toLowerCase();
    if (selectedTag?.toLowerCase() === tagLower) {
      dispatch(setSelectedTag(null));
    } else {
      dispatch(setSelectedTag(tagLower));
    }
    // Сбрасываем фокус после клика для предотвращения сохранения состояния :active
    (event.currentTarget as HTMLElement).blur();
  };

  if (sortedTags.length === 0) {
    return (
      <div className="tags-section">
        <div className="tags-header">
          <span className="tags-title">
            <Icon icon="mdi:tag" /> Теги
          </span>
        </div>
        <div className="tags-container">
          <div style={{ fontSize: "10px", color: "#999", textAlign: "center" }}>
            Нет тегов
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="tags-section">
      <div className="tags-header">
        <span className="tags-title">
          <Icon icon="mdi:tag" /> Теги
        </span>
      </div>
      <div className="tags-container">
        {sortedTags.map((tag) => {
          const count = tagCounts[tag];
          const isActive = selectedTag?.toLowerCase() === tag.toLowerCase();

          return (
            <span
              key={tag}
              className={`tag ${isActive ? "active" : ""}`}
              data-tag={tag}
              onClick={(e) => handleTagClick(tag, e)}
              onTouchEnd={(e) => {
                // Дополнительная обработка для touch-событий
                e.currentTarget.blur();
              }}
            >
              #{tag}
              <span className="tag-count">{count}</span>
            </span>
          );
        })}
      </div>
    </div>
  );
};

