// src/components/DeckCreator/LuckCardEditor.jsx
// Szerencse kártya szerkesztő

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

const consequenceTypes = [
  { value: 0, label: '⬆️ Előre lépés', description: 'A játékos előre lép X mezőt' },
  { value: 1, label: '⬇️ Hátra lépés', description: 'A játékos hátra lép X mezőt' },
  { value: 2, label: '⏸️ Kör kihagyás', description: 'A játékos kihagy egy kört' },
  { value: 3, label: '⏩ Extra kör', description: 'A játékos kap egy extra kört' },
  { value: 5, label: '🏁 Vissza a starthoz', description: 'A játékos visszakerül a starthoz' }
]

export default function LuckCardEditor({ card, onChange }) {
  const [cardData, setCardData] = useState({
    type: 'LUCK',
    text: '',
    consequence: { type: 0, value: 1 }
  })

  useEffect(() => {
    if (card) {
      setCardData({
        type: 'LUCK',
        text: card.text || '',
        consequence: card.consequence || { type: 0, value: 1 }
      })
    }
  }, [card])

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

  const updateConsequence = (field, value) => {
    const newCardData = {
      ...cardData,
      consequence: {
        ...cardData.consequence,
        [field]: value
      }
    }
    setCardData(newCardData)
    
    if (onChange) {
      onChange(newCardData)
    }
  }

  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-luck)]/10 border border-[color:var(--color-luck)]/30 rounded-lg p-4">
          <div className="flex items-start gap-3">
            <FaInfoCircle className="text-[color:var(--color-luck)] mt-1 flex-shrink-0" />
            <div>
              <h4 className="font-semibold text-[color:var(--color-text)] mb-2">
                Szerencse kártya működése:
              </h4>
              <p className="text-[color:var(--color-text-muted)] text-sm mb-2">
                Amikor egy játékos szerencse mezőre lép, kap egy kártyát amit felolvas. 
                A kártyán lévő utasítás azonnal teljesül.
              </p>
              <p className="text-[color:var(--color-luck)] text-sm font-medium">
                Példa: "Órai projektekkel kiváltottál több vizsgát is! Lépj előre 4 mezőt"
              </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">
          <FaDice className="text-[color:var(--color-luck)]" />
          Kártya szövege
        </h3>
        <div>
          <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
            Szerencse esemény leírása *
          </label>
          <textarea
            value={cardData.text}
            onChange={handleTextChange}
            placeholder="Pl: Órai projektekkel kiváltottál több vizsgát is! Lépj előre 4 mezőt"
            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-luck)] focus:border-transparent outline-none transition-all duration-200"
            maxLength={200}
          />
          <div className="flex justify-between items-center mt-2">
            <span className="text-xs text-[color:var(--color-text-muted)]">
              Maximális hossz: 200 karakter
            </span>
            <span className="text-xs text-[color:var(--color-text-muted)]">
              {cardData.text.length}/200
            </span>
          </div>
        </div>

        {/* Preview */}
        {cardData.text.trim() && (
          <div className="mt-6 p-4 bg-[color:var(--color-luck)]/5 border border-[color:var(--color-luck)]/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-luck)] rounded-lg p-4 text-center">
              <FaDice className="text-2xl text-[color:var(--color-luck)] mx-auto mb-2" />
              <p className="text-[color:var(--color-text)] font-medium">
                {cardData.text}
              </p>
            </div>
          </div>
        )}
      </div>

      {/* Következmények */}
      <div className="bg-[color:var(--color-surface)] rounded-xl p-6">
        <h3 className="text-lg font-semibold text-[color:var(--color-text)] mb-4">
          🎯 Következmények
        </h3>
        
        <div className="space-y-4">
          {/* Consequence Type */}
          <div>
            <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
              Hatás típusa
            </label>
            <select 
              value={cardData.consequence?.type ?? 0}
              onChange={(e) => updateConsequence('type', parseInt(e.target.value))}
              className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-luck)] focus:border-transparent outline-none transition-all duration-200"
            >
              {consequenceTypes.map(type => (
                <option key={type.value} value={type.value}>
                  {type.label}
                </option>
              ))}
            </select>
            <div className="text-xs text-[color:var(--color-text-muted)] mt-1">
              {consequenceTypes.find(t => t.value === (cardData.consequence?.type ?? 0))?.description}
            </div>
          </div>
          
          {/* Consequence Value */}
          {[0, 1, 2, 3].includes(cardData.consequence?.type) && (
            <div>
              <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
                {[0, 1].includes(cardData.consequence?.type) ? 'Lépések száma' : (cardData.consequence?.type === 2 ? 'Kihagyott körök' : 'Extra körök száma')}
              </label>
              
              <div className="flex flex-wrap gap-2 mt-2">
                {Array.from({ length: [0, 1].includes(cardData.consequence?.type) ? 10 : 5 }, (_, i) => i + 1).map(num => (
                  <button
                    key={num}
                    type="button"
                    onClick={() => updateConsequence('value', num)}
                    className={`
                      w-10 h-10 rounded-lg font-semibold transition-all duration-200
                      flex items-center justify-center
                      ${(cardData.consequence?.value ?? 1) === num
                        ? 'bg-[color:var(--color-luck)] text-white ring-2 ring-offset-2 ring-offset-[color:var(--color-surface)] ring-[color:var(--color-luck)]'
                        : 'bg-[color:var(--color-background)] text-[color:var(--color-text)] hover:bg-[color:var(--color-surface-selected)]'
                      }
                    `}
                  >
                    {num}
                  </button>
                ))}
              </div>

              <div className="text-xs text-[color:var(--color-text-muted)] mt-3">
                Érték: {[0, 1].includes(cardData.consequence?.type) ? '1-10' : '1-5'} között
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}