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

export default function DeckInfoPopUp({ deck, onClose }) {
  const navigate = useNavigate()
  
  if (!deck) return null

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

  // 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'
    }
  }, [])

  // Backend enum mapping
  const deckTypeMapping = {
    0: { label: "Szerencse", color: "var(--color-luck)" },      // LUCK
    1: { label: "Joker", color: "var(--color-fun)" },          // JOKER
    2: { label: "Kérdés", color: "var(--color-question)" }     // QUESTION
  }

  const ctypeMapping = {
    0: "Publikus",      // PUBLIC
    1: "Privát",        // PRIVATE
    2: "Vállalati"      // ORGANIZATION
  }

  const stateMapping = {
    0: "Aktív",         // ACTIVE
    1: "Törölt"         // SOFT_DELETE
  }

  // Get data from raw (backend data)
  const rawData = deck.raw || deck
  
  // Type info
  const deckTypeInfo = deckTypeMapping[rawData.type] || { label: "Ismeretlen", color: "var(--color-success)" }
  
  // Privacy/CType
  const privacy = ctypeMapping[rawData.ctype] || "Ismeretlen"
  
  // State
  const state = stateMapping[rawData.state] || "Ismeretlen"
  
  // Creator
  const creator = rawData.user?.name || rawData.creatorName || rawData.creator || "Ismeretlen"
  
  // Card count
  const cardCount = rawData.cardCount || 0
  
  // Played count
  const playedNumber = rawData.playedNumber || 0

  console.log('Mapped data:', { 
    type: rawData.type, 
    deckTypeInfo, 
    ctype: rawData.ctype, 
    privacy,
    state,
    cardCount,
    playedNumber 
  })

  const mockData = {
    name: rawData.name || deck.name || "Névtelen pakli",
    creator,
    privacy,
    state,
    questionsCount: cardCount,
    answersCount: playedNumber,
    created: rawData.creationdate || rawData.created || deck.created || new Date().toISOString(),
    description: rawData.description || ""
  }

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

  const handleOpenDeck = () => {
    // TODO: Megnyitás funkció - később implementálható
    alert("⚠️ A pakli megnyitás funkció még fejlesztés alatt áll!")
  }

  const handleEditDeck = () => {
    // Get the deck ID from raw data
    const deckId = rawData.id || deck.id
    
    if (!deckId) {
      alert("⚠️ Hiba: A pakli azonosítója nem található!")
      return
    }
    
    // Navigate to deck creator with the deck ID
    navigate(`/deck-creator/${deckId}`)
    
    // Close the popup
    onClose()
  }

  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: deckTypeInfo.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: deckTypeInfo.color,
                  color: "var(--color-text-inverse)",
                }}
              >
                {deckTypeInfo.label}
              </span>
            </div>
            {mockData.description && (
              <p className="text-[color:var(--color-text-muted)] text-sm">
                {mockData.description}
              </p>
            )}
          </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: `${deckTypeInfo.color}20` }}
              >
                <FaTags style={{ color: deckTypeInfo.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">{deckTypeInfo.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">
              {/* Card Count (Kártyák) */}
              <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ártyák</div>
                  <div className="text-[color:var(--color-text)] font-semibold">{mockData.questionsCount}</div>
                </div>
              </div>

              {/* Played Count (Játszva) */}
              <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">Játszva</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>
  )
}