// Checkout flow + confirmation
const { useState } = React;
function Checkout() {
  const { cart, cartTotal, navigate, placeOrder, applyCoupon, coupon } = useStore();
  const toast = useToast();

  const [stage, setStage] = useState('contact'); // contact -> address -> shipping -> payment
  const [contact, setContact] = useState({ email: '', phone: '' });
  const [address, setAddress] = useState({ first: '', last: '', street: '', apt: '', city: '', province: 'Punjab', po: '', country: 'Pakistan' });
  const [shipping, setShipping] = useState('standard');
  const [payment, setPayment] = useState('');
  const [agree, setAgree] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [couponInput, setCouponInput] = useState('');
  const [errors, setErrors] = useState({});

  const lines = cart.map(line => ({ ...line, p: window.PRODUCTS.find(x => x.id === line.id) })).filter(l => l.p);

  const discount = coupon
    ? coupon.discountFlat > 0
      ? Math.min(coupon.discountFlat, cartTotal)
      : Math.round(cartTotal * (coupon.discountPct / 100))
    : 0;
  const discountedTotal = cartTotal - discount;
  const shippingFee = (coupon && coupon.freeShip) ? 0 : (discountedTotal >= 5000 ? 0 : (shipping === "express" ? 350 : 200));
  const codFee = (stage === 'payment' && payment === 'cod') ? 100 : 0;
  const grand = discountedTotal + shippingFee + codFee;

  const handleApplyCoupon = () => {
    const result = applyCoupon(couponInput);
    if (result.ok) {
      toast('Coupon applied — ' + (result.coupon.discountFlat > 0 ? fmt(result.coupon.discountFlat) + ' off' : result.coupon.discountPct + '% off'));
    } else {
      toast(result.reason);
    }
  };

  if (lines.length === 0) {
    return <div className="container"><Empty title="Nothing to checkout" hint="Your cart is empty." cta="Continue shopping" onCta={() => navigate({ name: 'home' })} /></div>;
  }

  const goNext = () => {
    const errs = {};
    if (stage === 'contact') {
      if (!contact.email.trim()) errs.email = 'Email is required';
      else if (!/^[^@]+@[^@]+\.[^@]+$/.test(contact.email)) errs.email = 'Enter a valid email address';
      if (!contact.phone.trim()) errs.phone = 'Phone number is required';
      else if ((contact.phone.match(/\d/g) || []).length < 10) errs.phone = 'Enter a valid phone number (at least 10 digits)';
      if (Object.keys(errs).length > 0) { setErrors(errs); return; }
      setErrors({});
      setStage('address');
    } else if (stage === 'address') {
      if (!address.first.trim()) errs.first = 'Full name is required';
      if (!address.street.trim()) errs.street = 'Address is required';
      if (!address.city.trim()) errs.city = 'City is required';
      if (!address.po.trim()) errs.po = 'Postal code is required';
      else if (!/^\d{5}$/.test(address.po)) errs.po = 'Enter a valid 5-digit postal code';
      if (Object.keys(errs).length > 0) { setErrors(errs); return; }
      setErrors({});
      setStage('shipping');
    } else if (stage === 'shipping') {
      setStage('payment');
    }
  };

  const submit = () => {
    if (!payment) { toast('Please select a payment method'); return; }
    if (!agree) { setErrors({ agree: 'You must accept the terms to place your order' }); return; }
    setSubmitting(true);
    setTimeout(() => {
      const o = placeOrder({ contact, address, shipping, payment, fee: { shippingFee, codFee, grand } });
      navigate({ name: 'confirmation' });
    }, 1800);
  };

  const provinces = ['Punjab', 'Sindh', 'Khyber Pakhtunkhwa', 'Balochistan', 'Gilgit-Baltistan', 'Azad Jammu & Kashmir'];
  const fieldError = (name) => errors[name] ? { borderColor: 'var(--color-error)' } : {};
  const ErrorMsg = ({ name }) => errors[name] ? <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', color: 'var(--color-error)', marginTop: 4 }}>{errors[name]}</div> : null;


  {submitting && (
        <div style={{
          position: 'fixed', inset: 0, zIndex: 400, background: 'var(--color-surface)',
          display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 'var(--space-lg)'
        }}>
          <BrandSeal size={64} />
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-sm)', textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--color-text-mute)' }}>
            Confirming your order…
          </div>
          <div style={{ width: 200, height: 2, background: 'var(--color-border)', overflow: 'hidden' }}>
            <div style={{ width: '60%', height: '100%', background: 'var(--color-accent)', animation: 'loading-bar 1.5s var(--ease-out) forwards' }} />
          </div>
          <div style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-mute)', fontFamily: 'var(--font-mono)' }}>
            Please do not close this page
          </div>
        </div>
      )}

      <style>{'@keyframes loading-bar { from { width: 0% } to { width: 100% } }'}</style>
      return (
    <>
      <div className="container crumbs">
        <a onClick={() => navigate({ name: 'home' })}>Home</a>
        <span className="sep">/</span>
        <span className="current">Checkout</span>
      </div>
      <div className="container checkout">
        <div>
          <div className={'checkout-step' + (stage !== 'contact' ? ' is-done' : '')}>
            <h3><span className="num">{stage !== 'contact' ? <Ic.check /> : '1'}</span>Contact Information</h3>
            {stage === 'contact' ? (
              <>
                <div className="field-row">
                  <div className="field"><label>Email</label><input value={contact.email} onChange={e => { setContact({...contact, email: e.target.value}); setErrors({...errors, email: ''}); }} placeholder="you@example.com" style={fieldError('email')} /><ErrorMsg name="email" /></div>
                  <div className="field"><label>Phone</label><input value={contact.phone} onChange={e => { setContact({...contact, phone: e.target.value}); setErrors({...errors, phone: ''}); }} placeholder="+92 300 1234567" style={fieldError('phone')} /><ErrorMsg name="phone" /></div>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--color-text-mute)', marginBottom: 12 }}>
                  <input type="checkbox" /> Email me with news and offers
                </div>
                <button className="btn btn-primary" onClick={goNext}>Continue to Address</button>
              </>
            ) : (
              <div style={{ fontSize: 14, color: 'var(--color-text-soft)' }}>
                {contact.email} · {contact.phone}
                <button className="btn btn-text" style={{ marginLeft: 16, fontSize: 12 }} onClick={() => setStage('contact')}>Edit</button>
              </div>
            )}
          </div>

          <div className={'checkout-step' + (['shipping', 'payment'].includes(stage) ? ' is-done' : '')}>
            <h3><span className="num">{['shipping', 'payment'].includes(stage) ? <Ic.check /> : '2'}</span>Shipping Address</h3>
            {stage === 'address' ? (
              <>
                <div className="field-row">
                  <div className="field"><label>Full Name</label><input value={address.first} onChange={e => { setAddress({...address, first: e.target.value}); setErrors({...errors, first: ''}); }} style={fieldError('first')} /><ErrorMsg name="first" /></div>
                  <div className="field"><label>Phone</label><input value={address.last} onChange={e => setAddress({...address, last: e.target.value})} placeholder="+92 300 1234567" /></div>
                </div>
                <div className="field"><label>Address Line 1</label><input value={address.street} onChange={e => { setAddress({...address, street: e.target.value}); setErrors({...errors, street: ''}); }} placeholder="House no, street, area" style={fieldError('street')} /><ErrorMsg name="street" /></div>
                <div className="field"><label>Address Line 2 (optional)</label><input value={address.apt} onChange={e => setAddress({...address, apt: e.target.value})} /></div>
                <div className="field-row">
                  <div className="field"><label>City</label><input value={address.city} onChange={e => { setAddress({...address, city: e.target.value}); setErrors({...errors, city: ''}); }} style={fieldError('city')} /><ErrorMsg name="city" /></div>
                  <div className="field"><label>Province</label>
                    <select value={address.province} onChange={e => setAddress({...address, province: e.target.value})}>
                      {provinces.map(s => <option key={s}>{s}</option>)}
                    </select>
                  </div>
                </div>
                <div className="field-row">
                  <div className="field"><label>Postal Code</label><input value={address.po} onChange={e => { setAddress({...address, po: e.target.value}); setErrors({...errors, po: ''}); }} placeholder="44000" style={fieldError('po')} /><ErrorMsg name="po" /></div>
                  <div className="field"><label>Country</label><input value={address.country} disabled /></div>
                </div>
                <div style={{ display: 'flex', gap: 12 }}>
                  <button className="btn btn-ghost" onClick={() => setStage('contact')}>← Back</button>
                  <button className="btn btn-primary" onClick={goNext}>Continue to Shipping</button>
                </div>
              </>
            ) : stage !== 'contact' ? (
              <div style={{ fontSize: 14, color: 'var(--color-text-soft)' }}>
                {address.first}, {address.street}, {address.city}, {address.province} {address.po}
                <button className="btn btn-text" style={{ marginLeft: 16, fontSize: 12 }} onClick={() => setStage('address')}>Edit</button>
              </div>
            ) : null}
          </div>

          <div className={'checkout-step' + (stage === 'payment' ? ' is-done' : '')}>
            <h3><span className="num">{stage === 'payment' ? <Ic.check /> : '3'}</span>Shipping Method</h3>
            {stage === 'shipping' ? (
              <>
                <div className="pay-options">
                  <div className={'pay-option' + (shipping === 'standard' ? ' is-on' : '')} onClick={() => setShipping('standard')}>
                    <span className="radio" />
                    <div className="body">
                      <div className="label">Standard Delivery</div>
                      <div className="hint">3–5 business days · {cartTotal >= 5000 ? 'Free' : fmt(200)}</div>
                    </div>
                  </div>
                  <div className={'pay-option' + (shipping === 'express' ? ' is-on' : '')} onClick={() => setShipping('express')}>
                    <span className="radio" />
                    <div className="body">
                      <div className="label">Express Delivery</div>
                      <div className="hint">1–2 business days · {fmt(350)}</div>
                    </div>
                  </div>
                </div>
                <div style={{ display: 'flex', gap: 12, marginTop: 16 }}>
                  <button className="btn btn-ghost" onClick={() => setStage('address')}>← Back</button>
                  <button className="btn btn-primary" onClick={goNext}>Continue to Payment</button>
                </div>
              </>
            ) : stage === 'payment' ? (
              <div style={{ fontSize: 14, color: 'var(--color-text-soft)' }}>
                {shipping === 'express' ? 'Express Delivery (1–2 days)' : 'Standard Delivery (3–5 days)'}
                <button className="btn btn-text" style={{ marginLeft: 16, fontSize: 12 }} onClick={() => setStage('shipping')}>Edit</button>
              </div>
            ) : null}
          </div>

          <div className="checkout-step">
            <h3><span className="num">4</span>Payment</h3>
            {stage === 'payment' ? (
              <>
                <div className="pay-options">
                  <div className={'pay-option' + (payment === 'cod' ? ' is-on' : '')} onClick={() => setPayment('cod')}>
                    <span className="radio" />
                    <div className="body"><div className="label">Cash on Delivery</div><div className="hint">Pay with cash when your order arrives · Rs 49 fee</div></div>
                  </div>
                  <div className={'pay-option' + (payment === 'card' ? ' is-on' : '')} onClick={() => setPayment('card')}>
                    <span className="radio" />
                    <div className="body"><div className="label">Credit / Debit Card</div><div className="hint">Visa · Mastercard</div></div>
                  </div>
                  <div className={'pay-option' + (payment === 'bank' ? ' is-on' : '')} onClick={() => setPayment('bank')}>
                    <span className="radio" />
                    <div className="body"><div className="label">Bank Transfer</div><div className="hint">Direct bank deposit · details after order</div></div>
                  </div>
                </div>
                {payment === 'card' && (
                  <div style={{ marginTop: 16, padding: 16, background: 'var(--color-paper-2)' }}>
                    <div className="field"><label>Card Number</label><input placeholder="0000 0000 0000 0000" /></div>
                    <div className="field-row">
                      <div className="field"><label>Expiry</label><input placeholder="MM / YY" /></div>
                      <div className="field"><label>CVV</label><input placeholder="123" /></div>
                    </div>
                  </div>
                )}
                <div>
                <label style={{ display: 'flex', alignItems: 'flex-start', gap: 10, marginTop: 16, fontSize: 13, cursor: 'pointer' }}>
                  <input type="checkbox" checked={agree} onChange={(e) => setAgree(e.target.checked)} />
                  <span>I agree to the Terms of Service and Return Policy. I confirm my shipping address is correct.</span>
                </label>
                {errors.agree && <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', color: 'var(--color-error)', marginTop: 4 }}>{errors.agree}</div>}
                </div>
                <div style={{ display: 'flex', gap: 12, marginTop: 16 }}>
                  <button className="btn btn-ghost" onClick={() => setStage('shipping')} disabled={submitting}>← Back</button>
                  <button className="btn btn-primary btn-lg" onClick={submit} disabled={submitting} style={{ minWidth: 220, justifyContent: 'center' }}>
                    {submitting ? 'Processing…' : `Place Order — ${fmt(grand)}`}
                  </button>
                </div>
              </>
            ) : (
              <div className="muted" style={{ fontSize: 13 }}>Complete the steps above to enter payment.</div>
            )}
          </div>
        </div>

        <aside className="summary">
          <h3>Order Summary</h3>
          {lines.map(({ p, qty, size, color, id }) => (
            <div className="summary-line" key={`${id}-${size}-${color}`}>
              <div className="thumb"><img src={p.img} alt="" /></div>
              <div style={{ flex: 1 }}>
                <div className="name">{p.name}</div>
                <div className="meta">{[size, color].filter(Boolean).join(' · ')} · Qty {qty}</div>
              </div>
              <div style={{ fontWeight: 500, fontSize: 13 }}>{fmt(p.price * qty)}</div>
            </div>
          ))}
          <div className="summary-totals">
            <div className="row"><span>Subtotal ({lines.reduce((s,l)=>s+l.qty,0)} items)</span><span>{fmt(cartTotal)}</span></div>
            {discount > 0 && <div className="row" style={{ color: 'var(--color-accent)' }}><span>Coupon ({coupon.code})</span><span>−{fmt(discount)}</span></div>}
            <div className="row"><span>Shipping</span><span>{shippingFee === 0 ? 'Free' : fmt(shippingFee)}</span></div>
            {(stage === 'payment' && payment === 'cod') && <div className="row"><span>COD fee</span><span>{fmt(codFee)}</span></div>}
            <div className="row total"><span>Total</span><span>{fmt(grand)}</span></div>
          </div>
          <div style={{ display: 'flex', gap: 8, fontSize: 12, color: 'var(--color-text-mute)', marginTop: 12, alignItems: 'center' }}>
            <Ic.shield /><span>Your information is encrypted &amp; safe.</span>
          </div>
          <div className="field" style={{ marginTop: 12 }}>
            <label>Have a coupon?</label>
            {coupon ? (
              <div style={{ fontSize: 13, color: 'var(--color-accent)', padding: '8px 0' }}>
                <Ic.check /> Coupon <strong>{coupon.code}</strong> applied
              </div>
            ) : (
              <div style={{ display: 'flex', gap: 6 }}>
                <input placeholder="SAANCHA10" style={{ flex: 1 }} value={couponInput} onChange={e => setCouponInput(e.target.value)} onKeyDown={e => e.key === 'Enter' && handleApplyCoupon()} />
                <button className="btn btn-ghost" style={{ padding: '12px 18px' }} onClick={handleApplyCoupon}>Apply</button>
              </div>
            )}
          </div>
        </aside>
      </div>
    </>
  );
}

