'use client'

import { motion, AnimatePresence } from 'framer-motion'
import { X, BookOpen, Heart, Package, LayoutGrid, ChevronRight, Search, Clock } from 'lucide-react'
import { useCatalogStore } from '@/lib/store'
import { useEffect, useState, useMemo, memo, useCallback } from 'react'
import type { Category } from '@/lib/types'
import { getCategorySymbol } from '@/lib/catalog-utils'
import { fetchCategories } from '@/lib/categories-cache'
import { TOTAL_PAGES } from './header'

// Page ranges per category (based on PDF analysis)
const CATEGORY_PAGES: Record<string, [number, number]> = {
  'corpo': [4, 13],
  'uso-diario': [14, 21],
  'pele': [22, 35],
  'maquiagem': [36, 47],
  'cabelos': [48, 55],
  'perfumaria': [56, 67],
  'intimidade': [68, 71],
  'infantil': [72, 77],
  'casa': [78, 83],
  'suplementos': [84, 89],
}

// Pre-compute page → category lookup table ONCE at module load.
// Avoids O(n) loop per button per render (was 91 × 10 = 910 iterations/render).
const PAGE_TO_CATEGORY: Array<string | null> = (() => {
  const arr: Array<string | null> = new Array(TOTAL_PAGES + 1).fill(null)
  for (const [slug, [start, end]] of Object.entries(CATEGORY_PAGES)) {
    for (let p = start; p <= end; p++) arr[p] = slug
  }
  return arr
})()

// Find which category the current page belongs to
function getActiveCategorySlug(page: number): string | null {
  if (page < 1 || page > TOTAL_PAGES) return null
  return PAGE_TO_CATEGORY[page] || null
}

