import React, { useState, useEffect, useRef } from 'react'
import { createPortal } from 'react-dom'
import { useAuth } from './auth/AuthContext'
import ProjectProgressBar from './ProjectProgressBar'
import LoadingError from './LoadingError'
import Toast from './Toast'
import { getAllProjectsSorted, getProjectColor } from '../utils/projectUtils'
import { CircularProgressbar, buildStyles } from 'react-circular-progressbar'
import 'react-circular-progressbar/dist/styles.css'
import './CurrentWeek.css'

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

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

  // Определяем градиент ID: зелёный если >= 100%, иначе обычный градиент
  const gradientId = isComplete ? 'success-gradient' : 'overall-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}
      />

      {/* Иконка статистики в центре */}
      <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="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, today_change } = 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()
  
  // Для визуального отображения: круг показывает максимум 100%
  const visualProgress = Math.min(goalProgress, 100)

  // Вычисляем целевую зону
  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 formatTodayChange = (value) => {
    if (value === null || value === undefined) return '0'
    const rounded = Math.round(value * 10) / 10
    if (rounded === 0) return '0'
    if (Number.isInteger(rounded)) {
      return rounded > 0 ? `+${rounded}` : `${rounded}`
    }
    return rounded > 0 ? `+${rounded.toFixed(1)}` : `${rounded.toFixed(1)}`
  }

  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="flex items-center gap-2 mb-0.5">
                <div className="text-3xl font-bold text-black leading-normal">
                  {total_score?.toFixed(1) || '0.0'}
                </div>
                {today_change !== null && today_change !== undefined && today_change !== 0 && (
                  <div className="text-base font-medium text-gray-400 leading-normal">
                    ({formatTodayChange(today_change)})
                  </div>
                )}
              </div>
              <div className="text-xs text-gray-500 leading-normal">
                Целевая зона: {getTargetZone()}
              </div>
            </div>

        {/* Правая часть - круглый прогрессбар */}
        <div className="flex-shrink-0 ml-3">
          <CircularProgressBar
            progress={visualProgress}
            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, project.color)

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