function Confirmation() {
  const { order, navigate } = useStore();
  if (!order) return <div className="container"><Empty title="No recent order" hint="Place an order to see confirmation here." cta="Browse" onCta={() => navigate({ name: 'home' })} /></div>;
  const eta = new Date(Date.now() + (order.details.shipping === 'express' ? 2 : 4) * 86400000);
  const steps = [
    { label: 'Confirmed', date: new Date().toDateString().slice(4), done: true },
    { label: 'Packed', date: 'Pending', done: false },
    { label: 'Shipped', date: 'Pending', done: false },
    { label: 'Delivered', date: eta.toDateString().slice(4), done: false },
  ];
  return (
    <div className="container confirmation">
      <div className="seal"><Ic.checkBig /></div>
      <div className="eyebrow-gold" style={{ marginBottom: 'var(--space-sm)' }}>Order Confirmed</div>
      <h1>Thank you, {order.details.address.first || 'friend'}</h1>
      <p className="sub">Your order has been placed successfully. A confirmation email will be sent to <strong>{order.details.contact.email}</strong>.</p>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-lg)', maxWidth: 720, margin: '0 auto var(--space-xl)', textAlign: 'left' }}>
        <div className="order-card">
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--color-accent)', marginBottom: 'var(--space-md)' }}>Order Details</div>
          <div className="row"><span className="muted">Order Number</span><strong style={{ fontFamily: 'var(--font-mono)' }}>{order.id}</strong></div>
          <div className="row"><span className="muted">Date</span><strong>{new Date(order.placedAt).toDateString().slice(4)}</strong></div>
          <div className="row"><span className="muted">Payment Method</span><strong>{order.details.payment === 'cod' ? 'Cash on Delivery' : order.details.payment === 'card' ? 'Credit / Debit Card' : 'Bank Transfer'}</strong></div>
          <div className="row"><span className="muted">Items</span><strong>{order.items.reduce((s, i) => s + i.qty, 0)} piece{order.items.reduce((s,i)=>s+i.qty,0) !== 1 ? 's' : ''}</strong></div>
          <div className="row"><span className="muted">Total</span><strong style={{ color: 'var(--color-accent)', fontSize: 'var(--text-lg)' }}>{fmt(order.details.fee.grand)}</strong></div>
        </div>

        <div className="order-card">
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--color-accent)', marginBottom: 'var(--space-md)' }}>Delivery Address</div>
          <div className="row"><span className="muted">Name</span><strong>{order.details.address.first}</strong></div>
          <div className="row"><span className="muted">Address</span><strong>{order.details.address.street}{order.details.address.apt ? ', ' + order.details.address.apt : ''}</strong></div>
          <div className="row"><span className="muted">City</span><strong>{order.details.address.city}, {order.details.address.province}</strong></div>
          <div className="row"><span className="muted">Postal Code</span><strong>{order.details.address.po}</strong></div>
          <div className="row"><span className="muted">Phone</span><strong>{order.details.contact.phone}</strong></div>
        </div>
      </div>

      <div style={{ maxWidth: 720, margin: '0 auto var(--space-2xl)' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--color-accent)', marginBottom: 'var(--space-md)' }}>Estimated Delivery: {eta.toDateString().slice(4)}</div>
        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 0 }}>
          {steps.map((s, i) => (
            <div key={i} style={{ flex: 1, display: 'flex', alignItems: 'center' }}>
              <div style={{ textAlign: 'center', width: '100%' }}>
                <div style={{
                  width: 12, height: 12, borderRadius: '50%', margin: '0 auto 6px',
                  background: s.done ? 'var(--color-accent)' : 'var(--color-border)',
                  border: '2px solid ' + (s.done ? 'var(--color-accent)' : 'var(--color-border)')
                }} />
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', textTransform: 'uppercase', letterSpacing: '0.04em', color: s.done ? 'var(--color-ink)' : 'var(--color-text-mute)' }}>
                  {s.label}
                </div>
                <div style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-mute)', marginTop: 2 }}>
                  {s.date}
                </div>
              </div>
              {i < steps.length - 1 && (
                <div style={{ flex: 1, height: 2, background: s.done ? 'var(--color-accent)' : 'var(--color-border)', marginBottom: 24, minWidth: 30 }} />
              )}
            </div>
          ))}
        </div>
      </div>

      <div className="order-card" style={{ maxWidth: 720, margin: '0 auto var(--space-xl)', textAlign: 'left' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--color-accent)', marginBottom: 'var(--space-sm)' }}>Items in This Order</div>
        {order.items.map((item, i) => {
          const p = window.PRODUCTS.find(x => x.id === item.id);
          if (!p) return null;
          return (
            <div key={i} className="summary-line">
              <div className="thumb"><img src={p.img} alt={p.name} /></div>
              <div style={{ flex: 1 }}>
                <div className="name">{p.name}</div>
                <div className="meta">{item.size || ''} · Qty {item.qty}</div>
              </div>
              <div style={{ fontWeight: 500, fontSize: 13 }}>{fmt(p.price * item.qty)}</div>
            </div>
          );
        })}
      </div>

      <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
        <button className="btn btn-primary btn-lg" onClick={() => navigate({ name: 'home' })}>Continue Shopping</button>
        <button className="btn btn-ghost btn-lg" onClick={() => navigate({ name: 'page', slug: 'track', orderId: order.id })}>Track Order →</button>
      </div>
      <div style={{ marginTop: 'var(--space-2xl)', fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', color: 'var(--color-text-mute)', textAlign: 'center' }}>
        Need help? Contact us at <a href="mailto:hello@saanchashoes.shop" style={{ color: 'var(--color-accent)' }}>hello@saanchashoes.shop</a> or call +92 51 272 8463
      </div>
    </div>
  );
}

window.Checkout = Checkout;
window.Confirmation = Confirmation;