import React, { useState, useEffect } from 'react';
import Quiz from './QuizComponent';

export function QuizParent() {
  const [quizSections, setQuizSections] = useState([]);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [currentQuizContent, setCurrentQuizContent] = useState(null);
  const [verificationPanel, setVerificationPanel] = useState(null);

  useEffect(() => {
    const sections = document.querySelectorAll('.lnc_ai_quiz_generator-wrapper');
    const sectionsData = Array.from(sections).map(section => ({
      id: section.id,
      instance: section.dataset.instance,
      quizData: section.dataset.quiz,
      element: section
    }));

    setQuizSections(sectionsData);

    const buttons = document.querySelectorAll('.quiz-init-btn');
    buttons.forEach(button => {
      button.addEventListener('click', handleQuizInit);
    });

    return () => {
      buttons.forEach(button => {
        button.removeEventListener('click', handleQuizInit);
      });
    };
  }, []);

  useEffect(() => {
    if (!isModalOpen) return;

    try {
      document.documentElement.classList.remove('lncqp-noscroll');
      document.body.classList.remove('lncqp-noscroll');
      document.documentElement.style.overflow = '';
      document.body.style.overflow = '';
    } catch (e) {
    }
  }, [isModalOpen]);


  useEffect(() => {
    const handleEscape = (e) => {
      if (e.key === 'Escape' && isModalOpen) {
        closeModal();
      }
    };

    window.addEventListener('keydown', handleEscape);
    return () => window.removeEventListener('keydown', handleEscape);
  }, [isModalOpen]);

  const handleQuizInit = (event) => {
    const quizId = event.target.closest('.quiz-init-btn').dataset.quizId;
    const section = document.getElementById(quizId);
    const content = section.querySelector('.quiz-content');

    setCurrentQuizContent({
      id: quizId,
      htmlContent: content.innerHTML,
      textContent: content.textContent.trim()
    });
    setIsModalOpen(true);
  };

  const closeModal = () => {
    setIsModalOpen(false);
    setCurrentQuizContent(null);
    setVerificationPanel(null); // ИСПРАВЛЕНИЕ: Сбрасываем панель верификации
  };

  const handleOverlayClick = (e) => {
    if (e.target === e.currentTarget) {
      closeModal();
    }
  };

  if (!isModalOpen || !currentQuizContent) {
    return <div className="lnc_ai_quiz_generator-manager"></div>;
  }

  return (
      <div className="lnc_ai_quiz_generator-manager">
        <div className="lncqp-overlay is-open" onClick={handleOverlayClick}>
          <div className="lncqp-modal" role="dialog" aria-modal="true" aria-labelledby="lncqp-title">
            <button
                className="lncqp-close"
                type="button"
                onClick={closeModal}
                aria-label="Close quiz"
            >
              ✕
            </button>

            <div className="lncqp-head">
              <div style={{
                display: 'flex',
                alignItems: 'flex-start',
                gap: '12px'
              }}>
                <div id="lncqp-title" className="lncqp-title">Quick Quiz</div>
                {verificationPanel}
              </div>
              <div className="lncqp-sub" id="lncqp-sub">Test your knowledge • instant feedback</div>
            </div>

            <div className="lncqp-body">
              <Quiz
                  content={currentQuizContent.textContent}
                  onClose={closeModal}
                  onVerificationPanelChange={setVerificationPanel}
              />
            </div>
          </div>
        </div>
      </div>
  );
}