// Компонент модального окна для добавления записи
function AddEntryModal({ onClose, onSuccess, authFetch, setToastMessage }) {
  const [message, setMessage] = useState('')
  const [rewards, setRewards] = useState([])
  const [projects, setProjects] = useState([])
  const [isSending, setIsSending] = useState(false)
  const debounceTimer = useRef(null)

  // Загрузка списка проектов для автокомплита
  useEffect(() => {
    const loadProjects = async () => {
      try {
        const response = await authFetch('/projects')
        if (response.ok) {
          const data = await response.json()
          setProjects(Array.isArray(data) ? data : [])
        }
      } catch (err) {
        console.error('Error loading projects:', err)
      }
    }
    loadProjects()
  }, [authFetch])

  // Функция поиска максимального индекса плейсхолдера
  const findMaxPlaceholderIndex = (msg) => {
    if (!msg) return -1
    const indices = []
    
    // Ищем ${N}
    const matchesCurly = msg.match(/\$\{(\d+)\}/g) || []
    matchesCurly.forEach(match => {
      const numMatch = match.match(/\d+/)
      if (numMatch) indices.push(parseInt(numMatch[0]))
    })
    
    // Ищем $N (но не \$N)
    let searchIndex = 0
    while (true) {
      const index = msg.indexOf('$', searchIndex)
      if (index === -1) break
      if (index === 0 || msg[index - 1] !== '\\') {
        const afterDollar = msg.substring(index + 1)
        const digitMatch = afterDollar.match(/^(\d+)/)
        if (digitMatch) {
          indices.push(parseInt(digitMatch[0]))
        }
      }
      searchIndex = index + 1
    }
    
    return indices.length > 0 ? Math.max(...indices) : -1
  }

  // Пересчет rewards при изменении сообщения (debounce 500ms)
  useEffect(() => {
    if (debounceTimer.current) {
      clearTimeout(debounceTimer.current)
    }

    debounceTimer.current = setTimeout(() => {
      const maxIndex = findMaxPlaceholderIndex(message)
      setRewards(prevRewards => {
        const currentRewards = [...prevRewards]
        
        // Удаляем лишние
        while (currentRewards.length > maxIndex + 1) {
          currentRewards.pop()
        }
        
        // Добавляем недостающие
        while (currentRewards.length < maxIndex + 1) {
          currentRewards.push({
            position: currentRewards.length,
            project_name: '',
            value: '0'
          })
        }
        
        return currentRewards
      })
    }, 500)

    return () => {
      if (debounceTimer.current) {
        clearTimeout(debounceTimer.current)
      }
    }
  }, [message])

  const handleRewardChange = (index, field, value) => {
    const newRewards = [...rewards]
    newRewards[index] = { ...newRewards[index], [field]: value }
    setRewards(newRewards)
  }

  // Формирование финального сообщения с заменой плейсхолдеров
  const buildFinalMessage = () => {
    let result = message
    
    // Формируем строки замены для каждого reward
    const rewardStrings = {}
    rewards.forEach((reward, index) => {
      const score = parseFloat(reward.value) || 0
      const projectName = reward.project_name.trim()
      if (!projectName) return
      
      const scoreStr = score >= 0 
        ? `**${projectName}+${score}**`
        : `**${projectName}${score}**`
      rewardStrings[index] = scoreStr
    })

    // Заменяем ${N}
    for (let i = 0; i < 100; i++) {
      const placeholder = `\${${i}}`
      if (rewardStrings[i]) {
        result = result.split(placeholder).join(rewardStrings[i])
      }
    }
    
    // Заменяем $N (с конца, чтобы $10 не заменился раньше $1)
    for (let i = 99; i >= 0; i--) {
      if (rewardStrings[i]) {
        const regex = new RegExp(`\\$${i}(?!\\d)`, 'g')
        result = result.replace(regex, rewardStrings[i])
      }
    }

    return result
  }

  // Проверка валидности формы: все поля проект+баллы должны быть заполнены
  const isFormValid = () => {
    if (rewards.length === 0) return true // Если нет полей, форма валидна
    
    return rewards.every(reward => {
      const projectName = reward.project_name?.trim() || ''
      const value = reward.value?.toString().trim() || ''
      return projectName !== '' && value !== ''
    })
  }

  const handleSubmit = async () => {
    // Валидация: все проекты должны быть заполнены
    for (const reward of rewards) {
      if (!reward.project_name.trim()) {
        setToastMessage({ text: 'Заполните все проекты', type: 'error' })
        return
      }
    }

    const finalMessage = buildFinalMessage()
    if (!finalMessage.trim()) {
      setToastMessage({ text: 'Введите сообщение', type: 'error' })
      return
    }

    setIsSending(true)
    try {
      const response = await authFetch('/message/post', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ text: finalMessage })
      })

      if (!response.ok) {
        throw new Error('Ошибка при отправке')
      }

      setToastMessage({ text: 'Запись добавлена', type: 'success' })
      onSuccess()
    } catch (err) {
      console.error('Error sending message:', err)
      setToastMessage({ text: err.message || 'Ошибка при отправке', type: 'error' })
    } finally {
      setIsSending(false)
    }
  }

  const modalContent = (
    <div className="add-entry-modal-overlay" onClick={onClose}>
      <div className="add-entry-modal" onClick={(e) => e.stopPropagation()}>
        <div className="add-entry-modal-header">
          <h2 className="add-entry-modal-title">Добавить запись</h2>
          <button onClick={onClose} className="add-entry-close-button">✕</button>
        </div>

        <div className="add-entry-modal-content">
          {/* Поле ввода сообщения */}
          <div className="add-entry-field">
            <label className="add-entry-label">Сообщение</label>
            <textarea
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              placeholder="Используйте $0, $1 для указания проектов"
              className="add-entry-textarea"
              rows={3}
            />
          </div>

          {/* Динамические поля проект+баллы */}
          {rewards.length > 0 && (
            <div className="add-entry-rewards">
              {rewards.map((reward, index) => (
                <div key={index} className="add-entry-reward-item">
                  <span className="add-entry-reward-number">{index}</span>
                  <input
                    type="text"
                    value={reward.project_name}
                    onChange={(e) => handleRewardChange(index, 'project_name', e.target.value)}
                    placeholder="Проект"
                    className="add-entry-input add-entry-project-input"
                    list={`add-entry-projects-${index}`}
                  />
                  <datalist id={`add-entry-projects-${index}`}>
                    {projects.map(p => (
                      <option key={p.project_id} value={p.project_name} />
                    ))}
                  </datalist>
                  <input
                    type="number"
                    step="any"
                    value={reward.value}
                    onChange={(e) => handleRewardChange(index, 'value', e.target.value)}
                    placeholder="Баллы"
                    className="add-entry-input add-entry-score-input"
                  />
                </div>
              ))}
            </div>
          )}

          {/* Кнопка отправки */}
          <button
            onClick={handleSubmit}
            disabled={isSending || !isFormValid()}
            className="add-entry-submit-button"
          >
            {isSending ? 'Отправка...' : 'Отправить'}
          </button>
        </div>
      </div>
    </div>
  )

  return typeof document !== 'undefined'
    ? createPortal(modalContent, document.body)
    : modalContent
}