export function Sidebar() {
  // Individual selectors — avoids re-rendering the whole Sidebar on every
  // store change (cart updates, hover state, etc.)
  const sidebarOpen = useCatalogStore(s => s.sidebarOpen)
  const setSidebarOpen = useCatalogStore(s => s.setSidebarOpen)
  const categories = useCatalogStore(s => s.categories)
  const favorites = useCatalogStore(s => s.favorites)
  const selectedPage = useCatalogStore(s => s.selectedPage)
  const recentPages = useCatalogStore(s => s.recentPages)
  const goToPage = useCatalogStore(s => s.goToPage)
  const setSearchOpen = useCatalogStore(s => s.setSearchOpen)
  const setFavoritesOpen = useCatalogStore(s => s.setFavoritesOpen)
  const setAdminOpen = useCatalogStore(s => s.setAdminOpen)

  const [localCats, setLocalCats] = useState<Category[]>([])

  useEffect(() => {
    if (!sidebarOpen) return
    fetchCategories()
      .then(setLocalCats)
      .catch(() => {})
  }, [sidebarOpen])

  const cats = categories.length > 0 ? categories : localCats
  const activeCategorySlug = useMemo(
    () => getActiveCategorySlug(selectedPage),
    [selectedPage]
  )
  const activeCategory = useMemo(
    () => cats.find(c => c.slug === activeCategorySlug) || null,
    [cats, activeCategorySlug]
  )
  const progress = Math.round((selectedPage / TOTAL_PAGES) * 100)

  // Stable callbacks so memoized children don't re-render
  const handleJump = useCallback((p: number) => {
    goToPage(p)
    setSidebarOpen(false)
  }, [goToPage, setSidebarOpen])

  const handleClose = useCallback(() => setSidebarOpen(false), [setSidebarOpen])

  return (
    <AnimatePresence>
      {sidebarOpen && (
        <>
          {/* Overlay — solid black, NO backdrop-blur (blur is very expensive) */}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.18 }}
            onClick={handleClose}
            className="fixed inset-0 bg-black/50 z-40"
          />
          <motion.aside
            initial={{ x: '-100%' }}
            animate={{ x: 0 }}
            exit={{ x: '-100%' }}
            transition={{ type: 'tween', ease: 'easeOut', duration: 0.22 }}
            className="fixed top-0 left-0 bottom-0 w-80 max-w-[85vw] bg-white z-40 shadow-2xl flex flex-col"
          >
            {/* Header */}
            <div className="flex items-center justify-between p-4 border-b border-neutral-100 flex-shrink-0">
              <div className="flex items-center gap-2">
                <div className="w-9 h-9 rounded-full bg-amber-400 flex items-center justify-center">
                  <span className="text-base">🐝</span>
                </div>
                <div>
                  <div className="text-sm font-bold text-neutral-900">Índice</div>
                  <div className="text-[10px] text-neutral-500">Catálogo CP 03/2026</div>
                </div>
              </div>
              <button
                onClick={handleClose}
                className="p-2 rounded-lg hover:bg-neutral-100"
                aria-label="Fechar"
              >
                <X className="w-5 h-5 text-neutral-500" />
              </button>
            </div>

            {/* Scrollable content */}
            <div className="flex-1 overflow-y-auto overscroll-contain">
              {/* Position indicator */}
              <div className="px-4 pt-4 pb-3 bg-gradient-to-br from-amber-50 to-orange-50 border-b border-amber-100">
                <div className="text-[10px] font-bold text-amber-700 uppercase tracking-wider mb-1">
                  Você está aqui
                </div>
                <div className="flex items-baseline gap-1.5 mb-2">
                  <span className="text-2xl font-bold text-neutral-900 tabular-nums">
                    {selectedPage}
                  </span>
                  <span className="text-xs text-neutral-500">de {TOTAL_PAGES}</span>
                  {activeCategory && (
                    <span className="ml-auto text-[11px] font-semibold text-amber-700 bg-white/70 px-2 py-0.5 rounded-full">
                      {getCategorySymbol(activeCategory.slug)} {activeCategory.name}
                    </span>
                  )}
                </div>
                {/* Progress bar */}
                <div className="h-1.5 bg-amber-100 rounded-full overflow-hidden">
                  <div
                    className="h-full bg-gradient-to-r from-amber-400 to-orange-500 rounded-full"
                    style={{ width: `${progress}%` }}
                  />
                </div>
                <div className="flex justify-between mt-1 text-[9px] text-amber-700/70 font-mono">
                  <span>{progress}%</span>
                  <span>{TOTAL_PAGES - selectedPage} pág. restantes</span>
                </div>
              </div>

              {/* Quick actions */}
              <div className="p-3 space-y-1">
                <NavButton
                  icon={<BookOpen className="w-4 h-4" />}
                  label="Capa do catálogo"
                  hint="Página 1"
                  active={selectedPage === 1}
                  onClick={handleJump.bind(null, 1)}
                />
                <NavButton
                  icon={<Search className="w-4 h-4" />}
                  label="Buscar produtos"
                  onClick={() => { setSearchOpen(true); setSidebarOpen(false) }}
                />
                <NavButton
                  icon={<Heart className="w-4 h-4" />}
                  label="Meus favoritos"
                  badge={favorites.length}
                  onClick={() => { setFavoritesOpen(true); setSidebarOpen(false) }}
                />
              </div>

              {/* Recently visited pages */}
              {recentPages.length > 0 && (
                <div className="px-3 pb-3">
                  <div className="flex items-center gap-1.5 px-3 pb-2 pt-1">
                    <Clock className="w-3 h-3 text-neutral-400" />
                    <div className="text-[10px] font-bold text-neutral-400 uppercase tracking-wider">
                      Vistas recentemente
                    </div>
                  </div>
                  <div className="flex flex-wrap gap-1.5 px-3">
                    {recentPages.slice(0, 6).map(page => (
                      <button
                        key={page}
                        onClick={() => handleJump(page)}
                        className={`min-w-[32px] h-8 px-2 rounded-lg text-xs font-bold tabular-nums transition-colors ${
                          page === selectedPage
                            ? 'bg-amber-400 text-black ring-2 ring-amber-200'
                            : 'bg-neutral-100 text-neutral-700 hover:bg-neutral-200'
                        }`}
                      >
                        {page}
                      </button>
                    ))}
                  </div>
                </div>
              )}

              {/* Categories */}
              <div className="px-3 pb-2">
                <div className="px-3 pb-2 pt-2">
                  <div className="text-[10px] font-bold text-neutral-400 uppercase tracking-wider">
                    Categorias
                  </div>
                </div>
                <div className="space-y-0.5">
                  {cats.map((cat) => {
                    const range = CATEGORY_PAGES[cat.slug]
                    const isActive = cat.slug === activeCategorySlug
                    return (
                      <button
                        key={cat.id}
                        onClick={() => {
                          if (range) goToPage(range[0])
                          setSidebarOpen(false)
                        }}
                        className={`w-full flex items-center justify-between px-3 py-2.5 rounded-xl transition-colors text-left group ${
                          isActive ? 'bg-amber-50 ring-1 ring-amber-200' : 'hover:bg-neutral-50'
                        }`}
                      >
                        <div className="flex items-center gap-3 min-w-0">
                          <span className="text-lg flex-shrink-0">{getCategorySymbol(cat.slug)}</span>
                          <div className="min-w-0">
                            <div className={`text-sm font-medium truncate transition-colors ${
                              isActive ? 'text-amber-700' : 'text-neutral-900 group-hover:text-amber-600'
                            }`}>
                              {cat.name}
                            </div>
                            <div className="text-[10px] text-neutral-400">
                              {cat.productCount || 0} produtos{range ? ` • pág. ${range[0]}-${range[1]}` : ''}
                            </div>
                          </div>
                        </div>
                        <div className="flex items-center gap-1.5 flex-shrink-0">
                          <div
                            className="w-2 h-2 rounded-full"
                            style={{ backgroundColor: cat.color || '#F59E0B' }}
                          />
                          {isActive && (
                            <span className="text-[9px] font-bold text-amber-600 uppercase">aqui</span>
                          )}
                          <ChevronRight className={`w-4 h-4 transition-colors ${
                            isActive ? 'text-amber-500' : 'text-neutral-300 group-hover:text-amber-500'
                          }`} />
                        </div>
                      </button>
                    )
                  })}
                </div>
              </div>

              {/* Quick page jump grid */}
              <div className="px-3 pb-3">
                <div className="px-3 pb-2 pt-2">
                  <div className="text-[10px] font-bold text-neutral-400 uppercase tracking-wider">
                    Ir para página
                  </div>
                </div>
                <PageGrid
                  selectedPage={selectedPage}
                  activeCategorySlug={activeCategorySlug}
                  onJump={handleJump}
                />
              </div>

              {/* Shortcuts */}
              <div className="px-3 pb-3">
                <div className="px-3 pb-2 pt-2">
                  <div className="text-[10px] font-bold text-neutral-400 uppercase tracking-wider">
                    Atalhos
                  </div>
                </div>
                <div className="space-y-0.5">
                  <NavButton
                    icon={<Package className="w-4 h-4" />}
                    label="Kits promocionais"
                    hint="Página 90"
                    active={selectedPage === 90}
                    onClick={handleJump.bind(null, 90)}
                  />
                  <NavButton
                    icon={<LayoutGrid className="w-4 h-4" />}
                    label="Painel administrativo"
                    onClick={() => { setAdminOpen(true); setSidebarOpen(false) }}
                  />
                </div>
              </div>
            </div>

            {/* Footer */}
            <div className="p-4 border-t border-neutral-100 flex-shrink-0">
              <div className="text-[10px] text-neutral-400 text-center">
                Abelha Rainha • 36 anos cuidando da sua beleza
              </div>
              <div className="text-[10px] text-neutral-300 text-center mt-0.5">
                {TOTAL_PAGES} páginas • CP 03/2026
              </div>
            </div>
          </motion.aside>
        </>
      )}
    </AnimatePresence>
  )
}

