'use client'

import { useEffect, useState } from 'react'
import { createPortal } from 'react-dom'
import * as motion from 'framer-motion/m'
import { AnimatePresence } from 'framer-motion'
import { X, ImageOff } from 'lucide-react'
import Link from 'next/link'
import { toast } from 'react-hot-toast'
import { useTranslations, useLocale } from 'next-intl'
import { useQuickViewStore } from '@/store/quickViewStore'
import { useCartStore } from '@/store/cartStore'
import { getApiErrorMessage } from '@/lib/utils/apiError'
import WishlistButton from '@/components/frontend/WishlistButton'
import ProductImageGallery from '@/components/frontend/product/ProductImageGallery'
import ProductInfo from '@/components/frontend/product/ProductInfo'
import ProductVariantSelector from '@/components/frontend/product/ProductVariantSelector'
import ProductQuantity from '@/components/frontend/product/ProductQuantity'
import type { ProductDetail, ProductVariation } from '@/lib/db/queries/getProductDetail'

// Single shared modal, mounted once in the storefront root layout (see
// (root)/[locale]/layout.tsx) — any ProductCard opens it by slug via
// useQuickViewStore(). Lets a shopper preview a product and, for a
// `type: 'variable'` product, pick a variant and add it to the cart
// without leaving the current page/scroll position.
export default function QuickViewModal() {
  const slug = useQuickViewStore((s) => s.slug)
  const close = useQuickViewStore((s) => s.close)
  const t = useTranslations('QuickView')

  // Lock page scroll while the modal is open — mobile-first requirement,
  // avoids the page scrolling behind a full-height bottom sheet.
  useEffect(() => {
    if (!slug) return
    const original = document.body.style.overflow
    document.body.style.overflow = 'hidden'
    return () => {
      document.body.style.overflow = original
    }
  }, [slug])

  // Escape key closes, same as any other overlay in the app.
  useEffect(() => {
    if (!slug) return
    const onKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape') close()
    }
    window.addEventListener('keydown', onKeyDown)
    return () => window.removeEventListener('keydown', onKeyDown)
  }, [slug, close])

  if (typeof document === 'undefined') return null

  return createPortal(
    <AnimatePresence>
      {slug && (
        <div className="fixed inset-0 z-50 flex items-end md:items-center justify-center">
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="absolute inset-0 bg-black/50"
            onClick={close}
          />

          <motion.div
            role="dialog"
            aria-modal="true"
            aria-label={t('title')}
            initial={{ y: 40, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            exit={{ y: 40, opacity: 0 }}
            transition={{ duration: 0.25, ease: 'easeOut' }}
            className="relative w-full md:max-w-3xl bg-white rounded-t-2xl md:rounded-2xl max-h-[92vh] md:max-h-[85vh] overflow-y-auto shadow-2xl"
          >
            <button
              type="button"
              onClick={close}
              aria-label={t('close')}
              className="sticky top-3 float-right mr-3 z-10 w-9 h-9 flex items-center justify-center rounded-full bg-white/90 shadow-md text-dark hover:bg-gray-100 transition-colors cursor-pointer"
            >
              <X size={18} />
            </button>

            <div className="p-5 md:p-8 pt-4 clear-both">
              {/* Keyed by slug — a fresh mount per product means local state
                  (fetched product, quantity, selected variation) starts
                  clean without any effect needing to reset it manually. */}
              <QuickViewContent key={slug} slug={slug} onClose={close} />
            </div>
          </motion.div>
        </div>
      )}
    </AnimatePresence>,
    document.body,
  )
}

interface QuickViewContentProps {
  slug: string
  onClose: () => void
}

function QuickViewContent({ slug, onClose }: QuickViewContentProps) {
  const { addToCart, loading: cartLoading } = useCartStore()
  const locale = useLocale()
  const t = useTranslations('QuickView')
  const tDetail = useTranslations('ProductDetail')
  const tCard = useTranslations('ProductCard')

  const [product, setProduct] = useState<ProductDetail | null>(null)
  const [status, setStatus] = useState<'loading' | 'idle' | 'error'>('loading')
  const [quantity, setQuantity] = useState(1)
  const [selectedVariation, setSelectedVariation] = useState<ProductVariation | null>(null)
  const [added, setAdded] = useState(false)

  useEffect(() => {
    const controller = new AbortController()

    fetch(`/api/frontend/products/${encodeURIComponent(slug)}?locale=${locale}`, { signal: controller.signal })
      .then((res) => res.json())
      .then((data) => {
        if (!data.success) throw new Error(getApiErrorMessage(data, t('loadFailed')))
        const detail: ProductDetail = data.data
        setProduct(detail)
        setSelectedVariation(detail.type === 'variable' ? detail.variations[0] ?? null : null)
        setStatus('idle')
      })
      .catch((err) => {
        if (controller.signal.aborted) return
        toast.error(err instanceof Error ? err.message : t('loadFailed'))
        setStatus('error')
      })

    return () => controller.abort()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [slug, locale])

  const isVariable = product?.type === 'variable' && product.variantAttributes.length > 0
  const activePrice = isVariable ? selectedVariation?.price ?? product?.price ?? 0 : product?.price ?? 0
  const activeComparePrice = isVariable ? selectedVariation?.comparePrice ?? null : product?.comparePrice ?? null
  const activeStock = isVariable ? selectedVariation?.stockQuantity ?? 0 : product?.stockQuantity ?? 0
  const activeStockStatus = isVariable ? selectedVariation?.stockStatus ?? 'out_of_stock' : product?.stockStatus
  const inStock = activeStockStatus === 'in_stock' && activeStock > 0
  const canAddToCart = Boolean(product) && inStock && (!isVariable || selectedVariation !== null)

  const handleAddToCart = async () => {
    if (!product) return
    if (isVariable && !selectedVariation) {
      toast.error(tDetail('selectOptions'))
      return
    }
    await addToCart(
      product.id,
      isVariable ? selectedVariation!.id : null,
      quantity,
      {
        success: tDetail('addedToCart'),
        failed: tDetail('addToCartFailed'),
        networkError: tDetail('networkError'),
      },
      locale,
    )
    setAdded(true)
    setTimeout(() => setAdded(false), 1500)
  }

  if (status === 'loading') {
    return (
      <div className="grid md:grid-cols-2 gap-8 animate-pulse">
        <div className="aspect-square bg-gray-100 rounded-2xl" />
        <div className="space-y-4">
          <div className="h-7 bg-gray-100 rounded w-3/4" />
          <div className="h-5 bg-gray-100 rounded w-1/3" />
          <div className="h-9 bg-gray-100 rounded w-1/2" />
          <div className="h-24 bg-gray-100 rounded" />
        </div>
      </div>
    )
  }

  if (status === 'error' || !product) {
    return (
      <div className="py-16 text-center">
        <ImageOff size={40} className="mx-auto text-gray-300 mb-3" />
        <p className="text-gray-custom">{t('loadFailed')}</p>
      </div>
    )
  }

  return (
    <div className="grid md:grid-cols-2 gap-8">
      {product.images.length > 0 ? (
        <ProductImageGallery images={product.images.map((img) => img.url)} productName={product.name} />
      ) : (
        <div className="aspect-square bg-gray-100 rounded-2xl flex items-center justify-center">
          <ImageOff size={48} className="text-gray-300" />
        </div>
      )}

      <div className="space-y-5">
        <ProductInfo
          name={product.name}
          price={activePrice}
          oldPrice={activeComparePrice ?? undefined}
          rating={product.ratingAverage}
          reviews={product.ratingCount}
          description={product.shortDescription}
          sku={isVariable ? selectedVariation?.sku ?? product.sku : product.sku}
          category={product.category?.name}
          inStock={inStock}
        />

        {isVariable && (
          <ProductVariantSelector
            variantAttributes={product.variantAttributes}
            variations={product.variations}
            onChange={(variation) => setSelectedVariation(variation)}
          />
        )}

        <ProductQuantity quantity={quantity} onQuantityChange={setQuantity} stock={activeStock} />

        <div className="flex flex-col sm:flex-row gap-3 pt-2">
          <button
            type="button"
            onClick={handleAddToCart}
            disabled={!canAddToCart || cartLoading}
            className={`flex-1 rounded-lg py-3 px-6 font-semibold text-white transition-colors cursor-pointer ${
              !canAddToCart || cartLoading
                ? 'bg-gray-300 cursor-not-allowed'
                : added
                ? 'bg-green-600'
                : 'bg-primary hover:bg-primary-dark'
            }`}
          >
            {added ? tDetail('addedToCart') : cartLoading ? tCard('adding') : tDetail('addToCart')}
          </button>
          <WishlistButton
            productId={product.id}
            variantId={isVariable ? selectedVariation?.id ?? null : null}
            size={20}
            className="self-center sm:self-auto p-3 border border-gray-200"
          />
          <Link
            href={`/product/${product.slug}`}
            onClick={onClose}
            className="flex-1 sm:flex-none text-center rounded-lg py-3 px-6 font-semibold border border-gray-200 text-dark hover:border-primary hover:text-primary transition-colors"
          >
            {t('viewFullDetails')}
          </Link>
        </div>
      </div>
    </div>
  )
}