function CurrentWeek({ onProjectClick, data, loading, error, onRetry, allProjectsData, onNavigate, onOpenAddModal }) {
  const { authFetch } = useAuth()
  const [isAddModalOpen, setIsAddModalOpen] = useState(false)
  const [toastMessage, setToastMessage] = useState(null)

  // Экспортируем функцию открытия модала для использования из App.jsx
  useEffect(() => {
    if (onOpenAddModal) {
      const openFn = () => {
        setIsAddModalOpen(true)
      }
      onOpenAddModal(openFn)
    }
  }, [onOpenAddModal])

  // Функция для обновления данных после добавления записи
  const refreshData = () => {
    if (onRetry) {
      onRetry()
    }
  }

  // Обрабатываем данные: может быть объект с 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
      })
    })
  }

  // Получаем проценты групп из API данных
  const mainProgress = (() => {
    const rawValue = data?.group_progress_1
    const parsedValue = rawValue === undefined || rawValue === null ? null : parseFloat(rawValue)
    return Number.isFinite(parsedValue) && parsedValue >= 0 ? parsedValue : 0
  })()

  const importantProgress = (() => {
    const rawValue = data?.group_progress_2
    const parsedValue = rawValue === undefined || rawValue === null ? null : parseFloat(rawValue)
    return Number.isFinite(parsedValue) && parsedValue >= 0 ? parsedValue : 0
  })()

  const othersProgress = (() => {
    const rawValue = data?.group_progress_0
    const parsedValue = rawValue === undefined || rawValue === null ? null : parseFloat(rawValue)
    return Number.isFinite(parsedValue) && parsedValue >= 0 ? parsedValue : 0
  })()

  // Используем общий прогресс из API данных
  const displayOverallProgress = overallProgress

  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 !== null ? Math.min(displayOverallProgress, 100) : 0}
            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" style={{ paddingBottom: '5rem' }}>
        <PriorityGroup
          title="Главный"
          subtitle={`${Math.round(mainProgress)}%`}
          projects={priorityGroups.main}
          allProjects={allProjects}
          onProjectClick={onProjectClick}
        />

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

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

      {/* Модальное окно добавления записи */}
      {isAddModalOpen && (
        <AddEntryModal
          onClose={() => setIsAddModalOpen(false)}
          onSuccess={() => {
            setIsAddModalOpen(false)
            refreshData()
          }}
          authFetch={authFetch}
          setToastMessage={setToastMessage}
        />
      )}

      {/* Toast уведомления */}
      {toastMessage && (
        <Toast
          message={toastMessage.text}
          type={toastMessage.type}
          onClose={() => setToastMessage(null)}
        />
      )}
    </div>
  )
}

export default CurrentWeek