"use client";

import Link from "next/link";
import Image from "next/image";
import { ArrowLeft, ArrowRight, Trash2 } from "lucide-react";
import { formatPrice } from "@/data/category-showcases";
import { cartSummary, type DeliveryZone } from "@/lib/commerce";
import { useDemoStore } from "@/components/shop/demo-store";
import { CommerceHeading } from "./commerce-heading";
import { CommerceLoading, EmptyBag } from "./commerce-state";
import { OrderSummary } from "./order-summary";
import { QuantityControl } from "./quantity-control";

export function CartPage({ onProduct }: { onProduct: (id: string, variantId?: string) => void }) {
  const { cart, hydrated, deliveryZone, setDeliveryZone, updateQuantity, removeItem } = useDemoStore();
  const summary = cartSummary(cart, deliveryZone);
  return <><CommerceHeading step={1} title="Your shopping bag." description="A little closer to your next everyday favourite." />{!hydrated ? <CommerceLoading /> : !summary.lines.length ? <EmptyBag /> : <div className="commerce-layout section-padding"><section className="cart-items" aria-label="Items in your shopping bag"><div className="cart-items-heading"><h2>Your selection</h2><span>{summary.count} {summary.count === 1 ? "item" : "items"}</span></div>{summary.issues.length > 0 && <div className="commerce-error" role="alert">{summary.issues.join(" ")}</div>}{summary.lines.map((line) => <article className="cart-line" key={line.variantId}><button type="button" className="cart-line-image" onClick={() => onProduct(line.product.id, line.variantId)} aria-label={`View ${line.product.name}`}><Image src={line.variant.images[0]} alt={`${line.product.name}, ${line.variant.color}`} fill sizes="(max-width: 600px) 90px, 120px" className="category-product-image" /></button><div className="cart-line-details"><p className="eyebrow">{line.product.group} / {line.product.categoryName}</p><button type="button" className="cart-line-name" onClick={() => onProduct(line.product.id, line.variantId)}>{line.product.name}</button><p className="cart-line-options">{line.variant.color} <span>/</span> Size {line.variant.size}</p><p className="cart-unit-price">{formatPrice(line.variant.price)} each</p><button type="button" className="cart-remove" onClick={() => removeItem(line.variantId)}><Trash2 size={12} /> Remove</button></div><div className="cart-line-controls"><QuantityControl value={line.quantity} stock={line.variant.stock} label={`${line.product.name}, ${line.variant.color}, ${line.variant.size}`} onChange={(quantity) => updateQuantity(line.variantId, quantity)} /><strong>{formatPrice(line.lineTotal)}</strong><span className="cart-stock-note">{line.quantity >= line.variant.stock ? "Stock limit reached" : `${line.variant.stock} available`}</span></div></article>)}<div className="cart-delivery"><label htmlFor="cart-delivery-zone">Delivery area</label><select id="cart-delivery-zone" value={deliveryZone} onChange={(event) => setDeliveryZone(event.target.value as DeliveryZone)}><option value="dhaka">Inside Dhaka city</option><option value="outside">Outside Dhaka city</option></select></div><Link className="commerce-back-link" href="/shop"><ArrowLeft size={15} /> Continue shopping</Link></section><OrderSummary summary={summary}>{summary.issues.length ? <p className="commerce-error">Please update your bag before checkout.</p> : <Link className="button button-primary checkout-link" href="/checkout">Proceed to checkout <ArrowRight size={16} /></Link>}<p className="summary-payment-note">Guest checkout · Cash on delivery</p></OrderSummary></div>}</>;
}