'use client';

import React, { useEffect, useRef } from 'react';
import { motion } from 'framer-motion';
import { 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);

  // Загружаем Chart.js
  const loadChartJS = () => {
    return new Promise<void>((resolve, reject) => {
      if (typeof window === 'undefined') return resolve();
      if (scriptsLoadedRef.current && (window as any).Chart) return resolve();

      const script = document.querySelector('script[src*="chart.js"]') as HTMLScriptElement | null;
      if (script && script.getAttribute('data-loaded') === 'true') return resolve();

      const chartScript = script || document.createElement('script');
      chartScript.src = 'https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js';
      chartScript.onload = () => {
        chartScript.setAttribute('data-loaded', 'true');
        scriptsLoadedRef.current = true;
        resolve();
      };
      chartScript.onerror = () => reject(new Error('Failed to load Chart.js'));
      
      if (!script) document.head.appendChild(chartScript);
    });
  };

  // Преобразование данных для candlestick с цветовой логикой
  const prepareCandlestickData = (points: ChartDataPoint[]) => {
    if (!points || points.length === 0) return [];

    return points.map((item) => {
      // Ограничиваем значения позиций максимум до 10 (0 = отсутствует)
      const myPos = item.myPosition > 0 ? Math.min(item.myPosition, 10) : null;
      const compPos = item.competitorPosition > 0 ? Math.min(item.competitorPosition, 10) : null;
      
      let color = '#8b5cf6'; // Purple default
      
      // Определяем цвет: кто лучше (меньшая позиция)
      if (myPos && compPos) {
        if (myPos < compPos) {
          color = '#16a34a'; // Dark green - мой лучше
        } else if (myPos > compPos) {
          color = '#dc2626'; // Dark red - конкурент лучше
        } else {
          color = '#7c3aed'; // Purple - равные позиции
        }
      } else if (myPos) {
        color = '#8b5cf6'; // Purple - только мой
      } else if (compPos) {
        color = '#a855f7'; // Light purple - только конкурент
      }

      return {
        x: item.city,
        fill: color,
        myPosition: myPos,
        competitorPosition: compPos
      };
    });
  };

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

    try {
      if (chartRef.current) {
        chartRef.current.destroy();
        chartRef.current = null;
      }

      const candlestickData = prepareCandlestickData(data);
      if (candlestickData.length === 0) return;

      // Создаем canvas элемент
      const canvas = document.createElement('canvas');
      chartContainerRef.current.innerHTML = '';
      chartContainerRef.current.appendChild(canvas);

      const ctx = canvas.getContext('2d');
      if (!ctx) return;

      // Используем специальный Chart.js плагин для рисования wicks (под барами)
      const wickPlugin = {
        id: 'candlestickWicks',
        beforeDatasetsDraw: (chart: any) => {
          const ctx = chart.ctx;
          const meta = chart.getDatasetMeta(0);
          
          candlestickData.forEach((item, index) => {
            const bar = meta.data[index];
            const x = bar.x;
            
            let wickHigh, wickLow;
            
            if (item.myPosition && item.competitorPosition) {
              const min = Math.min(item.myPosition, item.competitorPosition);
              const max = Math.max(item.myPosition, item.competitorPosition);
              
              // Wicks ограничены только реальными данными
              wickHigh = max;
              wickLow = min;
            } else {
              const pos = item.myPosition || item.competitorPosition || 1;
              // Для одной позиции - минимальный wick для визуализации
              wickHigh = pos + 0.2;
              wickLow = Math.max(1, pos - 0.2);
            }

            // Clamp wicks to [1, 10]
            wickHigh = Math.min(Math.max(wickHigh, 1), 10);
            wickLow = Math.min(Math.max(wickLow, 1), 10);
            
            // Конвертируем в пиксели
            const yWickHigh = chart.scales.y.getPixelForValue(wickHigh);
            const yWickLow = chart.scales.y.getPixelForValue(wickLow);
            
            ctx.save();
            ctx.strokeStyle = '#666666';
            ctx.lineWidth = 1.5;
            
            // Полный wick от низа до верха (под баром)
            ctx.beginPath();
            ctx.moveTo(x, yWickHigh);
            ctx.lineTo(x, yWickLow);
            ctx.stroke();
            
            // Маленькие горизонтальные черточки на концах
            const wickWidth = 4;
            
            // Верхняя черточка
            ctx.beginPath();
            ctx.moveTo(x - wickWidth, yWickHigh);
            ctx.lineTo(x + wickWidth, yWickHigh);
            ctx.stroke();
            
            // Нижняя черточка
            ctx.beginPath();
            ctx.moveTo(x - wickWidth, yWickLow);
            ctx.lineTo(x + wickWidth, yWickLow);
            ctx.stroke();
            
            ctx.restore();
          });
        }
      };

      // Подготавливаем данные для floating bars (тела свечей)
      const chartData = {
        labels: candlestickData.map(item => item.x),
        datasets: [{
          label: 'Диапазон позиций',
          data: candlestickData.map(item => {
            if (item.myPosition && item.competitorPosition) {
              const min = Math.min(item.myPosition, item.competitorPosition);
              const max = Math.max(item.myPosition, item.competitorPosition);
              const mid = (min + max) / 2;
              const bodySize = Math.max((max - min) * 0.6, 0.5); // Тело = 60% от диапазона
              const low = Math.max(1, mid - bodySize/2);
              const high = Math.min(10, mid + bodySize/2);
              return { x: item.x, y: [low, high] }; // Floating bar around middle
            } else {
              const pos = item.myPosition || item.competitorPosition || 1;
              const low = Math.max(1, pos - 0.25);
              const high = Math.min(10, pos + 0.25);
              return { x: item.x, y: [low, high] }; // Маленькое тело
            }
          }),
          backgroundColor: candlestickData.map(item => item.fill),
          borderColor: candlestickData.map(item => item.fill),
          borderWidth: 1,
          barThickness: 18 // Толщина тел свечей
        }]
      };

      const chart = new (window as any).Chart(ctx, {
        type: 'bar',
        data: chartData,
        plugins: [wickPlugin], // Добавляем наш плагин для wicks
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            title: {
              display: true,
              text: 'Сравнение позиций товаров по городам',
              color: '#7c3aed',
              font: {
                size: 16,
                weight: '600'
              }
            },
            legend: {
              display: false
            },
            tooltip: {
              callbacks: {
                label: (context: any) => {
                  const dataIndex = context.dataIndex;
                  const item = candlestickData[dataIndex];
                  const my = item.myPosition ?? '—';
                  const comp = item.competitorPosition ?? '—';
                  const lines = [
                    `${myArticleId}: ${my}`,
                    `${competitorArticleId}: ${comp}`,
                  ];
                  if (item.myPosition && item.competitorPosition) {
                    lines.push(`Диапазон: ${Math.min(item.myPosition, item.competitorPosition)} - ${Math.max(item.myPosition, item.competitorPosition)}`);
                  }
                  return lines;
                }
              }
            }
          },
          scales: {
            y: {
              title: {
                display: true,
                text: 'Позиции в каталоге',
                color: '#6b7280'
              },
              grid: {
                color: '#e5e7eb'
              },
              ticks: {
                color: '#6b7280',
                stepSize: 1
              },
              type: 'linear',
              bounds: 'ticks',
              min: 1,
              max: 10,
              reverse: true // Инвертируем: 1 вверху, большие числа внизу
            },
            x: {
              title: {
                display: true,
                text: 'Города',
                color: '#6b7280'
              },
              grid: {
                color: '#e5e7eb'
              },
              ticks: {
                color: '#6b7280'
              }
            }
          }
        }
      });

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

  useEffect(() => {
    const init = async () => {
      try {
        await loadChartJS();
        // Дождёмся готовности Chart.js
        const waitReady = async () => {
          const maxTries = 20;
          for (let i = 0; i < maxTries; i++) {
            if ((window as any).Chart) return;
            await new Promise(res => setTimeout(res, 150));
          }
        };
        await waitReady();
        await createChart();
      } catch (e) {
        console.error('Ошибка инициализации графика:', e);
      }
    };
    init();
    return () => {
      if (chartRef.current) {
        chartRef.current.destroy();
        chartRef.current = null;
      }
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    const update = async () => {
      if (!scriptsLoadedRef.current || !(window as any).Chart) return;
      await createChart();
    };
    update();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [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>

      {/* Минимальная легенда (без варианта "Один товар") */}
      <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-4 text-xs text-gray-600">
          <div className="flex items-center gap-1.5">
            <div className="w-3 h-2 bg-green-600 rounded-sm"></div>
            <span>{myArticleId} лучше</span>
          </div>
          <div className="flex items-center gap-1.5">
            <div className="w-3 h-2 bg-red-600 rounded-sm"></div>
            <span>{competitorArticleId || 'Конкурент'} лучше</span>
          </div>
        </div>
      </motion.div>
    </div>
  );
};

export default PositionChart;
