'use client'

import { useCatalogStore } from '@/lib/store'
import { Header } from '@/components/catalog/header'
import { MagazineViewer } from '@/components/catalog/magazine-viewer'
import dynamic from 'next/dynamic'
import { useEffect, useState } from 'react'
import { fetchAllProducts, getCachedProducts } from '@/lib/products-cache'
import { fetchCategories } from '@/lib/categories-cache'

// Lazy-load overlays — they're only fetched when the user opens them.
// This keeps the initial bundle small (just Header + MagazineViewer).
const Sidebar = dynamic(() => import('@/components/catalog/sidebar').then(m => ({ default: m.Sidebar })), { ssr: false })
const SearchDrawer = dynamic(() => import('@/components/catalog/search-drawer').then(m => ({ default: m.SearchDrawer })), { ssr: false })
const ProductDetail = dynamic(() => import('@/components/catalog/product-detail').then(m => ({ default: m.ProductDetail })), { ssr: false })
const FavoritesDrawer = dynamic(() => import('@/components/catalog/favorites-drawer').then(m => ({ default: m.FavoritesDrawer })), { ssr: false })
const CartDrawer = dynamic(() => import('@/components/catalog/cart-drawer').then(m => ({ default: m.CartDrawer })), { ssr: false })
const AdminPanel = dynamic(() => import('@/components/catalog/admin-panel').then(m => ({ default: m.AdminPanel })), { ssr: false })
// Distribuidor onboarding (cadastro + link) — modal, carregado só quando aberto.
const DistributorOnboarding = dynamic(() => import('@/components/catalog/distributor-onboarding').then(m => ({ default: m.DistributorOnboarding })), { ssr: false })
// CartToast is tiny (no API calls) — load eagerly so the confirmation
// appears instantly the first time a product is added.
import { CartToast } from '@/components/catalog/cart-toast'
// Floating checkout CTA — eagerly loaded (tiny) so it's ready as soon as
// the first product lands in the cart.
import { FloatingCheckoutButton } from '@/components/catalog/floating-checkout-button'
// Distributor badge — shown when the catalog is opened via a distributor's
// shared link (?d=slug). Tiny + no API call (reads from store), so eager.
import { DistributorBadge } from '@/components/catalog/distributor-badge'
// Client welcome popup — shown once for clients opening via ?d=slug, with
// navigation + purchase instructions. Tiny + no API call, so eager.
import { ClientWelcomePopup } from '@/components/catalog/client-welcome-popup'

