// src/components/DeckCreator/JokerCardEditor.jsx
// Joker kártya szerkesztő

import React, { useState, useEffect } from 'react'
import { FaTheaterMasks, FaInfoCircle, FaUsers } from 'react-icons/fa'

export default function JokerCardEditor({ card, onChange }) {
  const [cardData, setCardData] = useState({
    type: 'JOKER',
    text: ''
  })

  useEffect(() => {
    if (card) {
      setCardData({
        type: 'JOKER',
        text: card.text || ''
      })
    }
  }, [card])

  const handleTextChange = (e) => {
    const newCardData = {
      ...cardData,
      text: e.target.value
    }
    setCardData(newCardData)
    
    if (onChange) {
      onChange(newCardData)
    }
  }

  // Példa joker kártyák
  const exampleCards = [
    "Felelsz vagy mersz? (Az előző játékos kérdez)",
    "Csinálj 20 felülést!",
    "Mesélj el egy vicces történetet az életedből!",
    "Utánozd a kedvenc állatodat 30 másodpercig!",
    "Énekelj el egy dalt amit mindenki ismer!",
    "Mondj el 5 dolgot amiért hálás vagy!",
    "Táncolj 1 percig zene nélkül!"
  ]

  const insertExample = (example) => {
    setCardData(prev => ({
      ...prev,
      text: example
    }))
    
    if (onChange) {
      onChange({
        ...cardData,
        text: example
      })
    }
  }

  return (
    <div className="space-y-6">
      {/* Info box */}
      <div className="bg-[color:var(--color-surface)] rounded-xl p-6">
        <div className="bg-[color:var(--color-fun)]/10 border border-[color:var(--color-fun)]/30 rounded-lg p-4">
          <div className="flex items-start gap-3">
            <FaInfoCircle className="text-[color:var(--color-fun)] mt-1 flex-shrink-0" />
            <div>
              <h4 className="font-semibold text-[color:var(--color-text)] mb-2 flex items-center gap-2">
                <FaUsers className="text-sm" />
                Joker kártya működése:
              </h4>
              <p className="text-[color:var(--color-text-muted)] text-sm mb-2">
                A joker kártyák interaktív feladatokat tartalmaznak, melyek megtörik a jeget a játékosok között. 
                Ezek lehetnek fizikai feladatok, kérdések, vagy szórakoztató kihívások.
              </p>
              <p className="text-[color:var(--color-fun)] text-sm font-medium">
                Cél: Szórakozás és játékosok közötti kapcsolat erősítése
              </p>
            </div>
          </div>
        </div>
      </div>

      {/* Kártya szövege */}
      <div className="bg-[color:var(--color-surface)] rounded-xl p-6">
        <h3 className="text-lg font-semibold text-[color:var(--color-text)] mb-4 flex items-center gap-2">
          <FaTheaterMasks className="text-[color:var(--color-fun)]" />
          Kártya szövege
        </h3>
        
        <div>
          <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
            Joker kártya feladat *
          </label>
          <textarea
            value={cardData.text}
            onChange={handleTextChange}
            placeholder="Pl: Felelsz vagy mersz? (Az előző játékos kérdez)"
            className="w-full h-32 px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] placeholder-[color:var(--color-text-muted)] resize-none focus:ring-2 focus:ring-[color:var(--color-fun)] focus:border-transparent outline-none transition-all duration-200"
            maxLength={150}
          />
          <div className="flex justify-between items-center mt-2">
            <span className="text-xs text-[color:var(--color-text-muted)]">
              Maximális hossz: 150 karakter
            </span>
            <span className="text-xs text-[color:var(--color-text-muted)]">
              {cardData.text.length}/150
            </span>
          </div>
        </div>

        {/* Example cards */}
        <div className="mt-6">
          <h4 className="text-sm font-medium text-[color:var(--color-text)] mb-3">
            💡 Példa joker kártyák (kattints rájuk a beszúráshoz):
          </h4>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
            {exampleCards.map((example, index) => (
              <button
                key={index}
                onClick={() => insertExample(example)}
                className="text-left p-3 bg-[color:var(--color-fun)]/5 hover:bg-[color:var(--color-fun)]/10 border border-[color:var(--color-fun)]/20 rounded-lg text-sm text-[color:var(--color-text)] transition-colors"
              >
                {example}
              </button>
            ))}
          </div>
        </div>

        {/* Preview */}
        {cardData.text.trim() && (
          <div className="mt-6 p-4 bg-[color:var(--color-fun)]/5 border border-[color:var(--color-fun)]/20 rounded-lg">
            <h4 className="text-sm font-medium text-[color:var(--color-text)] mb-2">
              Kártya előnézet:
            </h4>
            <div className="bg-[color:var(--color-surface)] border-2 border-[color:var(--color-fun)] rounded-lg p-4 text-center">
              <FaTheaterMasks className="text-2xl text-[color:var(--color-fun)] mx-auto mb-2" />
              <p className="text-[color:var(--color-text)] font-medium">
                {cardData.text}
              </p>
              <div className="mt-2 text-xs text-[color:var(--color-fun)] font-medium">
                🃏 JOKER KÁRTYA
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}