'use client';

import { FC } from 'react';
import { motion } from 'framer-motion';
import { FiClock, FiSearch } from 'react-icons/fi';

interface DailyPosition {
  city: string;
  rank: number; // Позиция в поиске
  pageRank: number; // Номер страницы
  competitorRank?: number; // Позиция конкурента
  competitorPageRank?: number; // Номер страницы конкурента
}

interface HistoryDay {
  id?: string; // Добавляем id для более точной фильтрации
  date: string;
  query: string; // Поле запроса
  myArticleId: string; // Артикул товара
  competitorArticleId?: string; // Артикул конкурента (опциональный)
  positions: DailyPosition[];
  hasCompetitor?: boolean; // Флаг наличия конкурента
}

interface HistoryDisplayProps {
  history: HistoryDay[];
  isLoading?: boolean;
  searchPerformed?: boolean;
  currentQuery?: string; // Текущий поисковый запрос
}

const HistoryDisplay: FC<HistoryDisplayProps> = ({
  history,
  isLoading = false,
  searchPerformed = false,
  currentQuery = '',
}) => {
  // Убираем дубликаты по дате, ограничиваем 6 записей
  const uniqueHistory: HistoryDay[] = [];
  history.forEach((day) => {
    if (!uniqueHistory.some((d) => d.date === day.date)) {
      uniqueHistory.push(day);
    }
  });

  const limitedHistory = uniqueHistory.slice(0, 6);

  // Возвращаем позицию на странице (а не общую позицию)
  const getPositionOnPage = (rank: number, pageRank: number): number => {
    // Позиция на странице - это просто rank (позиция в пределах страницы)
    return rank;
  };

  // Если поиск не был выполнен, показываем подсказку
  if (!searchPerformed) {
    return (
      <div className="bg-white/40 backdrop-blur-md rounded-lg md:rounded-xl border border-white/30 shadow-lg shadow-purple-900/5 p-3 md:p-4 h-full max-h-full flex flex-col items-center justify-center overflow-hidden">
        <motion.div
          animate={{
            scale: [1, 1.05, 1],
            rotate: [0, 1, -1, 0],
          }}
          transition={{
            duration: 3,
            repeat: Infinity,
            ease: 'easeInOut',
          }}
          className="text-purple-600 mb-5"
        >
          <FiSearch size={40} />
        </motion.div>
        <p className="text-gray-600 text-center mb-2 font-medium">
          Выполните поиск товаров по ключевому запросу
        </p>
        <p className="text-gray-500 text-sm text-center">
          История позиций товара будет отображаться здесь
        </p>
      </div>
    );
  }

  return (
    <div className="bg-white/40 backdrop-blur-md rounded-lg md:rounded-xl border border-white/30 shadow-lg shadow-purple-900/5 p-2 md:p-3 h-full max-h-full flex flex-col min-h-0 overflow-hidden">
      {/* Показываем индикатор загрузки */}
      {isLoading && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          className="flex-1 flex items-center justify-center"
        >
          <div className="flex flex-col items-center">
            <div className="w-12 h-12 border-4 border-white border-t-purple-500 rounded-full animate-spin mb-3"></div>
            <p className="text-gray-700 font-medium">Загрузка истории...</p>
          </div>
        </motion.div>
      )}

      {/* Показываем сообщение, если история пуста */}
      {!isLoading && limitedHistory.length === 0 && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          className="flex-1 flex items-center justify-center"
        >
          <div className="flex flex-col items-center text-gray-600">
            <FiClock size={36} className="mb-3 text-purple-400" />
            <p className="font-medium">Нет истории поиска для данного товара</p>
            <p className="text-sm mt-1 text-center">
              Выполните поиск с этим же артикулом повторно в будущем, чтобы
              увидеть динамику изменения позиций
            </p>
          </div>
        </motion.div>
      )}

      {/* Показываем историю в виде сетки карточек */}
      {!isLoading && limitedHistory.length > 0 && (
        <>
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.4 }}
            className="flex items-center mb-2 flex-shrink-0"
          >
            <motion.h3
              initial={{ x: -20 }}
              animate={{ x: 0 }}
              transition={{ duration: 0.5, delay: 0.2 }}
              className="font-medium text-lg text-gray-800 mr-auto overflow-hidden text-ellipsis"
            >
              <span className="flex items-center flex-wrap">
                <span className="mr-1">История</span>
                <span className="font-medium text-purple-700">
                  {limitedHistory[0].myArticleId}
                </span>
                {limitedHistory[0].hasCompetitor &&
                  limitedHistory[0].competitorArticleId && (
                    <span className="text-xs bg-purple-100 text-purple-800 ml-1 px-1 rounded">
                      vs {limitedHistory[0].competitorArticleId}
                    </span>
                  )}
                {currentQuery && (
                  <span className="text-sm font-normal text-gray-500 ml-1 whitespace-nowrap">
                    «{currentQuery}»
                  </span>
                )}
              </span>
            </motion.h3>
          </motion.div>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-1 md:gap-2 w-full flex-1 overflow-auto min-h-0 custom-scrollbar">
          {limitedHistory.map((day, dayIndex) => (
            <motion.div
              key={dayIndex}
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: dayIndex * 0.1, duration: 0.4 }}
              className="rounded-lg md:rounded-xl border border-white/50 flex flex-col h-full min-h-[150px] md:min-h-[200px] max-h-full overflow-hidden relative"
              style={{
                background: 'linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(124, 58, 237, 0.1), rgba(99, 102, 241, 0.1))',
              }}
            >
              {/* Заголовок с градиентом как в ProductDisplay */}
              <div 
                className="text-white py-2 px-3 text-center font-medium text-sm flex flex-col relative overflow-hidden"
                style={{
                  background: 'linear-gradient(135deg, #a855f7, #7c3aed, #6366f1)',
                }}
              >
                <span className="relative z-10">{day.date}</span>
                {/* Декоративный элемент */}
                <div 
                  className="absolute top-0 right-0 w-16 h-16 opacity-20"
                  style={{
                    background: 'radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%)',
                  }}
                />
              </div>

              <div className="flex-1 min-h-0 overflow-auto p-0 backdrop-blur-sm">
                <table className="w-full text-sm">
                  <thead className="bg-white/40 backdrop-blur-sm sticky top-0">
                    <tr>
                      <th className="text-left py-1.5 px-2 text-gray-700 font-medium border-b border-white/30">
                        Город
                      </th>
                      <th className="text-center py-1.5 px-1 text-gray-700 font-medium border-b border-white/30">
                          Мои
                      </th>
                      {day.hasCompetitor && (
                        <th className="text-center py-1.5 px-1 text-gray-700 font-medium border-b border-white/30">
                          Конкурент
                        </th>
                      )}
                    </tr>
                  </thead>
                  <tbody>
                    {day.positions.map((position, posIndex) => {
                      // Получаем позицию на странице
                      const myRank = getPositionOnPage(
                        position.rank,
                        position.pageRank
                      );

                      // Получаем позицию конкурента на странице, если она доступна
                      const competitorRank =
                        position.competitorRank && position.competitorPageRank
                          ? getPositionOnPage(
                              position.competitorRank,
                              position.competitorPageRank
                            )
                          : undefined;

                      return (
                        <tr
                          key={posIndex}
                          className="hover:bg-white/30 transition-colors border-b border-white/20 last:border-b-0"
                        >
                          <td className="py-1.5 px-2 text-gray-700 font-medium">
                            {position.city}
                          </td>
                          <td className="py-1.5 px-1 text-center">
                            <span className="inline-flex items-center justify-center w-6 h-6 bg-blue-100 text-blue-800 rounded-full text-xs font-bold">
                              {myRank}
                            </span>
                          </td>
                          {day.hasCompetitor && (
                            <td className="py-1.5 px-1 text-center">
                              {competitorRank ? (
                                <span className="inline-flex items-center justify-center w-6 h-6 bg-red-100 text-red-800 rounded-full text-xs font-bold">
                                  {competitorRank}
                                </span>
                              ) : (
                                <span className="text-gray-400 text-xs">—</span>
                              )}
                            </td>
                          )}
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
            </motion.div>
          ))}
        </div>
        </>
      )}

      <style jsx>{`
        .custom-scrollbar::-webkit-scrollbar {
          width: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
          background: rgba(0, 0, 0, 0.05);
          border-radius: 3px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
          background: linear-gradient(to bottom, #8b5cf6, #7c3aed);
          border-radius: 3px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
          background: linear-gradient(to bottom, #7c3aed, #6d28d9);
        }
      `}</style>
    </div>
  );
};

export default HistoryDisplay;
