/* Cart */

const Cart = () => {
  const { t, lang } = useLang();
  const [items, setItems] = React.useState(CartStore.get().items);
  React.useEffect(() => CartStore.subscribe((state) => setItems(state.items)), []);

  const enriched = items.map((item) => {
    const config = normalizeConfig(item.config);
    const stockResult = getVariantStockState(config.bodyColor, config.capColor);
    return {
      ...item,
      config,
      unitPrice: calcPrice(config),
      stockResult
    };
  });

  const subtotal = enriched.reduce((sum, item) => sum + item.unitPrice * (item.qty || 1), 0);
  const shipping = subtotal > 0 && subtotal < (CFG.pricing.freeShippingThresholdCents || 5000)
    ? CFG.pricing.shipping.standard.priceCents
    : 0;
  const total = subtotal + shipping;
  const hasUnavailable = enriched.some((item) => !canAddToCart(item.stockResult));
  const hasPreorder = enriched.some((item) => isPreorder(item.stockResult));

  if (enriched.length === 0) {
    return (
      <section className="section">
        <div className="container stack" style={{ gap: 20, maxWidth: 560, textAlign: 'center', alignItems: 'center' }}>
          <div className="eyebrow">{t.cart.eyebrow}</div>
          <h1 className="h-1">{t.cart.empty}</h1>
          <p className="lead">{t.cart.emptySub}</p>
          <Link to="/configurator" className="btn btn-primary btn-lg btn-arrow">
            {t.common.configureYours}
          </Link>
        </div>
      </section>
    );
  }

  return (
    <section className="section">
      <div className="container">
        <div className="row-between wrap" style={{ marginBottom: 28, paddingBottom: 16, borderBottom: '1px solid var(--border)' }}>
          <div>
            <div className="eyebrow">{t.cart.eyebrow}</div>
            <h1 className="h-1">{t.cart.title}</h1>
          </div>
          <span className="mono-sm">{enriched.length} {enriched.length === 1 ? t.cart.itemSingular : t.cart.itemPlural}</span>
        </div>

        <div className="cart-grid">
          <div className="stack" style={{ gap: 14 }}>
            {enriched.map((item) => (
              <CartItem key={item.id} item={item} />
            ))}
            <Link to="/configurator" className="btn btn-secondary btn-arrow" style={{ width: 'fit-content' }}>
              {t.cart.addAnother}
            </Link>
          </div>

          <aside className="surface stack sticky-panel" style={{ padding: 22 }}>
            <div className="eyebrow">{t.cart.summary}</div>
            <SummaryRow k={t.cart.subtotal} v={formatMoney(subtotal, lang)} />
            <SummaryRow k={t.cart.shipping} v={formatMoney(shipping, lang)} sub={t.cart.shippingSub} />
            <SummaryRow k={t.cart.vat} v={t.common.vatIncluded} />
            <SummaryRow k={t.cart.total} v={formatMoney(total, lang)} big />

            {hasPreorder && <p className="notice">{t.cart.preorderWarning}</p>}
            {hasUnavailable && <p className="notice notice-danger">{t.cart.unavailableWarning}</p>}

            {hasUnavailable ? (
              <button className="btn btn-primary btn-lg btn-block" type="button" disabled>
                {t.common.proceedToCheckout}
              </button>
            ) : (
              <Link to="/checkout" className="btn btn-primary btn-lg btn-block btn-arrow">
                {t.common.proceedToCheckout}
              </Link>
            )}
            <p className="mono-sm" style={{ textAlign: 'center' }}>{t.cart.madeOnDemand}</p>
          </aside>
        </div>
      </div>
    </section>
  );
};

const CartItem = ({ item }) => {
  const { t, lang } = useLang();
  const unavailable = !canAddToCart(item.stockResult);
  const preorder = isPreorder(item.stockResult);

  const edit = () => {
    try { sessionStorage.setItem('tc_draft', JSON.stringify(item.config)); } catch (e) {}
    try { sessionStorage.setItem('tc_edit_item', item.id); } catch (e) {}
    navigate('/configurator');
  };

  return (
    <article className="surface-plain" style={{ padding: 14, borderColor: unavailable ? 'var(--danger)' : undefined }}>
      <div style={{ display: 'grid', gridTemplateColumns: '96px 1fr', gap: 16 }}>
        <ProductPreview config={item.config} size="sm" animated={false} />
        <div className="stack" style={{ gap: 10 }}>
          <div className="row-between wrap">
            <div>
              <div className="mono-sm">{item.sku} · {CFG.devices[0].displayName}</div>
              <h3 className="h-3">{item.product}</h3>
            </div>
            <strong>{formatMoney(item.unitPrice * (item.qty || 1), lang)}</strong>
          </div>
          <div className="body-muted">
            {getColorLabel(item.config.bodyColor, lang)} / {getColorLabel(item.config.capColor, lang)}
            <br />
            {item.config.customText ? `"${item.config.customText}"` : t.cart.noText}
            {(item.config.symbols || []).length ? ' / ' + item.config.symbols.join(' ') : ''}
          </div>
          <div className="row wrap">
            <StockBadge stockResult={item.stockResult} />
            {preorder && <span className="mono-sm">{t.cart.preorderWarning}</span>}
          </div>
          <div className="row-between wrap">
            <div className="row">
              <button
                type="button"
                className="icon-btn"
                onClick={() => CartStore.update(item.id, { qty: Math.max(1, (item.qty || 1) - 1) })}
                aria-label="-"
              >
                -
              </button>
              <span className="mono-sm">{t.common.quantity}: {item.qty || 1}</span>
              <button
                type="button"
                className="icon-btn"
                onClick={() => CartStore.update(item.id, { qty: (item.qty || 1) + 1 })}
                aria-label="+"
              >
                +
              </button>
            </div>
            <div className="row">
              <button type="button" className="btn btn-secondary btn-sm" onClick={edit}>{t.cart.edit}</button>
              <button type="button" className="btn btn-ghost btn-sm" onClick={() => CartStore.remove(item.id)}>{t.cart.remove}</button>
            </div>
          </div>
        </div>
      </div>
    </article>
  );
};

const SummaryRow = ({ k, v, sub, big }) => (
  <div className="row-between" style={{ padding: '8px 0', borderTop: '1px solid var(--border)' }}>
    <div>
      <div className="mono-sm">{k}</div>
      {sub && <div className="mono-sm" style={{ color: 'var(--text-soft)' }}>{sub}</div>}
    </div>
    <strong style={{ fontSize: big ? '1.3rem' : '1rem' }}>{v}</strong>
  </div>
);

window.Cart = Cart;
window.SummaryRow = SummaryRow;