import React, { useState, useEffect } from 'react'
import './WordList.css'

const API_URL = '/api'

function WordList({ onNavigate, dictionaryId, isNewDictionary, refreshTrigger = 0 }) {
  const [words, setWords] = useState([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState('')
  const [dictionary, setDictionary] = useState(null)
  const [dictionaryName, setDictionaryName] = useState('')
  const [originalDictionaryName, setOriginalDictionaryName] = useState('')
  const [isSavingName, setIsSavingName] = useState(false)
  const [currentDictionaryId, setCurrentDictionaryId] = useState(dictionaryId)
  const [isNewDict, setIsNewDict] = useState(isNewDictionary)

  useEffect(() => {
    setCurrentDictionaryId(dictionaryId)
    setIsNewDict(isNewDictionary)
    
    if (isNewDictionary) {
      setLoading(false)
      setDictionary(null)
      setDictionaryName('')
      setOriginalDictionaryName('')
      setWords([])
    } else if (dictionaryId !== undefined && dictionaryId !== null) {
      fetchDictionary()
      fetchWords()
    } else {
      setLoading(false)
      setWords([])
    }
  }, [dictionaryId, isNewDictionary, refreshTrigger])

  const fetchDictionary = async () => {
    try {
      const response = await fetch(`${API_URL}/dictionaries`)
      if (!response.ok) {
        throw new Error('Ошибка при загрузке словарей')
      }
      const dictionaries = await response.json()
      const dict = dictionaries.find(d => d.id === dictionaryId)
      if (dict) {
        setDictionary(dict)
        setDictionaryName(dict.name)
        setOriginalDictionaryName(dict.name)
      }
    } catch (err) {
      console.error('Error fetching dictionary:', err)
    }
  }

  const fetchWords = async () => {
    if (isNewDictionary || dictionaryId === undefined || dictionaryId === null) {
      setWords([])
      setLoading(false)
      return
    }
    
    await fetchWordsForDictionary(dictionaryId)
  }

  const fetchWordsForDictionary = async (dictId) => {
    try {
      setLoading(true)
      const url = `${API_URL}/words?dictionary_id=${dictId}`
      const response = await fetch(url)
      if (!response.ok) {
        throw new Error('Ошибка при загрузке слов')
      }
      const data = await response.json()
      setWords(Array.isArray(data) ? data : [])
      setError('')
    } catch (err) {
      setError(err.message)
      setWords([])
    } finally {
      setLoading(false)
    }
  }

  const handleNameChange = (e) => {
    setDictionaryName(e.target.value)
  }

  const handleNameSave = async () => {
    if (!dictionaryName.trim()) {
      return
    }

    setIsSavingName(true)
    try {
      if (isNewDictionary) {
        // Create new dictionary
        const response = await fetch(`${API_URL}/dictionaries`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({ name: dictionaryName.trim() }),
        })

        if (!response.ok) {
          throw new Error('Ошибка при создании словаря')
        }

        const newDict = await response.json()
        const newDictionaryId = newDict.id
        
        // Update local state immediately
        setOriginalDictionaryName(newDict.name)
        setDictionaryName(newDict.name)
        setDictionary(newDict)
        setCurrentDictionaryId(newDictionaryId)
        setIsNewDict(false)
        
        // Fetch words for the new dictionary
        await fetchWordsForDictionary(newDictionaryId)
        
        // Update navigation to use the new dictionary ID and remove isNewDictionary flag
        onNavigate?.('words', { dictionaryId: newDictionaryId, isNewDictionary: false })
      } else if (dictionaryId !== undefined && dictionaryId !== null) {
        // Update existing dictionary
        const response = await fetch(`${API_URL}/dictionaries/${dictionaryId}`, {
          method: 'PUT',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({ name: dictionaryName.trim() }),
        })

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

        setOriginalDictionaryName(dictionaryName.trim())
        if (dictionary) {
          setDictionary({ ...dictionary, name: dictionaryName.trim() })
        }
      }
    } catch (err) {
      setError(err.message)
    } finally {
      setIsSavingName(false)
    }
  }

  const showSaveButton = dictionaryName.trim() !== '' && dictionaryName.trim() !== originalDictionaryName

  if (loading) {
    return (
      <div className="word-list">
        <div className="loading">Загрузка...</div>
      </div>
    )
  }

  if (error) {
    return (
      <div className="word-list">
        <div className="error-message">{error}</div>
      </div>
    )
  }

  return (
    <div className="word-list">
      <button 
        onClick={() => onNavigate?.('test-config')} 
        className="close-x-button"
        title="Закрыть"
      >
        ✕
      </button>
      
      {/* Dictionary name input */}
      <div className="dictionary-name-input-container">
        <input
          type="text"
          className="dictionary-name-input"
          value={dictionaryName}
          onChange={handleNameChange}
          placeholder="Введите название словаря"
        />
        {showSaveButton && (
          <button
            className="dictionary-name-save-button"
            onClick={handleNameSave}
            disabled={isSavingName}
            title="Сохранить название"
          >
            ✓
          </button>
        )}
      </div>

      {/* Show add button and words list:
          - If dictionary exists (has dictionaryId), show regardless of name
          - If new dictionary (no dictionaryId), show only if name is set */}
      {((currentDictionaryId !== undefined && currentDictionaryId !== null && !isNewDict) || (isNewDict && dictionaryName.trim())) && (
        <>
          {(!words || words.length === 0) ? (
            <>
              <button onClick={() => onNavigate?.('add-words', { dictionaryId: currentDictionaryId, dictionaryName })} className="add-button">
                Добавить
              </button>
              <div className="empty-state">
                <p>Слов пока нет. Добавьте слова через экран "Добавить слова".</p>
              </div>
            </>
          ) : (
            <>
              <button onClick={() => onNavigate?.('add-words', { dictionaryId: currentDictionaryId, dictionaryName })} className="add-button">
                Добавить
              </button>
              <div className="words-grid">
                {words.map((word) => (
                  <div key={word.id} className="word-card">
                    <div className="word-content">
                      <div className="word-header">
                        <h3 className="word-name">{word.name}</h3>
                      </div>
                      <div className="word-translation">{word.translation}</div>
                      {word.description && (
                        <div className="word-description">{word.description}</div>
                      )}
                    </div>
                    <div className="word-stats">
                      <span className="stat-success">{word.success || 0}</span>
                      <span className="stat-separator"> | </span>
                      <span className="stat-failure">{word.failure || 0}</span>
                    </div>
                  </div>
                ))}
              </div>
            </>
          )}
        </>
      )}
    </div>
  )
}

export default WordList