// Single memoized page button — only re-renders if its own props change.
// Before, all 91 buttons re-rendered on every selectedPage change.
const PageButton = memo(function PageButton({
  page,
  isActive,
  inActiveCategory,
  onJump,
}: {
  page: number
  isActive: boolean
  inActiveCategory: boolean
  onJump: (page: number) => void
}) {
  const isCover = page === 1 || page === TOTAL_PAGES
  return (
    <button
      onClick={() => onJump(page)}
      className={`aspect-square rounded text-[10px] font-bold tabular-nums transition-colors flex items-center justify-center ${
        isActive
          ? 'bg-amber-400 text-black ring-2 ring-amber-200 z-10'
          : isCover
          ? 'bg-neutral-800 text-white hover:bg-neutral-700'
          : inActiveCategory
          ? 'bg-amber-100 text-amber-700 hover:bg-amber-200'
          : 'bg-neutral-100 text-neutral-600 hover:bg-neutral-200'
      }`}
      title={`Página ${page}`}
    >
      {page}
    </button>
  )
})

// Memoized page grid — 91 numbered buttons with category color hints
const PageGrid = memo(function PageGrid({
  selectedPage,
  activeCategorySlug,
  onJump,
}: {
  selectedPage: number
  activeCategorySlug: string | null
  onJump: (page: number) => void
}) {
  return (
    <div className="grid grid-cols-7 gap-1 px-3">
      {Array.from({ length: TOTAL_PAGES }, (_, i) => i + 1).map(page => {
        const catSlug = PAGE_TO_CATEGORY[page]
        const inActiveCategory = catSlug === activeCategorySlug && catSlug !== null
        return (
          <PageButton
            key={page}
            page={page}
            isActive={page === selectedPage}
            inActiveCategory={inActiveCategory}
            onJump={onJump}
          />
        )
      })}
    </div>
  )
})

function NavButton({
  icon, label, hint, badge, onClick, active,
}: {
  icon: React.ReactNode
  label: string
  hint?: string
  badge?: number
  onClick: () => void
  active?: boolean
}) {
  return (
    <button
      onClick={onClick}
      className={`w-full flex items-center justify-between px-3 py-2.5 rounded-xl transition-colors text-left group ${
        active ? 'bg-amber-50 ring-1 ring-amber-200' : 'hover:bg-neutral-50'
      }`}
    >
      <div className="flex items-center gap-3">
        <span className={`transition-colors ${active ? 'text-amber-600' : 'text-neutral-400 group-hover:text-amber-500'}`}>
          {icon}
        </span>
        <div>
          <span className={`text-sm font-medium ${active ? 'text-amber-700' : 'text-neutral-700'}`}>
            {label}
          </span>
          {hint && <span className="text-[10px] text-neutral-400 ml-2">{hint}</span>}
        </div>
      </div>
      {badge !== undefined && badge > 0 && (
        <span className="text-[10px] font-bold bg-amber-400 text-black px-2 py-0.5 rounded-full">
          {badge}
        </span>
      )}
    </button>
  )
}