play-life/play-life-web/src/components/CurrentWeek.jsx

import React from 'react'
import ProjectProgressBar from './ProjectProgressBar'
import LoadingError from './LoadingError'
import { getAllProjectsSorted, getProjectColor } from '../utils/projectUtils'
import { CircularProgressbar, buildStyles } from 'react-circular-progressbar'
import 'react-circular-progressbar/dist/styles.css'

// Компонент круглого прогрессбара с использованием react-circular-progressbar
function CircularProgressBar({ progress, size = 120, strokeWidth = 8, showCheckmark = true, extraProgress = null, maxProgress = 100, textSize = 'large', displayProgress = null, textPosition = 'default', projectColor = null }) {
  // Нормализуем прогресс для визуализации (0-100%)
  const normalizedProgress = Math.min(Math.max(progress || 0, 0), 100)
  
  // Если есть extra progress, вычисляем визуальный прогресс для overlay
  const extraVisual = extraProgress !== null && extraProgress > 0 
    ? Math.min((extraProgress / maxProgress) * 100, 100)
    : 0

  // Определяем, достигнут ли 100% или выше
  const isComplete = (displayProgress !== null ? displayProgress : progress) >= 100

  // Определяем градиент ID: зелёный если >= 100%, иначе по наличию extra progress
  const gradientId = isComplete ? 'success-gradient' : (extraVisual > 0 ? 'project-gradient' : 'overall-gradient')
  const extraGradientId = 'project-extra-gradient'

  // Определяем класс размера текста
  const textSizeClass = textSize === 'large' ? 'text-4xl' : textSize === 'small' ? 'text-base' : 'text-lg'

  // Используем displayProgress если передан (может быть больше 100%), иначе progress
  const progressToDisplay = displayProgress !== null ? displayProgress : progress

  return (
    <div className="relative" style={{ width: size, height: size }}>
      <CircularProgressbar
        value={normalizedProgress}
        strokeWidth={strokeWidth / size * 100}
        styles={buildStyles({
          // Цвета
          pathColor: `url(#${gradientId})`,
          trailColor: '#e5e7eb',
          // Анимация
          pathTransitionDuration: 1,
          // Размер текста (убираем встроенный)
          textSize: '0px',
          // Поворот, чтобы пустая часть была снизу
          rotation: 0.625,
          strokeLinecap: 'round',
        })}
        // Создаем неполный круг (270 градусов)
        circleRatio={0.75}
      />
      
      {/* Extra progress overlay (если есть) */}
      {extraVisual > 0 && (
        <CircularProgressbar
          value={extraVisual}
          strokeWidth={strokeWidth / size * 100}
          styles={buildStyles({
            rotation: 0.625,
            strokeLinecap: 'round',
            textSize: '0px',
            pathColor: `url(#${extraGradientId})`,
            trailColor: 'transparent',
            pathTransitionDuration: 1,
          })}
          circleRatio={0.75}
          className="absolute inset-0"
        />
      )}

      {/* Иконка статистики в центре */}
      <div className="absolute inset-0 flex items-center justify-center">
        <svg 
          width={size * 0.3} 
          height={size * 0.3} 
          viewBox="0 0 24 24" 
          fill="none" 
          stroke="currentColor" 
          strokeWidth="2" 
          strokeLinecap="round" 
          strokeLinejoin="round"
          style={{ 
            color: isComplete ? '#10b981' : '#4f46e5'
          }}
        >
          <line x1="18" y1="20" x2="18" y2="10"></line>
          <line x1="12" y1="20" x2="12" y2="4"></line>
          <line x1="6" y1="20" x2="6" y2="14"></line>
        </svg>
      </div>

      {/* Кастомный текст снизу */}
      <div className={`absolute inset-0 flex justify-center items-end ${textPosition === 'lower' ? '' : 'pb-2'}`} style={textPosition === 'lower' ? { bottom: '0.125rem' } : {}}>
        <div className="text-center">
          <div className={`${textSizeClass} font-bold`} style={{ color: isComplete ? '#10b981' : '#4f46e5' }}>
            {progressToDisplay !== null && progressToDisplay !== undefined ? `${progressToDisplay.toFixed(0)}%` : 'N/A'}
          </div>
        </div>
      </div>

      {/* Градиенты для SVG */}
      <svg width="0" height="0">
        <defs>
          <linearGradient id="overall-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stopColor="#4f46e5" />
            <stop offset="100%" stopColor="#9333ea" />
          </linearGradient>
          <linearGradient id="project-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stopColor="#4f46e5" />
            <stop offset="100%" stopColor="#9333ea" />
          </linearGradient>
          <linearGradient id="project-extra-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stopColor="#f59e0b" />
            <stop offset="100%" stopColor="#d97706" />
          </linearGradient>
          <linearGradient id="success-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stopColor="#10b981" />
            <stop offset="100%" stopColor="#059669" />
          </linearGradient>
        </defs>
      </svg>
    </div>
  )
}

