import React, { useEffect } from "react"
import { 
  FaUser, 
  FaLock, 
  FaGlobe, 
  FaTags, 
  FaCalendarAlt, 
  FaQuestionCircle, 
  FaComment, 
  FaTimes,
  FaEdit 
} from "react-icons/fa"

export default function DeckInfoPopUp({ deck, onClose }) {
  if (!deck) return null

  // Debug: Log the deck structure to see what we're working with
  console.log('Deck in popup:', deck)
  console.log('Cards:', deck.cards)

  // Scroll blokkolás amikor a popup nyitva van
  useEffect(() => {
    // Scroll letiltása
    document.body.style.overflow = 'hidden'
    
    // Cleanup function - scroll visszaállítása amikor a komponens unmount-ol
    return () => {
      document.body.style.overflow = 'unset'
    }
  }, [])

  const deckTypes = {
    "Luck": { label: "Szerencse", color: "var(--color-luck)" },
    "Question": { label: "Kérdés", color: "var(--color-question)" },
    "Fun": { label: "Szórakozás", color: "var(--color-fun)" }
  }

  const currentDeckType = deckTypes[deck.type] || { label: deck.type, color: "var(--color-success)" }

  // Use real deck data with safe fallbacks
  const creator = deck.creatorName || deck.creator || (deck.user && deck.user.name) || "Ismeretlen"
  const privacy = deck.origin === "Vállalati" || deck.ctype === 1 || deck.privacy === 'public' ? "Publikus" : "Privát"

  // Get data from raw if available
  const rawData = deck.raw || deck
  
  // Use played number from raw data for answers count
  const questionsCount = rawData.cardCount || 0
  const answersCount = rawData.playedNumber || 0

  console.log('Calculated counts:', { questionsCount, answersCount, rawData })

  const mockData = {
    ...deck,
    creator,
    privacy,
    questionsCount,
    answersCount
  }

  const formatDate = (dateString) => {
    const date = new Date(dateString)
    return date.toLocaleDateString('hu-HU', {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    })
  }

  const handleOpenDeck = () => {
    alert("⚠️ A pakli megnyitás funkció még fejlesztés alatt áll!")
  }

  const handleEditDeck = () => {
    alert("⚠️ A pakli szerkesztés funkció még fejlesztés alatt áll!")
  }

  return (
    <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 backdrop-blur-sm">
      <div 
        className="bg-[color:var(--color-surface)] rounded-3xl shadow-2xl min-w-[350px] max-w-[420px] w-full mx-4 relative border border-[color:var(--color-surface-selected)] overflow-hidden"
        style={{
          background: `linear-gradient(135deg, var(--color-surface) 0%, var(--color-card) 100%)`
        }}
      >
        {/* Header with deck type color */}
        <div 
          className="h-2 w-full"
          style={{ backgroundColor: currentDeckType.color }}
        ></div>
        
        {/* Close button */}
        <button
          onClick={onClose}
          className="absolute top-4 right-4 text-[color:var(--color-text-muted)] hover:text-[color:var(--color-text)] text-xl font-bold leading-none p-2 rounded-full hover:bg-[color:var(--color-surface-selected)] transition-all duration-200"
          aria-label="Bezárás"
        >
          <FaTimes />
        </button>

        <div className="p-6">
          {/* Deck name and type */}
          <div className="mb-5">
            <div className="flex items-center gap-3 mb-2">
              <h2 className="text-xl font-bold text-[color:var(--color-text)]">
                {mockData.name}
              </h2>
              <span
                className="inline-block px-3 py-1 rounded-full text-xs font-bold"
                style={{
                  background: currentDeckType.color,
                  color: "var(--color-text-inverse)",
                }}
              >
                {currentDeckType.label}
              </span>
            </div>
          </div>

          {/* Data grid */}
          <div className="grid grid-cols-1 gap-3">
            {/* Creator */}
            <div className="flex items-center gap-3 p-3 bg-[color:var(--color-background)]/50 rounded-xl">
              <div className="flex items-center justify-center w-8 h-8 rounded-full bg-[color:var(--color-success)]/20">
                <FaUser className="text-[color:var(--color-success)] text-sm" />
              </div>
              <div>
                <div className="text-[color:var(--color-text-muted)] text-xs font-medium">Létrehozó</div>
                <div className="text-[color:var(--color-text)] font-semibold text-sm">{mockData.creator}</div>
              </div>
            </div>

            {/* Privacy */}
            <div className="flex items-center gap-3 p-3 bg-[color:var(--color-background)]/50 rounded-xl">
              <div className="flex items-center justify-center w-8 h-8 rounded-full bg-[color:var(--color-warning)]/20">
                {mockData.privacy === "Privát" ? (
                  <FaLock className="text-[color:var(--color-warning)] text-sm" />
                ) : (
                  <FaGlobe className="text-[color:var(--color-warning)] text-sm" />
                )}
              </div>
              <div>
                <div className="text-[color:var(--color-text-muted)] text-xs font-medium">Láthatóság</div>
                <div className="text-[color:var(--color-text)] font-semibold text-sm">{mockData.privacy}</div>
              </div>
            </div>

            {/* Type */}
            <div className="flex items-center gap-3 p-3 bg-[color:var(--color-background)]/50 rounded-xl">
              <div 
                className="flex items-center justify-center w-8 h-8 rounded-full"
                style={{ backgroundColor: `${currentDeckType.color}20` }}
              >
                <FaTags style={{ color: currentDeckType.color }} className="text-sm" />
              </div>
              <div>
                <div className="text-[color:var(--color-text-muted)] text-xs font-medium">Típus</div>
                <div className="text-[color:var(--color-text)] font-semibold text-sm">{currentDeckType.label}</div>
              </div>
            </div>

            {/* Date */}
            <div className="flex items-center gap-3 p-3 bg-[color:var(--color-background)]/50 rounded-xl">
              <div className="flex items-center justify-center w-8 h-8 rounded-full bg-[color:var(--color-primary)]/20">
                <FaCalendarAlt className="text-[color:var(--color-primary)] text-sm" />
              </div>
              <div>
                <div className="text-[color:var(--color-text-muted)] text-xs font-medium">Létrehozás dátuma</div>
                <div className="text-[color:var(--color-text)] font-semibold text-sm">{formatDate(mockData.created)}</div>
              </div>
            </div>

            {/* Questions and Answers in one row */}
            <div className="grid grid-cols-2 gap-3">
              {/* Questions */}
              <div className="flex items-center gap-2 p-3 bg-[color:var(--color-background)]/50 rounded-xl">
                <div className="flex items-center justify-center w-8 h-8 rounded-full bg-[color:var(--color-question)]/20">
                  <FaQuestionCircle className="text-[color:var(--color-question)] text-sm" />
                </div>
                <div>
                  <div className="text-[color:var(--color-text-muted)] text-xs font-medium">Kérdések</div>
                  <div className="text-[color:var(--color-text)] font-semibold">{mockData.questionsCount}</div>
                </div>
              </div>

              {/* Answers */}
              <div className="flex items-center gap-2 p-3 bg-[color:var(--color-background)]/50 rounded-xl">
                <div className="flex items-center justify-center w-8 h-8 rounded-full bg-[color:var(--color-fun)]/20">
                  <FaComment className="text-[color:var(--color-fun)] text-sm" />
                </div>
                <div>
                  <div className="text-[color:var(--color-text-muted)] text-xs font-medium">Válaszok</div>
                  <div className="text-[color:var(--color-text)] font-semibold">{mockData.answersCount}</div>
                </div>
              </div>
            </div>
          </div>

          {/* Action buttons */}
          <div className="mt-5 pt-4 border-t border-[color:var(--color-surface-selected)]">
            <div className="grid grid-cols-2 gap-3">
              {/* Open button */}
              <button
                className="px-4 py-2.5 rounded-xl font-semibold text-[color:var(--color-text-inverse)] transition-all duration-200 hover:scale-105 shadow-lg bg-[color:var(--color-success)] hover:bg-[color:var(--color-success)]/80"
                onClick={handleOpenDeck}
              >
                Megnyitás
              </button>
              
              {/* Edit button */}
              <button
                className="px-4 py-2.5 rounded-xl font-semibold text-[color:var(--color-text)] border border-[color:var(--color-surface-selected)] transition-all duration-200 hover:scale-105 hover:bg-[color:var(--color-surface-selected)] flex items-center justify-center gap-2"
                onClick={handleEditDeck}
              >
                <FaEdit className="text-sm" />
                Szerkesztés
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}