// src/components/DeckCreator/DeckHeader.jsx
// Deck alapadatok szerkesztése és mentés

import React from "react"
import { FaSave, FaArrowLeft, FaGlobe, FaLock, FaQuestionCircle, FaDice, FaLaughBeam } from "react-icons/fa"

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

const privacyOptions = [
  { value: "private", label: "Privát", icon: FaLock },
  { value: "public", label: "Publikus", icon: FaGlobe }
]

export default function DeckHeader({ deck, onUpdate, onSave, onBack }) {
  const currentDeckType = deckTypes.find(type => type.value === deck.type) || deckTypes[0]
  const currentPrivacy = privacyOptions.find(option => option.value === deck.privacy) || privacyOptions[0]

  const handleInputChange = (field, value) => {
    onUpdate({ [field]: value })
  }

  const cardsCount = deck.cards?.length || 0
  const taskCards = deck.cards?.filter(card => card.type === 'task')?.length || 0
  const jokerCards = deck.cards?.filter(card => card.type === 'joker')?.length || 0
  const luckCards = deck.cards?.filter(card => card.type === 'luck')?.length || 0

  return (
    <div className="bg-[color:var(--color-surface)] border-b border-[color:var(--color-surface-selected)] px-6 py-4">
      {/* Top Row - Title and Actions */}
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-4">
          <button
            onClick={onBack}
            className="flex items-center gap-2 px-4 py-2 rounded-xl bg-[color:var(--color-background)] hover:bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] transition-all duration-200"
          >
            <FaArrowLeft />
            Vissza
          </button>
          
          <h1 className="text-2xl font-bold text-[color:var(--color-text)]">
            📝 Deck Szerkesztés
          </h1>
        </div>

        <button
          onClick={onSave}
          className="flex items-center gap-2 px-6 py-2 rounded-xl bg-[color:var(--color-success)] hover:bg-[color:var(--color-success)]/80 text-[color:var(--color-text-inverse)] font-semibold transition-all duration-200 hover:scale-105 shadow-lg"
        >
          <FaSave />
          Mentés
        </button>
      </div>

      {/* Main Content Row */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 items-end">
        {/* Deck Basic Info */}
        <div className="lg:col-span-2 space-y-4">
          {/* Deck Name */}
          <div>
            <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
              📦 Deck neve
            </label>
            <input
              type="text"
              value={deck.name}
              onChange={(e) => handleInputChange('name', 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-success)] focus:border-transparent outline-none transition-all duration-200"
              placeholder="Add meg a deck nevét..."
            />
          </div>

          {/* Type and Privacy Row */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            {/* Deck Type */}
            <div>
              <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
                🎯 Típus
              </label>
              <select
                value={deck.type}
                onChange={(e) => handleInputChange('type', 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-success)] focus:border-transparent outline-none transition-all duration-200"
              >
                {deckTypes.map(type => (
                  <option key={type.value} value={type.value}>
                    {type.label}
                  </option>
                ))}
              </select>
            </div>

            {/* Privacy */}
            <div>
              <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
                👁️ Láthatóság
              </label>
              <select
                value={deck.privacy}
                onChange={(e) => handleInputChange('privacy', 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-success)] focus:border-transparent outline-none transition-all duration-200"
              >
                {privacyOptions.map(option => (
                  <option key={option.value} value={option.value}>
                    {option.label}
                  </option>
                ))}
              </select>
            </div>

            {/* Description */}
            <div>
              <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
                📝 Leírás
              </label>
              <input
                type="text"
                value={deck.description}
                onChange={(e) => handleInputChange('description', 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-success)] focus:border-transparent outline-none transition-all duration-200"
                placeholder="Rövid leírás..."
              />
            </div>
          </div>
        </div>

        {/* Stats Panel */}
        <div className="bg-[color:var(--color-background)]/50 rounded-xl p-4 border border-[color:var(--color-surface-selected)]">
          <h3 className="text-[color:var(--color-text)] font-semibold mb-3 flex items-center gap-2">
            📊 Statisztikák
          </h3>
          
          <div className="space-y-2 text-sm">
            <div className="flex justify-between items-center">
              <span className="text-[color:var(--color-text-muted)]">Összes kártya:</span>
              <span className="text-[color:var(--color-text)] font-semibold">{cardsCount}</span>
            </div>
            
            <div className="flex justify-between items-center">
              <span className="text-[color:var(--color-text-muted)]">📋 Feladat:</span>
              <span className="text-[color:var(--color-question)] font-semibold">{taskCards}</span>
            </div>
            
            <div className="flex justify-between items-center">
              <span className="text-[color:var(--color-text-muted)]">🃏 Joker:</span>
              <span className="text-[color:var(--color-success)] font-semibold">{jokerCards}</span>
            </div>
            
            <div className="flex justify-between items-center">
              <span className="text-[color:var(--color-text-muted)]">🎲 Szerencse:</span>
              <span className="text-[color:var(--color-luck)] font-semibold">{luckCards}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}