"use client";
import Link from "next/link";
import { useEffect,useMemo,useState } from "react";
import { useFormStatus } from "react-dom";
import { createCartOrder } from "@/lib/operations";
type DeliveryZone={id:string;neighborhood:string;priceCents:number;estimatedMinutes:number};
type Product={id:string;slug:string;name:string;shortDescription:string|null;category:string;priceCents:number;stock:number;trackStock:boolean;imageUrl:string|null};
const brl=(cents:number)=>new Intl.NumberFormat("pt-BR",{style:"currency",currency:"BRL"}).format(cents/100);
function FinishButton({ready}:{ready:boolean}){const {pending}=useFormStatus();return <button className="cart-finish" disabled={pending||!ready}>{pending?"Preparando pedido...":"Finalizar pelo WhatsApp"}</button>}
export function ProductCatalog({host,base,products,deliveryZones}:{host:string;base:string;products:Product[];deliveryZones:DeliveryZone[]}){const key=`shop-cart:${host}`;const [cart,setCart]=useState<Record<string,number>>({});const [ready,setReady]=useState(false);const [deliveryId,setDeliveryId]=useState("");useEffect(()=>{let saved:Record<string,number>={};try{saved=JSON.parse(localStorage.getItem(key)||"{}") as Record<string,number>}catch{}const timer=setTimeout(()=>{setCart(saved);setReady(true)},0);return()=>clearTimeout(timer)},[key]);useEffect(()=>{if(ready)localStorage.setItem(key,JSON.stringify(cart))},[cart,key,ready]);const selected=useMemo(()=>products.filter(p=>cart[p.id]).map(p=>({...p,quantity:cart[p.id]})),[cart,products]);const subtotal=selected.reduce((sum,item)=>sum+item.priceCents*item.quantity,0);const delivery=deliveryZones.find(zone=>zone.id===deliveryId);const total=subtotal+(delivery?.priceCents??0);const change=(product:Product,delta:number)=>setCart(current=>{const max=product.trackStock?product.stock:99;const quantity=Math.max(0,Math.min(max,(current[product.id]||0)+delta));const next={...current};if(quantity)next[product.id]=quantity;else delete next[product.id];return next});return <div className="catalog-with-cart"><div className="store-grid listing cart-products">{products.map(product=><article className="store-item cart-product" key={product.id}><Link href={`${base}/produto/${product.slug}`}><div className="featured-media" style={product.imageUrl?{backgroundImage:`url(${product.imageUrl})`}:undefined}>{product.imageUrl?null:product.name.slice(0,1)}</div><span>{product.category}</span><h3>{product.name}</h3>{product.shortDescription&&<p>{product.shortDescription}</p>}<strong>{brl(product.priceCents)}</strong></Link><div className="cart-product-actions">{cart[product.id]?<div className="quantity-control"><button onClick={()=>change(product,-1)} aria-label="Diminuir quantidade">−</button><b>{cart[product.id]}</b><button onClick={()=>change(product,1)} aria-label="Aumentar quantidade">+</button></div>:<button className="add-cart" onClick={()=>change(product,1)} disabled={product.trackStock&&product.stock<1}>{product.trackStock&&product.stock<1?"Sem estoque":"Adicionar ao carrinho"}</button>}</div></article>)}</div><aside className="cart-panel"><div className="cart-title"><div><small>SEU PEDIDO</small><h2>Carrinho</h2></div><span>{selected.reduce((sum,item)=>sum+item.quantity,0)}</span></div>{selected.length?<><div className="cart-lines">{selected.map(item=><div key={item.id}><span><b>{item.quantity}× {item.name}</b><small>{brl(item.priceCents)} cada</small></span><strong>{brl(item.priceCents*item.quantity)}</strong></div>)}</div><div className="cart-delivery"><label>Bairro para entrega<select value={deliveryId} onChange={event=>setDeliveryId(event.target.value)} required><option value="">Selecione o bairro</option>{deliveryZones.map(zone=><option value={zone.id} key={zone.id}>{zone.neighborhood} · {brl(zone.priceCents)} · {zone.estimatedMinutes} min</option>)}</select></label></div><div className="cart-total"><span>Total com entrega</span><strong>{brl(total)}</strong></div><form action={createCartOrder} className="cart-checkout"><input type="hidden" name="host" value={host}/><input type="hidden" name="deliveryZoneId" value={deliveryId}/><input type="hidden" name="itemsJson" value={JSON.stringify(selected.map(item=>({id:item.id,quantity:item.quantity})))}/><label>Nome<input name="name" required/></label><label>Seu WhatsApp<input name="phone" type="tel" placeholder="(45) 99999-9999" required/></label><label>Observações<textarea name="notes" rows={3}/></label><FinishButton ready={Boolean(deliveryId)}/></form></>:<div className="cart-empty"><span>🛒</span><p>Adicione produtos para montar seu pedido.</p></div>}</aside></div>}