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

const ILLUSTRATIONS = {
  sofa: (
    <svg viewBox="0 0 200 140" width="190" height="133" aria-hidden="true">
      <rect x="16" y="46" width="14" height="50" rx="6" fill="rgba(74,55,40,0.16)"/>
      <rect x="170" y="46" width="14" height="50" rx="6" fill="rgba(74,55,40,0.16)"/>
      <rect x="22" y="36" width="156" height="22" rx="8" fill="rgba(74,55,40,0.14)"/>
      <rect x="22" y="54" width="156" height="38" rx="10" fill="rgba(74,55,40,0.18)"/>
      <rect x="32" y="56" width="64" height="32" rx="8" fill="rgba(74,55,40,0.11)"/>
      <rect x="104" y="56" width="64" height="32" rx="8" fill="rgba(74,55,40,0.11)"/>
      <rect x="30" y="92" width="10" height="22" rx="3" fill="rgba(74,55,40,0.13)"/>
      <rect x="160" y="92" width="10" height="22" rx="3" fill="rgba(74,55,40,0.13)"/>
    </svg>
  ),
  lamp: (
    <svg viewBox="0 0 200 160" width="190" height="152" aria-hidden="true">
      <polygon points="80,30 120,30 140,90 60,90" fill="rgba(74,55,40,0.16)"/>
      <rect x="96" y="90" width="8" height="55" rx="3" fill="rgba(74,55,40,0.18)"/>
      <ellipse cx="100" cy="148" rx="30" ry="8" fill="rgba(74,55,40,0.12)"/>
      <line x1="100" y1="30" x2="100" y2="10" stroke="rgba(74,55,40,0.2)" strokeWidth="4" strokeLinecap="round"/>
    </svg>
  ),
  table: (
    <svg viewBox="0 0 200 160" width="190" height="152" aria-hidden="true">
      <rect x="20" y="72" width="160" height="18" rx="4" fill="rgba(74,55,40,0.20)"/>
      <rect x="34" y="90" width="14" height="50" rx="3" fill="rgba(74,55,40,0.15)"/>
      <rect x="152" y="90" width="14" height="50" rx="3" fill="rgba(74,55,40,0.15)"/>
      <rect x="28" y="134" width="24" height="8" rx="3" fill="rgba(74,55,40,0.11)"/>
      <rect x="148" y="134" width="24" height="8" rx="3" fill="rgba(74,55,40,0.11)"/>
    </svg>
  ),
  chair: (
    <svg viewBox="0 0 200 160" width="190" height="152" aria-hidden="true">
      <rect x="65" y="30" width="70" height="55" rx="8" fill="rgba(74,55,40,0.14)"/>
      <rect x="55" y="82" width="90" height="16" rx="5" fill="rgba(74,55,40,0.20)"/>
      <rect x="62" y="98" width="14" height="50" rx="4" fill="rgba(74,55,40,0.15)"/>
      <rect x="124" y="98" width="14" height="50" rx="4" fill="rgba(74,55,40,0.15)"/>
      <rect x="56" y="138" width="24" height="8" rx="3" fill="rgba(74,55,40,0.11)"/>
      <rect x="120" y="138" width="24" height="8" rx="3" fill="rgba(74,55,40,0.11)"/>
    </svg>
  ),
}

export default function ImagePickCard({ card }) {
  const [index, setIndex]   = useState(0)
  const [status, setStatus] = useState('idle') // idle | correct | wrong

  const currentImage = card.images[index]
  const isLast = index === card.images.length - 1

  const handleJa = () => {
    if (currentImage === card.correctImage) {
      setStatus('correct')
      triggerConfetti()
    } else {
      setStatus('wrong')
    }
  }

  const handleNein = () => {
    if (status === 'wrong') setStatus('idle')
    if (index < card.images.length - 1) {
      setIndex(index + 1)
      setStatus('idle')
    }
  }

  const reset = () => { setIndex(0); 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 ip-image">
        {ILLUSTRATIONS[currentImage]}
        <div className="ip-dots">
          {card.images.map((_, i) => (
            <span key={i} className={`ip-dot${i === index ? ' ip-dot-active' : ''}`} />
          ))}
        </div>
      </div>

      <div className="nw-content">
        <div className="nw-word-row">
          <span className="nw-word">{card.word}</span>
          <span className="nw-translation">{card.translation}</span>
        </div>
        <div className="nw-divider" />
        <p className="nw-label">{card.prompt}</p>

        {status === 'correct' ? (
          <div className="ip-success-bar">
            <span className="ip-success-left">★ +{card.points} Punkt erhalten</span>
            <span className="ip-success-right">Gesamt: {card.totalPoints} Punkte</span>
          </div>
        ) : (
          <>
            {status === 'wrong' && (
              <p className="ip-wrong-text">Das ist nicht richtig — weiter suchen!</p>
            )}
            <div className="ip-btn-row">
              <button
                className="ip-btn ip-btn-nein"
                onClick={handleNein}
                disabled={isLast && status !== 'wrong'}
              >
                <span>✕</span> Nein
              </button>
              <button className="ip-btn ip-btn-ja" onClick={handleJa}>
                <span>✓</span> Ja, das ist es
              </button>
            </div>
          </>
        )}
      </div>
    </div>
  )
}
