import { useState } from 'react'
import './QuestionsModal.css'

const QuestionsModal = ({ isOpen, onClose, questions, onUpdateQuestions }) => {
  const [editingQuestion, setEditingQuestion] = useState(null)
  const [questionText, setQuestionText] = useState('')
  const [answers, setAnswers] = useState([
    { text: '', points: 100 },
    { text: '', points: 80 },
    { text: '', points: 60 },
    { text: '', points: 40 },
    { text: '', points: 20 },
    { text: '', points: 10 },
  ])
  const [jsonError, setJsonError] = useState('')

  if (!isOpen) return null

  const resetForm = () => {
    setEditingQuestion(null)
    setQuestionText('')
    setAnswers([
      { text: '', points: 100 },
      { text: '', points: 80 },
      { text: '', points: 60 },
      { text: '', points: 40 },
      { text: '', points: 20 },
      { text: '', points: 10 },
    ])
    setJsonError('')
  }

  const handleBackdropClick = (e) => {
    if (e.target === e.currentTarget) {
      onClose()
      resetForm()
    }
  }

  const handleClose = () => {
    onClose()
    resetForm()
  }

  const handleEdit = (question) => {
    setEditingQuestion(question)
    setQuestionText(question.text)
    setAnswers([...question.answers])
    setJsonError('')
  }

  const handleCancelEdit = () => {
    resetForm()
  }

  const handleAnswerChange = (index, field, value) => {
    const updatedAnswers = [...answers]
    if (field === 'text') {
      updatedAnswers[index].text = value
    } else if (field === 'points') {
      updatedAnswers[index].points = parseInt(value) || 0
    }
    setAnswers(updatedAnswers)
  }

  const handleAddAnswer = () => {
    const minPoints = Math.min(...answers.map(a => a.points))
    setAnswers([...answers, { text: '', points: Math.max(0, minPoints - 10) }])
  }

  const handleRemoveAnswer = (index) => {
    if (answers.length > 1) {
      setAnswers(answers.filter((_, i) => i !== index))
    }
  }

  const validateForm = () => {
    if (!questionText.trim()) {
      setJsonError('Введите текст вопроса')
      return false
    }
    if (answers.length === 0) {
      setJsonError('Добавьте хотя бы один ответ')
      return false
    }
    const hasEmptyAnswers = answers.some(a => !a.text.trim())
    if (hasEmptyAnswers) {
      setJsonError('Заполните все ответы')
      return false
    }
    return true
  }

  const handleSave = () => {
    if (!validateForm()) return

    const questionData = {
      id: editingQuestion ? editingQuestion.id : Date.now(),
      text: questionText.trim(),
      answers: answers
        .filter(a => a.text.trim())
        .map(a => ({
          text: a.text.trim(),
          points: a.points,
        })),
    }

    let updatedQuestions
    if (editingQuestion) {
      updatedQuestions = questions.map(q =>
        q.id === editingQuestion.id ? questionData : q
      )
    } else {
      updatedQuestions = [...questions, questionData]
    }

    onUpdateQuestions(updatedQuestions)
    resetForm()
  }

  const handleDelete = (questionId) => {
    if (window.confirm('Вы уверены, что хотите удалить этот вопрос?')) {
      const updatedQuestions = questions.filter(q => q.id !== questionId)
      onUpdateQuestions(updatedQuestions)
      if (editingQuestion && editingQuestion.id === questionId) {
        resetForm()
      }
    }
  }

  const handleExportJson = () => {
    try {
      const jsonString = JSON.stringify(questions, null, 2)
      const blob = new Blob([jsonString], { type: 'application/json' })
      const url = URL.createObjectURL(blob)
      const link = document.createElement('a')
      link.href = url
      link.download = 'questions.json'
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      URL.revokeObjectURL(url)
      setJsonError('')
    } catch (error) {
      setJsonError('Ошибка при экспорте: ' + error.message)
    }
  }

  const handleImportJson = () => {
    const input = document.createElement('input')
    input.type = 'file'
    input.accept = '.json'
    input.onchange = (e) => {
      const file = e.target.files[0]
      if (!file) return

      const reader = new FileReader()
      reader.onload = (event) => {
        try {
          const jsonContent = JSON.parse(event.target.result)
          
          if (!Array.isArray(jsonContent)) {
            setJsonError('JSON должен содержать массив вопросов')
            return
          }

          // Валидация структуры
          const isValid = jsonContent.every(q => 
            q.id && 
            typeof q.text === 'string' && 
            Array.isArray(q.answers) &&
            q.answers.every(a => a.text && typeof a.points === 'number')
          )

          if (!isValid) {
            setJsonError('Неверный формат JSON. Ожидается массив объектов с полями: id, text, answers')
            return
          }

          onUpdateQuestions(jsonContent)
          setJsonError('')
          alert(`Успешно импортировано ${jsonContent.length} вопросов`)
        } catch (error) {
          setJsonError('Ошибка при импорте: ' + error.message)
        }
      }
      reader.readAsText(file)
    }
    input.click()
  }

  return (
    <div className="questions-modal-backdrop" onClick={handleBackdropClick}>
      <div className="questions-modal-content">
        <div className="questions-modal-header">
          <h2 className="questions-modal-title">Управление вопросами</h2>
          <button className="questions-modal-close" onClick={handleClose}>
            ×
          </button>
        </div>

        <div className="questions-modal-actions">
          <button
            className="questions-modal-export-button"
            onClick={handleExportJson}
          >
            📥 Экспорт JSON
          </button>
          <button
            className="questions-modal-import-button"
            onClick={handleImportJson}
          >
            📤 Импорт JSON
          </button>
        </div>

        {jsonError && (
          <div className="questions-modal-error">{jsonError}</div>
        )}

        <div className="questions-modal-form">
          <input
            type="text"
            value={questionText}
            onChange={(e) => setQuestionText(e.target.value)}
            placeholder="Введите текст вопроса"
            className="questions-modal-input"
          />

          <div className="questions-modal-answers">
            <div className="questions-modal-answers-header">
              <span>Ответы:</span>
              <button
                className="questions-modal-add-answer-button"
                onClick={handleAddAnswer}
                type="button"
              >
                + Добавить ответ
              </button>
            </div>

            {answers.map((answer, index) => (
              <div key={index} className="questions-modal-answer-row">
                <input
                  type="text"
                  value={answer.text}
                  onChange={(e) => handleAnswerChange(index, 'text', e.target.value)}
                  placeholder={`Ответ ${index + 1}`}
                  className="questions-modal-answer-input"
                />
                <input
                  type="number"
                  value={answer.points}
                  onChange={(e) => handleAnswerChange(index, 'points', e.target.value)}
                  className="questions-modal-points-input"
                  min="0"
                />
                {answers.length > 1 && (
                  <button
                    className="questions-modal-remove-answer-button"
                    onClick={() => handleRemoveAnswer(index)}
                    type="button"
                  >
                    ×
                  </button>
                )}
              </div>
            ))}
          </div>

          <div className="questions-modal-form-buttons">
            <button
              className="questions-modal-save-button"
              onClick={handleSave}
            >
              {editingQuestion ? 'Сохранить изменения' : 'Добавить вопрос'}
            </button>
            {editingQuestion && (
              <button
                className="questions-modal-cancel-button"
                onClick={handleCancelEdit}
              >
                Отмена
              </button>
            )}
          </div>
        </div>

        <div className="questions-modal-list">
          <h3 className="questions-modal-list-title">
            Вопросы ({questions.length})
          </h3>
          {questions.length === 0 ? (
            <p className="questions-modal-empty">Нет вопросов. Добавьте вопросы для игры.</p>
          ) : (
            <div className="questions-modal-items">
              {questions.map((question) => (
                <div key={question.id} className="questions-modal-item">
                  <div className="questions-modal-item-content">
                    <div className="questions-modal-item-text">{question.text}</div>
                    <div className="questions-modal-item-info">
                      {question.answers.length} ответов
                    </div>
                  </div>
                  <div className="questions-modal-item-actions">
                    <button
                      className="questions-modal-edit-button"
                      onClick={() => handleEdit(question)}
                      title="Редактировать"
                    >
                      ✏️
                    </button>
                    <button
                      className="questions-modal-delete-button"
                      onClick={() => handleDelete(question.id)}
                      title="Удалить"
                    >
                      ×
                    </button>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  )
}

export default QuestionsModal