"use client";
import { useContextElement } from "@/context/Context";
import { useEffect, useState } from "react";
import Link from "next/link";
import { ProductCard } from "../shopCards/ProductCard";
import { usePWA } from "@/utlis/usePWA";
import { useIsMobile } from "@/utlis/useIsMobile";
import { Heart } from "lucide-react";

export default function Wishlist() {
	const { wishList } = useContextElement();
	const [wishListItems, setWishListItems] = useState([]);
	const isPWA = usePWA();
	const isMobile = useIsMobile();
	const isCompact = isPWA || isMobile;

	useEffect(() => {
		if (wishList.length) {

               const validIds = wishList.filter(id => /^\d+$/.test(id));

               if(validIds.length) {

                    fetch(`/api/productsdatabyids?ids=${wishList.join(",")}`)
                         .then((res) => res.json())
                         .then((data) => {
                              console.log(data.wishlistProducts);
                              setWishListItems(data.wishlistProducts);
                         })
                         .catch((err) => console.error("Error fetching products:", err));

               } else setWishListItems([]);
		} else {
			setWishListItems([]);
		}
	}, [wishList]);

	return (
		<section className='flat-spacing-2'>
			{isCompact && (
				<style jsx>{`
					.wl-grid {
						width: 100%;
						display: grid;
						grid-template-columns: repeat(2, minmax(0, 1fr));
						gap: 12px;
						align-items: start;
						align-content: start;
					}
					.wl-grid-item {
						width: 100%;
						min-width: 0;
						height: fit-content;
						min-height: 0;
						align-self: start;
						display: block;
					}
					.wl-grid-item :global(.card-product) {
						height: auto !important;
						min-height: 0 !important;
						align-self: flex-start !important;
					}
					.wl-grid-item :global(.card-product .card-product-wrapper) {
						height: auto;
						min-height: 0;
					}
					.wl-grid-item :global(.card-product .card-product-info) {
						height: auto;
						min-height: 0;
					}
					.wl-grid-item :global(.card-product .price),
					.wl-grid-item :global(.card-product .price-wrap) {
						margin-top: 0;
					}
				`}</style>
			)}
			<div className='container'>
				{isCompact ? (
					<div className='wl-grid'>
						{wishListItems.map((elm, i) => (
							<div key={elm?.id || i} className='wl-grid-item'>
								<ProductCard product={elm} />
							</div>
						))}
					</div>
				) : (
					<div className='grid-layout wrapper-shop' data-grid='grid-4'>
						{wishListItems.map((elm, i) => (
							<ProductCard product={elm} key={i} />
						))}
					</div>
				)}
				{!wishListItems.length && (
					<div
						style={{
							display: "flex",
							flexDirection: "column",
							alignItems: "center",
							textAlign: "center",
							width: "100%",
							padding: "60px 20px",
						}}
					>
						<Heart size={56} strokeWidth={1.5} style={{ color: "#adb5bd", marginBottom: 20 }} />
						<p style={{ fontSize: 18, fontWeight: 500, color: "#495057", marginBottom: 24 }}>
							Nu ai adăugat niciun produs la favorite încă.
						</p>
						<Link
							href={`/toate-produsele`}
							className='tf-btn animate-hover-btn justify-content-center'
							style={{
								width: "fit-content",
								background: "var(--primary)",
								borderColor: "var(--primary)",
								borderRadius: 999,
								color: "#fff",
							}}
						>
							Vezi produse
						</Link>
					</div>
				)}
			</div>
		</section>
	);
}