/* =============================================================
   KASDAP ONE — CHECKOUT  (D2C cart + B2B RFQ, mixed basket)
============================================================= */
const { useState: useStateCO } = React;

function CheckoutScreen() {
  const { cartDetail, user, placeOrder, clearCart, go, toast, mode, pricing } = useStore();
  const { d2c, b2b, d2cSub, b2bSub, subtotal, gst, total, count } = cartDetail;
  const [pay, setPay] = useStateCO('upi');
  const [addr, setAddr] = useStateCO({ name: user ? user.name : '', phone: '', line: '', city: user ? user.city : '', pin: '', gst: user ? user.gst : '', po: '' });
  const [placed, setPlaced] = useStateCO(null);
  const set = (k, v) => setAddr(a => ({ ...a, [k]: v }));

  if (count === 0 && !placed) return React.createElement('div', { className: 'page-wrap' },
    React.createElement('div', { style: { textAlign: 'center', padding: '70px 20px', color: 'var(--text-3)' } },
      React.createElement('div', { className: 'be-ic', style: { width: 64, height: 64, margin: '0 auto 18px' } }, React.createElement(Icon, { name: 'cart', size: 28 })),
      React.createElement('h2', { style: { fontSize: '1.4rem', color: 'var(--text-2)' } }, 'Your basket is empty'),
      React.createElement('p', { style: { margin: '8px 0 22px' } }, 'Add some products to checkout or request a quote.'),
      React.createElement('button', { className: 'btn btn-accent btn-lg', onClick: () => go('catalog') }, React.createElement(Icon, { name: 'pill', size: 16 }), 'Browse catalogue'))
  );

  if (placed) return React.createElement('div', { className: 'page-wrap' },
    React.createElement('div', { className: 'card card-pad', style: { maxWidth: 560, margin: '20px auto' } },
      React.createElement('div', { className: 'ok-card' },
        React.createElement('div', { className: 'ok-ring' }, React.createElement(Icon, { name: 'check', size: 36 })),
        React.createElement('h2', { style: { fontSize: '1.5rem' } }, placed.kind === 'rfq' ? 'Quote requested!' : 'Order confirmed!'),
        React.createElement('p', { className: 'muted', style: { marginTop: 8 } }, placed.kind === 'rfq'
          ? 'Our trade desk will share final pricing within 4 working hours.'
          : 'Thank you! Your order is being prepared for dispatch.'),
        React.createElement('div', { style: { margin: '20px 0', padding: 16, borderRadius: 12, background: 'var(--surface-2)', border: '1px solid var(--line)' } },
          React.createElement('div', { className: 'eyebrow' }, 'Reference'),
          React.createElement('div', { className: 'mono', style: { fontSize: '1.3rem', fontWeight: 700, marginTop: 4 } }, placed.id),
          React.createElement('div', { className: 'muted', style: { fontSize: '.84rem', marginTop: 6 } }, fmt(placed.total) + ' · ' + placed.lines.length + ' line items')),
        React.createElement('div', { style: { display: 'flex', gap: 10, justifyContent: 'center' } },
          React.createElement('button', { className: 'btn btn-ghost', onClick: () => go('catalog') }, 'Continue shopping'),
          React.createElement('button', { className: 'btn btn-accent', onClick: () => go('order', { id: placed.id }) }, React.createElement(Icon, { name: 'truck', size: 16 }), 'Track order')))
    )
  );

  const isPureB2B = b2b.length > 0 && d2c.length === 0;
  const doPlace = () => {
    const orders = [];
    if (d2c.length) orders.push(placeOrder('order', { mode: 'd2c', lines: d2c, total: Math.round((d2cSub * (1 + pricing.gst)) * 100) / 100, address: addr }));
    if (b2b.length) orders.push(placeOrder('rfq', { mode: 'b2b', lines: b2b, total: Math.round((b2bSub * (1 + pricing.gst)) * 100) / 100, address: addr }));
    clearCart();
    setPlaced(orders[0]);
    toast(orders.length > 1 ? 'D2C order + B2B quote both submitted' : (isPureB2B ? 'Quote request submitted' : 'Order placed'), 'ok');
  };

  const LineList = (lines, m) => React.createElement('div', { className: 'co-section' },
    React.createElement('div', { className: 'csh' },
      React.createElement('span', { className: 'csn', style: { background: m === 'd2c' ? 'var(--emerald-soft)' : 'var(--indigo-soft)', color: m === 'd2c' ? 'var(--emerald)' : 'var(--indigo)' } }, React.createElement(Icon, { name: m === 'd2c' ? 'user' : 'building', size: 14 })),
      React.createElement('h3', null, m === 'd2c' ? 'Retail items (D2C)' : 'Trade items (B2B)'),
      React.createElement('span', { className: 'tag' }, lines.length + ' lines · ' + (m === 'd2c' ? 'buy now' : 'request quote'))),
    React.createElement('div', { className: 'co-lines' },
      lines.map(l => React.createElement('div', { className: 'co-line', key: l.handle + l.mode },
        React.createElement(ProductImage, { p: l.p, className: 'pimg' }),
        React.createElement('div', { className: 'cl-mid' },
          React.createElement('div', { className: 'cl-name' }, l.p.name),
          React.createElement('div', { className: 'cl-meta' }, l.qty + ' × ' + fmt(l.pr.unit) + ' / ' + l.pr.unitLabel + ' · ' + l.p.packing)),
        React.createElement('div', { className: 'cl-amt' }, fmt(l.lineTotal))))
    )
  );

  return React.createElement('div', { className: 'page-wrap' },
    React.createElement('div', { className: 'crumb' },
      React.createElement('button', { onClick: () => go('catalog') }, React.createElement(Icon, { name: 'back', size: 14 }), 'Catalogue'),
      React.createElement(Icon, { name: 'chevron', size: 13 }), React.createElement('span', { style: { color: 'var(--text-2)' } }, 'Checkout')),
    React.createElement('h1', { style: { fontSize: '1.8rem', marginBottom: 4 } }, isPureB2B ? 'Request a quote' : 'Checkout'),
    React.createElement('p', { className: 'muted', style: { marginBottom: 22, fontSize: '.9rem' } },
      d2c.length && b2b.length ? 'Your basket has both retail & trade items — we\'ll split it into a D2C order and a B2B quote automatically.' :
      isPureB2B ? 'Submit your bulk requirement and our trade desk will confirm final pricing.' : 'Review your items and complete payment.'),
    React.createElement('div', { className: 'co' },
      React.createElement('div', null,
        d2c.length > 0 && LineList(d2c, 'd2c'),
        b2b.length > 0 && LineList(b2b, 'b2b'),
        /* delivery details */
        React.createElement('div', { className: 'co-section' },
          React.createElement('div', { className: 'csh' },
            React.createElement('span', { className: 'csn' }, React.createElement(Icon, { name: 'map', size: 14 })),
            React.createElement('h3', null, isPureB2B ? 'Business & delivery details' : 'Delivery address')),
          React.createElement('div', { className: 'form-grid' },
            React.createElement('div', { className: 'field' }, React.createElement('label', null, isPureB2B ? 'Business name' : 'Full name'), React.createElement('input', { className: 'input', value: addr.name, onChange: e => set('name', e.target.value) })),
            React.createElement('div', { className: 'field' }, React.createElement('label', null, 'Phone'), React.createElement('input', { className: 'input', value: addr.phone, onChange: e => set('phone', e.target.value), placeholder: '+91 ' })),
            React.createElement('div', { className: 'field full' }, React.createElement('label', null, 'Address'), React.createElement('input', { className: 'input', value: addr.line, onChange: e => set('line', e.target.value), placeholder: 'Street, area, landmark' })),
            React.createElement('div', { className: 'field' }, React.createElement('label', null, 'City'), React.createElement('input', { className: 'input', value: addr.city, onChange: e => set('city', e.target.value) })),
            React.createElement('div', { className: 'field' }, React.createElement('label', null, 'PIN code'), React.createElement('input', { className: 'input', value: addr.pin, onChange: e => set('pin', e.target.value) })),
            (b2b.length > 0) && React.createElement('div', { className: 'field' }, React.createElement('label', null, 'GSTIN'), React.createElement('input', { className: 'input mono', value: addr.gst, onChange: e => set('gst', e.target.value), placeholder: '27ABCDE1234F1Z5' })),
            (b2b.length > 0) && React.createElement('div', { className: 'field' }, React.createElement('label', null, 'PO number (optional)'), React.createElement('input', { className: 'input', value: addr.po, onChange: e => set('po', e.target.value) }))
          )
        ),
        /* payment (only if d2c present) */
        d2c.length > 0 && React.createElement('div', { className: 'co-section' },
          React.createElement('div', { className: 'csh' },
            React.createElement('span', { className: 'csn' }, React.createElement(Icon, { name: 'lock', size: 14 })),
            React.createElement('h3', null, 'Payment method')),
          React.createElement('div', { className: 'pay-opts' },
            [['upi', 'UPI', 'bolt'], ['card', 'Card', 'receipt'], ['netbank', 'Net Banking', 'building'], ['cod', 'Cash on Delivery', 'truck']].map(([k, l, ic]) =>
              React.createElement('div', { key: k, className: 'pay-opt' + (pay === k ? ' on' : ''), onClick: () => setPay(k) },
                React.createElement('span', { className: 'pr' }), React.createElement(Icon, { name: ic, size: 16 }), React.createElement('span', { style: { fontSize: '.82rem', fontWeight: 600 } }, l))))
        )
      ),
      /* summary aside */
      React.createElement('div', { className: 'co-aside' },
        React.createElement('div', { className: 'card card-pad' },
          React.createElement('div', { className: 'card-title', style: { marginBottom: 16 } }, 'Order summary'),
          d2c.length > 0 && React.createElement('div', { className: 'sumrow' }, React.createElement('span', null, React.createElement(Icon, { name: 'user', size: 13, style: { color: 'var(--emerald)', verticalAlign: -2, marginRight: 5 } }), 'D2C subtotal'), React.createElement('span', { className: 'v' }, fmt(d2cSub))),
          b2b.length > 0 && React.createElement('div', { className: 'sumrow' }, React.createElement('span', null, React.createElement(Icon, { name: 'building', size: 13, style: { color: 'var(--indigo)', verticalAlign: -2, marginRight: 5 } }), 'B2B subtotal'), React.createElement('span', { className: 'v' }, fmt(b2bSub))),
          React.createElement('div', { className: 'sumrow' }, React.createElement('span', null, 'GST (' + Math.round(pricing.gst * 100) + '%)'), React.createElement('span', { className: 'v' }, fmt(gst))),
          React.createElement('div', { className: 'sumrow' }, React.createElement('span', null, 'Shipping'), React.createElement('span', { className: 'v', style: { color: 'var(--emerald)' } }, 'FREE')),
          React.createElement('div', { className: 'sumrow tot' }, React.createElement('span', null, isPureB2B ? 'Indicative total' : 'Payable'), React.createElement('span', { className: 'v' }, fmt(total))),
          React.createElement('button', { className: 'btn btn-accent btn-block btn-lg', style: { marginTop: 16 }, onClick: doPlace },
            React.createElement(Icon, { name: isPureB2B ? 'receipt' : 'lock', size: 16 }),
            isPureB2B ? 'Submit quote request' : (d2c.length && b2b.length ? 'Place order & request quote' : 'Pay ' + fmt(total))),
          React.createElement('div', { className: 'secure' }, React.createElement(Icon, { name: 'shieldCheck', size: 13 }), '256-bit SSL · GST invoice included'),
          React.createElement('div', { style: { marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--line)', fontSize: '.72rem', color: 'var(--text-3)', display: 'flex', gap: 8 } },
            React.createElement(Icon, { name: 'shield', size: 15, style: { flexShrink: 0 } }),
            'Prescription medicines are dispensed by a licensed pharmacy partner against a valid Rx.')
        )
      )
    )
  );
}
Object.assign(window, { CheckoutScreen });