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

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

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

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

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

  return (
    <div className="max-w-4xl mx-auto">
      <div className="bg-[color:var(--color-surface)] rounded-xl p-6">
        {/* Header */}
        <div className="flex items-center gap-3 mb-6">
          <FaDice className="text-2xl text-[color:var(--color-luck)]" />
          <h3 className="text-xl font-bold text-[color:var(--color-text)]">
            Szerencse Kártya Szerkesztő
          </h3>
        </div>

        {/* Info box */}
        <div className="bg-[color:var(--color-luck)]/10 border border-[color:var(--color-luck)]/30 rounded-lg p-4 mb-6">
          <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>

        {/* Card text input */}
        <div className="space-y-4">
          <div>
            <label className="block text-[color:var(--color-text)] font-medium mb-2">
              Kártya szövege *
            </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 p-4 bg-[color:var(--color-surface)] border border-[color:var(--color-border)] rounded-lg text-[color:var(--color-text)] placeholder-[color:var(--color-text-muted)] resize-none focus:outline-none focus:border-[color:var(--color-luck)] transition-colors"
              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>
        </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>
    </div>
  )
}