Первоначальный коммит

Co-authored-by: Cursor <cursoragent@cursor.com>

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

@@ -0,0 +1,755 @@
+import React, { useState, useEffect, useCallback, useRef } from 'react'
+import { createPortal } from 'react-dom'
+import { useAuth } from './auth/AuthContext'
+import TaskDetail from './TaskDetail'
+import LoadingError from './LoadingError'
+import Toast from './Toast'
+import './WishlistDetail.css'
+import './TaskList.css'
+
+const API_URL = '/api/wishlist'
+
+function WishlistDetail({ wishlistId, onNavigate, onRefresh, boardId, onClose, previousTab }) {
+  const { authFetch, user } = useAuth()
+  const [wishlistItem, setWishlistItem] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const [loadingWishlist, setLoadingWishlist] = useState(true)
+  const [error, setError] = useState(null)
+  const [isCompleting, setIsCompleting] = useState(false)
+  const [isDeleting, setIsDeleting] = useState(false)
+  const [toastMessage, setToastMessage] = useState(null)
+  const [selectedTaskForDetail, setSelectedTaskForDetail] = useState(null)
+
+  const fetchWishlistDetail = useCallback(async () => {
+    try {
+      setLoadingWishlist(true)
+      setLoading(true)
+      setError(null)
+      const response = await authFetch(`${API_URL}/${wishlistId}`)
+      if (!response.ok) {
+        throw new Error('Ошибка загрузки желания')
+      }
+      const data = await response.json()
+      setWishlistItem(data)
+    } catch (err) {
+      setError(err.message)
+      console.error('Error fetching wishlist detail:', err)
+    } finally {
+      setLoading(false)
+      setLoadingWishlist(false)
+    }
+  }, [wishlistId, authFetch])
+
+  useEffect(() => {
+    if (wishlistId) {
+      fetchWishlistDetail()
+    } else {
+      setWishlistItem(null)
+      setLoading(true)
+      setLoadingWishlist(true)
+      setError(null)
+    }
+  }, [wishlistId, fetchWishlistDetail])
+
+  const handleEdit = () => {
+    // Сбрасываем флаг, чтобы handleClose не вызвал history.back()
+    // handleTabChange заменит запись модального окна через replaceState
+    historyPushedForWishlistRef.current = false
+    onClose?.()
+    onNavigate?.('wishlist-form', { wishlistId: wishlistId, boardId: boardId })
+  }
+
+  const handleComplete = async () => {
+    if (!wishlistItem || !wishlistItem.unlocked) return
+
+    setIsCompleting(true)
+    try {
+      const response = await authFetch(`${API_URL}/${wishlistId}/complete`, {
+        method: 'POST',
+      })
+
+      if (!response.ok) {
+        throw new Error('Ошибка при завершении')
+      }
+
+      if (onRefresh) {
+        onRefresh()
+      }
+      if (onNavigate) {
+        onNavigate('wishlist')
+      }
+    } catch (err) {
+      console.error('Error completing wishlist:', err)
+      setToastMessage({ text: err.message || 'Ошибка при завершении', type: 'error' })
+    } finally {
+      setIsCompleting(false)
+    }
+  }
+
+  const handleUncomplete = async () => {
+    if (!wishlistItem || !wishlistItem.completed) return
+
+    setIsCompleting(true)
+    try {
+      const response = await authFetch(`${API_URL}/${wishlistId}/uncomplete`, {
+        method: 'POST',
+      })
+
+      if (!response.ok) {
+        throw new Error('Ошибка при возобновлении желания')
+      }
+
+      if (onRefresh) {
+        onRefresh()
+      }
+      fetchWishlistDetail()
+    } catch (err) {
+      console.error('Error uncompleting wishlist:', err)
+      setToastMessage({ text: err.message || 'Ошибка при возобновлении желания', type: 'error' })
+    } finally {
+      setIsCompleting(false)
+    }
+  }
+
+  const handleDelete = async () => {
+    if (!wishlistItem) return
+
+    if (!window.confirm('Вы уверены, что хотите удалить это желание?')) {
+      return
+    }
+
+    setIsDeleting(true)
+    try {
+      const response = await authFetch(`${API_URL}/${wishlistId}`, {
+        method: 'DELETE',
+      })
+
+      if (!response.ok) {
+        throw new Error('Ошибка при удалении')
+      }
+
+      if (onRefresh) {
+        onRefresh()
+      }
+      if (onNavigate) {
+        onNavigate('wishlist')
+      }
+    } catch (err) {
+      console.error('Error deleting wishlist:', err)
+      setToastMessage({ text: err.message || 'Ошибка при удалении', type: 'error' })
+    } finally {
+      setIsDeleting(false)
+    }
+  }
+
+  const handleCreateTask = () => {
+    if (!wishlistItem || !wishlistItem.unlocked || wishlistItem.completed) return
+    onNavigate?.('task-form', { wishlistId: wishlistId })
+  }
+
+  const handleTaskCheckmarkClick = (e) => {
+    e.stopPropagation()
+    if (wishlistItem?.linked_task) {
+      setSelectedTaskForDetail(wishlistItem.linked_task.id)
+    }
+  }
+
+  const handleTaskItemClick = () => {
+    if (wishlistItem?.linked_task) {
+      setSelectedTaskForDetail(wishlistItem.linked_task.id)
+    }
+  }
+
+  const handleConditionTaskClick = async (condition) => {
+    if (condition.type !== 'task_completion' || !condition.task_id) {
+      return
+    }
+
+    try {
+      // Загружаем информацию о задаче
+      const response = await authFetch(`/api/tasks/${condition.task_id}`)
+      if (!response.ok) {
+        throw new Error('Ошибка при загрузке задачи')
+      }
+      const taskDetail = await response.json()
+
+      // Проверяем, является ли задача тестом
+      const isTest = taskDetail.task?.config_id != null
+      
+      if (isTest) {
+        // Для задач-тестов открываем экран прохождения теста
+        if (taskDetail.task.config_id) {
+          onNavigate?.('test', {
+            configId: taskDetail.task.config_id,
+            taskId: taskDetail.task.id,
+            maxCards: taskDetail.max_cards
+          })
+        }
+      } else {
+        // Для обычных задач открываем модальное окно выполнения
+        setSelectedTaskForDetail(condition.task_id)
+      }
+    } catch (err) {
+      console.error('Failed to load task details:', err)
+      setToastMessage({ text: 'Ошибка при загрузке задачи', type: 'error' })
+    }
+  }
+
+  const handleCloseDetail = (skipHistoryBack = false) => {
+    // Если skipHistoryBack = true (например, при навигации на форму редактирования),
+    // закрываем модальные окна без удаления записей из истории
+    // App.jsx сам обработает навигацию и заменит запись task-detail на task-form через replaceState
+    // Запись wishlist-detail останется в истории, но экран будет закрыт
+    if (skipHistoryBack) {
+      // Сохраняем флаг перед сбросом
+      const hadWishlistHistory = historyPushedForWishlistRef.current
+      
+      // Закрываем модальные окна
+      historyPushedForTaskRef.current = false
+      setSelectedTaskForDetail(null)
+      historyPushedForWishlistRef.current = false
+      
+      // Закрываем экран желания через onClose
+      // Навигация на task-form уже происходит в TaskDetail, поэтому не вызываем onNavigate здесь
+      // App.jsx обработает навигацию и заменит запись task-detail на task-form через replaceState
+      if (hadWishlistHistory && onClose) {
+        onClose()
+      }
+    } else if (historyPushedForTaskRef.current) {
+      window.history.back()
+    } else {
+      historyPushedForTaskRef.current = false
+      setSelectedTaskForDetail(null)
+    }
+  }
+
+  // Добавляем запись в историю при открытии модальных окон и обрабатываем "назад"
+  const historyPushedForWishlistRef = useRef(false)
+  const historyPushedForTaskRef = useRef(false)
+  const wishlistIdRef = useRef(wishlistId)
+  const selectedTaskForDetailRef = useRef(selectedTaskForDetail)
+  
+  // Обновляем refs при изменении значений
+  useEffect(() => {
+    wishlistIdRef.current = wishlistId
+    selectedTaskForDetailRef.current = selectedTaskForDetail
+  }, [wishlistId, selectedTaskForDetail])
+
+  useEffect(() => {
+    if (wishlistId && !historyPushedForWishlistRef.current) {
+      // Добавляем запись в историю при открытии модального окна WishlistDetail
+      window.history.pushState({ modalOpen: true, type: 'wishlist-detail' }, '', window.location.href)
+      historyPushedForWishlistRef.current = true
+    } else if (!wishlistId) {
+      historyPushedForWishlistRef.current = false
+    }
+
+    if (selectedTaskForDetail && !historyPushedForTaskRef.current) {
+      // Добавляем запись в историю при открытии вложенного модального окна TaskDetail
+      window.history.pushState({ modalOpen: true, type: 'task-detail', nested: true }, '', window.location.href)
+      historyPushedForTaskRef.current = true
+    } else if (!selectedTaskForDetail) {
+      historyPushedForTaskRef.current = false
+    }
+
+    if (!wishlistId && !selectedTaskForDetail) return
+
+    const handlePopState = (event) => {
+      // Проверяем наличие модальных окон в DOM
+      const taskDetailModal = document.querySelector('.task-detail-modal-overlay')
+      const wishlistDetailModal = document.querySelector('.wishlist-detail-modal-overlay')
+      
+      // Используем refs для получения актуального состояния
+      const currentTaskDetail = selectedTaskForDetailRef.current
+      const currentWishlistId = wishlistIdRef.current
+      
+      // Сначала проверяем вложенное модальное окно TaskDetail
+      if (currentTaskDetail || taskDetailModal) {
+        setSelectedTaskForDetail(null)
+        historyPushedForTaskRef.current = false
+        // Возвращаем запись для WishlistDetail
+        if (currentWishlistId || wishlistDetailModal) {
+          window.history.pushState({ modalOpen: true, type: 'wishlist-detail' }, '', window.location.href)
+        }
+        return
+      }
+      
+      // Если открыто модальное окно WishlistDetail, закрываем его
+      if (currentWishlistId || wishlistDetailModal) {
+        if (onClose) {
+          onClose()
+        } else {
+          // Возвращаемся на предыдущий таб, если он был сохранен, иначе на wishlist
+          if (previousTab) {
+            if (boardId) {
+              onNavigate?.(previousTab, { boardId })
+            } else {
+              onNavigate?.(previousTab)
+            }
+          } else if (boardId) {
+            onNavigate?.('wishlist', { boardId })
+          } else {
+            onNavigate?.('wishlist')
+          }
+        }
+        historyPushedForWishlistRef.current = false
+        // Следующее нажатие "назад" обработается App.jsx нормально
+        return
+      }
+    }
+
+    window.addEventListener('popstate', handlePopState)
+    return () => {
+      window.removeEventListener('popstate', handlePopState)
+    }
+  }, [wishlistId, selectedTaskForDetail, onClose, onNavigate, previousTab, boardId])
+
+  const handleClose = () => {
+    // Если была добавлена запись в историю, удаляем её через history.back()
+    // Обработчик popstate закроет модальное окно
+    if (historyPushedForWishlistRef.current) {
+      window.history.back()
+    } else if (onClose) {
+      onClose()
+    } else {
+      // Возвращаемся на предыдущий таб, если он был сохранен, иначе на wishlist
+      if (previousTab) {
+        // Сохраняем boardId при возврате на предыдущий таб
+        if (boardId) {
+          onNavigate?.(previousTab, { boardId })
+        } else {
+          onNavigate?.(previousTab)
+        }
+      } else if (boardId) {
+        onNavigate?.('wishlist', { boardId })
+      } else {
+        onNavigate?.('wishlist')
+      }
+    }
+  }
+
+  const handleTaskCompleted = () => {
+    setToastMessage({ text: 'Задача выполнена', type: 'success' })
+    // После выполнения задачи желание тоже завершается, перенаправляем на список
+    if (onRefresh) {
+      onRefresh()
+    }
+    if (onNavigate) {
+      onNavigate('wishlist')
+    }
+  }
+
+  const handleDeleteTask = async (e) => {
+    e.stopPropagation()
+    if (!wishlistItem?.linked_task || wishlistItem?.completed) return
+
+    if (!window.confirm('Удалить задачу, связанную с желанием?')) {
+      return
+    }
+
+    try {
+      // Удаляем задачу (помечаем как удалённую)
+      const deleteResponse = await authFetch(`/api/tasks/${wishlistItem.linked_task.id}`, {
+        method: 'DELETE',
+      })
+
+      if (!deleteResponse.ok) {
+        const errorData = await deleteResponse.json().catch(() => ({}))
+        throw new Error(errorData.message || errorData.error || 'Ошибка при удалении задачи')
+      }
+
+      setToastMessage({ text: 'Задача удалена', type: 'success' })
+      // Обновляем данные желания
+      fetchWishlistDetail()
+      if (onRefresh) {
+        onRefresh()
+      }
+    } catch (err) {
+      console.error('Error deleting task:', err)
+      setToastMessage({ text: err.message || 'Ошибка при удалении задачи', type: 'error' })
+    }
+  }
+
+
+  const formatPrice = (price) => {
+    return new Intl.NumberFormat('ru-RU', {
+      style: 'currency',
+      currency: 'RUB',
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0,
+    }).format(price)
+  }
+
+  const renderUnlockConditions = () => {
+    if (!wishlistItem || !wishlistItem.unlock_conditions || wishlistItem.unlock_conditions.length === 0) {
+      return null
+    }
+
+    return (
+      <div className="wishlist-detail-conditions">
+        <h3 className="wishlist-detail-section-title">Цели:</h3>
+        {wishlistItem.unlock_conditions.map((condition, index) => {
+          let conditionText = ''
+          let progress = null
+          
+          if (condition.type === 'task_completion') {
+            conditionText = condition.task_name || 'Задача'
+            const isCompleted = condition.task_completed === true
+            progress = {
+              type: 'task',
+              completed: isCompleted
+            }
+          } else {
+            const requiredPoints = condition.required_points || 0
+            const currentPoints = condition.current_points || 0
+            const project = condition.project_name || 'Проект'
+            let dateText = ''
+            if (condition.start_date) {
+              const date = new Date(condition.start_date + 'T00:00:00')
+              dateText = ` с ${date.toLocaleDateString('ru-RU')}`
+            } else {
+              dateText = ' за всё время'
+            }
+            conditionText = `${requiredPoints} в ${project}${dateText}`
+            const remaining = Math.max(0, requiredPoints - currentPoints)
+            progress = {
+              type: 'points',
+              current: currentPoints,
+              required: requiredPoints,
+              remaining: remaining,
+              percentage: requiredPoints > 0 ? Math.min(100, (currentPoints / requiredPoints) * 100) : 0
+            }
+          }
+
+          // Проверяем каждое условие индивидуально
+          let isMet = false
+          if (progress?.type === 'task') {
+            isMet = progress.completed === true
+          } else if (progress?.type === 'points') {
+            isMet = progress.current >= progress.required
+          }
+
+          return (
+            <div 
+              key={index} 
+              className={`wishlist-detail-condition ${isMet ? 'met' : 'not-met'} ${condition.type === 'task_completion' && condition.task_id ? 'clickable' : ''}`}
+              onClick={condition.type === 'task_completion' && condition.task_id ? () => handleConditionTaskClick(condition) : undefined}
+              style={condition.type === 'task_completion' && condition.task_id ? { cursor: 'pointer' } : {}}
+            >
+              <div className="condition-header">
+                <svg className="condition-icon" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                  {isMet ? (
+                    <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
+                  ) : (
+                    <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6zm9 14H6V10h12v10zm-6-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"/>
+                  )}
+                </svg>
+                <span className="condition-text">{conditionText}</span>
+              </div>
+              {/* Показываем дату для целей-задач, если next_show_at > сегодня */}
+              {condition.type === 'task_completion' && condition.task_next_show_at && (() => {
+                const showDate = new Date(condition.task_next_show_at)
+                // Нормализуем дату: устанавливаем время в 00:00:00 в локальном времени
+                const showDateNormalized = new Date(showDate.getFullYear(), showDate.getMonth(), showDate.getDate())
+                
+                const today = new Date()
+                const todayNormalized = new Date(today.getFullYear(), today.getMonth(), today.getDate())
+                
+                // Показываем только если дата > сегодня
+                if (showDateNormalized.getTime() <= todayNormalized.getTime()) {
+                  return null
+                }
+                
+                const tomorrowNormalized = new Date(todayNormalized)
+                tomorrowNormalized.setDate(tomorrowNormalized.getDate() + 1)
+                
+                let dateText
+                if (showDateNormalized.getTime() === tomorrowNormalized.getTime()) {
+                  dateText = 'Завтра'
+                } else {
+                  dateText = showDate.toLocaleDateString('ru-RU', { day: 'numeric', month: 'long', year: 'numeric' })
+                }
+                
+                return (
+                  <div className="condition-task-date">
+                    {dateText}
+                  </div>
+                )
+              })()}
+              {progress && progress.type === 'points' && !isMet && (
+                <div className="condition-progress">
+                  <div className="progress-bar">
+                    <div 
+                      className="progress-fill" 
+                      style={{ width: `${progress.percentage}%` }}
+                    ></div>
+                  </div>
+                  <div className="progress-text">
+                    <span>{Math.round(progress.current)} / {Math.round(progress.required)}</span>
+                    {progress.remaining > 0 && (
+                      <span className="progress-remaining">
+                        Осталось: {Math.round(progress.remaining)}
+                        {condition.weeks_text && ` (${condition.weeks_text})`}
+                      </span>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+
+
+  const modalContent = (
+    <div className="wishlist-detail-modal-overlay" onClick={handleClose}>
+      <div className="wishlist-detail-modal" onClick={(e) => e.stopPropagation()}>
+        <div className="wishlist-detail-modal-header">
+          <h2 
+            className="wishlist-detail-title"
+            onClick={wishlistItem ? handleEdit : undefined}
+            style={{ cursor: wishlistItem ? 'pointer' : 'default' }}
+          >
+            {loadingWishlist ? 'Загрузка...' : error ? 'Ошибка' : wishlistItem ? wishlistItem.name : 'Желание'}
+            {wishlistItem && (
+              <svg 
+                className="wishlist-detail-edit-icon"
+                width="18" 
+                height="18" 
+                viewBox="0 0 24 24" 
+                fill="none" 
+                stroke="currentColor" 
+                strokeWidth="2" 
+                strokeLinecap="round" 
+                strokeLinejoin="round"
+              >
+                <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
+              </svg>
+            )}
+          </h2>
+          <button onClick={handleClose} className="wishlist-detail-close-button">
+            ✕
+          </button>
+        </div>
+
+        <div className="wishlist-detail-modal-content">
+          {loadingWishlist && (
+            <div className="flex justify-center items-center py-8">
+              <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>
+          )}
+
+          {error && !loadingWishlist && (
+            <LoadingError onRetry={fetchWishlistDetail} />
+          )}
+
+          {!loadingWishlist && !error && wishlistItem && (
+            <>
+              {/* Изображение */}
+              {wishlistItem.image_url && (
+                <div className="wishlist-detail-image">
+                  <img src={wishlistItem.image_url} alt={wishlistItem.name} />
+                </div>
+              )}
+
+              {/* Цена */}
+              {wishlistItem.price && (
+                <div className="wishlist-detail-price">
+                  {formatPrice(wishlistItem.price)}
+                </div>
+              )}
+
+              {/* Ссылка */}
+              {wishlistItem.link && (() => {
+                try {
+                  const url = new URL(wishlistItem.link)
+                  const host = url.host.replace(/^www\./, '') // Убираем www. если есть
+                  return (
+                    <div className="wishlist-detail-link">
+                      <a href={wishlistItem.link} target="_blank" rel="noopener noreferrer">
+                        {host}
+                      </a>
+                    </div>
+                  )
+                } catch {
+                  // Если URL некорректный, показываем оригинальный текст
+                  return (
+                    <div className="wishlist-detail-link">
+                      <a href={wishlistItem.link} target="_blank" rel="noopener noreferrer">
+                        Открыть ссылку
+                      </a>
+                    </div>
+                  )
+                }
+              })()}
+
+              {/* Условия разблокировки */}
+              {renderUnlockConditions()}
+
+              {/* Связанная задача или кнопки действий */}
+              {wishlistItem.unlocked && (
+                <>
+                  {wishlistItem.linked_task && wishlistItem.linked_task.user_id === user?.id ? (
+                    <div className="wishlist-detail-linked-task">
+                      <div style={{ position: 'relative', display: 'inline-block', width: '100%' }}>
+                        <div
+                          className="task-item"
+                          onClick={handleTaskItemClick}
+                        >
+                          <div className="task-item-content">
+                          <div
+                            className="task-checkmark"
+                            onClick={handleTaskCheckmarkClick}
+                            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="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">
+                                {wishlistItem.linked_task.name}
+                              </div>
+                              {/* Показываем дату только для выполненных задач (next_show_at > сегодня) */}
+                              {wishlistItem.linked_task.next_show_at && (() => {
+                                const showDate = new Date(wishlistItem.linked_task.next_show_at)
+                                // Нормализуем дату: устанавливаем время в 00:00:00 в локальном времени
+                                const showDateNormalized = new Date(showDate.getFullYear(), showDate.getMonth(), showDate.getDate())
+
+                                const today = new Date()
+                                const todayNormalized = new Date(today.getFullYear(), today.getMonth(), today.getDate())
+
+                                // Показываем только если дата > сегодня
+                                if (showDateNormalized.getTime() <= todayNormalized.getTime()) {
+                                  return null
+                                }
+
+                                const tomorrowNormalized = new Date(todayNormalized)
+                                tomorrowNormalized.setDate(tomorrowNormalized.getDate() + 1)
+
+                                let dateText
+                                if (showDateNormalized.getTime() === tomorrowNormalized.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>
+                          {wishlistItem && !wishlistItem.completed && (
+                            <div className="task-actions">
+                              <button
+                                className="task-delete-button"
+                                onClick={handleDeleteTask}
+                                title="Удалить задачу"
+                              >
+                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                                  <path d="M3 6h18"></path>
+                                  <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
+                                  <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
+                                  <line x1="10" y1="11" x2="10" y2="17"></line>
+                                  <line x1="14" y1="11" x2="14" y2="17"></line>
+                                </svg>
+                              </button>
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                      {wishlistItem?.tasks_count > 0 && (
+                        <div className="wishlist-detail-tasks-badge">
+                          {wishlistItem.tasks_count}
+                        </div>
+                      )}
+                    </div>
+                    </div>
+                  ) : (
+                    <div className="wishlist-detail-actions">
+                      {wishlistItem.completed ? (
+                        <button
+                          onClick={handleUncomplete}
+                          disabled={isCompleting}
+                          className="wishlist-detail-uncomplete-button"
+                        >
+                          {isCompleting ? 'Возобновление...' : 'Возобновить'}
+                        </button>
+                      ) : (
+                        <>
+                          <button
+                            onClick={handleComplete}
+                            disabled={isCompleting}
+                            className="wishlist-detail-complete-button"
+                          >
+                            {isCompleting ? 'Завершение...' : 'Завершить'}
+                          </button>
+                          <div style={{ position: 'relative', display: 'inline-block' }}>
+                            <button
+                              onClick={handleCreateTask}
+                              className="wishlist-detail-create-task-button"
+                              title="Создать задачу"
+                            >
+                              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                                <path d="M9 11l3 3L22 4"></path>
+                                <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
+                              </svg>
+                            </button>
+                            {wishlistItem?.tasks_count > 0 && (
+                              <div className="wishlist-detail-tasks-badge">
+                                {wishlistItem.tasks_count}
+                              </div>
+                            )}
+                          </div>
+                        </>
+                      )}
+                    </div>
+                  )}
+                </>
+              )}
+            </>
+          )}
+        </div>
+
+        {toastMessage && (
+          <Toast
+            message={toastMessage.text}
+            type={toastMessage.type}
+            onClose={() => setToastMessage(null)}
+          />
+        )}
+
+        {/* Модальное окно для деталей задачи */}
+        {selectedTaskForDetail && (
+          <TaskDetail
+            taskId={selectedTaskForDetail}
+            onClose={handleCloseDetail}
+            onRefresh={() => {
+              fetchWishlistDetail()
+              if (onRefresh) onRefresh()
+            }}
+            onTaskCompleted={handleTaskCompleted}
+            onNavigate={onNavigate}
+          />
+        )}
+      </div>
+    </div>
+  )
+
+  return typeof document !== 'undefined'
+    ? createPortal(modalContent, document.body)
+    : modalContent
+}
+
+export default WishlistDetail
+