'use client';

import React, { useEffect, useRef } from 'react';
import { motion } from 'framer-motion';
import { FiBarChart, FiActivity } from 'react-icons/fi';

interface ChartDataPoint {
  city: string;
  myPosition: number;
  competitorPosition: number;
}

interface PositionChartProps {
  data: ChartDataPoint[];
  myArticleId: string;
  competitorArticleId: string;
}

const PositionChart: React.FC<PositionChartProps> = ({ 
  data, 
  myArticleId, 
  competitorArticleId 
}) => {
  const chartContainerRef = useRef<HTMLDivElement>(null);
  const chartRef = useRef<any>(null);
  const scriptsLoadedRef = useRef<boolean>(false);

  // Загружаем скрипты AnyChart
  const loadAnyChartScripts = () => {
    return new Promise<void>((resolve, reject) => {
      if (scriptsLoadedRef.current && window.anychart) {
        resolve();
        return;
      }

      const scripts = [
        'https://cdn.anychart.com/releases/v8/js/anychart-base.min.js',
        'https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js',
        'https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js',
        'https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js'
      ];

      let loadedCount = 0;

      scripts.forEach((src) => {
        const script = document.createElement('script');
        script.src = src;
        script.onload = () => {
          loadedCount++;
          if (loadedCount === scripts.length) {
            scriptsLoadedRef.current = true;
            resolve();
          }
        };
        script.onerror = () => reject(new Error(`Failed to load script: ${src}`));
        document.head.appendChild(script);
      });

      // Загружаем CSS
      const link = document.createElement('link');
      link.href = 'https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css';
      link.type = 'text/css';
      link.rel = 'stylesheet';
      document.head.appendChild(link);

      const fontLink = document.createElement('link');
      fontLink.href = 'https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css';
      fontLink.type = 'text/css';
      fontLink.rel = 'stylesheet';
      document.head.appendChild(fontLink);
    });
  };

  // Преобразуем данные для Box and Whisker диаграммы с исправлением одинаковых значений
  const prepareBoxData = (data: ChartDataPoint[]) => {
    if (!data || data.length === 0) {
      return [];
    }
    
    return data.map((item) => {
      // Собираем все позиции (исключаем нулевые и отрицательные)
      const positions = [item.myPosition, item.competitorPosition].filter(p => p > 0);
      
      if (positions.length === 0) {
        // Если нет валидных позиций, создаем базовый элемент
        return {
          x: item.city,
          low: 1,
          q1: 1,
          median: 1,
          q3: 1,
          high: 1,
          outliers: []
        };
      }
      
      if (positions.length === 1) {
        // Если только одна позиция, показываем её как точку
        const pos = positions[0];
        return {
          x: item.city,
          low: pos,
          q1: pos,
          median: pos,
          q3: pos,
          high: pos,
          outliers: []
        };
      }
      
      // Если две позиции
      let [pos1, pos2] = positions;
      
      // Если позиции одинаковые, добавляем небольшое смещение для визуализации
      if (pos1 === pos2) {
        pos2 = pos1 + 0.1; // Небольшое смещение
      }
      
      const min = Math.min(pos1, pos2);
      const max = Math.max(pos1, pos2);
      const median = (pos1 + pos2) / 2;
      
      return {
        x: item.city,
        low: min,
        q1: min,
        median: median,
        q3: max,
        high: max,
        outliers: []
      };
    });
  };

  // Создание и настройка графика
  const createChart = async () => {
    if (!chartContainerRef.current || !window.anychart || !data || data.length === 0) return;

    try {
      // Удаляем предыдущий график
      if (chartRef.current) {
        chartRef.current.dispose();
        chartRef.current = null;
      }

      // Подготавливаем данные
      const boxData = prepareBoxData(data);
      
      if (boxData.length === 0) return;

      // Создаем Box диаграмму
      const chart = window.anychart.box();

      // Настраиваем заголовок
      const title = chart.title('Сравнение позиций товаров по городам');
      if (title && typeof title === 'object' && 'fontColor' in title) {
        (title as any).fontColor('#7c3aed');
        (title as any).fontSize(16);
        (title as any).fontWeight(600);
      }

      // Настраиваем оси
      chart.yAxis().title('Позиция');
      chart.yAxis().labels().format('{%value}');
      try {
        (chart.yAxis().labels() as any).fontColor('#6b7280');
      } catch (error) {
        console.log('Не удалось настроить цвет меток Y:', error);
      }
      
      chart.xAxis().title('Города');
      chart.xAxis().staggerMode(true);
      try {
        (chart.xAxis().labels() as any).fontColor('#6b7280');
      } catch (error) {
        console.log('Не удалось настроить цвет меток X:', error);
      }

      // Настраиваем шкалу Y (инвертируем для позиций - 1 сверху)
      try {
        const yScale = (chart as any).yScale();
        if (yScale && typeof yScale.inverted === 'function') {
          yScale.inverted(true);
        }
      } catch (error) {
        console.log('Не удалось инвертировать ось Y:', error);
      }

      // Создаем серию
      const series = (chart as any).box(boxData);
      
      // Настраиваем внешний вид с purple theme
      try {
        series.whiskerWidth('60%');
        series.fill('#8b5cf6', 0.4);
        series.stroke('#7c3aed', 2);
        series.whiskerStroke('#7c3aed', 2);
        series.medianStroke('#6d28d9', 3);

        // Настраиваем подсказки
        series.tooltip().format(
          'Город: {%x}' +
          '\nМин позиция: {%low}' +
          '\nМакс позиция: {%high}' +
          '\nМедиана: {%median}'
        );
      } catch (error) {
        console.log('Ошибка при настройке серии:', error);
      }

      // Настраиваем сетку
      try {
        (chart as any).grid(0).stroke('#e5e7eb', 1, '2 2');
        (chart as any).grid(1).layout('vertical').stroke('#e5e7eb', 1, '2 2');
      } catch (error) {
        console.log('Не удалось настроить сетку:', error);
        try {
          (chart as any).yGrid(true);
          (chart as any).xGrid(true);
        } catch (gridError) {
          console.log('Альтернативная настройка сетки также недоступна:', gridError);
        }
      }

      // Настраиваем фон
      (chart as any).background().fill('transparent');

      // Устанавливаем контейнер и отрисовываем
      (chart as any).container(chartContainerRef.current);
      (chart as any).draw();

      chartRef.current = chart;
      
    } catch (error) {
      console.error('Ошибка при создании графика:', error);
    }
  };

  // Инициализация компонента
  useEffect(() => {
    const initChart = async () => {
      try {
        await loadAnyChartScripts();
        await createChart();
      } catch (error) {
        console.error('Ошибка при инициализации графика:', error);
      }
    };

    initChart();

    return () => {
      if (chartRef.current) {
        chartRef.current.dispose();
        chartRef.current = null;
      }
    };
  }, []);

  // Обновление данных
  useEffect(() => {
    if (scriptsLoadedRef.current && window.anychart) {
      createChart();
    }
  }, [data, myArticleId, competitorArticleId]);

  if (!data || data.length === 0) {
    return (
      <div className="bg-white/40 backdrop-blur-md border border-white/30 rounded-lg md:rounded-xl shadow-lg shadow-purple-900/5 p-4 md:p-6 h-full flex flex-col">

        
        <motion.div 
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.2 }}
          className="flex-1 flex items-center justify-center text-gray-500"
        >
          <div className="text-center">
            <FiActivity size={48} className="mx-auto mb-4 text-purple-400" />
            <div className="text-lg font-medium mb-2">Нет данных для отображения</div>
            <div className="text-sm">Выполните поиск для просмотра графика позиций</div>
          </div>
        </motion.div>
      </div>
    );
  }

  return (
    <div className="bg-white/40 backdrop-blur-md border border-white/30 rounded-lg md:rounded-xl shadow-lg shadow-purple-900/5 p-4 md:p-6 h-full flex flex-col">


      {/* График */}
      <motion.div 
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 0.3 }}
        className="relative flex-1 min-h-0"
      >
        <div 
          ref={chartContainerRef} 
          className="w-full h-full min-h-[300px] md:min-h-[400px]"
        />
      </motion.div>

      {/* Minimal Legend */}
      <motion.div 
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 0.5 }}
        className="flex-shrink-0 mt-3 pt-3 border-t border-white/20"
      >
        <div className="flex justify-center items-center gap-6 text-xs text-gray-600">
          <div className="flex items-center gap-1.5">
            <div className="w-3 h-2 bg-gradient-to-r from-purple-500 to-purple-600 rounded-sm"></div>
            <span>{myArticleId}</span>
          </div>
          {competitorArticleId && (
            <div className="flex items-center gap-1.5">
              <div className="w-3 h-2 bg-gradient-to-r from-purple-300 to-purple-400 rounded-sm"></div>
              <span>{competitorArticleId}</span>
            </div>
          )}
        </div>
      </motion.div>
    </div>
  );
};

export default PositionChart;