// TrackOrder.jsx — customer-facing "enter Order ID + phone" live status lookup

const TO_STEPS = [
  { key: 'pending',    label: 'Order Placed' },
  { key: 'confirmed',  label: 'Confirmed' },
  { key: 'dispatched', label: 'Out for Delivery' },
  { key: 'delivered',  label: 'Delivered' },
];

function TO_Timeline({ order }) {
  if (order.status === 'cancelled') {
    return (
      <div style={{ padding: '14px 16px', background: 'rgba(140,46,46,0.08)', border: '1px solid rgba(140,46,46,0.3)', borderRadius: 10, color: '#8C2E2E', fontFamily: 'var(--font-serif)', fontSize: 14 }}>
        This order was cancelled.
      </div>
    );
  }
  const idx = TO_STEPS.findIndex(s => s.key === order.status);
  const historyAt = (key) => (order.statusHistory || []).find(h => h.status === key)?.at;
  return (
    <div style={{ display: 'flex', flexDirection: 'column' }}>
      {TO_STEPS.map((s, i) => {
        const done = idx >= 0 && i <= idx;
        const at = historyAt(s.key);
        return (
          <div key={s.key} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
              <span style={{
                width: 22, height: 22, borderRadius: '50%', flex: '0 0 auto',
                background: done ? 'var(--bb-burgundy)' : 'var(--bb-pearl)',
                border: done ? '1px solid var(--bb-burgundy)' : '1px solid var(--line-strong)',
                display: 'grid', placeItems: 'center'
              }}>
                {done && <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--bb-gold-light)" strokeWidth="3"><path d="M5 12l5 5L20 7" /></svg>}
              </span>
              {i < TO_STEPS.length - 1 && <span style={{ width: 2, flex: 1, minHeight: 28, background: i < idx ? 'var(--bb-burgundy)' : 'var(--line)' }} />}
            </div>
            <div style={{ paddingBottom: 22 }}>
              <div style={{ fontFamily: 'var(--font-serif)', fontSize: 15, color: done ? 'var(--bb-burgundy-deep)' : 'var(--fg-3)', fontWeight: done ? 600 : 400 }}>{s.label}</div>
              {at && <div style={{ fontFamily: 'var(--font-ui)', fontSize: 11.5, color: 'var(--fg-3)', marginTop: 2 }}>{new Date(at).toLocaleString('en-IN', { day: 'numeric', month: 'short', hour: 'numeric', minute: '2-digit' })}</div>}
            </div>
          </div>
        );
      })}
    </div>
  );
}

