import React from 'react'
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
  Filler
} from 'chart.js'
import { Line } from 'react-chartjs-2'
import WeekProgressChart from './WeekProgressChart'
import LoadingError from './LoadingError'
import { getAllProjectsSorted, getProjectColor, sortProjectsLikeCurrentWeek } from '../utils/projectUtils'
import './Integrations.css'

// Экспортируем для обратной совместимости (если используется в других местах)
export { getProjectColorByIndex } from '../utils/projectUtils'

const parseWeekKey = (weekKey) => {
  const [yearStr, weekStr] = weekKey.split('-W')
  return { year: Number(yearStr), week: Number(weekStr) }
}

const compareWeekKeys = (a, b) => {
  const [yearA, weekA] = a.split('-W').map(Number)
  const [yearB, weekB] = b.split('-W').map(Number)

  if (yearA !== yearB) {
    return yearA - yearB
  }
  return weekA - weekB
}

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
  Filler
)

function FullStatistics({ selectedProject, onClearSelection, data, loading, error, onRetry, currentWeekData, onNavigate }) {

  const processData = () => {
    if (!data || data.length === 0) return null

    // Группируем данные по проектам
    const projectsMap = {}
    
    data.forEach(item => {
      const projectName = item.project_name
      const weekKey = `${item.report_year}-W${item.report_week.toString().padStart(2, '0')}`
      
      if (!projectsMap[projectName]) {
        projectsMap[projectName] = {}
      }
      
      projectsMap[projectName][weekKey] = parseFloat(item.total_score)
    })

    // Собираем все уникальные недели и сортируем их по году и неделе
    const allWeeks = new Set()
    Object.values(projectsMap).forEach(weeks => {
      Object.keys(weeks).forEach(week => allWeeks.add(week))
    })
    const sortedWeeks = Array.from(allWeeks).sort(compareWeekKeys)

    // Получаем отсортированный список всех проектов для синхронизации цветов
    const allProjectNames = getAllProjectsSorted(data)
    
    // Фильтруем по выбранному проекту, если он указан
    let projectNames = allProjectNames.filter(name => projectsMap[name])
    
    // Сортируем проекты так же, как на экране списка проектов (по priority и min_goal_score)
    if (currentWeekData) {
      projectNames = sortProjectsLikeCurrentWeek(projectNames, currentWeekData)
    }
    
    if (selectedProject) {
      projectNames = projectNames.filter(name => name === selectedProject)
    }
    
    const datasets = projectNames.map((projectName) => {
      let cumulativeSum = 0
      const values = sortedWeeks.map(week => {
        const score = projectsMap[projectName]?.[week] || 0
        cumulativeSum += score
        return cumulativeSum
      })

      // Генерируем цвет для линии на основе индекса в полном списке проектов
      const color = getProjectColor(projectName, allProjectNames)

      return {
        label: projectName,
        data: values,
        borderColor: color,
        backgroundColor: color.replace('50%)', '20%)'),
        fill: false,
        tension: 0.4,
        pointRadius: 4,
        pointHoverRadius: 6,
      }
    })

    return {
      labels: sortedWeeks,
      datasets: datasets,
    }
  }

  const chartData = processData()

  if (error && !chartData && !loading) {
    return <LoadingError onRetry={onRetry} />
  }

  const chartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    animation: false,
    plugins: {
      legend: {
        position: 'bottom',
        labels: {
          usePointStyle: true,
          padding: 15,
          font: {
            size: 12,
          },
        },
        padding: {
          top: 20,
        },
      },
      title: {
        display: false,
      },
      tooltip: {
        mode: 'index',
        intersect: false,
        callbacks: {
          label: function(context) {
            return `${context.dataset.label}: ${context.parsed.y.toFixed(2)}`
          }
        }
      },
    },
    scales: {
      x: {
        display: true,
        title: {
          display: false,
        },
        grid: {
          display: true,
          color: 'rgba(0, 0, 0, 0.05)',
        },
      },
      y: {
        display: true,
        title: {
          display: false,
        },
        beginAtZero: true,
        grid: {
          display: true,
          color: 'rgba(0, 0, 0, 0.05)',
        },
      },
    },
    interaction: {
      mode: 'nearest',
      axis: 'x',
      intersect: false,
    },
  }


  return (
    <div className="max-w-2xl mx-auto">
      {onNavigate && (
        <button
          onClick={() => onNavigate('current')}
          className="close-x-button"
          title="Закрыть"
        >
          ✕
        </button>
      )}
      {loading && !chartData ? (
        <div className="fixed inset-0 flex justify-center items-center">
          <div className="flex flex-col items-center">
            <div className="w-12 h-12 border-4 border-indigo-200 border-t-indigo-600 rounded-full animate-spin mb-4"></div>
            <div className="text-gray-600 font-medium">Загрузка...</div>
          </div>
        </div>
      ) : !chartData ? (
        <div className="flex justify-center items-center py-16">
          <div className="text-gray-500 text-lg">Нет данных для отображения</div>
        </div>
      ) : (
        <>
          <div style={{ height: '550px', paddingTop: '100px' }}>
            <Line data={chartData} options={chartOptions} />
          </div>
          <WeekProgressChart data={data} allProjectsSorted={getAllProjectsSorted(data)} currentWeekData={currentWeekData} selectedProject={selectedProject} />
        </>
      )}
    </div>
  )
}

export default FullStatistics

