'use client';

import { precioProducto } from '@/lib/precioProducto';
import { useEffect, useState } from 'react';
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import Typography from '@mui/material/Typography';
import ArrowForwardRoundedIcon from '@mui/icons-material/ArrowForwardRounded';
import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded';
import CancelRoundedIcon from '@mui/icons-material/CancelRounded';
import CloseIcon from '@mui/icons-material/Close';
import ShoppingCartRoundedIcon from '@mui/icons-material/ShoppingCartRounded';
import { storeImageSrc } from '@/lib/storeImage';
import type { Product } from '../../config/defaultStoreConfig';
import QuantitySelector from './QuantitySelector';
import {
	QuickViewContent,
	QuickViewClose,
	QuickViewHeader,
	QuickViewGrid,
	QuickViewImageArea,
	ProductThumbs,
	QuickViewMainImage,
	QuickViewInfo,
	ProductDetailPrice,
	StockText,
	ProductDetailDescription,
	ProductSpecs,
	QuickViewActions,
	ProductCategoryLink
} from '../styles';

interface Props {
	product: Product | null;
	quickViewQuantity: number;
	storeCssVariables: React.CSSProperties;
	formatPrice: (value: number) => string;
	onClose: () => void;
	onSetQuantity: (value: number) => void;
	onAddToCart: (product: Product, quantity: number) => void;
	onOpenDetail: (product: Product) => void;
}

export default function QuickViewDialog({
	product,
	quickViewQuantity,
	storeCssVariables,
	formatPrice,
	onClose,
	onSetQuantity,
	onAddToCart,
	onOpenDetail
}: Props) {
	const [activeImage, setActiveImage] = useState<string>('');

	useEffect(() => {
		if (product) {
			const first = (product.gallery ?? []).find(Boolean) ?? product.image ?? '';
			setActiveImage(first);
		}
	}, [product?.id]);

	if (!product) return <Dialog open={false} onClose={onClose} />;

	const validGallery = (product.gallery ?? []).filter(Boolean);
	const effectiveGallery = validGallery.length > 0 ? validGallery : (product.image ? [product.image] : []);
	const hasThumbnails = effectiveGallery.length > 1;
	const inStock = product.stock > 0;
	const displayImage = activeImage || product.image;

	return (
		<Dialog
			open={Boolean(product)}
			maxWidth="lg"
			fullWidth
			PaperProps={{ style: storeCssVariables }}
			onClose={onClose}
		>
			<QuickViewContent>
				<QuickViewClose
					aria-label="Cerrar vista rápida"
					onClick={onClose}
				>
					<CloseIcon />
				</QuickViewClose>
				<QuickViewHeader>
					<div>
						<Typography component="h2" variant="h5">{product.name}</Typography>
						{product.brand && <strong>{product.brand}</strong>}
						{product.sku && <span>SKU: {product.sku}</span>}
					</div>
				</QuickViewHeader>
				<QuickViewGrid>
					<QuickViewImageArea data-has-thumbnails={hasThumbnails ? 'true' : 'false'}>
						{hasThumbnails && (
							<ProductThumbs>
								{effectiveGallery.map((image) => (
									<button
										key={image}
										type="button"
										data-active={image === displayImage ? 'true' : undefined}
										onClick={() => setActiveImage(image)}
										style={{ borderColor: image === displayImage ? 'var(--store-primary)' : 'transparent' }}
									>
										<img src={storeImageSrc(image, product.name)} alt={product.name} />
									</button>
								))}
							</ProductThumbs>
						)}
						<QuickViewMainImage>
							<img src={storeImageSrc(displayImage, product.name)} alt={product.name} />
						</QuickViewMainImage>
					</QuickViewImageArea>
					<QuickViewInfo>
						<ProductDetailPrice>
							<strong>{precioProducto(product.price, formatPrice)}</strong>
							{product.oldPrice && <del>{formatPrice(product.oldPrice)}</del>}
						</ProductDetailPrice>
						<StockText data-in-stock={inStock ? 'true' : 'false'}>
							{inStock
								? <><CheckCircleRoundedIcon fontSize="small" /> En stock</>
								: <><CancelRoundedIcon fontSize="small" /> Sin stock</>
							}
						</StockText>
						{product.description && product.description !== product.name && (
							<ProductDetailDescription>{product.description}</ProductDetailDescription>
						)}
						{product.specifications.length > 0 && (
							<ProductSpecs>
								{product.specifications.slice(0, 4).map((spec, index) => (
									// Las especificaciones libres las escribe el comercio: el nombre puede repetirse.
									<li key={`${spec.label}-${index}`}>
										<strong>{spec.label}</strong>
										<span>{spec.value}</span>
									</li>
								))}
							</ProductSpecs>
						)}
						<QuantitySelector
							value={quickViewQuantity}
							max={product.stock}
							onChange={onSetQuantity}
						/>
						<QuickViewActions>
							<Button
								variant="contained"
								size="large"
								startIcon={<ShoppingCartRoundedIcon />}
								disabled={!inStock}
								onClick={() => onAddToCart(product, quickViewQuantity)}
							>
								Agregar al carrito
							</Button>
							<Button
								variant="outlined"
								size="large"
								endIcon={<ArrowForwardRoundedIcon />}
								onClick={() => onOpenDetail(product)}
							>
								Ver ficha completa
							</Button>
						</QuickViewActions>
						<ProductCategoryLink>Categoría: {product.category}</ProductCategoryLink>
					</QuickViewInfo>
				</QuickViewGrid>
			</QuickViewContent>
		</Dialog>
	);
}