import React, { useState, useEffect } from "react"
import HandleNavigate from "../../utils/HandleNavigate/HandleNavigate"
import {
  FaPlus,
  FaFilter,
  FaCalendarAlt,
  FaArrowUp,
  FaArrowDown,
  FaSortAlphaDown,
  FaSortAlphaUp,
  FaQuestionCircle,
  FaChevronLeft,
  FaChevronRight,
} from "react-icons/fa"
import SearchBox from "../Search/SearchBox"
import PopUp from "../PopUp/PopUp"
import DeckInfoPopUp from "../PopUp/DeckInfoPopUp"

const deckTypes = [
  { label: "Luck", color: "var(--color-luck)" },
  { label: "Question", color: "var(--color-question)" },
  { label: "Joker", color: "var(--color-fun)" },
]

// initial state will be fetched from backend

const origins = ["Mind", "Vállalati", "Saját"]

const sortOptions = [
  {
    value: "date-asc",
    label: (
      <>
        <FaCalendarAlt className="inline mr-1" />
        <FaArrowUp className="inline" />
      </>
    ),
  },
  {
    value: "date-desc",
    label: (
      <>
        <FaCalendarAlt className="inline mr-1" />
        <FaArrowDown className="inline" />
      </>
    ),
  },
  {
    value: "abc-asc",
    label: (
      <>
        <FaSortAlphaDown className="inline" />
      </>
    ),
  },
  {
    value: "abc-desc",
    label: (
      <>
        <FaSortAlphaUp className="inline" />
      </>
    ),
  },
]

