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

import React, { useState, useEffect, useMemo, useRef } from 'react'
import { useAuth } from './auth/AuthContext'
import TaskDetail from './TaskDetail'
import Toast from './Toast'
import './TaskList.css'

const API_URL = '/api/tasks'

function TaskList({ onNavigate, data, loading, backgroundLoading, onRefresh }) {
  const { authFetch } = useAuth()
  // Инициализируем tasks из data, если data есть, иначе пустой массив
  const [tasks, setTasks] = useState(() => data && Array.isArray(data) ? data : [])
  const [selectedTaskForDetail, setSelectedTaskForDetail] = useState(null)
  const [isCompleting, setIsCompleting] = useState(false)
  const [expandedCompleted, setExpandedCompleted] = useState({})
  const [selectedTaskForPostpone, setSelectedTaskForPostpone] = useState(null)
  const [postponeDate, setPostponeDate] = useState('')
  const [isPostponing, setIsPostponing] = useState(false)
  // Загружаем состояние раскрытия "Бесконечные" из localStorage (по умолчанию true)
  const [expandedInfinite, setExpandedInfinite] = useState(() => {
    try {
      const saved = localStorage.getItem('taskList_expandedInfinite')
      return saved ? JSON.parse(saved) : {}
    } catch {
      return {}
    }
  })
  const [toast, setToast] = useState(null)

  useEffect(() => {
    if (data) {
      setTasks(data)
    }
  }, [data])

  // Загрузка данных управляется из App.jsx через loadTabData
  // TaskList не инициирует загрузку самостоятельно

  const handleTaskClick = (task) => {
    onNavigate?.('task-form', { taskId: task.id })
  }

  const handleCheckmarkClick = async (task, e) => {
    e.stopPropagation()
    
    const hasProgression = task.has_progression || task.progression_base != null
    const hasSubtasks = task.subtasks_count > 0

    if (hasProgression || hasSubtasks) {
      // Открываем экран details
      setSelectedTaskForDetail(task.id)
    } else {
      // Отправляем задачу
      setIsCompleting(true)
      try {
        const response = await authFetch(`${API_URL}/${task.id}/complete`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({}),
        })

        if (!response.ok) {
          const errorData = await response.json().catch(() => ({}))
          throw new Error(errorData.message || 'Ошибка при выполнении задачи')
        }

        // Показываем toast о выполнении задачи
        setToast({ message: 'Задача выполнена' })

        // Обновляем список
        if (onRefresh) {
          onRefresh()
        }
      } catch (err) {
        console.error('Error completing task:', err)
        alert(err.message || 'Ошибка при выполнении задачи')
      } finally {
        setIsCompleting(false)
      }
    }
  }

  const handleCloseDetail = () => {
    setSelectedTaskForDetail(null)
  }

  const handleAddClick = () => {
    onNavigate?.('task-form', { taskId: undefined })
  }

  const handlePostponeClick = (task, e) => {
    e.stopPropagation()
    setSelectedTaskForPostpone(task)
    // Устанавливаем дату по умолчанию - завтра
    const tomorrow = new Date()
    tomorrow.setDate(tomorrow.getDate() + 1)
    tomorrow.setHours(0, 0, 0, 0)
    setPostponeDate(tomorrow.toISOString().split('T')[0])
  }

  const handlePostponeSubmit = async () => {
    if (!selectedTaskForPostpone || !postponeDate) return

    setIsPostponing(true)
    try {
      // Преобразуем дату в ISO формат с временем
      const dateObj = new Date(postponeDate)
      dateObj.setHours(0, 0, 0, 0)
      const isoDate = dateObj.toISOString()

      const response = await authFetch(`${API_URL}/${selectedTaskForPostpone.id}/postpone`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ next_show_at: isoDate }),
      })

      if (!response.ok) {
        const errorData = await response.json().catch(() => ({}))
        throw new Error(errorData.message || 'Ошибка при переносе задачи')
      }

      // Обновляем список
      if (onRefresh) {
        onRefresh()
      }

      // Закрываем модальное окно
      setSelectedTaskForPostpone(null)
      setPostponeDate('')
    } catch (err) {
      console.error('Error postponing task:', err)
      alert(err.message || 'Ошибка при переносе задачи')
    } finally {
      setIsPostponing(false)
    }
  }

  const handlePostponeReset = async () => {
    if (!selectedTaskForPostpone) return

    setIsPostponing(true)
    try {
      const response = await authFetch(`${API_URL}/${selectedTaskForPostpone.id}/postpone`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ next_show_at: null }),
      })

      if (!response.ok) {
        const errorData = await response.json().catch(() => ({}))
        throw new Error(errorData.message || 'Ошибка при сбросе переноса задачи')
      }

      // Обновляем список
      if (onRefresh) {
        onRefresh()
      }

      // Закрываем модальное окно
      setSelectedTaskForPostpone(null)
      setPostponeDate('')
    } catch (err) {
      console.error('Error resetting postpone:', err)
      alert(err.message || 'Ошибка при сбросе переноса задачи')
    } finally {
      setIsPostponing(false)
    }
  }

  const handlePostponeClose = () => {
    setSelectedTaskForPostpone(null)
    setPostponeDate('')
  }

  const toggleCompletedExpanded = (projectName) => {
    setExpandedCompleted(prev => ({
      ...prev,
      [projectName]: !prev[projectName]
    }))
  }

  const toggleInfiniteExpanded = (projectName) => {
    setExpandedInfinite(prev => {
      const newState = {
        ...prev,
        [projectName]: !prev[projectName]
      }
      // Сохраняем в localStorage
      try {
        localStorage.setItem('taskList_expandedInfinite', JSON.stringify(newState))
      } catch (err) {
        console.error('Error saving expandedInfinite to localStorage:', err)
      }
      return newState
    })
  }

  // Получаем все проекты из задачи (теперь они приходят в task.project_names)
  const getTaskProjects = (task) => {
    if (task.project_names && Array.isArray(task.project_names)) {
      return task.project_names
    }
    return []
  }

  // Функция для проверки, является ли период нулевым
  const isZeroPeriod = (intervalStr) => {
    if (!intervalStr) return false
    
    const parts = intervalStr.trim().split(/\s+/)
    if (parts.length < 1) return false
    
    const value = parseInt(parts[0], 10)
    return !isNaN(value) && value === 0
  }

  // Функция для парсинга PostgreSQL INTERVAL и добавления к дате
  const addIntervalToDate = (date, intervalStr) => {
    if (!intervalStr) return null
    
    const result = new Date(date)
    
    // Парсим строку интервала (формат: "1 day", "2 hours", "3 months", etc.)
    const parts = intervalStr.trim().split(/\s+/)
    if (parts.length < 2) return null
    
    const value = parseInt(parts[0], 10)
    if (isNaN(value)) return null
    
    const unit = parts[1].toLowerCase()
    
    switch (unit) {
      case 'minute':
      case 'minutes':
        result.setMinutes(result.getMinutes() + value)
        break
      case 'hour':
      case 'hours':
        result.setHours(result.getHours() + value)
        break
      case 'day':
      case 'days':
        result.setDate(result.getDate() + value)
        break
      case 'week':
      case 'weeks':
        result.setDate(result.getDate() + value * 7)
        break
      case 'month':
      case 'months':
        result.setMonth(result.getMonth() + value)
        break
      case 'year':
      case 'years':
        result.setFullYear(result.getFullYear() + value)
        break
      default:
        return null
    }
    
    return result
  }

  // Группируем задачи по проектам
  const groupedTasks = useMemo(() => {
    const today = new Date()
    today.setHours(0, 0, 0, 0)

    const groups = {}
    
    tasks.forEach(task => {
      const projects = getTaskProjects(task)
      
      // Если у задачи нет проектов, добавляем в группу "Без проекта"
      if (projects.length === 0) {
        projects.push('Без проекта')
      }
      
      // Определяем, в какую группу попадает задача
      let isCompleted = false
      let isInfinite = false
      
      // Если next_show_at установлен, задача всегда в выполненных (если дата в будущем)
      // даже если она бесконечная
      if (task.next_show_at) {
        const nextShowDate = new Date(task.next_show_at)
        nextShowDate.setHours(0, 0, 0, 0)
        isCompleted = nextShowDate.getTime() > today.getTime()
        isInfinite = false
      } else if (task.repetition_period && isZeroPeriod(task.repetition_period)) {
        // Если у задачи период повторения = 0 и нет next_show_at, она в бесконечных
        isInfinite = true
        isCompleted = false
      } else if (task.repetition_period) {
        // Если есть repetition_period (и он не 0), проверяем логику повторения
        // Используем last_completed_at + period
        let nextDueDate = null
        
        if (task.last_completed_at) {
          const lastCompleted = new Date(task.last_completed_at)
          nextDueDate = addIntervalToDate(lastCompleted, task.repetition_period)
        }
        
        if (nextDueDate) {
          // Округляем до начала дня
          nextDueDate.setHours(0, 0, 0, 0)
          
          // Если nextDueDate > today, то задача в выполненных
          isCompleted = nextDueDate.getTime() > today.getTime()
        } else {
          // Если не удалось определить дату, используем старую логику
          if (task.last_completed_at) {
            const completedDate = new Date(task.last_completed_at)
            completedDate.setHours(0, 0, 0, 0)
            isCompleted = completedDate.getTime() === today.getTime()
          } else {
            isCompleted = false
          }
        }
      } else {
        // Если repetition_period == null, используем старую логику
        if (task.last_completed_at) {
          const completedDate = new Date(task.last_completed_at)
          completedDate.setHours(0, 0, 0, 0)
          isCompleted = completedDate.getTime() === today.getTime()
        } else {
          isCompleted = false
        }
      }
      
      projects.forEach(projectName => {
        if (!groups[projectName]) {
          groups[projectName] = {
            notCompleted: [],
            completed: [],
            infinite: []
          }
        }
        
        if (isInfinite) {
          groups[projectName].infinite.push(task)
        } else if (isCompleted) {
          groups[projectName].completed.push(task)
        } else {
          groups[projectName].notCompleted.push(task)
        }
      })
    })
    
    return groups
  }, [tasks])

  const renderTaskItem = (task) => {
    const hasProgression = task.has_progression || task.progression_base != null
    const hasSubtasks = task.subtasks_count > 0
    const showDetailOnCheckmark = hasProgression || hasSubtasks

    return (
      <div
        key={task.id}
        className="task-item"
        onClick={() => handleTaskClick(task)}
      >
        <div className="task-item-content">
          <div
            className={`task-checkmark ${showDetailOnCheckmark ? 'task-checkmark-detail' : ''}`}
            onClick={(e) => handleCheckmarkClick(task, e)}
            title={showDetailOnCheckmark ? 'Открыть детали' : 'Выполнить задачу'}
          >
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="10" cy="10" r="9" stroke="currentColor" strokeWidth="2" fill="none" className="checkmark-circle" />
              <path d="M6 10 L9 13 L14 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="checkmark-check" />
            </svg>
          </div>
          <div className="task-name-container">
            <div className="task-name-wrapper">
              <div className="task-name">
                {task.name}
                {hasSubtasks && (
                  <span className="task-subtasks-count">(+{task.subtasks_count})</span>
                )}
                {hasProgression && (
                  <svg 
                    className="task-progression-icon" 
                    width="16" 
                    height="16" 
                    viewBox="0 0 24 24" 
                    fill="none" 
                    stroke="currentColor" 
                    strokeWidth="2" 
                    strokeLinecap="round" 
                    strokeLinejoin="round"
                    title="Задача с прогрессией"
                  >
                    <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline>
                    <polyline points="17 6 23 6 23 12"></polyline>
                  </svg>
                )}
              </div>
              {task.next_show_at && (() => {
                const showDate = new Date(task.next_show_at)
                showDate.setHours(0, 0, 0, 0)
                const today = new Date()
                today.setHours(0, 0, 0, 0)
                const tomorrow = new Date(today)
                tomorrow.setDate(tomorrow.getDate() + 1)
                
                let dateText
                if (showDate.getTime() === today.getTime()) {
                  dateText = 'Сегодня'
                } else if (showDate.getTime() === tomorrow.getTime()) {
                  dateText = 'Завтра'
                } else {
                  dateText = showDate.toLocaleDateString('ru-RU', { day: 'numeric', month: 'long', year: 'numeric' })
                }
                
                return (
                  <div className="task-next-show-date">
                    {dateText}
                  </div>
                )
              })()}
            </div>
          </div>
          <div className="task-actions">
            <button
              className="task-postpone-button"
              onClick={(e) => handlePostponeClick(task, e)}
              title="Перенести задачу"
            >
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="10" cy="10" r="8" stroke="currentColor" strokeWidth="1.5" fill="none"/>
                <path d="M10 5V10L13 12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" fill="none"/>
              </svg>
            </button>
          </div>
        </div>
      </div>
    )
  }

  // Показываем загрузку только если данных нет и это не фоновая загрузка
  // Проверяем наличие данных более надежно: либо в data, либо в tasks
  // Важно: проверяем оба источника данных, так как они могут обновляться асинхронно
  const hasDataInProps = data && Array.isArray(data) && data.length > 0
  const hasDataInState = tasks && Array.isArray(tasks) && tasks.length > 0
  const hasData = hasDataInProps || hasDataInState
  
  // Показываем загрузку только если:
  // 1. Идет загрузка (loading = true)
  // 2. Это не фоновая загрузка (backgroundLoading = false)
  // 3. Данных нет (hasData = false)
  // Это предотвращает показ загрузки при переключении табов, когда данные уже есть
  if (loading && !backgroundLoading && !hasData) {
    return (
      <div className="task-list">
        <div className="loading">Загрузка...</div>
      </div>
    )
  }

  const projectNames = Object.keys(groupedTasks).sort()

  return (
    <div className="task-list">
      {toast && (
        <Toast
          message={toast.message}
          onClose={() => setToast(null)}
        />
      )}
      <button onClick={handleAddClick} className="add-task-button">
        Добавить
      </button>

      {projectNames.length === 0 && !loading && tasks.length === 0 && (
        <div className="empty-state">
          <p>Задач пока нет. Добавьте задачу через кнопку "Добавить".</p>
        </div>
      )}

      {projectNames.map(projectName => {
        const group = groupedTasks[projectName]
        const hasCompleted = group.completed.length > 0
        const hasInfinite = group.infinite.length > 0
        const isCompletedExpanded = expandedCompleted[projectName]
        // По умолчанию бесконечные раскрыты (true), если не сохранено иное
        const isInfiniteExpanded = expandedInfinite[projectName] !== undefined 
          ? expandedInfinite[projectName] 
          : true

        return (
          <div key={projectName} className="project-group">
            <div className="project-group-header">
              <h3 className="project-group-title">{projectName}</h3>
            </div>
            
            {/* Обычные задачи */}
            {group.notCompleted.length > 0 && (
              <div className="task-group">
                {group.notCompleted.map(renderTaskItem)}
              </div>
            )}

            {/* Бесконечные задачи */}
            {hasInfinite && (
              <div className="completed-section">
                <button
                  className="completed-toggle"
                  onClick={() => toggleInfiniteExpanded(projectName)}
                >
                  <span className="completed-toggle-icon">
                    {isInfiniteExpanded ? '▼' : '▶'}
                  </span>
                  <span>Бесконечные ({group.infinite.length})</span>
                </button>
                {isInfiniteExpanded && (
                  <div className="task-group completed-tasks">
                    {group.infinite.map(renderTaskItem)}
                  </div>
                )}
              </div>
            )}

            {/* Выполненные задачи */}
            {hasCompleted && (
              <div className="completed-section">
                <button
                  className="completed-toggle"
                  onClick={() => toggleCompletedExpanded(projectName)}
                >
                  <span className="completed-toggle-icon">
                    {isCompletedExpanded ? '▼' : '▶'}
                  </span>
                  <span>Выполненные ({group.completed.length})</span>
                </button>
                {isCompletedExpanded && (
                  <div className="task-group completed-tasks">
                    {group.completed.map(renderTaskItem)}
                  </div>
                )}
              </div>
            )}

            {group.notCompleted.length === 0 && !hasCompleted && !hasInfinite && (
              <div className="empty-group">Нет задач в этой группе</div>
            )}
          </div>
        )
      })}

      {/* Модальное окно для деталей задачи */}
      {selectedTaskForDetail && (
        <TaskDetail
          taskId={selectedTaskForDetail}
          onClose={handleCloseDetail}
          onRefresh={onRefresh}
          onTaskCompleted={() => setToast({ message: 'Задача выполнена' })}
        />
      )}

      {/* Модальное окно для переноса задачи */}
      {selectedTaskForPostpone && (
        <div className="task-postpone-modal-overlay" onClick={handlePostponeClose}>
          <div className="task-postpone-modal" onClick={(e) => e.stopPropagation()}>
            <div className="task-postpone-modal-header">
              <h3>Перенести задачу</h3>
              <button onClick={handlePostponeClose} className="task-postpone-close-button">
                ✕
              </button>
            </div>
            <div className="task-postpone-modal-content">
              <p className="task-postpone-task-name">{selectedTaskForPostpone.name}</p>
              <label className="task-postpone-label">
                Дата показа:
                <input
                  type="date"
                  value={postponeDate}
                  onChange={(e) => setPostponeDate(e.target.value)}
                  className="task-postpone-input"
                  min={new Date().toISOString().split('T')[0]}
                />
              </label>
            </div>
            <div className="task-postpone-modal-actions">
              <button
                onClick={handlePostponeReset}
                className="task-postpone-cancel-button"
                disabled={isPostponing}
              >
                {isPostponing ? 'Сброс...' : 'Сбросить'}
              </button>
              <button
                onClick={handlePostponeSubmit}
                className="task-postpone-submit-button"
                disabled={isPostponing || !postponeDate}
              >
                {isPostponing ? 'Перенос...' : 'Перенести'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}

export default TaskList