'use client'

import { Fragment, useEffect, useMemo, useState } from 'react'
import { ImageOff } from 'lucide-react'
import { toast } from 'react-hot-toast'
import { useTranslations, useLocale } from 'next-intl'
import { useRouter } from '@/i18n/navigation'
import { useCartStore } from '@/store/cartStore'
import { useWishlistStore } from '@/store/wishlistStore'
import { useLocaleAlternatesStore } from '@/store/localeAlternatesStore'
import Container from '@/components/frontend/Container'
import ProductBreadcrumb from '@/components/frontend/product/ProductBreadcrumb'
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 ProductActions from '@/components/frontend/product/ProductActions'
import ProductTabs from '@/components/frontend/product/ProductTabs'
import ProductReviews from '@/components/frontend/product/ProductReviews'
import RelatedProducts from '@/components/frontend/product/RelatedProducts'
import ProductFAQs from '@/components/frontend/product/ProductFAQs'
import type { ProductDetail, ProductVariation } from '@/lib/db/queries/getProductDetail'

interface ProductDetailClientProps {
  product: ProductDetail
  // locale -> full path for this exact product, one entry per language it
  // was actually translated into — lets LanguageSwitcher jump straight to
  // the right per-locale slug instead of 404ing on a naive prefix swap
  // (see localeAlternatesStore.ts). A locale with no translation is simply
  // absent from this map; the switcher falls back to `defaultLocale`.
  alternatePaths: Record<string, string>
  defaultLocale: string
}

export default function ProductDetailClient({ product, alternatePaths, defaultLocale }: ProductDetailClientProps) {
  const [quantity, setQuantity] = useState(1)
  const [selectedVariation, setSelectedVariation] = useState<ProductVariation | null>(
    product.type === 'variable' ? product.variations[0] ?? null : null,
  )
  const { addToCart } = useCartStore()
  const { isInWishlist, addToWishlist, removeFromWishlist, items: wishlistItems, fetchWishlist } = useWishlistStore()
  const t = useTranslations('ProductDetail')
  const locale = useLocale()
  const router = useRouter()

  useEffect(() => {
    fetchWishlist(locale)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [locale])

  const inWishlist = isInWishlist(product.id)

  const handleToggleWishlist = async () => {
    if (inWishlist) {
      const item = wishlistItems.find((w) => w.product_id === product.id)
      if (item) await removeFromWishlist(item.id)
    } else {
      await addToWishlist(product.id, selectedVariation?.id ?? null)
    }
  }
  const setAlternates = useLocaleAlternatesStore((s) => s.setAlternates)
  const clearAlternates = useLocaleAlternatesStore((s) => s.clearAlternates)

  useEffect(() => {
    setAlternates(alternatePaths, defaultLocale)
    return () => clearAlternates()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [alternatePaths, defaultLocale])

  const isVariable = product.type === 'variable' && product.variantAttributes.length > 0

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

  const handleAddToCart = async (): Promise<boolean> => {
    if (isVariable && !selectedVariation) {
      toast.error(t('selectOptions'))
      return false
    }
    return addToCart(
      product.id,
      isVariable ? selectedVariation!.id : null,
      quantity,
      {
        success: t('addedToCart'),
        failed: t('addToCartFailed'),
        networkError: t('networkError'),
      },
      locale,
    )
  }

  // Add to cart, then straight to checkout — only if the add actually
  // succeeded (out-of-stock/variant errors keep the customer on the page).
  // The cart drawer addToCart opens is closed again so it doesn't flash
  // over the page mid-navigation.
  const handleBuyNow = async () => {
    const added = await handleAddToCart()
    if (!added) return
    useCartStore.setState({ isOpen: false })
    router.push('/checkout')
  }

  const handleShare = async () => {
    try {
      await navigator.clipboard.writeText(window.location.href)
      toast.success(t('linkCopied'))
    } catch {
      /* clipboard unavailable — silently ignore */
    }
  }

  const tabs = useMemo(
    () => [
      {
        id: 'description',
        label: t('description'),
        content: (
          <div className="space-y-4">
            {product.description && (
              <p className="text-gray-custom leading-relaxed whitespace-pre-line">{product.description}</p>
            )}
            {product.specs.length > 0 && (
              <div className="grid grid-cols-2 gap-2 text-sm">
                {product.specs.map((spec) => (
                  <Fragment key={spec.attributeId}>
                    <span className="text-gray-custom">{spec.name}:</span>
                    <span className="text-dark">{spec.value}</span>
                  </Fragment>
                ))}
              </div>
            )}
          </div>
        ),
      },
      {
        id: 'reviews',
        label: t('reviewsTab', { count: product.ratingCount }),
        content: (
          <ProductReviews
            productId={product.id}
            reviews={product.reviews.map((r) => ({
              id: r.id,
              userName: r.reviewerName,
              rating: r.rating,
              date: new Date(r.createdAt).toLocaleDateString(locale),
              title: r.title,
              comment: r.content,
              verified: r.isVerified,
            }))}
            averageRating={product.ratingAverage}
            totalReviews={product.ratingCount}
            ratingBreakdown={product.ratingBreakdown}
          />
        ),
      },
      {
        id: 'faqs',
        label: t('faqsTab'),
        content: <ProductFAQs faqs={product.faqs} />,
      },
    ],
    [product, t, locale],
  )

  return (
    <Container className="mt-4">
      <ProductBreadcrumb
        category={product.category?.name}
        categorySlug={product.category?.slug}
        productName={product.name}
      />

      <div className="grid md:grid-cols-2 gap-8 lg:gap-12">
        {/* Left Column - Images */}
        {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>
        )}

        {/* Right Column - Info */}
        <div className="space-y-6">
          <ProductInfo
            name={product.name}
            price={activePrice}
            oldPrice={activeComparePrice ?? undefined}
            rating={product.ratingAverage}
            reviews={product.ratingCount}
            description={product.shortDescription}
            sku={activeSku}
            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} />

          <ProductActions
            onAddToCart={handleAddToCart}
            onBuyNow={handleBuyNow}
            onAddToWishlist={handleToggleWishlist}
            isInWishlist={inWishlist}
            onShare={handleShare}
            disabled={!canAddToCart}
          />
        </div>
      </div>

      {/* Tabs Section */}
      <ProductTabs tabs={tabs} />

      {/* Related Products */}
      <RelatedProducts products={product.relatedProducts} title={t('youMayAlsoLike')} />
    </Container>
  )
}