// src/components/DeckCreator/CardPreview.jsx
// Kártya előnézet komponens

import React from "react"
import { FaQuestionCircle, FaTheaterMasks, FaDice, FaClock, FaStar } from "react-icons/fa"

export default function CardPreview({ card }) {
  if (!card) {
    return (
      <div className="text-center text-[color:var(--color-text-muted)]">
        <div className="text-6xl mb-4">🃏</div>
        <div>Nincs kiválasztott kártya az előnézethez</div>
      </div>
    )
  }

  // Kártya típus specifikus beállítások
  const getCardConfig = (card) => {
    switch (card.type) {
      case 'task':
        return {
          bgColor: 'var(--color-question)',
          icon: FaQuestionCircle,
          title: 'FELADAT KÁRTYA',
          emoji: '📋'
        }
      case 'joker':
        return {
          bgColor: 'var(--color-fun)',
          icon: FaTheaterMasks,
          title: 'JOKER KÁRTYA',
          emoji: '🎭'
        }
      case 'luck':
        return {
          bgColor: 'var(--color-luck)',
          icon: FaDice,
          title: 'SZERENCSE KÁRTYA',
          emoji: '🎲'
        }
      default:
        return {
          bgColor: 'var(--color-border)',
          icon: FaQuestionCircle,
          title: 'ISMERETLEN KÁRTYA',
          emoji: '❓'
        }
    }
  }

  const config = getCardConfig(card)
  
  // Kártya tartalom meghatározása
  const getCardContent = (card) => {
    if (card.type === 'task') {
      return card.question || card.statement || 'Feladat leírása...'
    }
    if (card.type === 'joker' || card.type === 'luck') {
      return card.text || 'Kártya szövege...'
    }
    return 'Kártya tartalma...'
  }

  return (
    <div className="flex items-center justify-center p-6">
      {/* Kártya container */}
      <div 
        className="relative w-80 h-96 rounded-2xl shadow-2xl transform transition-all duration-300 hover:scale-105"
        style={{
          background: `linear-gradient(135deg, ${config.bgColor}15, ${config.bgColor}05)`,
          border: `3px solid ${config.bgColor}`,
        }}
      >
        {/* Kártya header */}
        <div 
          className="h-16 rounded-t-xl flex items-center justify-center relative overflow-hidden"
          style={{ backgroundColor: config.bgColor }}
        >
          {/* Háttér pattern */}
          <div className="absolute inset-0 opacity-20">
            <div className="w-full h-full" style={{
              backgroundImage: `repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.1) 10px, rgba(255,255,255,0.1) 20px)`
            }} />
          </div>
          
          <div className="relative flex items-center gap-3">
            <config.icon className="text-white text-xl" />
            <span className="text-white font-bold text-sm tracking-wide">
              {config.title}
            </span>
          </div>
        </div>

        {/* Kártya body */}
        <div className="p-6 h-80 flex flex-col">
          {/* Főikon */}
          <div className="text-center mb-4">
            <div className="text-5xl mb-2">{config.emoji}</div>
          </div>

          {/* Tartalom */}
          <div className="flex-1 flex flex-col justify-center">
            <div 
              className="text-[color:var(--color-text)] text-center leading-relaxed"
              style={{
                fontSize: card.text && card.text.length > 100 ? '14px' : '16px'
              }}
            >
              {getCardContent(card)}
            </div>
          </div>

          {/* Alsó információk */}
          <div className="border-t border-[color:var(--color-border)] pt-4 mt-4">
            <div className="flex justify-between items-center text-sm">
              {/* Idő */}
              {card.timeLimit && (
                <div className="flex items-center gap-1 text-[color:var(--color-text-muted)]">
                  <FaClock className="text-xs" />
                  <span>{card.timeLimit}s</span>
                </div>
              )}
              
              {/* Pontok */}
              {card.points && (
                <div className="flex items-center gap-1 text-[color:var(--color-text-muted)]">
                  <FaStar className="text-xs" />
                  <span>{card.points} pont</span>
                </div>
              )}
              
              {/* Ha nincs idő/pont info */}
              {!card.timeLimit && !card.points && (
                <div className="text-[color:var(--color-text-muted)] text-xs w-full text-center">
                  SerpentRace Deck
                </div>
              )}
            </div>
          </div>
        </div>

        {/* Kártya corner dekoráció */}
        <div className="absolute top-2 right-2 w-4 h-4 rounded-full" style={{ backgroundColor: config.bgColor, opacity: 0.3 }} />
        <div className="absolute bottom-2 left-2 w-4 h-4 rounded-full" style={{ backgroundColor: config.bgColor, opacity: 0.3 }} />
      </div>
    </div>
  )
}