function TrackOrder() {
  const [open, setOpen]       = React.useState(false);
  const [orderId, setOrderId] = React.useState('');
  const [phone, setPhone]     = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const [error, setError]     = React.useState('');
  const [order, setOrder]     = React.useState(null);

  React.useEffect(() => {
    const onOpen = () => setOpen(true);
    window.addEventListener('bb-open-track', onOpen);
    return () => window.removeEventListener('bb-open-track', onOpen);
  }, []);

  const close = () => { setOpen(false); setError(''); };

  const lookup = async (e) => {
    e.preventDefault();
    setLoading(true); setError(''); setOrder(null);
    try {
      const res = await fetch('/api/track', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ orderId: orderId.trim(), phone: phone.trim() }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || 'Order not found');
      setOrder(data);
    } catch (err) {
      setError(err.message || 'Could not find that order.');
    } finally {
      setLoading(false);
    }
  };

  if (!open) return null;

  const INPUT = { width: '100%', padding: '11px 13px', background: 'var(--bb-cream)', border: '1px solid var(--line)', borderRadius: 8, color: 'var(--bb-cocoa)', outline: 'none', fontFamily: 'var(--font-serif)', fontSize: 15, boxSizing: 'border-box' };
  const LBL   = { display: 'block', fontFamily: 'var(--font-display)', fontSize: 9, letterSpacing: '0.22em', color: 'var(--bb-gold-deep)', marginBottom: 6 };

  return (
    <>
      <div onClick={close} style={{ position: 'fixed', inset: 0, background: 'rgba(30,10,15,0.55)', zIndex: 8000, backdropFilter: 'blur(3px)' }} />
      <div style={{
        position: 'fixed', top: '50%', left: '50%', transform: 'translate(-50%,-50%)', zIndex: 8001,
        width: 440, maxWidth: '92vw', maxHeight: '86vh', overflowY: 'auto',
        background: 'var(--bb-pearl)', borderRadius: 18, border: '1px solid var(--line-gold)', boxShadow: 'var(--shadow-3)'
      }}>
        <div style={{ background: 'var(--bb-burgundy)', padding: '18px 24px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderRadius: '18px 18px 0 0' }}>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 10, letterSpacing: '0.28em', color: 'var(--bb-gold-light)' }}>TRACK YOUR ORDER</div>
          <button onClick={close} style={{ background: 'none', border: 'none', color: 'var(--bb-gold-light)', fontSize: 24, cursor: 'pointer', lineHeight: 1 }}>&times;</button>
        </div>

        <div style={{ padding: '24px' }}>
          {!order && (
            <form onSubmit={lookup}>
              <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 14, color: 'var(--fg-3)', marginTop: 0, marginBottom: 18 }}>
                Enter your Order ID (from your confirmation email/WhatsApp) and the phone number used at checkout.
              </p>
              <span style={LBL}>ORDER ID</span>
              <input value={orderId} onChange={e => setOrderId(e.target.value)} placeholder="ORD-XXXXXXXXXXX-XXXXXX" style={{ ...INPUT, marginBottom: 14, fontFamily: 'monospace', fontSize: 13 }} required />
              <span style={LBL}>PHONE NUMBER</span>
              <input value={phone} onChange={e => setPhone(e.target.value)} placeholder="+91 …" type="tel" style={{ ...INPUT, marginBottom: 18 }} required />
              {error && <div style={{ marginBottom: 14, padding: '10px 14px', background: 'rgba(140,46,46,0.08)', border: '1px solid rgba(140,46,46,0.3)', borderRadius: 8, color: '#8C2E2E', fontFamily: 'var(--font-serif)', fontSize: 13 }}>{error}</div>}
              <button type="submit" className="btn btn-foil" disabled={loading} style={{ width: '100%', padding: '14px 24px', opacity: loading ? 0.6 : 1, cursor: loading ? 'not-allowed' : 'pointer' }}>
                {loading ? 'Searching…' : 'Track Order →'}
              </button>
            </form>
          )}

          {order && (
            <div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 4 }}>
                <span style={{ fontFamily: 'monospace', fontSize: 12, color: 'var(--fg-3)' }}>{order.id}</span>
                <span style={{ fontFamily: 'var(--font-serif)', fontSize: 14, color: 'var(--bb-burgundy-deep)' }}>₹{(order.total || 0).toLocaleString('en-IN')}</span>
              </div>
              <div style={{ fontFamily: 'var(--font-serif)', fontSize: 19, color: 'var(--bb-burgundy-deep)', marginBottom: 18 }}>{order.box} × {order.qty}</div>

              <TO_Timeline order={order} />

              {order.courier?.awb && (
                <div style={{ marginTop: 8, padding: '12px 14px', background: 'var(--bb-cream)', border: '1px solid var(--line-gold)', borderRadius: 10 }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 9, letterSpacing: '0.2em', color: 'var(--bb-gold-deep)', marginBottom: 4 }}>SHIPPED VIA {order.courier.name?.toUpperCase() || 'COURIER'}</div>
                  <div style={{ fontFamily: 'monospace', fontSize: 13, color: 'var(--bb-cocoa)', marginBottom: order.courier.url ? 8 : 0 }}>AWB: {order.courier.awb}</div>
                  {order.courier.url && <a href={order.courier.url} target="_blank" rel="noopener noreferrer" className="btn btn-secondary" style={{ padding: '8px 16px', fontSize: 10 }}>Track with courier →</a>}
                </div>
              )}

              <div style={{ display: 'flex', gap: 10, marginTop: 20 }}>
                <button className="btn btn-ghost" onClick={() => { setOrder(null); setError(''); }} style={{ flex: 1, padding: '12px 0' }}>← Track Another</button>
                <button className="btn btn-primary" onClick={() => window.bbEnquire('Order ' + order.id)} style={{ flex: 1, padding: '12px 0' }}>Contact Us</button>
              </div>
            </div>
          )}
        </div>
      </div>
    </>
  );
}

window.TrackOrder = TrackOrder;