const DeckManager = () => {
  const { goDeckCreator } = HandleNavigate()

  const [selectedType, setSelectedType] = useState("All")
  const [selectedOrigin, setSelectedOrigin] = useState("Mind")
  const [sortBy, setSortBy] = useState("date-desc")
  const [search, setSearch] = useState("")
  const [showSortHelp, setShowSortHelp] = useState(false)
  const [selectedDeck, setSelectedDeck] = useState(null)
  const [allDecks, setAllDecks] = useState([]) // Összes pakli
  const [loading, setLoading] = useState(false)
  const [itemsPerPage, setItemsPerPage] = useState(20)
  const [currentPage, setCurrentPage] = useState(1)

  // Load all decks once
  useEffect(() => {
    let mounted = true
    const load = async () => {
      setLoading(true)
      try {
        // Load all decks (0-99 is the max limit = 100 decks)
        const result = await import('../../api/deckApi').then(m => m.getDecksPage(0, 99))
        if (!mounted) return
        
        console.log('Loaded decks:', result) // Debug
        
        // Map backend deck shape to UI shape
        const mapped = (result.decks || []).map(d => ({
          id: d.id,
          name: d.name,
          type: d.type === 2 ? 'Question' : d.type === 1 ? 'Joker' : 'Luck',
          created: d.creationdate ? new Date(d.creationdate).toLocaleDateString() : '',
          origin: d.ctype === 2 ? 'Vállalati' : d.ctype === 0 ? 'Mind' : 'Saját',
          raw: d
        }))
        
        console.log('Mapped decks:', mapped) // Debug
        setAllDecks(mapped)
      } catch (err) {
        console.error('Failed to load decks', err)
      } finally {
        setLoading(false)
      }
    }
    load()
    return () => { mounted = false }
  }, [])

  // Filter logic
  let filteredDecks = allDecks.filter((deck) => {
    const typeMatch = selectedType === "All" || deck.type === selectedType
    const originMatch = selectedOrigin === "Mind" || deck.origin === selectedOrigin
    const searchMatch = !search || deck.name.toLowerCase().includes(search.toLowerCase())
    return typeMatch && originMatch && searchMatch
  })

  // Sort logic
  filteredDecks = [...filteredDecks].sort((a, b) => {
    if (sortBy === "date-asc") {
      return a.created.localeCompare(b.created)
    } else if (sortBy === "date-desc") {
      return b.created.localeCompare(a.created)
    } else if (sortBy === "abc-asc") {
      return a.name.localeCompare(b.name)
    } else if (sortBy === "abc-desc") {
      return b.name.localeCompare(a.name)
    }
    return 0
  })

  // Pagination logic - frontend only
  const totalDecks = filteredDecks.length
  const totalPages = Math.ceil(totalDecks / itemsPerPage)
  const startIndex = (currentPage - 1) * itemsPerPage
  const endIndex = startIndex + itemsPerPage
  const paginatedDecks = filteredDecks.slice(startIndex, endIndex)

  // Reset to page 1 when filters or items per page change
  useEffect(() => {
    setCurrentPage(1)
  }, [selectedType, selectedOrigin, search, sortBy, itemsPerPage])

  return (
    <div className="w-full flex flex-col bg-[color:var(--color-background)]">
      <div className="w-full max-w-[1200px] mx-auto px-4 py-10 pb-32">
        {/* Filters */}
        <div className="flex flex-col gap-3 mb-6 sm:mb-10 bg-[color:var(--color-surface)]/80 backdrop-blur-lg rounded-xl sm:rounded-2xl px-4 sm:px-6 py-3 sm:py-4 shadow-lg">
          <div className="flex gap-2 items-center w-full flex-wrap">
            <SearchBox
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              width={240}
              placeholder="Keresés..."
              className="mr-4"
            />
            <FaFilter style={{ color: "var(--color-success)" }} className="mr-1 sm:mr-2 text-sm sm:text-base" />
            <span className="text-[color:var(--color-text)] font-semibold mr-1 sm:mr-2 text-xs sm:text-sm">Típus:</span>
            <button
              className={`px-2 sm:px-3 py-1 rounded-lg font-medium transition-all duration-200 text-xs sm:text-sm ${
                selectedType === "All"
                  ? "bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] border border-[color:var(--color-surface)]"
                  : "text-[color:var(--color-text)] bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30"
              }`}
              onClick={() => setSelectedType("All")}
            >
              Mind
            </button>
            {deckTypes.map((type) => (
              <button
                key={type.label}
                className={`px-2 sm:px-3 py-1 rounded-lg font-medium transition-all duration-200 ml-1 text-xs sm:text-sm ${
                  selectedType === type.label
                    ? "text-[color:var(--color-text-inverse)] border border-[color:var(--color-surface)]"
                    : "text-[color:var(--color-text)] bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30"
                }`}
                style={selectedType === type.label ? { background: type.color } : undefined}
                onClick={() => setSelectedType(type.label)}
              >
                {type.label === "Luck"
                  ? "Szerencse"
                  : type.label === "Question"
                  ? "Kérdés"
                  : type.label === "Joker"
                  ? "Joker"
                  : type.label}
              </button>
            ))}
            <span className="text-[color:var(--color-text)] font-semibold mr-1 sm:mr-2 ml-1 sm:ml-2 text-xs sm:text-sm">Eredet:</span>
            <select
              className="px-2 sm:px-3 py-1 rounded-lg bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30 text-[color:var(--color-text)] border-none focus:ring-2 focus:ring-[color:var(--color-success)] outline-none text-xs sm:text-sm"
              value={selectedOrigin}
              onChange={(e) => setSelectedOrigin(e.target.value)}
            >
              {origins.map((origin) => (
                <option
                  key={origin}
                  value={origin}
                  className="bg-zinc-800 text-white"
                >
                  {origin === "Mind"
                    ? "Mind"
                    : origin === "Vállalati"
                    ? "Vállalati"
                    : origin === "Saját"
                    ? "Saját"
                    : origin}
                </option>
              ))}
            </select>
            <span className="text-[color:var(--color-text)] font-semibold mr-1 sm:mr-2 ml-1 sm:ml-2 flex items-center gap-1 text-xs sm:text-sm">
              Rendezés:
              <button
                type="button"
                className="ml-1 text-[color:var(--color-success)] hover:text-[color:var(--color-text)] focus:outline-none"
                onClick={() => setShowSortHelp(true)}
                aria-label="Rendezési magyarázat megnyitása"
                style={{ fontSize: 18, lineHeight: 1 }}
              >
                <FaQuestionCircle />
              </button>
            </span>
            <select
              className="px-2 sm:px-3 py-1 rounded-lg bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30 text-[color:var(--color-text)] border-none focus:ring-2 focus:ring-[color:var(--color-success)] outline-none flex items-center text-xs sm:text-sm"
              value={sortBy}
              onChange={(e) => setSortBy(e.target.value)}
              aria-label="Rendezés"
            >
              <option
                value="date-asc"
                className="bg-zinc-800 text-white"
              >
                📅↑
              </option>
              <option
                value="date-desc"
                className="bg-zinc-800 text-white"
              >
                📅↓
              </option>
              <option
                value="abc-asc"
                className="bg-zinc-800 text-white"
              >
                A→Z
              </option>
              <option
                value="abc-desc"
                className="bg-zinc-800 text-white"
              >
                Z→A
              </option>
            </select>
            {showSortHelp && (
              <PopUp onClose={() => setShowSortHelp(false)}>
                <h2 className="text-lg font-bold mb-4">Rendezési lehetőségek magyarázata</h2>
                <ul className="space-y-2 text-[color:var(--color-night)]">
                  <li>
                    <span className="font-bold">📅↑</span> – Dátum szerint növekvő sorrendben (legrégebbi
                    elöl)
                  </li>
                  <li>
                    <span className="font-bold">📅↓</span> – Dátum szerint csökkenő sorrendben (legújabb elöl)
                  </li>
                  <li>
                    <span className="font-bold">A→Z</span> – Név szerint növekvő sorrendben (A-tól Z-ig)
                  </li>
                  <li>
                    <span className="font-bold">Z→A</span> – Név szerint csökkenő sorrendben (Z-től A-ig)
                  </li>
                </ul>
                <button
                  className="mt-6 px-4 py-2 rounded-lg bg-[color:var(--color-success)] text-[color:var(--color-text-inverse)] font-semibold hover:bg-[color:var(--color-success)]/80 transition"
                  onClick={() => setShowSortHelp(false)}
                >
                  Bezárás
                </button>
              </PopUp>
            )}
          </div>
        </div>

        {/* Items per page selector and pagination info */}
        <div className="flex flex-col md:flex-row gap-4 justify-between items-center mb-6 bg-[color:var(--color-surface)]/60 backdrop-blur-lg rounded-xl px-6 py-3 shadow">
          <div className="flex items-center gap-3">
            <span className="text-[color:var(--color-text-muted)] text-sm font-medium">
              Elemek oldalanként:
            </span>
            <select
              value={itemsPerPage}
              onChange={(e) => setItemsPerPage(Number(e.target.value))}
              className="px-3 py-1.5 rounded-lg bg-[color:var(--color-background)] text-[color:var(--color-text)] border border-[color:var(--color-surface-selected)] focus:ring-2 focus:ring-[color:var(--color-success)] outline-none transition-all duration-200"
            >
              <option value={20}>20</option>
              <option value={30}>30</option>
              <option value={40}>40</option>
              <option value={50}>50</option>
            </select>
          </div>

          <div className="text-[color:var(--color-text-muted)] text-sm">
            {totalDecks > 0 ? (
              <>
                {startIndex + 1}-{Math.min(endIndex, totalDecks)} / {totalDecks} pakli
              </>
            ) : (
              <>0 pakli</>
            )}
          </div>
        </div>

        {/* Decks Grid */}
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 sm:gap-6 lg:gap-8 mt-6 sm:mt-8">
          {/* Create New Deck (Mockup) */}
          <div
            onClick={() => goDeckCreator()}
            className="flex flex-col items-center justify-center h-40 sm:h-48 bg-[color:var(--color-card)] border-2 border-dashed border-[color:var(--color-success)] rounded-xl sm:rounded-2xl cursor-pointer hover:bg-[color:var(--color-success)]/20 transition-all duration-200 shadow-lg"
          >
            <FaPlus style={{ color: "var(--color-success)" }} className="text-4xl sm:text-5xl mb-2" />
            <span className="text-[color:var(--color-text)] font-semibold text-sm sm:text-base">Új pakli létrehozása</span>
          </div>
          {/* Existing Decks (from backend) */}
          {loading && (
            <div className="col-span-full text-center text-[color:var(--color-text-muted)]">Betöltés...</div>
          )}
          {!loading && filteredDecks.length === 0 && (
            <div className="col-span-full text-center text-[color:var(--color-text-muted)]">Nincsenek mentett paklik.</div>
          )}
          {!loading && paginatedDecks.map((deck) => {
            const deckType = deckTypes.find((t) => t.label === deck.type)
            const borderColor = deckType ? deckType.color : "var(--color-success)"
            return (
              <div
                key={deck.id}
                className="flex flex-col justify-between h-40 sm:h-48 bg-[color:var(--color-card)] rounded-xl sm:rounded-2xl p-4 sm:p-6 shadow-lg border-t-4 hover:scale-105 transition-transform duration-200 cursor-pointer"
                style={{ borderTopColor: borderColor }}
                onClick={() => setSelectedDeck(deck)}
              >
                <div>
                  <span
                    className="inline-block px-2 sm:px-3 py-1 rounded-full text-[10px] sm:text-xs font-bold mb-2"
                    style={{
                      background: deckType?.color,
                      color: "var(--color-text-inverse)",
                    }}
                  >
                    {deck.type === "Luck"
                      ? "Szerencse"
                      : deck.type === "Question"
                      ? "Kérdés"
                      : deck.type === "Fun"
                      ? "Joker"
                      : deck.type}
                  </span>
                  <h2 className="text-xl font-bold text-[color:var(--color-text)] mb-1 truncate">
                    {deck.name}
                  </h2>
                </div>
                <div className="text-[color:var(--color-text-muted)] text-sm mt-2">
                  Létrehozva: {deck.created}
                </div>
              </div>
            )
          })}
        </div>

        {/* Pagination Controls */}
        {totalPages > 1 && (
          <div className="flex justify-center items-center gap-2 mt-8">
            <button
              onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}
              disabled={currentPage === 1}
              className={`px-4 py-2 rounded-lg font-medium transition-all duration-200 flex items-center gap-2 ${
                currentPage === 1
                  ? 'bg-[color:var(--color-surface)] text-[color:var(--color-text-muted)] cursor-not-allowed'
                  : 'bg-[color:var(--color-success)] text-[color:var(--color-text-inverse)] hover:bg-[color:var(--color-success)]/80 hover:scale-105'
              }`}
            >
              <FaChevronLeft />
              Előző
            </button>

            <div className="flex items-center gap-2">
              {[...Array(totalPages)].map((_, index) => {
                const pageNum = index + 1
                // Show first page, last page, current page and neighbors
                if (
                  pageNum === 1 ||
                  pageNum === totalPages ||
                  (pageNum >= currentPage - 1 && pageNum <= currentPage + 1)
                ) {
                  return (
                    <button
                      key={pageNum}
                      onClick={() => setCurrentPage(pageNum)}
                      className={`w-10 h-10 rounded-lg font-medium transition-all duration-200 ${
                        currentPage === pageNum
                          ? 'bg-[color:var(--color-success)] text-[color:var(--color-text-inverse)] scale-110 shadow-lg'
                          : 'bg-[color:var(--color-surface)] text-[color:var(--color-text)] hover:bg-[color:var(--color-surface-selected)]'
                      }`}
                    >
                      {pageNum}
                    </button>
                  )
                } else if (
                  pageNum === currentPage - 2 ||
                  pageNum === currentPage + 2
                ) {
                  return (
                    <span key={pageNum} className="text-[color:var(--color-text-muted)]">
                      ...
                    </span>
                  )
                }
                return null
              })}
            </div>

            <button
              onClick={() => setCurrentPage(prev => Math.min(totalPages, prev + 1))}
              disabled={currentPage === totalPages}
              className={`px-4 py-2 rounded-lg font-medium transition-all duration-200 flex items-center gap-2 ${
                currentPage === totalPages
                  ? 'bg-[color:var(--color-surface)] text-[color:var(--color-text-muted)] cursor-not-allowed'
                  : 'bg-[color:var(--color-success)] text-[color:var(--color-text-inverse)] hover:bg-[color:var(--color-success)]/80 hover:scale-105'
              }`}
            >
              Következő
              <FaChevronRight />
            </button>
          </div>
        )}
      </div>

      {/* Deck Info Popup */}
      {selectedDeck && <DeckInfoPopUp deck={selectedDeck} onClose={() => setSelectedDeck(null)} />}
    </div>
  )
}

export default DeckManager