/* Order success */

const OrderSuccess = () => {
  const { t, lang } = useLang();
  const [result] = React.useState(() => {
    try {
      return JSON.parse(sessionStorage.getItem('tc_checkout_result') || '{}');
    } catch (e) {
      return {};
    }
  });
  const params = new URLSearchParams((useRoute().split('?')[1] || ''));
  const orderNumber = result.orderNumber || params.get('order') || '';
  const items = result.items || [];
  const order = result.order || {};
  const isLocalPickup = ['local_pickup', 'cash_local_pickup'].includes(result.paymentMethod)
    || ['local_pickup', 'cash_local_pickup'].includes(order.paymentMethod);

  return (
    <section className="section">
      <div className="container stack" style={{ gap: 24, maxWidth: 860 }}>
        <div>
          <div className="eyebrow">{t.orderSuccess.eyebrow}</div>
          <h1 className="h-1">{t.orderSuccess.title}</h1>
        </div>

        <div className="surface-plain stack" style={{ padding: 22 }}>
          <SpecRow k={t.orderSuccess.orderNumber} v={orderNumber || t.orderSuccess.fallback} />
          {order.email && <SpecRow k={t.orderSuccess.email} v={order.email} />}
          {result.paymentLabel && <SpecRow k={t.checkout.payment} v={result.paymentLabel} />}
          <SpecRow k={t.orderSuccess.nextSteps} v={result.emailSent ? t.orderSuccess.emailSent : t.orderSuccess.emailSaved} />
        </div>

        {items.length > 0 && (
          <div className="surface-plain stack" style={{ padding: 22 }}>
            {items.map((item, index) => (
              <div key={index} style={{ paddingBottom: 14, borderBottom: index === items.length - 1 ? 0 : '1px solid var(--border)' }}>
                <SpecRow k={t.orderSuccess.product} v={item.product} />
                <SpecRow k={t.orderSuccess.baseColor} v={item.bodyColor} />
                <SpecRow k={t.orderSuccess.capColor} v={item.capColor} />
                {item.customText && <SpecRow k={t.orderSuccess.customText} v={item.customText} />}
                {item.customEmoji && <SpecRow k={t.orderSuccess.customEmoji} v={item.customEmoji} />}
                <SpecRow k={t.common.quantity} v={item.quantity} />
              </div>
            ))}
          </div>
        )}

        {isLocalPickup && result.localPickupDetails && (
          <div className="notice">
            <strong>{t.orderSuccess.localPickupTitle}</strong>
            <p className="body-muted" style={{ marginBottom: 0 }}>{result.localPickupDetails}</p>
          </div>
        )}

        <div className="row wrap">
          <Link to="/product" className="btn btn-secondary">{t.common.seeProduct}</Link>
          <Link to="/contact" className="btn btn-secondary">{t.nav.contact}</Link>
        </div>
      </div>
    </section>
  );
};

window.OrderSuccess = OrderSuccess;