// Post-Stripe pages: order confirmation (success) and cancellation.
// Stripe redirects to #checkout/success?session_id=... — we read the id from the
// hash, poll /api/order until the webhook marks it paid, and clear the cart.
const CheckoutPage = ({ sub }) => {
  const { go } = useRouter();
  const { clear } = useCart();
  const isSuccess = (sub || '').startsWith('success');

  const sessionId = React.useMemo(() => {
    const m = /session_id=([^&]+)/.exec(window.location.hash);
    return m ? decodeURIComponent(m[1]) : null;
  }, []);

  const [state, setState] = React.useState(isSuccess ? 'loading' : 'cancel');
  const [order, setOrder] = React.useState(null);

  React.useEffect(() => {
    if (!isSuccess) return;
    clear(); // payment reached Stripe success — empty the local cart
    if (!sessionId) { setState('done'); return; }
    let tries = 0, alive = true;
    const poll = async () => {
      try {
        const res = await fetch('/api/order?session_id=' + encodeURIComponent(sessionId));
        const data = await res.json().catch(() => null);
        if (alive && data && data.status) { setOrder(data); if (data.status === 'paid') { setState('done'); return; } }
      } catch (e) {}
      if (alive && ++tries < 6) setTimeout(poll, 1500); else if (alive) setState('done');
    };
    poll();
    return () => { alive = false; };
  }, [isSuccess, sessionId]);

  const fmt = (c) => '€' + ((c || 0) / 100).toFixed(2);

  return (
    <main className="page-enter bg-warm min-h-[70vh] flex items-center">
      <div className="max-w-[640px] mx-auto px-6 py-24 text-center w-full">
        {isSuccess ? (
          <>
            <span className="w-16 h-16 rounded-full bg-emerald-600 text-white flex items-center justify-center mx-auto">
              <Icon name="check" className="w-8 h-8"/>
            </span>
            <div className="text-[10px] tracking-mega uppercase text-ramen mt-6 mb-2">Ordine confermato</div>
            <h1 className="font-display font-bold text-4xl lg:text-5xl tracking-tight">Grazie! <span className="font-serif-d italic font-medium text-ramen">Itadakimasu.</span></h1>
            <p className="mt-4 text-ink/70">
              {state === 'loading'
                ? 'Stiamo confermando il pagamento…'
                : 'Abbiamo ricevuto il tuo ordine. Riceverai una email con i dettagli della spedizione refrigerata.'}
            </p>

            {order && (
              <div className="mt-8 text-left border border-ink/10 bg-white p-6">
                <div className="text-[10px] tracking-mega uppercase text-ink/50 mb-3">Riepilogo</div>
                <ul className="divide-y divide-ink/10">
                  {(order.items || []).map((it, k) => (
                    <li key={k} className="flex justify-between py-2 text-sm">
                      <span>{it.qty}× {it.name}</span>
                      <span className="font-display font-semibold">{fmt(it.price_cents * it.qty)}</span>
                    </li>
                  ))}
                </ul>
                <div className="flex justify-between text-sm pt-3 mt-1">
                  <span className="text-ink/60">Spedizione</span>
                  <span>{order.amount_shipping_cents ? fmt(order.amount_shipping_cents) : 'Gratuita'}</span>
                </div>
                <div className="flex justify-between font-display font-semibold tracking-wider2 uppercase text-sm border-t border-ink/10 pt-3 mt-2">
                  <span>Totale</span><span>{fmt(order.amount_total_cents)}</span>
                </div>
                {order.status && order.status !== 'paid' && (
                  <div className="text-[11px] text-ink/50 mt-3">Stato pagamento: {order.status}. Se hai completato il pagamento, si aggiornerà a breve.</div>
                )}
              </div>
            )}

            <div className="mt-10 flex flex-wrap gap-3 justify-center">
              <Button variant="primary" onClick={() => go('shop')}>Continua lo shopping</Button>
              <Button variant="ghost-light" onClick={() => go('home')}>Torna alla home</Button>
            </div>
          </>
        ) : (
          <>
            <span className="w-16 h-16 rounded-full border border-ink/20 text-ink flex items-center justify-center mx-auto">
              <Icon name="close" className="w-7 h-7"/>
            </span>
            <div className="text-[10px] tracking-mega uppercase text-ink/50 mt-6 mb-2">Pagamento annullato</div>
            <h1 className="font-display font-bold text-4xl lg:text-5xl tracking-tight">Nessun addebito</h1>
            <p className="mt-4 text-ink/70">Il tuo carrello è ancora qui. Riprova quando vuoi.</p>
            <div className="mt-10 flex flex-wrap gap-3 justify-center">
              <Button variant="primary" onClick={() => go('shop')}>Torna allo shop</Button>
            </div>
          </>
        )}
      </div>
    </main>
  );
};

Object.assign(window, { CheckoutPage });