// Компонент карточки проекта с круглым прогрессбаром
function ProjectCard({ project, projectColor, onProjectClick }) {
  const { project_name, total_score, min_goal_score, max_goal_score, priority } = project

  // Вычисляем прогресс по оригинальной логике из ProjectProgressBar
  const getGoalProgress = () => {
    const safeTotal = Number.isFinite(total_score) ? total_score : 0
    const safeMinGoal = Number.isFinite(min_goal_score) ? min_goal_score : 0
    const safeMaxGoal = Number.isFinite(max_goal_score) ? max_goal_score : 0

    const normalizedPriority = (() => {
      if (priority === null || priority === undefined) return null
      const numeric = Number(priority)
      return Number.isFinite(numeric) ? numeric : null
    })()

    const priorityBonus = (() => {
      if (normalizedPriority === 1) return 50
      if (normalizedPriority === 2) return 35
      return 20
    })()

    // Если нет валидного minGoal, возвращаем прогресс относительно maxGoal либо 0
    if (safeMinGoal <= 0) {
      if (safeMaxGoal > 0) {
        return Math.max(0, Math.min((safeTotal / safeMaxGoal) * 100, 100))
      }
      return 0
    }

    // До достижения minGoal растем линейно от 0 до 100%
    const baseProgress = Math.max(0, Math.min((safeTotal / safeMinGoal) * 100, 100))

    // Если maxGoal не задан корректно или еще не достигнут minGoal, показываем базовый прогресс
    if (safeTotal < safeMinGoal || safeMaxGoal <= safeMinGoal) {
      return baseProgress
    }

    // Между minGoal и maxGoal добавляем бонус в зависимости от приоритета
    const extraRange = safeMaxGoal - safeMinGoal
    const extraRatio = Math.min(1, Math.max(0, (safeTotal - safeMinGoal) / extraRange))
    const extraProgress = extraRatio * priorityBonus

    // Выше maxGoal прогресс не растет
    return Math.min(100 + priorityBonus, 100 + extraProgress)
  }

  const goalProgress = getGoalProgress()
  const maxProgressForPriority = 100 + (() => {
    const normalizedPriority = (() => {
      if (priority === null || priority === undefined) return null
      const numeric = Number(priority)
      return Number.isFinite(numeric) ? numeric : null
    })()
    if (normalizedPriority === 1) return 50
    if (normalizedPriority === 2) return 35
    return 20
  })()

  // Для визуального отображения: 100% прогрессбара = максимум для данного приоритета
  // visualProgress показывает процент заполнения прогрессбара (0-100%), где 100% = maxProgressForPriority
  const visualProgress = Math.min((goalProgress / maxProgressForPriority) * 100, 100)
  
  // Для extra overlay: если goalProgress > 100%, показываем extra часть
  // Но визуально это уже учтено в visualProgress, так что extra overlay не нужен
  // Однако если нужно показать, что достигнут максимум, можно использовать другой подход
  const baseVisualProgress = visualProgress
  const extraVisualProgress = 0 // Не используем extra overlay, так как visualProgress уже показывает весь прогресс

  // Вычисляем целевую зону
  const getTargetZone = () => {
    const safeMinGoal = Number.isFinite(min_goal_score) ? min_goal_score : 0
    const safeMaxGoal = Number.isFinite(max_goal_score) ? max_goal_score : 0

    if (safeMinGoal > 0 && safeMaxGoal > 0) {
      return `${safeMinGoal.toFixed(0)} - ${safeMaxGoal.toFixed(0)}`
    } else if (safeMinGoal > 0) {
      return `${safeMinGoal.toFixed(0)}+`
    }
    return '0+'
  }

  const handleClick = () => {
    if (onProjectClick) {
      onProjectClick(project_name)
    }
  }

  return (
    <div
      onClick={handleClick}
      className="bg-white rounded-3xl py-3 px-4 shadow-sm hover:shadow-md transition-all duration-300 cursor-pointer border border-gray-200 hover:border-indigo-300"
    >
      {/* Верхняя часть с названием и прогрессом */}
      <div className="flex items-center justify-between">
            {/* Левая часть - текст (название, баллы, целевая зона) */}
            <div className="flex-1 min-w-0">
              <div className="text-base font-semibold text-gray-600 leading-normal truncate mb-0.5">
                {project_name}
              </div>
              <div className="text-3xl font-bold text-black leading-normal mb-0.5">
                {total_score?.toFixed(1) || '0.0'}
              </div>
              <div className="text-xs text-gray-500 leading-normal">
                Целевая зона: {getTargetZone()}
              </div>
            </div>

        {/* Правая часть - круглый прогрессбар */}
        <div className="flex-shrink-0 ml-3">
          <CircularProgressBar
            progress={baseVisualProgress}
            size={80}
            strokeWidth={8}
            textSize="small"
            displayProgress={goalProgress}
            textPosition="lower"
            projectColor={projectColor}
          />
        </div>
      </div>
    </div>
  )
}

