'use client';

import * as React from 'react';
import * as DialogPrimitive from '@radix-ui/react-dialog';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { fass } from '../../lib/fontawesome-kit';
import { cn } from '../../lib/utils';
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { ProductBadge } from "@/components/ui/product-badge";

interface QuickViewModalProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  product: {
    id: string;
    name: string;
    price: number;
    msrp?: number;
    image?: string;
    images?: string[];
    description?: string;
    brand?: string;
    sizes?: string[];
    colors?: string[];
    inStock?: boolean;
  };
  onAddToCart?: (productId: string, options: { size?: string; color?: string; quantity: number }) => void;
}

const formatMoney = (amountInCents: number) =>
  new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
    minimumFractionDigits: 2
  }).format(amountInCents / 100);

function QuickViewImageNavArrow({
  direction,
  onClick,
  label,
  className,
}: {
  direction: 'prev' | 'next';
  onClick: () => void;
  label: string;
  className?: string;
}) {
  return (
    <Button
      type="button"
      size="icon"
      variant="secondary"
      onClick={(e) => {
        e.stopPropagation();
        onClick();
      }}
      className={cn(
        'border border-foreground/10 bg-background/90 text-foreground shadow-lg backdrop-blur-md hover:bg-background',
        className
      )}
      aria-label={label}
    >
      <FontAwesomeIcon
        icon={direction === 'prev' ? fass.faChevronLeft : fass.faChevronRight}
        className="h-5 w-5"
      />
    </Button>
  );
}

