import { useState, useRef } from 'react'
import './CardShared.css'
import './AudioQuizCard.css'
import { triggerConfetti } from '../utils/confetti'

export default function AudioQuizCard({ card }) {
  const [playing, setPlaying]   = useState(false)
  const [selected, setSelected] = useState(null)
  const [status, setStatus]     = useState('idle') // idle | correct | wrong
  const timerRef = useRef(null)

  const playAudio = () => {
    if (playing) return
    setPlaying(true)
    if (card.audioSrc) {
      const audio = new Audio(card.audioSrc)
      audio.play()
      audio.onended = () => setPlaying(false)
    } else {
      // Simulate playback
      timerRef.current = setTimeout(() => setPlaying(false), 1800)
    }
  }

  const pick = (id) => {
    if (status === 'correct') return
    setSelected(id)
    const correct = id === card.correct
    setStatus(correct ? 'correct' : 'wrong')
    if (correct) triggerConfetti()
  }

  const reset = () => { setSelected(null); setStatus('idle') }

  const optionClass = (id) => {
    let cls = 'aq-option'
    if (status === 'idle' && selected === id) cls += ' aq-option-selected'
    if (status === 'correct' && id === card.correct) cls += ' aq-option-correct'
    if (status === 'wrong' && id === selected)       cls += ' aq-option-wrong'
    if (status === 'wrong' && id === card.correct)   cls += ' aq-option-reveal'
    return cls
  }

  return (
    <div className="nw-card aq-card">
      <div className="nw-card-header aq-header">
        <span className="nw-lang-pill">{card.language}</span>
        <span className="nw-points-pill aq-points-pill">★ +{card.points} Punkt</span>
      </div>

      <div className="aq-image" onClick={playAudio}>
        <div className={`aq-speaker-ring${playing ? ' aq-playing' : ''}`}>
          <div className="aq-speaker-icon">
            <svg viewBox="0 0 48 48" width="40" height="40" fill="none" aria-hidden="true">
              <rect x="10" y="14" width="10" height="20" rx="3" fill="rgba(196,168,130,0.5)"/>
              <polygon points="20,14 34,6 34,42 20,34" fill="rgba(196,168,130,0.5)"/>
              {playing && (
                <>
                  <path d="M37 16 Q42 24 37 32" stroke="rgba(196,168,130,0.6)" strokeWidth="2.5" strokeLinecap="round" fill="none"/>
                  <path d="M40 11 Q48 24 40 37" stroke="rgba(196,168,130,0.35)" strokeWidth="2" strokeLinecap="round" fill="none"/>
                </>
              )}
            </svg>
          </div>
        </div>

        <div className="aq-dots">
          {card.options.map((_, i) => (
            <span key={i} className="aq-dot" />
          ))}
        </div>

        <p className="aq-tap-hint">Tippe zum Abspielen</p>
      </div>

      <div className="nw-content">
        <p className="aq-question">{card.prompt}</p>

        <div className="aq-options">
          {card.options.map(opt => (
            <button
              key={opt.id}
              className={optionClass(opt.id)}
              onClick={() => pick(opt.id)}
            >
              <span className="aq-option-label">{opt.id}</span>
              <span className="aq-option-text">{opt.text}</span>
            </button>
          ))}
        </div>

        <div className="nw-divider" />

        {status === 'correct' && (
          <div className="aq-success-bar">
            <span className="aq-success-left">★ +{card.points} Punkt erhalten</span>
            <span className="aq-success-right">Gesamt: {card.totalPoints} Punkte</span>
          </div>
        )}
        {status === 'wrong' && (
          <button className="aq-retry-btn" onClick={reset}>Nochmal versuchen</button>
        )}
      </div>
    </div>
  )
}
