// ============================================================
// Checkout — ba bước rồi gửi đơn qua Messenger Fanpage.
//   1. Thông tin   (họ tên, số điện thoại, email tuỳ chọn)
//   2. Giao hàng   (địa chỉ + ghi chú)
//   3. Xác nhận    (COD hoặc chuyển khoản)
// Website tĩnh không có máy chủ, nên đơn được soạn thành tin nhắn
// để khách gửi cho Jesmee qua Messenger; đơn đồng thời ghi vào Google Sheet.
// ============================================================

function JmCheckout({ items, lang, onBack, onComplete }) {
  const t = JM.t[lang];
  const [step, setStep]       = React.useState(1);
  const [form, setForm]       = React.useState({
    email: '', name: '', phone: '',
    address: '', district: '', city: '', note: '',
    pay: 'cod',
  });
  const [errors, setErrors]   = React.useState({});

  React.useEffect(() => { if (window.lucide) lucide.createIcons(); }, [step]);

  const subtotal = items.reduce((s, i) => s + i.price * (i.qty || 1), 0);
  const ship = subtotal >= JM.shop.freeShipFrom ? 0 : JM.shop.shipFee;
  const total = subtotal + ship;

  function update(k, v) { setForm(f => ({ ...f, [k]: v })); setErrors(e => ({ ...e, [k]: null })); }

  function validate() {
    const e = {};
    if (step === 1) {
      if (!form.name.trim()) e.name = lang === 'vi' ? 'Vui lòng nhập họ tên' : 'Required';
      if (!/^(\+?84|0)\d{9}$/.test(form.phone.replace(/[\s.]/g, ''))) e.phone = lang === 'vi' ? 'Số điện thoại chưa đúng (10 số)' : 'Invalid phone';
      if (form.email && !form.email.includes('@')) e.email = lang === 'vi' ? 'Email chưa hợp lệ' : 'Invalid email';
    }
    if (step === 2) {
      if (!form.address.trim()) e.address = lang === 'vi' ? 'Vui lòng nhập địa chỉ' : 'Required';
      if (!form.city.trim()) e.city = lang === 'vi' ? 'Vui lòng nhập tỉnh / thành phố' : 'Required';
    }
    setErrors(e);
    return Object.keys(e).length === 0;
  }

  function buildOrder() {
    const id = 'JM' + Date.now().toString().slice(-6);
    // Tên kèm phân loại: "Sister Two Layer — Vàng, Size 7"; code = SKU tổ hợp (vd N2530V)
    const itemName = (it) => it.variantLabel ? `${it.name} — ${it.variantLabel.split(' · ').join(', ')}` : it.name;
    const lines = items.map(it => {
      const m = !it.variantLabel && JM.materials.find(mm => mm.id === it.material);
      return `- ${it.code || it.productId || ''} ${itemName(it)}${m ? ' (' + m.vi + ')' : ''} x${it.qty || 1}: ${JM.formatPrice(it.price * (it.qty || 1))}`;
    });
    const text = [
      `ĐƠN HÀNG ${id} - jesmee.vn`,
      ...lines,
      `Tạm tính: ${JM.formatPrice(subtotal)}`,
      `Vận chuyển: ${ship === 0 ? 'Miễn phí' : JM.formatPrice(ship)}`,
      `Tổng cộng: ${JM.formatPrice(total)}`,
      `Thanh toán: ${form.pay === 'cod' ? 'COD - trả tiền khi nhận hàng' : 'Chuyển khoản'}`,
      '',
      `Người nhận: ${form.name}`,
      `SĐT: ${form.phone}`,
      form.email ? `Email: ${form.email}` : null,
      `Địa chỉ: ${[form.address, form.district, form.city].filter(Boolean).join(', ')}`,
      form.note ? `Ghi chú: ${form.note}` : null,
    ].filter(l => l !== null).join('\n');
    return {
      id, text, total, pay: form.pay,
      // dữ liệu có cấu trúc để ghi vào Google Sheet
      record: {
        id, time: new Date().toISOString(),
        name: form.name, phone: form.phone, email: form.email,
        address: form.address, ward: form.district, city: form.city, note: form.note,
        pay: form.pay === 'cod' ? 'COD' : 'Chuyển khoản',
        items: items.map(it => ({ code: it.code || it.productId || '', name: itemName(it), qty: it.qty || 1, price: it.price })),
        subtotal, ship, total,
        page: location.href,
      },
    };
  }

  // Ghi đơn vào Google Sheet (JM.shop.orderEndpoint). Không chặn khách nếu lỗi mạng.
  function sendOrder(order) {
    const url = JM.shop.orderEndpoint;
    if (!url) return;
    try {
      fetch(url, { method: 'POST', mode: 'no-cors', headers: { 'Content-Type': 'text/plain;charset=utf-8' }, body: JSON.stringify(order.record) });
    } catch (e) {}
  }

  function next() {
    if (!validate()) return;
    if (step < 3) setStep(step + 1);
    else { const order = buildOrder(); sendOrder(order); onComplete(order); }
  }

  return (
    <section className="jm-checkout" data-screen-label={`Checkout · step ${step}`}>
      <div className="jm-container">
        <button className="jm-pdp__back" onClick={onBack}>
          <i data-lucide="chevron-left" className="jm-icon jm-icon-sm"></i>
          {lang === 'vi' ? 'Quay lại' : 'Back'}
        </button>

        <div className="jm-checkout__head">
          <h1 className="jm-h1">{t['checkout.title']}</h1>
          <ol className="jm-checkout__steps">
            {[1,2,3].map(n => (
              <li key={n} className={`jm-checkout__step ${step === n ? 'is-active' : ''} ${step > n ? 'is-done' : ''}`}>
                <span className="jm-checkout__step-num">{step > n ? '✓' : `0${n}`}</span>
                <span className="jm-label">{n === 1 ? t['checkout.step1'] : n === 2 ? t['checkout.step2'] : t['checkout.step3']}</span>
              </li>
            ))}
          </ol>
        </div>

        <div className="jm-checkout__grid">
          {/* Form column */}
          <div className="jm-checkout__form">
            {step === 1 && (
              <div className="jm-checkout__panel">
                <div className="jm-checkout__panel-title">{t['checkout.step1']}</div>
                <div className="jm-checkout__row">
                  <Field label={t['checkout.name']} error={errors.name}>
                    <input id="co-name" className="jm-input" value={form.name} onChange={e => update('name', e.target.value)} autoComplete="name" aria-invalid={!!errors.name}/>
                  </Field>
                  <Field label={t['checkout.phone']} error={errors.phone}>
                    <input id="co-phone" className="jm-input" type="tel" inputMode="tel" value={form.phone} onChange={e => update('phone', e.target.value)} placeholder="09xx xxx xxx" autoComplete="tel" aria-invalid={!!errors.phone}/>
                  </Field>
                </div>
                <Field label={lang === 'vi' ? 'Email (không bắt buộc)' : 'Email (optional)'} error={errors.email}>
                  <input id="co-email" className="jm-input" type="email" value={form.email} onChange={e => update('email', e.target.value)} autoComplete="email" aria-invalid={!!errors.email}/>
                </Field>
              </div>
            )}

            {step === 2 && (
              <div className="jm-checkout__panel">
                <div className="jm-checkout__panel-title">{lang === 'vi' ? 'Địa chỉ giao hàng' : 'Shipping address'}</div>
                <Field label={t['checkout.address']} error={errors.address}>
                  <input id="co-address" className="jm-input" value={form.address} onChange={e => update('address', e.target.value)} placeholder={lang === 'vi' ? 'Số nhà, ngõ, đường' : 'Number, lane, street'} autoComplete="street-address" aria-invalid={!!errors.address}/>
                </Field>
                <div className="jm-checkout__row">
                  <Field label={lang === 'vi' ? 'Phường / Xã' : 'Ward'}>
                    <input id="co-district" className="jm-input" value={form.district} onChange={e => update('district', e.target.value)}/>
                  </Field>
                  <Field label={lang === 'vi' ? 'Tỉnh / Thành phố' : 'Province / City'} error={errors.city}>
                    <input id="co-city" className="jm-input" value={form.city} onChange={e => update('city', e.target.value)} list="co-city-list" aria-invalid={!!errors.city}/>
                    <datalist id="co-city-list">
                      <option value="Hà Nội"/><option value="TP. Hồ Chí Minh"/><option value="Đà Nẵng"/><option value="Hải Phòng"/><option value="Cần Thơ"/>
                    </datalist>
                  </Field>
                </div>
                <Field label={t['checkout.note']}>
                  <textarea id="co-note" className="jm-input" rows="2" value={form.note} onChange={e => update('note', e.target.value)} placeholder={lang === 'vi' ? 'Ví dụ: gọi trước khi giao, gói quà' : 'e.g. call before delivery, gift wrap'}></textarea>
                </Field>
                <p className="jm-small" style={{ marginTop: 8 }}>
                  {lang === 'vi'
                    ? `Giao toàn quốc. Phí ${JM.formatPrice(JM.shop.shipFee)}, miễn phí cho đơn từ ${JM.formatPrice(JM.shop.freeShipFrom)}.`
                    : `Nationwide delivery. ${JM.formatPrice(JM.shop.shipFee)}, free from ${JM.formatPrice(JM.shop.freeShipFrom)}.`}
                </p>
              </div>
            )}

            {step === 3 && (
              <div className="jm-checkout__panel">
                <div className="jm-checkout__panel-title">{t['checkout.method']}</div>
                <PayOption checked={form.pay === 'cod'} onSelect={() => update('pay', 'cod')}
                  title={lang === 'vi' ? 'COD — trả tiền khi nhận hàng' : 'COD — pay on delivery'}
                  sub={lang === 'vi' ? 'Kiểm tra hàng rồi thanh toán cho shipper' : 'Check the parcel, then pay the courier'} brand="C"/>
                <PayOption checked={form.pay === 'bank'} onSelect={() => update('pay', 'bank')}
                  title={lang === 'vi' ? 'Chuyển khoản' : 'Bank transfer'}
                  sub={lang === 'vi' ? 'Jesmee gửi số tài khoản khi xác nhận đơn' : 'We send bank details when confirming your order'} brand="CK"/>
                <p className="jm-small" style={{ marginTop: 16 }}>
                  {lang === 'vi'
                    ? 'Sau khi bấm Đặt hàng, Jesmee sẽ gọi hoặc nhắn tin để xác nhận đơn.'
                    : 'After you place the order, Jesmee will call or message you to confirm.'}
                </p>
              </div>
            )}

            <div className="jm-checkout__actions">
              {step > 1
                ? <button className="jm-btn jm-btn-ghost" onClick={() => setStep(step - 1)}>← {t['cta.back']}</button>
                : <button className="jm-btn jm-btn-ghost" onClick={onBack}>← {lang === 'vi' ? 'Tiếp tục mua' : 'Continue shopping'}</button>
              }
              <button className="jm-btn jm-btn-primary" onClick={next}>
                {step < 3 ? t['cta.continue'] : `${t['cta.place']} · ${JM.formatPrice(total)}`}
              </button>
            </div>
          </div>

          {/* Summary */}
          <aside className="jm-checkout__summary">
            <div className="jm-checkout__summary-head">
              <span className="jm-label">{t['checkout.summary']}</span>
              <span className="jm-small">{items.reduce((s,i)=>s+(i.qty||1),0)} {t['cart.item']}</span>
            </div>
            <div className="jm-checkout__lines">
              {items.map((it, i) => {
                const m = JM.materials.find(mm => mm.id === it.material);
                return (
                  <div className="jm-checkout__line" key={i}>
                    <div className="jm-checkout__line-img">
                      <JmProductImage src={it.image || (it.images && it.images[0])} glyph={it.glyph} material={it.material} ratio="1/1"/>
                      <span className="jm-checkout__line-qty">{it.qty || 1}</span>
                    </div>
                    <div className="jm-checkout__line-info">
                      <span className="jm-title">{it.name}</span>
                      <span className="jm-small">{it.variantLabel ? `${it.variantLabel} · ${it.code}` : (m ? (lang === 'vi' ? m.vi : m.en) : '')}</span>
                    </div>
                    <span className="jm-title">{JM.formatPrice(it.price * (it.qty || 1))}</span>
                  </div>
                );
              })}
            </div>
            <hr className="jm-divider" style={{ margin: '20px 0' }}/>
            <div className="jm-checkout__totals">
              <div className="jm-checkout__row"><span className="jm-small">{t['cart.subtotal']}</span><span className="jm-small">{JM.formatPrice(subtotal)}</span></div>
              <div className="jm-checkout__row"><span className="jm-small">{t['cart.shipping']}</span><span className="jm-small">{ship === 0 ? t['cart.shippingFree'] : JM.formatPrice(ship)}</span></div>
            </div>
            <hr className="jm-divider" style={{ margin: '16px 0' }}/>
            <div className="jm-checkout__row">
              <span className="jm-label">{t['cart.total']}</span>
              <span className="jm-h2">{JM.formatPrice(total)}</span>
            </div>
            <div className="jm-checkout__trust">
              <i data-lucide="shield-check" className="jm-icon jm-icon-sm"></i>
              <span className="jm-small">{lang === 'vi' ? 'Đổi mới trong 15 ngày' : '15-day exchange'}</span>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}

function Field({ label, error, children }) {
  return (
    <div className="jm-field">
      <span className="jm-label jm-field__label">{label}</span>
      {children}
      {error && <span className="jm-field__err">{error}</span>}
    </div>
  );
}

function PayOption({ checked, onSelect, title, sub, brand }) {
  return (
    <button type="button" className={`jm-radio-card ${checked ? 'is-active' : ''}`} onClick={onSelect}>
      <span className="jm-radio-card__dot"></span>
      <span className="jm-radio-card__brand">{brand}</span>
      <span className="jm-radio-card__info">
        <span className="jm-title">{title}</span>
        <span className="jm-small">{sub}</span>
      </span>
    </button>
  );
}

// ============================================================
// Đặt hàng xong — khách gửi tin nhắn đơn qua Messenger Fanpage.
// ============================================================
function JmCheckoutSuccess({ lang, order, onHome }) {
  const [copied, setCopied] = React.useState(false);
  const textRef = React.useRef(null);
  React.useEffect(() => { if (window.lucide) lucide.createIcons(); });

  if (!order) return null;
  const msg = JM.shop.messenger
    ? JM.shop.messenger + (JM.shop.messenger.includes('?') ? '&' : '?') + 'text=' + encodeURIComponent(order.text)
    : '';

  function copy() {
    const done = () => { setCopied(true); setTimeout(() => setCopied(false), 2500); };
    const fallback = () => {
      const el = textRef.current;
      if (!el) return;
      el.focus(); el.select();
      try { if (document.execCommand('copy')) done(); } catch (e) {}
    };
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(order.text).then(done, fallback);
    } else fallback();
  }

  return (
    <section className="jm-success" data-screen-label="Checkout success">
      <div className="jm-container">
        <div className="jm-success__card">
          <div className="jm-success__mark">
            <i data-lucide="message-circle" className="jm-icon" style={{ width: 28, height: 28 }}></i>
          </div>
          <div className="jm-label" style={{ color: 'var(--jm-cam-dat)', marginBottom: 16 }}>
            {lang === 'vi' ? 'Đơn hàng ' + order.id : 'Order ' + order.id}
          </div>
          <h1 className="jm-h1" style={{ marginBottom: 16 }}>
            {lang === 'vi' ? 'Còn một bước: gửi đơn cho Jesmee' : 'One last step: send us your order'}
          </h1>
          <p style={{ color: 'var(--jm-muted)', maxWidth: 520, margin: '0 auto 24px' }}>
            {lang === 'vi'
              ? 'Bấm "Gửi đơn qua Messenger" để nhắn đơn cho Fanpage Jesmee (đơn đã được sao chép sẵn, chỉ cần dán nếu ô tin nhắn trống). Jesmee sẽ nhắn lại hoặc gọi để xác nhận đơn và thời gian giao.'
              : 'Tap "Send via Messenger" to message your order to Jesmee (it is copied, paste it if the box is empty). We will confirm your order and delivery time.'}
          </p>

          <textarea ref={textRef} id="order-text" className="jm-input jm-success__order" readOnly rows="10" value={order.text}></textarea>

          <div className="jm-success__actions">
            {msg && (
              <a className="jm-btn jm-btn-primary" href={msg} target="_blank" rel="noopener" onClick={copy}>
                {lang === 'vi' ? 'Gửi đơn qua Messenger' : 'Send via Messenger'}
              </a>
            )}
            <button className={`jm-btn ${msg ? 'jm-btn-secondary' : 'jm-btn-primary'}`} onClick={copy}>
              {copied ? (lang === 'vi' ? 'Đã sao chép' : 'Copied') : (lang === 'vi' ? 'Sao chép đơn hàng' : 'Copy order')}
            </button>
          </div>
          {JM.shop.hotline && (
            <p className="jm-small" style={{ marginTop: 12 }}>
              Hotline: <strong>{JM.shop.hotline}</strong>
            </p>
          )}

          <button className="jm-btn jm-btn-ghost" style={{ marginTop: 28 }} onClick={onHome}>
            {lang === 'vi' ? 'Tiếp tục mua sắm' : 'Continue shopping'}
          </button>
        </div>
      </div>
    </section>
  );
}

window.JmCheckout = JmCheckout;
window.JmCheckoutSuccess = JmCheckoutSuccess;