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

export default function SentenceFillCard({ card, onComplete }) {
  const [input, setInput]   = useState('')
  const [status, setStatus] = useState('idle') // idle | correct | wrong
  const [revealed, setRevealed] = useState(false)
  const reportedRef = useRef(false)

  const report = (result) => {
    if (reportedRef.current) return
    reportedRef.current = true
    onComplete?.(result)
  }

  const check = () => {
    if (!input.trim()) return
    const correct = input.trim().toLowerCase() === card.word.toLowerCase()
    setStatus(correct ? 'correct' : 'wrong')
    if (correct) {
      triggerConfetti()
      report('correct')
    }
  }

  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-content" style={{ paddingTop: 24 }}>
        <label className="nw-label" style={{ marginBottom: 6 }}>Frage</label>
        <div style={{
          fontFamily: 'Lora, Georgia, serif',
          fontSize: 22, fontWeight: 700, color: '#4A3728',
          lineHeight: 1.3, marginBottom: 16,
        }}>
          {card.translation}
        </div>

        <div className="nw-divider" />

        {status !== 'correct' ? (
          <>
            <label className="nw-label">{card.prompt}</label>
            <div className={`nwt-input-row ${status === 'wrong' ? 'nwt-wrong' : ''}`}>
              <input
                className="nwt-input"
                value={input}
                onChange={(e) => setInput(e.target.value)}
                onKeyDown={(e) => e.key === 'Enter' && check()}
                placeholder="Deine Antwort …"
                autoCorrect="off" autoCapitalize="none" spellCheck={false}
              />
              <button className="nwt-submit-btn" onClick={check} aria-label="Prüfen">
                <svg viewBox="0 0 20 20" width="16" height="16" fill="none"
                  stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                  <polyline points="4,10 9,15 16,6" />
                </svg>
              </button>
            </div>
            {status === 'wrong' && (
              <>
                <p className="nwt-feedback nwt-wrong-text">Nicht ganz — versuch es nochmal.</p>
                {!revealed ? (
                  <button
                    onClick={() => setRevealed(true)}
                    style={{
                      marginTop: 6, background: 'transparent', border: 'none',
                      color: '#8C7A65', fontSize: 12, fontFamily: 'Nunito, sans-serif',
                      textDecoration: 'underline', cursor: 'pointer', padding: 0,
                    }}
                  >
                    Lösung anzeigen
                  </button>
                ) : (
                  <p style={{ marginTop: 6, fontSize: 13, color: '#7A5C3A', fontFamily: 'Nunito, sans-serif' }}>
                    Lösung: <strong>{card.word}</strong>
                  </p>
                )}
              </>
            )}
          </>
        ) : (
          <div className="nwt-success-bar">
            <span className="nwt-success-left">★ +{card.points} Punkt erhalten</span>
            <span className="nwt-success-right">Gesamt: {card.totalPoints} Punkte</span>
          </div>
        )}
      </div>
    </div>
  )
}