export function QuickViewModal({ open, onOpenChange, product, onAddToCart }: QuickViewModalProps) {
  const [selectedSize, setSelectedSize] = React.useState<string | undefined>(product.sizes?.[0]);
  const [selectedColor, setSelectedColor] = React.useState<string | undefined>(product.colors?.[0]);
  const [quantity, setQuantity] = React.useState(1);
  const [currentImageIndex, setCurrentImageIndex] = React.useState(0);
  const [imgErrors, setImgErrors] = React.useState<Record<number, boolean>>({});

  const images = product.images && product.images.length > 0 ? product.images : product.image ? [product.image] : [];
  const count = images.length;
  const currentImage = images[currentImageIndex];

  const goTo = React.useCallback(
    (idx: number) => {
      if (count <= 0) return;
      setCurrentImageIndex(((idx % count) + count) % count);
    },
    [count]
  );

  const handlePreviousImage = React.useCallback(() => {
    goTo(currentImageIndex - 1);
  }, [currentImageIndex, goTo]);

  const handleNextImage = React.useCallback(() => {
    goTo(currentImageIndex + 1);
  }, [currentImageIndex, goTo]);

  const handleImgError = (idx: number) => {
    setImgErrors((prev) => ({ ...prev, [idx]: true }));
  };

  React.useEffect(() => {
    if (!open) return;
    setSelectedSize(product.sizes?.[0]);
    setSelectedColor(product.colors?.[0]);
    setQuantity(1);
    setCurrentImageIndex(0);
    setImgErrors({});
  }, [open, product.id]);

  const handleAddToCart = () => {
    if (onAddToCart) {
      onAddToCart(product.id, { size: selectedSize, color: selectedColor, quantity });
      onOpenChange(false);
    }
  };

  const onSale = product.msrp && product.msrp > product.price;

  if (!open) return null;

  return (
    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
      <DialogPrimitive.Portal>
        <div className="fixed inset-0 z-50 flex items-center justify-center">
          <DialogPrimitive.Overlay className="fixed inset-0 bg-black/60 backdrop-blur-xs" />

          <DialogPrimitive.Content className="relative z-50 w-full max-w-4xl mx-4">
            <div className="max-h-[90vh] overflow-y-auto border border-foreground/20 bg-background shadow-2xl">
              <DialogPrimitive.Close asChild>
                <Button
                  type="button"
                  size="icon"
                  variant="ghost"
                  className="absolute right-4 top-4 z-10 bg-background/90 opacity-70 hover:opacity-100"
                  aria-label="Close"
                >
                  <FontAwesomeIcon icon={fass.faXmark} className="h-5 w-5" />
                </Button>
              </DialogPrimitive.Close>

              <div className="grid gap-6 p-6 md:grid-cols-2 md:gap-8 md:p-8">
                {/* Left: Image — matches ProductImageGallery inline preview (no lightbox) */}
                <div className="space-y-4">
                  <div className="relative aspect-square overflow-hidden border border-foreground/10 bg-foreground/5">
                    <div className="group relative h-full w-full">
                      {currentImage && !imgErrors[currentImageIndex] ? (
                        <img
                          src={currentImage}
                          alt={`${product.name} — image ${currentImageIndex + 1} of ${count}`}
                          className="h-full w-full object-contain transition-transform duration-300 ease-out group-hover:scale-[1.02]"
                          onError={() => handleImgError(currentImageIndex)}
                        />
                      ) : (
                        <div className="flex h-full items-center justify-center p-8 text-foreground/40">
                          <span className="text-center text-2xl font-semibold leading-snug">{product.name}</span>
                        </div>
                      )}
                      {currentImage && !imgErrors[currentImageIndex] && (
                        <span className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
                      )}
                    </div>

                    {onSale && (
                      <div className="pointer-events-none absolute left-3 top-3">
                        <ProductBadge type="sale" />
                      </div>
                    )}

                    {count > 1 && (
                      <div className="pointer-events-none absolute inset-x-0 bottom-0 flex items-end justify-start p-3 sm:p-4">
                        <div className="border border-white/15 bg-black/55 px-3 py-1 text-xs font-medium tabular-nums text-white backdrop-blur-md">
                          {currentImageIndex + 1} / {count}
                        </div>
                      </div>
                    )}

                    {count > 1 && (
                      <>
                        <QuickViewImageNavArrow
                          direction="prev"
                          onClick={handlePreviousImage}
                          label="Previous image"
                          className="absolute left-3 top-1/2 -translate-y-1/2 sm:left-4"
                        />
                        <QuickViewImageNavArrow
                          direction="next"
                          onClick={handleNextImage}
                          label="Next image"
                          className="absolute right-3 top-1/2 -translate-y-1/2 sm:right-4"
                        />
                      </>
                    )}
                  </div>

                  {count > 1 && (
                    <div
                      className="-mx-1 flex gap-2 overflow-x-auto overscroll-x-contain px-1 py-1 [scrollbar-gutter:stable]"
                      aria-label="Product images"
                    >
                      {images.map((img, idx) => {
                        const active = idx === currentImageIndex;
                        return (
                          <button
                            key={idx}
                            type="button"
                            onClick={() => setCurrentImageIndex(idx)}
                            className={cn(
                              'relative h-16 w-16 shrink-0 overflow-hidden border bg-foreground/5 transition-[border-color,transform,box-shadow] duration-200 sm:h-20 sm:w-20',
                              active
                                ? 'border-primary ring-2 ring-primary ring-inset scale-[1.02]'
                                : 'border-foreground/15 hover:border-foreground/35 hover:shadow-sm'
                            )}
                            aria-label={`View image ${idx + 1} of ${count}`}
                            aria-current={active ? 'true' : undefined}
                          >
                            {!imgErrors[idx] ? (
                              <img
                                src={img}
                                alt=""
                                className="h-full w-full object-cover"
                                onError={() => handleImgError(idx)}
                              />
                            ) : (
                              <span className="flex h-full items-center justify-center px-1 text-center text-[10px] font-medium text-foreground/40">
                                {idx + 1}
                              </span>
                            )}
                          </button>
                        );
                      })}
                    </div>
                  )}
                </div>

                {/* Right: Details */}
                <div className="flex flex-col space-y-6">
                  <div>
                    {product.brand && (
                      <p className="text-sm font-semibold uppercase tracking-wider text-foreground/50">
                        {product.brand}
                      </p>
                    )}
                    <DialogPrimitive.Title className="mt-1 text-2xl font-bold text-foreground">
                      {product.name}
                    </DialogPrimitive.Title>
                  </div>

                  {/* Price */}
                  <div className="flex items-baseline gap-3">
                    <span className="text-3xl font-bold text-foreground">
                      {formatMoney(product.price)}
                    </span>
                    {onSale && (
                      <span className="text-lg text-foreground/40 line-through">
                        {formatMoney(product.msrp!)}
                      </span>
                    )}
                  </div>

                  {/* Description */}
                  {product.description && (
                    <DialogPrimitive.Description className="text-sm leading-relaxed text-foreground/60">
                      {product.description}
                    </DialogPrimitive.Description>
                  )}

                  {/* Size selector */}
                  {product.sizes && product.sizes.length > 0 && (
                    <div className="space-y-3">
                      <label className="text-sm font-semibold text-foreground">
                        Size {selectedSize && <span className="font-normal text-foreground/50">({selectedSize})</span>}
                      </label>
                      <div className="flex flex-wrap gap-2">
                        {product.sizes.map((size) => (
                          <Button
                            key={size}
                            type="button"
                            variant={selectedSize === size ? 'default' : 'outline'}
                            size="sm"
                            onClick={() => setSelectedSize(size)}
                            className={cn(
                              'min-w-[3rem] px-4',
                              selectedSize === size
                                ? 'border-primary bg-primary/10 text-primary hover:bg-primary/15'
                                : ''
                            )}
                          >
                            {size}
                          </Button>
                        ))}
                      </div>
                    </div>
                  )}

                  {/* Color selector */}
                  {product.colors && product.colors.length > 0 && (
                    <div className="space-y-3">
                      <label className="text-sm font-semibold text-foreground">
                        Color {selectedColor && <span className="font-normal text-foreground/50">({selectedColor})</span>}
                      </label>
                      <div className="flex flex-wrap gap-2">
                        {product.colors.map((color) => (
                          <Button
                            key={color}
                            type="button"
                            variant={selectedColor === color ? 'default' : 'outline'}
                            size="sm"
                            onClick={() => setSelectedColor(color)}
                            className={cn(
                              'min-w-[3rem] px-4',
                              selectedColor === color
                                ? 'border-primary bg-primary/10 text-primary hover:bg-primary/15'
                                : ''
                            )}
                          >
                            {color}
                          </Button>
                        ))}
                      </div>
                    </div>
                  )}

                  {/* Quantity */}
                  <div className="space-y-3">
                    <label className="text-sm font-semibold text-foreground">Quantity</label>
                    <div className="flex items-center gap-3">
                      <Button
                        type="button"
                        size="icon"
                        variant="outline"
                        onClick={() => setQuantity(Math.max(1, quantity - 1))}
                      >
                        -
                      </Button>
                      <Input
                        type="number"
                        min={1}
                        value={quantity}
                        onChange={(e) => setQuantity(Math.max(1, Number(e.target.value) || 1))}
                        className="w-20 text-center font-semibold [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
                      />
                      <Button
                        type="button"
                        size="icon"
                        variant="outline"
                        onClick={() => setQuantity(quantity + 1)}
                      >
                        +
                      </Button>
                    </div>
                  </div>

                  {/* Add to cart */}
                  <div className="space-y-3 border-t border-foreground/20 pt-6">
                    <Button
                      onClick={handleAddToCart}
                      disabled={!product.inStock}
                      variant="slant"
                      className="w-full text-base font-semibold uppercase"
                    >
                      {product.inStock ? (
                        <span className="flex items-center justify-center gap-2">
                          <FontAwesomeIcon icon={fass.faCartShopping} className="h-4 w-4" />
                          Add to Cart
                        </span>
                      ) : (
                        <span className="flex items-center justify-center gap-2">
                          <FontAwesomeIcon icon={fass.faExclamationTriangle} className="h-4 w-4" />
                          Out of Stock
                        </span>
                      )}
                    </Button>
                    {!product.inStock && (
                      <p className="text-center text-sm text-foreground/50">
                        This item is currently unavailable
                      </p>
                    )}
                  </div>
                </div>
              </div>
            </div>
          </DialogPrimitive.Content>
        </div>
      </DialogPrimitive.Portal>
    </DialogPrimitive.Root>
  );
}
Quick View Modal

Installation

Usage
