import { useState } from 'react'
import './CardShared.css'
import './ImageQuizCard.css'
import { triggerConfetti } from '../utils/confetti'

function LivingRoomIllustration() {
  return (
    <svg viewBox="0 0 200 180" width="200" height="180" aria-hidden="true">
      {/* Rug */}
      <rect x="30" y="138" width="140" height="28" rx="6" fill="rgba(74,55,40,0.13)"/>
      <rect x="38" y="143" width="124" height="4" rx="2" fill="rgba(74,55,40,0.08)"/>
      {/* Coffee table */}
      <rect x="58" y="112" width="84" height="14" rx="4" fill="rgba(74,55,40,0.22)"/>
      <rect x="68" y="126" width="8" height="16" rx="2" fill="rgba(74,55,40,0.15)"/>
      <rect x="124" y="126" width="8" height="16" rx="2" fill="rgba(74,55,40,0.15)"/>
      {/* Sofa body */}
      <rect x="22" y="74" width="156" height="40" rx="10" fill="rgba(74,55,40,0.18)"/>
      {/* Sofa back */}
      <rect x="22" y="58" width="156" height="22" rx="8" fill="rgba(74,55,40,0.14)"/>
      {/* Left cushion */}
      <rect x="32" y="76" width="64" height="34" rx="8" fill="rgba(74,55,40,0.12)"/>
      {/* Right cushion */}
      <rect x="104" y="76" width="64" height="34" rx="8" fill="rgba(74,55,40,0.12)"/>
      {/* Sofa armrests */}
      <rect x="16" y="68" width="14" height="46" rx="6" fill="rgba(74,55,40,0.16)"/>
      <rect x="170" y="68" width="14" height="46" rx="6" fill="rgba(74,55,40,0.16)"/>
    </svg>
  )
}

export default function ImageQuizCard({ card }) {
  const [selected, setSelected] = useState([])
  const [status, setStatus]     = useState('idle') // idle | correct | wrong

  const toggle = (word) => {
    if (status !== 'idle') return
    setSelected(prev =>
      prev.includes(word) ? prev.filter(w => w !== word) : [...prev, word]
    )
  }

  const confirm = () => {
    if (selected.length === 0) return
    const isCorrect =
      selected.length === card.correct.length &&
      selected.every(w => card.correct.includes(w))
    setStatus(isCorrect ? 'correct' : 'wrong')
    if (isCorrect) triggerConfetti()
  }

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

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

      <div className="nw-image iq-image">
        <span className="iq-scene-label">{card.scene}</span>
        <LivingRoomIllustration />
      </div>

      <div className="nw-content">
        <div className="iq-question-row">
          <span className="iq-question">{card.prompt}</span>
          <span className="iq-hint">Mehrere möglich</span>
        </div>

        <div className="iq-chips">
          {card.choices.map(word => {
            const isSelected = selected.includes(word)
            const isCorrectWord = card.correct.includes(word)
            let chipClass = 'iq-chip'
            if (status === 'correct' && isCorrectWord) chipClass += ' iq-chip-correct'
            else if (status === 'wrong' && isSelected && !isCorrectWord) chipClass += ' iq-chip-wrong'
            else if (isSelected) chipClass += ' iq-chip-selected'
            return (
              <button key={word} className={chipClass} onClick={() => toggle(word)}>
                {word}
              </button>
            )
          })}
        </div>

        <div className="nw-divider" />

        {status === 'correct' ? (
          <div className="iq-success-bar">
            <span className="iq-success-left">★ +{card.points} Punkt erhalten</span>
            <span className="iq-success-right">Gesamt: {card.totalPoints} Punkte</span>
          </div>
        ) : (
          <>
            {status === 'wrong' && (
              <p className="iq-feedback iq-wrong-text">Nicht alle richtig — versuch es nochmal.</p>
            )}
            <button
              className={`iq-confirm-btn${selected.length === 0 ? ' iq-confirm-disabled' : ''}`}
              onClick={status === 'wrong' ? reset : confirm}
            >
              {status === 'wrong' ? 'Nochmal versuchen' : 'Bestätigen'}
            </button>
          </>
        )}
      </div>
    </div>
  )
}