// Компонент группы проектов по приоритету
function PriorityGroup({ title, subtitle, projects, allProjects, onProjectClick }) {
  if (projects.length === 0) return null

  return (
    <div>
      {/* Заголовок группы */}
      <div className="flex items-center gap-2 mb-3">
        <h2 className="text-xl text-black">{title}</h2>
        <span className="text-black text-xl font-bold">•</span>
        <span className="text-lg font-bold text-black">{subtitle}</span>
      </div>

      {/* Карточки проектов */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
        {projects.map((project, index) => {
          if (!project || !project.project_name) return null

          const projectColor = getProjectColor(project.project_name, allProjects)

          return (
            <ProjectCard
              key={index}
              project={project}
              projectColor={projectColor}
              onProjectClick={onProjectClick}
            />
          )
        })}
      </div>
    </div>
  )
}

function CurrentWeek({ onProjectClick, data, loading, error, onRetry, allProjectsData, onNavigate }) {
  // Обрабатываем данные: может быть объект с projects и total, или просто массив
  const projectsData = data?.projects || (Array.isArray(data) ? data : []) || []

  // Показываем loading только если данных нет и идет загрузка
  if (loading && (!data || projectsData.length === 0)) {
    return (
      <div className="fixed inset-0 bottom-20 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>
    )
  }

  if (error && (!data || projectsData.length === 0)) {
    return <LoadingError onRetry={onRetry} />
  }

  // Процент выполнения берем только из данных API
  const overallProgress = (() => {
    // Проверяем различные возможные названия поля
    const rawValue = data?.total ?? data?.progress ?? data?.percentage ?? data?.completion ?? data?.goal_progress
    const parsedValue = rawValue === undefined || rawValue === null ? null : parseFloat(rawValue)

    if (Number.isFinite(parsedValue) && parsedValue >= 0) {
      return Math.max(0, parsedValue) // Убрали ограничение на 100, так как может быть больше
    }

    return null // null означает, что данные не пришли
  })()

  const hasProgressData = overallProgress !== null

  // Получаем отсортированный список всех проектов для синхронизации цветов
  const allProjects = getAllProjectsSorted(allProjectsData, projectsData || [])

  const normalizePriority = (value) => {
    if (value === null || value === undefined) return Infinity
    const numeric = Number(value)
    return Number.isFinite(numeric) ? numeric : Infinity
  }

  // Группируем проекты по приоритетам
  const priorityGroups = {
    main: [], // priority === 1
    important: [], // priority === 2
    others: [] // остальные
  }

  if (projectsData && projectsData.length > 0) {
    projectsData.forEach(project => {
      if (!project || !project.project_name) return

      const priority = normalizePriority(project.priority)
      if (priority === 1) {
        priorityGroups.main.push(project)
      } else if (priority === 2) {
        priorityGroups.important.push(project)
      } else {
        priorityGroups.others.push(project)
      }
    })

    // Сортируем внутри каждой группы по min_goal_score по убыванию
    Object.values(priorityGroups).forEach(group => {
      group.sort((a, b) => {
        const minGoalA = parseFloat(a.min_goal_score) || 0
        const minGoalB = parseFloat(b.min_goal_score) || 0
        return minGoalB - minGoalA
      })
    })
  }

  // Вычисляем процент выполнения для каждой группы
  const calculateGroupProgress = (projects) => {
    if (projects.length === 0) return 0

    let totalProgress = 0
    let validProjects = 0

    projects.forEach(project => {
      const safeTotal = Number.isFinite(project.total_score) ? project.total_score : 0
      const safeMinGoal = Number.isFinite(project.min_goal_score) ? project.min_goal_score : 0

      if (safeMinGoal > 0) {
        const projectProgress = Math.min((safeTotal / safeMinGoal) * 100, 100)
        totalProgress += projectProgress
        validProjects++
      }
    })

    return validProjects > 0 ? totalProgress / validProjects : 0
  }

  const mainProgress = calculateGroupProgress(priorityGroups.main)
  const importantProgress = calculateGroupProgress(priorityGroups.important)
  const othersProgress = calculateGroupProgress(priorityGroups.others)

  // Пересчитываем общий прогресс как среднее от групповых процентов
  const recalculatedOverallProgress = (() => {
    const groups = []
    if (priorityGroups.main.length > 0) groups.push(mainProgress)
    if (priorityGroups.important.length > 0) groups.push(importantProgress)
    if (priorityGroups.others.length > 0) groups.push(othersProgress)

    if (groups.length === 0) return null

    const average = groups.reduce((sum, progress) => sum + progress, 0) / groups.length
    return Math.max(0, average) // Убираем ограничение на 100% для текста
  })()

  // Используем пересчитанный общий прогресс вместо API данных
  const displayOverallProgress = recalculatedOverallProgress !== null ? recalculatedOverallProgress : (hasProgressData ? overallProgress : null)

  return (
    <div className="relative pt-8">
      {/* Кнопка "Приоритеты" в правом верхнем углу */}
      {onNavigate && (
        <div className="absolute top-0 right-0 z-10">
          <button
            onClick={() => onNavigate('priorities')}
            className="flex items-center justify-center w-10 h-10 text-gray-600 hover:text-indigo-600 transition-colors duration-200"
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
              <path d="m18.5 2.5 3 3L12 15l-4 1 1-4 9.5-9.5Z"></path>
            </svg>
          </button>
        </div>
      )}

      {/* Общий прогресс - большой круг в центре */}
      <div className="flex flex-col items-center mb-6">
        <div className="relative mb-6 cursor-pointer" onClick={() => onNavigate && onNavigate('full')}>
          <CircularProgressBar
            progress={displayOverallProgress}
            size={180}
            strokeWidth={12}
            showCheckmark={true}
            displayProgress={displayOverallProgress}
          />
          {/* Подсказка при наведении */}
          <div className="absolute inset-0 rounded-full opacity-0 hover:opacity-100 transition-opacity duration-200 bg-black bg-opacity-10 flex items-center justify-center">
            <span className="text-xs text-gray-600 font-medium bg-white px-2 py-1 rounded shadow-sm">
              Открыть статистику
            </span>
          </div>
        </div>
      </div>

      {/* Группы проектов по приоритетам */}
      <div className="space-y-6">
        <PriorityGroup
          title="Главный"
          subtitle={`${mainProgress.toFixed(1)}%`}
          projects={priorityGroups.main}
          allProjects={allProjects}
          onProjectClick={onProjectClick}
        />

        <PriorityGroup
          title="Важные"
          subtitle={`${importantProgress.toFixed(1)}%`}
          projects={priorityGroups.important}
          allProjects={allProjects}
          onProjectClick={onProjectClick}
        />

        <PriorityGroup
          title="Остальные"
          subtitle={`${othersProgress.toFixed(1)}%`}
          projects={priorityGroups.others}
          allProjects={allProjects}
          onProjectClick={onProjectClick}
        />
      </div>
    </div>
  )
}

export default CurrentWeek