import React, { useState } from 'react'
import LoadingError from './LoadingError'
import { useAuth } from './auth/AuthContext'

// Функция для форматирования скорa (аналогично formatScore из TaskDetail)
const formatScore = (num) => {
  if (num === 0) return '0'
  
  let str = num.toPrecision(4)
  str = str.replace(/\.?0+$/, '')
  
  if (str.includes('e+') || str.includes('e-')) {
    const numValue = parseFloat(str)
    if (Math.abs(numValue) >= 10000) {
      return str
    }
    return numValue.toString().replace(/\.?0+$/, '')
  }
  
  return str
}

// Функция для форматирования текста с заменой плейсхолдеров на nodes
const formatEntryText = (text, nodes) => {
  if (!text || !nodes || nodes.length === 0) {
    return text
  }

  // Создаем map для быстрого доступа к nodes по индексу
  const nodesMap = {}
  nodes.forEach(node => {
    nodesMap[node.index] = node
  })

  // Создаем массив для хранения частей текста и React элементов
  const parts = []
  let lastIndex = 0
  let currentText = text

  // Сначала защищаем экранированные плейсхолдеры
  const escapedMarkers = {}
  for (let i = 0; i < 100; i++) {
    const escaped = `\\$${i}`
    const marker = `__ESCAPED_DOLLAR_${i}__`
    if (currentText.includes(escaped)) {
      escapedMarkers[marker] = escaped
      currentText = currentText.replace(new RegExp(escaped.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'), marker)
    }
  }

  // Заменяем ${0}, ${1}, и т.д.
  for (let i = 0; i < 100; i++) {
    const placeholder = `\${${i}}`
    const regex = new RegExp(placeholder.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g')
    if (nodesMap[i] && currentText.includes(placeholder)) {
      const node = nodesMap[i]
      const scoreStr = node.score >= 0 
        ? `${node.project_name}+${formatScore(node.score)}`
        : `${node.project_name}-${formatScore(Math.abs(node.score))}`
      currentText = currentText.replace(regex, `__NODE_${i}__`)
      // Сохраняем информацию о замене
      if (!escapedMarkers[`__NODE_${i}__`]) {
        escapedMarkers[`__NODE_${i}__`] = { type: 'node', text: scoreStr }
      }
    }
  }

  // Заменяем $0, $1, и т.д. (с конца, чтобы не заменить $1 в $10)
  for (let i = 99; i >= 0; i--) {
    if (nodesMap[i]) {
      const node = nodesMap[i]
      const scoreStr = node.score >= 0 
        ? `${node.project_name}+${formatScore(node.score)}`
        : `${node.project_name}-${formatScore(Math.abs(node.score))}`
      const regex = new RegExp(`\\$${i}(?!\\d)`, 'g')
      if (currentText.match(regex)) {
        currentText = currentText.replace(regex, `__NODE_${i}__`)
        if (!escapedMarkers[`__NODE_${i}__`]) {
          escapedMarkers[`__NODE_${i}__`] = { type: 'node', text: scoreStr }
        }
      }
    }
  }

  // Разбиваем текст на части и создаем React элементы
  const result = []
  let searchIndex = 0
  
  while (searchIndex < currentText.length) {
    // Ищем следующий маркер
    let foundMarker = null
    let markerIndex = currentText.length
    
    // Ищем все маркеры
    for (const marker in escapedMarkers) {
      const index = currentText.indexOf(marker, searchIndex)
      if (index !== -1 && index < markerIndex) {
        markerIndex = index
        foundMarker = marker
      }
    }
    
    // Если нашли маркер
    if (foundMarker) {
      // Добавляем текст до маркера
      if (markerIndex > searchIndex) {
        result.push(currentText.substring(searchIndex, markerIndex))
      }
      
      // Добавляем элемент для маркера
      const markerData = escapedMarkers[foundMarker]
      if (markerData && markerData.type === 'node') {
        result.push(
          <strong key={`node-${searchIndex}`}>{markerData.text}</strong>
        )
      } else if (typeof markerData === 'string') {
        // Это экранированный плейсхолдер
        result.push(markerData)
      }
      
      searchIndex = markerIndex + foundMarker.length
    } else {
      // Больше маркеров нет, добавляем оставшийся текст
      if (searchIndex < currentText.length) {
        result.push(currentText.substring(searchIndex))
      }
      break
    }
  }

  return result.length > 0 ? result : currentText
}

function TodayEntriesList({ data, loading, error, onRetry, onDelete }) {
  const { authFetch } = useAuth()
  const [deletingIds, setDeletingIds] = useState(new Set())

  const handleDelete = async (entryId) => {
    if (deletingIds.has(entryId)) return

    if (!window.confirm('Вы уверены, что хотите удалить эту запись? Это действие нельзя отменить.')) {
      return
    }

    setDeletingIds(prev => new Set(prev).add(entryId))

    try {
      const response = await authFetch(`/api/entries/${entryId}`, {
        method: 'DELETE',
        headers: {
          'Content-Type': 'application/json',
        },
      })

      if (!response.ok) {
        const errorText = await response.text()
        console.error('Delete error:', response.status, errorText)
        throw new Error(`Ошибка при удалении записи: ${response.status}`)
      }

      // Вызываем callback для обновления данных
      if (onDelete) {
        onDelete()
      }
    } catch (err) {
      console.error('Delete failed:', err)
      alert(err.message || 'Не удалось удалить запись')
    } finally {
      setDeletingIds(prev => {
        const next = new Set(prev)
        next.delete(entryId)
        return next
      })
    }
  }

  if (loading) {
    return (
      <div className="flex justify-center items-center py-8">
        <div className="w-8 h-8 border-4 border-indigo-200 border-t-indigo-600 rounded-full animate-spin"></div>
      </div>
    )
  }

  if (error) {
    return <LoadingError onRetry={onRetry} />
  }

  if (!data || data.length === 0) {
    return (
      <div className="text-center py-8 text-gray-500">
        Нет записей за выбранный день
      </div>
    )
  }

  return (
    <div className="mt-2 mb-6">
      <div className="space-y-3">
        {data.map((entry) => (
          <div
            key={entry.id}
            className="bg-white rounded-lg p-4 shadow-sm border border-gray-200 relative group"
          >
            <button
              onClick={() => handleDelete(entry.id)}
              disabled={deletingIds.has(entry.id)}
              className="absolute top-4 right-4 disabled:opacity-50 disabled:cursor-not-allowed"
              style={{
                color: '#6b7280',
                background: 'none',
                border: 'none',
                cursor: 'pointer',
                padding: '0.25rem',
                borderRadius: '0.25rem',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                width: '24px',
                height: '24px',
                transition: 'all 0.2s',
                opacity: deletingIds.has(entry.id) ? 0.5 : 1,
                zIndex: 10
              }}
              onMouseEnter={(e) => {
                if (!deletingIds.has(entry.id)) {
                  e.currentTarget.style.backgroundColor = '#f3f4f6'
                  e.currentTarget.style.color = '#1f2937'
                }
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.backgroundColor = 'transparent'
                e.currentTarget.style.color = '#6b7280'
              }}
              title="Удалить запись"
            >
              {deletingIds.has(entry.id) ? (
                <svg className="w-5 h-5 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
              ) : (
                <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 className="text-gray-800 whitespace-pre-wrap pr-8">
              {formatEntryText(entry.text, entry.nodes)}
            </div>
            {entry.created_date && (
              <div className="text-xs text-gray-500 mt-2">
                {new Date(entry.created_date).toLocaleTimeString('ru-RU', {
                  hour: '2-digit',
                  minute: '2-digit'
                })}
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  )
}

export default TodayEntriesList