"use client";

import Link from "next/link";
import { ChevronRight, Heart } from "lucide-react";
import { type CatalogProduct, shopHref } from "@/data/catalog";
import { productHref, relatedProducts } from "@/lib/products";
import { useDemoStore } from "@/components/shop/demo-store";
import { ProductOptions } from "@/components/shop/product-options";
import { CatalogProductCard } from "@/components/shop/catalog-product-card";

export function ProductDetails({ product, initialVariantId, onAdded, onQuickAdd }: { product: CatalogProduct; initialVariantId?: string; onAdded: () => void; onQuickAdd: (id: string) => void }) {
  const { wishlist, toggleWish } = useDemoStore();
  const saved = wishlist.includes(product.id);
  return <div className="product-details-page section-padding"><nav className="product-breadcrumbs" aria-label="Breadcrumb"><Link href="/">Home</Link><ChevronRight size={11} /><Link href={shopHref(product.group)}>{product.group}</Link><ChevronRight size={11} /><Link href={shopHref(product.group, { type: product.categoryId })}>{product.categoryName}</Link></nav><ProductOptions key={`${product.id}:${initialVariantId ?? "new"}`} product={product} initialVariantId={initialVariantId} details onSelectionChange={(variant) => window.history.replaceState(window.history.state, "", productHref(product.id, variant))} onAdded={onAdded} /><button type="button" className="product-save-link" onClick={() => toggleWish(product.id)} aria-pressed={saved}><Heart size={16} fill={saved ? "currentColor" : "none"} />{saved ? "Saved to your wishlist" : "Save to wishlist"}</button><div className="product-information"><details open><summary>About this piece</summary><p>{product.description} Select a colour and size to see the matching price, image and available stock.</p></details><details><summary>Size & fit guide</summary>{product.group === "Kids" ? <p>Choose an age size: 2Y, 4Y, 6Y or 8Y. Check the garment measurements when choosing your child's fit.</p> : product.variants.every((variant) => variant.size === "One size") ? <p>This item is available in one size. Choose the colour or pack shown before adding it to your bag.</p> : <><table><caption>General size labels</caption><thead><tr><th>Size</th><th>Label</th></tr></thead><tbody>{[["S", "Small"], ["M", "Medium"], ["L", "Large"], ["XL", "Extra large"]].map(([size, label]) => <tr key={size}><td>{size}</td><td>{label}</td></tr>)}</tbody></table><p>Fit varies by product. Final garment measurements should be checked before choosing a size.</p></>}</details><details><summary>Delivery & returns</summary><p>Demo delivery: Dhaka city ৳80, outside Dhaka city ৳150, free from ৳2,999. Final delivery and exchange information is available on our information pages.</p><Link href="/delivery">Delivery information</Link><Link href="/returns">Return & exchange information</Link></details></div><section className="related-products"><div className="section-title-row"><div><p className="eyebrow">A LITTLE MORE YOUR STYLE</p><h2>You may also like.</h2></div><Link href={shopHref(product.group, { type: product.categoryId })} className="text-link">View collection</Link></div><div className="catalog-grid">{relatedProducts(product).map((item) => <CatalogProductCard key={item.id} product={item} onProduct={onQuickAdd} />)}</div></section></div>;
}