import Image from "next/image";
import { Heart, Minus, Plus, ShoppingBag, X } from "lucide-react";
import { catalogProducts, minimumPrice } from "@/data/catalog";
import { formatPrice } from "@/data/category-showcases";
import { useDemoStore } from "./demo-store";

export function SavedItems({ mode, onProduct, onBrowse, onCart, onCheckout }: { mode: "bag" | "wishlist"; onProduct: (id: string) => void; onBrowse: () => void; onCart: () => void; onCheckout: () => void }) {
  const { cart, wishlist, removeItem, updateQuantity, toggleWish, hydrated } = useDemoStore();
  if (!hydrated) return <div className="empty-state" role="status">Loading your {mode === "bag" ? "shopping bag" : "wishlist"}…</div>;
  const saved = catalogProducts.filter((product) => wishlist.includes(product.id));
  const lines = cart.flatMap((line) => { const product = catalogProducts.find((item) => item.id === line.productId); const variant = product?.variants.find((item) => item.id === line.variantId); return product && variant ? [{ ...line, product, variant }] : []; });
  const empty = mode === "bag" ? lines.length === 0 : saved.length === 0;
  if (empty) return <div className="empty-state">{mode === "bag" ? <ShoppingBag size={42} strokeWidth={1.1} /> : <Heart size={42} strokeWidth={1.1} />}<h3>{mode === "bag" ? "A little room for something you love." : "Your favourites start here."}</h3><p>{mode === "bag" ? "Your bag is empty. Explore the collections to find your everyday favourites." : "Tap a product's heart to save it here."}</p><button type="button" className="button button-primary" onClick={onBrowse}>Explore collections</button></div>;
  return <div className="saved-items">{mode === "wishlist" ? saved.map((product) => <div className="saved-item" key={product.id}><button type="button" onClick={() => onProduct(product.id)} className="saved-item-photo"><Image src={product.image} alt={product.name} width={72} height={74} /></button><div><button type="button" className="saved-item-name" onClick={() => onProduct(product.id)}>{product.name}</button><p>{formatPrice(minimumPrice(product))}</p><button type="button" className="saved-item-link" onClick={() => onProduct(product.id)}>Choose options</button></div><button type="button" className="icon-button" onClick={() => toggleWish(product.id)} aria-label={`Remove ${product.name} from wishlist`}><X size={17} /></button></div>) : lines.map((line) => <div className="saved-item" key={line.variantId}><div className="saved-item-photo"><Image src={line.variant.images[0]} alt={`${line.product.name}, ${line.variant.color}`} width={72} height={74} /></div><div><span className="saved-item-name">{line.product.name}</span><p>{line.variant.color} / {line.variant.size}</p><strong>{formatPrice(line.variant.price * line.quantity)}</strong><div className="bag-quantity"><button type="button" disabled={line.quantity <= 1} onClick={() => updateQuantity(line.variantId, line.quantity - 1)} aria-label={`Decrease quantity of ${line.product.name}, ${line.variant.color}, ${line.variant.size}`}><Minus size={12} /></button><span>{line.quantity}</span><button type="button" disabled={line.quantity >= line.variant.stock} onClick={() => updateQuantity(line.variantId, line.quantity + 1)} aria-label={`Increase quantity of ${line.product.name}, ${line.variant.color}, ${line.variant.size}`}><Plus size={12} /></button></div></div><button type="button" className="icon-button" onClick={() => removeItem(line.variantId)} aria-label={`Remove ${line.product.name}, ${line.variant.color}, ${line.variant.size} from bag`}><X size={17} /></button></div>)}{mode === "bag" && <><div className="bag-summary"><span>Subtotal</span><strong>{formatPrice(lines.reduce((sum, line) => sum + line.variant.price * line.quantity, 0))}</strong></div><div className="bag-page-actions"><button type="button" className="button button-outline" onClick={onCart}>View shopping bag</button><button type="button" className="button button-primary" onClick={onCheckout}>Checkout</button></div></>}<button type="button" className="text-link saved-continue" onClick={onBrowse}>Continue shopping</button></div>;
}