export default function CatalogPage() {
  const { setSelectedProduct, setSelectedPage, goToPage, setProducts, setCategories } = useCatalogStore()
  const products = useCatalogStore(s => s.products)
  // `loaded` is DERIVED from the products state (+ a failure flag) rather
  // than stored in a separate useState. This avoids reading localStorage in
  // a useState initializer (which would cause a hydration mismatch because
  // the server can't see the client's cache) AND avoids calling setState
  // synchronously inside the effect (which cascades renders).
  const [loadFailed, setLoadFailed] = useState(false)
  const loaded = products.length > 0 || loadFailed

  // ===== Carregar o catálogo ao montar =====
  useEffect(() => {
    if (products.length > 0) return
    let cancelled = false
    const cached = getCachedProducts()
    if (cached && cached.length > 0) {
      setProducts(cached)
      return
    }
    Promise.all([fetchAllProducts(), fetchCategories()])
      .then(([prods, cats]) => {
        if (cancelled) return
        setProducts(prods)
        setCategories(cats)
      })
      .catch(() => {
        if (!cancelled) setLoadFailed(true)
      })
    return () => { cancelled = true }
  }, [products.length, setProducts, setCategories])

  // ===== Sync shared pins from the backend once on mount =====
  // Fetches all shared pin positions + manual pins (so every visitor sees
  // the admin's dragged layout). Merges local-only state into the backend
  // (uploads unsynced drags). Runs once; safe to fire alongside the
  // products preload — it only touches pinPositions + manualPins.
  const loadSharedPins = useCatalogStore(s => s.loadSharedPins)
  useEffect(() => {
    loadSharedPins()
  }, [loadSharedPins])

  // ===== Distribuidor: carrega do deep link ?d=slug =====
  // Quando um cliente abre o link compartilhado por um distribuidor,
  // buscamos o distribuidor no backend e guardamos no store. A partir daí,
  // o checkout (carrinho + botão flutuante) envia o pedido direto para o
  // WhatsApp dele. O estado é persistido, então o cliente continua no
  // mesmo distribuidor nas próximas visitas.
  const loadDistributorFromUrl = useCatalogStore(s => s.loadDistributorFromUrl)
  useEffect(() => {
    loadDistributorFromUrl()
  }, [loadDistributorFromUrl])

  // ===== Auto-abrir o onboarding de distribuidor na 1ª visita =====
  // O site é voltado para distribuidores. Quando alguém entra pela URL
  // "raiz" (sem ?d=, ou seja, não é um cliente abrindo um link compartilhado)
  // e ainda não tem um perfil salvo, abrimos automaticamente o modal de
  // cadastro para que ele vincule seu WhatsApp e gere seu link. Returning
  // distributors (já têm perfil) não veem o auto-open — podem reabrir pelo
  // botão "Meu Link" no header.
  useEffect(() => {
    if (typeof window === 'undefined') return
    const params = new URLSearchParams(window.location.search)
    const hasDistLink = params.has('d')
    const { myDistributorProfile, setDistributorOnboardingOpen, distributorOnboardingOpen } =
      useCatalogStore.getState()
    if (!hasDistLink && !myDistributorProfile && !distributorOnboardingOpen) {
      // Pequeno delay para o preload overlay terminar de renderizar e o
      // modal aparecer suavemente por cima.
      const t = setTimeout(() => setDistributorOnboardingOpen(true), 600)
      return () => clearTimeout(t)
    }
  }, [])

  // Handle deep links: ?produto=CODE opens product; ?page=N jumps to page
  useEffect(() => {
    const params = new URLSearchParams(window.location.search)
    const productCode = params.get('produto')
    const page = params.get('page')
    if (productCode) {
      fetch(`/api/products/${productCode}`)
        .then(r => r.json())
        .then(res => {
          if (res.data?.product) {
            setSelectedProduct(res.data.product)
          }
        })
        .catch(() => {})
    } else if (page) {
      const n = parseInt(page, 10)
      if (!Number.isNaN(n)) goToPage(n)
    } else {
      setSelectedPage(1)
    }
  }, [setSelectedProduct, setSelectedPage, goToPage])

  // Keyboard navigation
  useEffect(() => {
    const handler = (e: KeyboardEvent) => {
      const s = useCatalogStore.getState()
      // If typing in an input, ignore
      const tag = (e.target as HTMLElement)?.tagName
      if (tag === 'INPUT' || tag === 'TEXTAREA') return

      if (e.key === 'Escape') {
        if (s.adminOpen) s.setAdminOpen(false)
        else if (s.distributorOnboardingOpen) s.setDistributorOnboardingOpen(false)
        else if (s.searchOpen) s.setSearchOpen(false)
        else if (s.cartOpen) s.setCartOpen(false)
        else if (s.favoritesOpen) s.setFavoritesOpen(false)
        else if (s.sidebarOpen) s.setSidebarOpen(false)
        else if (s.selectedProduct) s.setSelectedProduct(null)
      }
    }
    window.addEventListener('keydown', handler)
    return () => window.removeEventListener('keydown', handler)
  }, [])

  return (
    <div className="h-screen flex flex-col bg-neutral-100 overflow-hidden">
      {/* Preload overlay — shown until the full catalog is cached */}
      {!loaded && <PreloadOverlay />}

      <Header />
      <main className="flex-1 min-h-0 flex flex-col">
        <MagazineViewer />
      </main>

      {/* Overlays — lazy-loaded, only fetched when opened */}
      <Sidebar />
      <SearchDrawer />
      <ProductDetail />
      <FavoritesDrawer />
      <CartDrawer />
      <AdminPanel />
      <DistributorOnboarding />

      {/* Global toast — confirms whenever a product is added to the cart */}
      <CartToast />

      {/* Floating checkout CTA — bottom-left, visible only with items in cart */}
      <FloatingCheckoutButton />

      {/* Badge do distribuidor vinculado — canto inferior direito, visível
          quando o catálogo foi aberto via link ?d=slug. */}
      <DistributorBadge />

      {/* Popup de boas-vindas para clientes (1ª visita via ?d=slug) —
          orienta a arrastar para navegar e tocar para comprar. */}
      <ClientWelcomePopup />
    </div>
  )
}

// =========================================================================
// Preload overlay — full-screen splash shown while the catalog downloads.
// Keeps the user informed instead of staring at a blank page.
// =========================================================================
function PreloadOverlay() {
  return (
    <div
      className="fixed inset-0 z-[100] bg-gradient-to-br from-amber-50 to-neutral-100 flex flex-col items-center justify-center gap-4"
      role="status"
      aria-live="polite"
    >
      <div className="relative w-20 h-20">
        {/* Spinner ring */}
        <div
          className="absolute inset-0 rounded-full border-4 border-amber-200 border-t-amber-500"
          style={{ animation: 'spin 0.8s linear infinite' }}
        />
        {/* Logo no centro do spinner */}
        <div className="absolute inset-1 flex items-center justify-center rounded-full bg-white overflow-hidden">
          <img
            src="/logo.png"
            alt="Abelha Rainha"
            className="w-full h-full object-contain p-1"
            fetchPriority="high"
          />
        </div>
      </div>
      <div className="text-center px-6">
        <p className="text-sm font-bold text-neutral-800">Carregando catálogo…</p>
        <p className="text-xs text-neutral-500 mt-1">
          Baixando todos os produtos para navegação instantânea
        </p>
      </div>
      <style jsx>{`
        @keyframes spin {
          to { transform: rotate(360deg); }
        }
      `}</style>
    </div>
  )
}