"use client";
import{LockKeyhole,Minus,Plus,ShieldCheck}from"lucide-react";import{useState}from"react";import type{EventRecord}from"../lib/data";import{money}from"../lib/data";
export function CheckoutClient({event}:{event:EventRecord}){const[tier,setTier]=useState(0);const[qty,setQty]=useState(1);const[busy,setBusy]=useState(false);const chosen=event.tickets[tier];const subtotal=chosen.price*qty,fees=chosen.fee*qty,total=subtotal+fees;async function pay(){setBusy(true);try{const res=await fetch("/api/checkout",{method:"POST",headers:{"content-type":"application/json"},body:JSON.stringify({eventSlug:event.slug,tierName:chosen.name,quantity:qty})});const data=await res.json();if(data.url)location.href=data.url;else alert(data.message||data.error||"Stripe setup is required before live payment.")}finally{setBusy(false)}}return <div className="checkout-layout"><section className="checkout-form"><span className="checkout-step">SECURE CHECKOUT</span><h1>Almost yours.</h1><p>Choose your ticket and confirm your details. Your spot is held for 10 minutes.</p><h2>1. Ticket selection</h2><div className="checkout-tiers">{event.tickets.map((t,i)=><button className={tier===i?"selected":""} key={t.name} onClick={()=>setTier(i)}><span><b>{t.name}</b><small>{t.remaining} available</small></span><strong>{money(t.price+t.fee)} <small>total</small></strong></button>)}</div><div className="quantity-row"><span><b>Quantity</b><small>Maximum 8 per order</small></span><div><button onClick={()=>setQty(Math.max(1,qty-1))} aria-label="Decrease"><Minus size={16}/></button><b>{qty}</b><button onClick={()=>setQty(Math.min(8,qty+1))} aria-label="Increase"><Plus size={16}/></button></div></div><h2>2. Delivery</h2><div className="delivery-option"><span>📱</span><div><b>Mobile ticket</b><small>Ready in your buyer dashboard after payment</small></div><strong>FREE</strong></div></section><aside className="order-summary"><div className="summary-event"><span className="summary-art" style={{background:event.poster}}><b>{event.day}</b><small>{event.month}</small></span><div><b>{event.title}</b><small>{event.date} · {event.time}<br/>{event.venue}</small></div></div><h2>Order summary</h2><div className="summary-line"><span>{chosen.name} × {qty}</span><b>{money(subtotal)}</b></div><div className="summary-line"><span>Service fee</span><b>{money(fees)}</b></div><div className="summary-total"><span>Total <small>USD</small></span><b>{money(total)}</b></div><button className="pay-button" onClick={pay} disabled={busy}><LockKeyhole size={18}/>{busy?"Preparing secure checkout…":`Pay ${money(total)} with Stripe`}</button><p className="secure-copy"><ShieldCheck size={15}/> Payment details are handled securely by Stripe.</p><small className="terms-copy">By continuing, you agree to the seller&apos;s refund policy and EasyPay Tickets terms.</small></aside></div>}
