/* ============================================================
   lomi — CARRITO + CHECKOUT
   ============================================================ */

/* ---------- mini imagen para línea de carrito ---------- */
function LineImg({ product }) {
  const cat = window.LOMI_DATA.CATEGORIES.find((c) => c.id === product.category);
  const img = (() => {
    try { const a = JSON.parse(product.images || '[]'); return a[0] || null; } catch { return null; }
  })() || product.image_url || null;
  return (
    <div className="line-img" style={{ background: `radial-gradient(120% 120% at 35% 25%, ${product.tint}cc, ${product.tint}55)` }}>
      {img
        ? <img src={img} alt={product.name} style={{ width:'100%', height:'100%', objectFit:'contain', padding:6, display:'block' }} onError={e => { e.target.style.display='none'; }}/>
        : <Icon name={cat ? cat.icon : "paw"} size={30} stroke={1.5} />
      }
    </div>
  );
}

/* ============================================================
   CARRITO
   ============================================================ */
function Cart({ cart, go, setQty, removeItem }) {
  const { PRODUCTS } = window.LOMI_DATA;
  const settings = (window.LOMI_DATA && window.LOMI_DATA.settings) || {};
  const FREE_THRESHOLD = Number(settings.free_shipping_threshold || 29990);
  const SHIP_COST      = Number(settings.shipping_cost || 3990);

  const [promo, setPromo] = useState("");
  const [coupon, setCoupon] = useState(null);
  const [promoLoading, setPromoLoading] = useState(false);
  const [promoError, setPromoError] = useState("");
  useReveal("cart" + cart.length);

  async function applyPromo() {
    const code = promo.trim().toUpperCase();
    if (!code) { setPromoError("Ingresa un código"); return; }
    setPromoLoading(true); setPromoError("");
    try {
      const res = await fetch('/api/public/coupons/validate', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ code, subtotal }),
      });
      const data = await res.json();
      if (!res.ok) { setPromoError(data.error || 'Código inválido'); setCoupon(null); }
      else { setCoupon(data); }
    } catch { setPromoError('Error de conexión'); }
    setPromoLoading(false);
  }

  function removePromo() { setCoupon(null); setPromo(""); setPromoError(""); }

  const lines = cart.map((it) => ({ ...it, product: PRODUCTS.find((p) => p.id === it.id) })).filter((l) => l.product);
  const subtotal = lines.reduce((s, l) => s + l.product.price * l.qty, 0);
  const discount = coupon ? coupon.discount : 0;
  const shipping = subtotal === 0 ? 0 : (subtotal - discount) >= FREE_THRESHOLD ? 0 : SHIP_COST;
  const total = subtotal - discount + shipping;
  const freeGap = FREE_THRESHOLD - (subtotal - discount);

  if (lines.length === 0) {
    return (
      <main className="cartpage">
        <div className="wrap">
          <div className="empty empty-lg">
            <span className="empty-ic"><Icon name="cart" size={44} /></span>
            <h3>Tu carro está vacío</h3>
            <p>Pero tu regalón te está mirando con esos ojitos… ¡vamos a llenarlo!</p>
            <button className="btn btn-primary btn-lg" onClick={() => go({ name: "catalog" })}>Explorar tienda <Icon name="arrow" size={18} /></button>
          </div>
        </div>
      </main>
    );
  }

  return (
    <main className="cartpage">
      <div className="wrap">
        <h1 className="page-title">Tu carro <span>({lines.reduce((s, l) => s + l.qty, 0)})</span></h1>

        {freeGap > 0 && (
          <div className="ship-progress reveal">
            <div className="ship-progress-text"><Icon name="truck" size={18} /> Te faltan <strong>{window.formatCLP(freeGap)}</strong> para el <strong>despacho gratis</strong></div>
            <div className="ship-bar"><div style={{ width: Math.min(100, ((subtotal - discount) / FREE_THRESHOLD) * 100) + "%" }} /></div>
          </div>
        )}

        <div className="cart-layout">
          <section className="cart-lines">
            {lines.map((l, i) => (
              <div className="cart-line reveal" key={l.id} style={{ transitionDelay: i * 0.05 + "s" }}>
                <button className="cart-line-img" onClick={() => go({ name: "product", id: l.id })}><LineImg product={l.product} /></button>
                <div className="cart-line-info">
                  <button className="cart-line-name" onClick={() => go({ name: "product", id: l.id })}>{l.product.name}</button>
                  <span className="cart-line-brand">{l.product.brand}</span>
                  <button className="cart-line-remove" onClick={() => removeItem(l.id)}>Quitar</button>
                </div>
                <div className="qty qty-sm">
                  <button onClick={() => setQty(l.id, Math.max(1, l.qty - 1))}><Icon name="minus" size={16} /></button>
                  <span>{l.qty}</span>
                  <button onClick={() => setQty(l.id, l.qty + 1)}><Icon name="plus" size={16} /></button>
                </div>
                <div className="cart-line-price">{window.formatCLP(l.product.price * l.qty)}</div>
              </div>
            ))}
          </section>

          <aside className="cart-summary reveal">
            <h3>Resumen</h3>
            {!coupon ? (
              <div className="promo">
                <input
                  placeholder="Código de descuento"
                  value={promo}
                  onChange={(e) => { setPromo(e.target.value.toUpperCase()); setPromoError(""); }}
                  onKeyDown={(e) => { if (e.key === "Enter") applyPromo(); }}
                  disabled={promoLoading}
                />
                <button onClick={applyPromo} disabled={promoLoading}>{promoLoading ? '…' : 'Aplicar'}</button>
              </div>
            ) : (
              <div className="promo-ok" style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
                <span><Icon name="check" size={14} /> {coupon.code} · {coupon.type === 'percent' ? `-${coupon.value}%` : `-${window.formatCLP(coupon.value)}`}</span>
                <button onClick={removePromo} style={{ background:'none', border:'none', cursor:'pointer', color:'var(--muted)', fontSize:16, padding:'0 4px' }}>×</button>
              </div>
            )}
            {promoError && <div style={{ fontSize:13, color:'var(--coral-deep)', fontWeight:600, marginBottom:8 }}>{promoError}</div>}
            <div className="sum-row">
              <span>Subtotal</span>
              <span>
                {discount > 0 && <s style={{ color:'var(--muted)', fontWeight:400, marginRight:6, fontSize:13 }}>{window.formatCLP(subtotal)}</s>}
                {window.formatCLP(subtotal - discount)}
              </span>
            </div>
            {discount > 0 && <div className="sum-row sum-disc"><span>Cupón {coupon.code}</span><span>−{window.formatCLP(discount)}</span></div>}
            <div className="sum-row"><span>Despacho</span><span>{shipping === 0 ? "Gratis" : window.formatCLP(shipping)}</span></div>
            <div className="sum-total"><span>Total</span><span>{window.formatCLP(total)}</span></div>
            <button className="btn btn-primary btn-lg btn-block" onClick={() => go({ name: "checkout", coupon })}>Ir a pagar <Icon name="arrow" size={18} /></button>
            <button className="btn btn-ghost btn-block" onClick={() => go({ name: "catalog" })}>Seguir comprando</button>
            <div className="cart-trust"><Icon name="shield" size={16} /> Pago seguro · Webpay, tarjetas y Mercado Pago</div>
          </aside>
        </div>
      </div>
    </main>
  );
}

/* ============================================================
   CHECKOUT
   ============================================================ */
function Checkout({ cart, go, clearCart, route }) {
  const { PRODUCTS } = window.LOMI_DATA;
  const settings = (window.LOMI_DATA && window.LOMI_DATA.settings) || {};
  const FREE_THRESHOLD = Number(settings.free_shipping_threshold || 29990);
  const SHIP_COST      = Number(settings.shipping_cost || 3990);

  // Opciones de envío desde settings
  const expEnabled = settings.shipping_express_enabled !== '0';
  const normEnabled = settings.shipping_normal_enabled !== '0';
  const pickEnabled = settings.shipping_pickup_enabled !== '0';
  const expLabel  = settings.shipping_express_label || 'Despacho exprés';
  const expDesc   = settings.shipping_express_desc  || 'Mañana';
  const expPrice  = settings.shipping_express_price ? Number(settings.shipping_express_price) : SHIP_COST;
  const normLabel = settings.shipping_normal_label  || 'Despacho normal';
  const normDesc  = settings.shipping_normal_desc   || '2–3 días';
  const normPrice = settings.shipping_normal_price  ? Number(settings.shipping_normal_price)  : SHIP_COST * 2;
  const pickLabel = settings.shipping_pickup_label  || 'Retiro en tienda';
  const pickDesc  = settings.shipping_pickup_desc   || 'Hoy';

  const defaultShip = expEnabled ? "express" : normEnabled ? "normal" : "retiro";
  const [step, setStep]           = useState(1);
  const [ship, setShip]           = useState(defaultShip);
  const [submitting, setSubmitting] = useState(false);
  const [errors, setErrors]       = useState({});
  const coupon = route && route.coupon ? route.coupon : null;

  const [form, setForm] = useState({
    name:'', lastName:'', email:'', phone:'', rut:'', address:'', city:'', region:''
  });
  function setF(k, v) { setForm(f => ({...f, [k]: v})); if (errors[k]) setErrors(e => ({...e, [k]: ''})); }

  const lines = cart.map((it) => ({ ...it, product: PRODUCTS.find((p) => p.id === it.id) })).filter((l) => l.product);
  const subtotal  = lines.reduce((s, l) => s + l.product.price * l.qty, 0);
  const discount  = coupon ? coupon.discount : 0;
  const netSubtotal = subtotal - discount;
  const shipping  = ship === "express" ? (netSubtotal >= FREE_THRESHOLD ? 0 : expPrice)
                  : ship === "retiro"  ? 0
                  : normPrice;
  const total     = subtotal - discount + shipping;

  function validateStep1() {
    const errs = {};
    if (!form.name.trim())     errs.name     = 'Requerido';
    if (!form.lastName.trim()) errs.lastName = 'Requerido';
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) errs.email = 'Email inválido';
    if (!form.phone.trim())    errs.phone    = 'Requerido';
    if (!form.address.trim())  errs.address  = 'Requerido';
    if (!form.city.trim())     errs.city     = 'Requerido';
    if (!form.region.trim())   errs.region   = 'Requerido';
    setErrors(errs);
    return Object.keys(errs).length === 0;
  }

  async function handlePay() {
    setSubmitting(true);
    setErrors({});
    try {
      // 1. Crear el pedido
      const orderRes = await fetch('/api/public/orders', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          customer: {
            name:    `${form.name} ${form.lastName}`.trim(),
            email:   form.email,
            phone:   form.phone,
            address: form.address,
            city:    form.city,
            region:  form.region,
          },
          items: lines.map(l => ({
            id:    l.product.id,
            name:  l.product.name,
            brand: l.product.brand,
            price: l.product.price,
            qty:   l.qty,
          })),
          shipping_cost: shipping,
          coupon_code: coupon ? coupon.code : null,
          discount: discount,
        }),
      });
      const orderData = await orderRes.json().catch(() => ({}));
      if (!orderRes.ok) throw new Error(orderData.error || 'Error al crear el pedido');

      // 2. Crear preferencia MercadoPago
      const prefRes = await fetch('/api/payment/preference', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          items: lines.map(l => ({
            id:    l.product.id,
            name:  l.product.name,
            price: l.product.price,
            qty:   l.qty,
          })),
          customer: {
            name:  `${form.name} ${form.lastName}`.trim(),
            email: form.email,
            phone: form.phone,
          },
          shipping_cost: shipping,
          order_id: orderData.order_id,
          back_url_base: window.location.origin,
        }),
      });
      const prefData = await prefRes.json().catch(() => ({}));
      if (!prefRes.ok) throw new Error(prefData.error || 'Error al conectar con MercadoPago');

      // 3. Redirigir a MercadoPago
      clearCart();
      window.location.href = prefData.init_point;
    } catch (e) {
      setErrors({ submit: e.message });
      setSubmitting(false);
    }
  }

  if (lines.length === 0) {
    return (
      <main className="cartpage"><div className="wrap"><div className="empty empty-lg">
        <span className="empty-ic"><Icon name="cart" size={44} /></span>
        <h3>No hay nada para pagar</h3>
        <button className="btn btn-primary btn-lg" onClick={() => go({ name: "catalog" })}>Ir a la tienda</button>
      </div></div></main>
    );
  }

  const steps = [["1", "Datos"], ["2", "Despacho"], ["3", "Pago"]];

  return (
    <main className="cartpage checkout">
      <div className="wrap">
        <button className="back-btn" onClick={() => go({ name: "cart" })}><Icon name="back" size={18} /> Volver al carro</button>
        <h1 className="page-title">Finalizar compra</h1>

        <div className="steps">
          {steps.map(([n, l], i) => (
            <div key={n} className={"step " + (step > i + 1 ? "done" : step === i + 1 ? "on" : "")}>
              <span className="step-n">{step > i + 1 ? <Icon name="check" size={16} /> : n}</span>
              <span className="step-l">{l}</span>
              {i < 2 && <span className="step-bar" />}
            </div>
          ))}
        </div>

        <div className="checkout-layout">
          <section className="checkout-main">

            {/* PASO 1 — Datos */}
            {step === 1 && (
              <div className="co-card fade-up">
                <h3>Tus datos</h3>
                <div className="form-grid">
                  <div className="field">
                    <label>Nombre *</label>
                    <input placeholder="Camila" value={form.name} onChange={e => setF('name', e.target.value)} className={errors.name ? 'error' : ''}/>
                    {errors.name && <span className="field-error">{errors.name}</span>}
                  </div>
                  <div className="field">
                    <label>Apellido *</label>
                    <input placeholder="Rojas" value={form.lastName} onChange={e => setF('lastName', e.target.value)} className={errors.lastName ? 'error' : ''}/>
                    {errors.lastName && <span className="field-error">{errors.lastName}</span>}
                  </div>
                  <div className="field full">
                    <label>Correo *</label>
                    <input placeholder="camila@correo.cl" type="email" value={form.email} onChange={e => setF('email', e.target.value)} className={errors.email ? 'error' : ''}/>
                    {errors.email && <span className="field-error">{errors.email}</span>}
                  </div>
                  <div className="field">
                    <label>Teléfono *</label>
                    <input placeholder="+56 9 1234 5678" value={form.phone} onChange={e => setF('phone', e.target.value)} className={errors.phone ? 'error' : ''}/>
                    {errors.phone && <span className="field-error">{errors.phone}</span>}
                  </div>
                  <div className="field">
                    <label>RUT</label>
                    <input placeholder="12.345.678-9" value={form.rut} onChange={e => setF('rut', e.target.value)}/>
                  </div>
                  <div className="field full">
                    <label>Dirección *</label>
                    <input placeholder="Av. Siempre Viva 742" value={form.address} onChange={e => setF('address', e.target.value)} className={errors.address ? 'error' : ''}/>
                    {errors.address && <span className="field-error">{errors.address}</span>}
                  </div>
                  <div className="field">
                    <label>Comuna *</label>
                    <input placeholder="Providencia" value={form.city} onChange={e => setF('city', e.target.value)} className={errors.city ? 'error' : ''}/>
                    {errors.city && <span className="field-error">{errors.city}</span>}
                  </div>
                  <div className="field">
                    <label>Región *</label>
                    <input placeholder="Metropolitana" value={form.region} onChange={e => setF('region', e.target.value)} className={errors.region ? 'error' : ''}/>
                    {errors.region && <span className="field-error">{errors.region}</span>}
                  </div>
                </div>
                <button className="btn btn-primary btn-lg" onClick={() => { if (validateStep1()) setStep(2); }}>
                  Continuar <Icon name="arrow" size={18} />
                </button>
              </div>
            )}

            {/* PASO 2 — Despacho */}
            {step === 2 && (
              <div className="co-card fade-up">
                <h3>¿Cómo lo enviamos?</h3>
                <div className="radio-list">
                  {[
                    expEnabled  && ["express", "truck",  expLabel,  expDesc  + " · " + (netSubtotal >= FREE_THRESHOLD ? "Gratis" : window.formatCLP(expPrice))],
                    normEnabled && ["normal",  "truck",  normLabel, normDesc + " · " + window.formatCLP(normPrice)],
                    pickEnabled && ["retiro",  "shield", pickLabel, pickDesc + " · Gratis"],
                  ].filter(Boolean).map(([v, ic, t, s]) => (
                    <button key={v} className={"radio-row " + (ship === v ? "on" : "")} onClick={() => setShip(v)}>
                      <span className="radio-dot" />
                      <span className="radio-ic"><Icon name={ic} size={22} /></span>
                      <div><strong>{t}</strong><span>{s}</span></div>
                    </button>
                  ))}
                </div>
                <div className="co-actions">
                  <button className="btn btn-ghost btn-lg" onClick={() => setStep(1)}>Atrás</button>
                  <button className="btn btn-primary btn-lg" onClick={() => setStep(3)}>Continuar <Icon name="arrow" size={18} /></button>
                </div>
              </div>
            )}

            {/* PASO 3 — Pago */}
            {step === 3 && (
              <div className="co-card fade-up">
                <h3>Pago seguro</h3>
                <div className="mp-info">
                  <div className="mp-info-icon"><Icon name="shield" size={32} /></div>
                  <div>
                    <strong>Serás redirigido a MercadoPago</strong>
                    <p>Puedes pagar con tarjeta de débito, crédito, Webpay o saldo MercadoPago. Tu información está 100% protegida.</p>
                  </div>
                </div>
                <div className="mp-methods">
                  <span>Webpay</span><span>Visa</span><span>Mastercard</span><span>Débito</span>
                </div>
                {errors.submit && <div className="submit-error">{errors.submit}</div>}
                <div className="co-actions">
                  <button className="btn btn-ghost btn-lg" onClick={() => setStep(2)} disabled={submitting}>Atrás</button>
                  <button className="btn btn-primary btn-lg" onClick={handlePay} disabled={submitting}>
                    {submitting
                      ? <><Icon name="rotate" size={18}/> Redirigiendo…</>
                      : <><Icon name="shield" size={18} /> Ir a pagar {window.formatCLP(total)}</>
                    }
                  </button>
                </div>
              </div>
            )}

          </section>

          <aside className="checkout-summary">
            <h3>Tu pedido</h3>
            <div className="co-lines">
              {lines.map((l) => (
                <div className="co-line" key={l.id}>
                  <LineImg product={l.product} />
                  <div className="co-line-info">
                    <strong>{l.product.name}</strong>
                    <span>Cant: {l.qty}</span>
                  </div>
                  <span className="co-line-price">{window.formatCLP(l.product.price * l.qty)}</span>
                </div>
              ))}
            </div>
            <div className="sum-row">
              <span>Subtotal</span>
              <span>
                {discount > 0 && <s style={{ color:'var(--muted)', fontWeight:400, marginRight:6, fontSize:13 }}>{window.formatCLP(subtotal)}</s>}
                {window.formatCLP(netSubtotal)}
              </span>
            </div>
            {discount > 0 && coupon && <div className="sum-row sum-disc"><span>Cupón {coupon.code}</span><span>−{window.formatCLP(discount)}</span></div>}
            <div className="sum-row"><span>Despacho</span><span>{shipping === 0 ? "Gratis" : window.formatCLP(shipping)}</span></div>
            <div className="sum-total"><span>Total</span><span>{window.formatCLP(total)}</span></div>
            <div className="cart-trust"><Icon name="shield" size={16} /> Tus datos están protegidos</div>
          </aside>
        </div>
      </div>
    </main>
  );
}

/* ============================================================
   PANTALLA DE RETORNO DESDE MERCADOPAGO
   ============================================================ */
function PaymentReturn({ status, orderId, go }) {
  if (status === 'success') {
    return (
      <main className="cartpage">
        <div className="wrap">
          <div className="confirm reveal in">
            <div className="confirm-ic confirm-ic-ok"><Icon name="check" size={48} /></div>
            <h1>¡Pago confirmado! 🐾</h1>
            <p>Tu pedido fue recibido. Te enviamos el detalle y seguimiento a tu correo.</p>
            <div className="confirm-order">
              <div><span>N° de pedido</span><strong>{orderId}</strong></div>
            </div>
            <div style={{ display:'flex', gap:12, justifyContent:'center', flexWrap:'wrap', marginTop:8 }}>
              <button className="btn btn-primary btn-lg" onClick={() => go({ name: 'tracking', orderId })}>
                <Icon name="truck" size={18} /> Seguir mi pedido
              </button>
              <button className="btn btn-ghost btn-lg" onClick={() => go({ name: 'home' })}>Volver al inicio</button>
            </div>
          </div>
        </div>
      </main>
    );
  }
  if (status === 'pending') {
    return (
      <main className="cartpage">
        <div className="wrap">
          <div className="confirm reveal in">
            <div className="confirm-ic confirm-ic-pend"><Icon name="rotate" size={48} /></div>
            <h1>Pago en proceso</h1>
            <p>Tu pago está siendo verificado. Te avisaremos por correo cuando se confirme.</p>
            <div className="confirm-order">
              <div><span>N° de pedido</span><strong>{orderId}</strong></div>
            </div>
            <div style={{ display:'flex', gap:12, justifyContent:'center', flexWrap:'wrap', marginTop:8 }}>
              <button className="btn btn-primary btn-lg" onClick={() => go({ name: 'tracking', orderId })}>
                <Icon name="truck" size={18} /> Seguir mi pedido
              </button>
              <button className="btn btn-ghost btn-lg" onClick={() => go({ name: 'home' })}>Volver al inicio</button>
            </div>
          </div>
        </div>
      </main>
    );
  }
  return (
    <main className="cartpage">
      <div className="wrap">
        <div className="confirm reveal in">
          <div className="confirm-ic confirm-ic-fail"><Icon name="close" size={48} /></div>
          <h1>Pago rechazado</h1>
          <p>Hubo un problema con tu pago. Puedes intentarlo de nuevo.</p>
          <div style={{ display:'flex', gap:12, justifyContent:'center', marginTop:24 }}>
            <button className="btn btn-primary btn-lg" onClick={() => go({ name: 'cart' })}>Reintentar</button>
            <button className="btn btn-ghost btn-lg" onClick={() => go({ name: 'home' })}>Ir al inicio</button>
          </div>
        </div>
      </div>
    </main>
  );
}

/* ============================================================
   SEGUIMIENTO DE PEDIDO (público — con o sin cuenta)
   ============================================================ */
function TrackingPage({ go, route }) {
  const [code, setCode] = useState((route && route.orderId) || '');
  const [order, setOrder] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [searched, setSearched] = useState(false);

  useEffect(() => {
    if (route && route.orderId) track(route.orderId);
  }, []);

  async function track(id) {
    const trackId = (id || code).trim().toUpperCase();
    if (!trackId) { setError('Ingresa el código de tu pedido'); return; }
    setLoading(true); setError(''); setSearched(true);
    try {
      const res = await fetch(`/api/public/track/${encodeURIComponent(trackId)}`);
      const data = await res.json();
      if (!res.ok) { setError(data.error || 'Pedido no encontrado'); setOrder(null); }
      else setOrder(data);
    } catch { setError('Error de conexión. Intenta nuevamente.'); }
    setLoading(false);
  }

  const STATUS_STEPS = [
    { key: 'pending',    label: 'Pedido recibido',   icon: '📋', desc: 'Hemos recibido tu pedido y lo estamos revisando.' },
    { key: 'paid',       label: 'Pago confirmado',    icon: '✅', desc: 'Tu pago fue confirmado exitosamente.' },
    { key: 'processing', label: 'Preparando',         icon: '📦', desc: 'Estamos preparando tu pedido con cuidado.' },
    { key: 'shipped',    label: 'Despachado',         icon: '🚚', desc: 'Tu pedido está en camino hacia ti.' },
    { key: 'delivered',  label: 'Entregado',          icon: '🎉', desc: '¡Tu pedido ha sido entregado!' },
  ];

  function getStepIndex(status) {
    if (status === 'cancelled') return -1;
    return STATUS_STEPS.findIndex(s => s.key === status);
  }

  const currentStep = order ? getStepIndex(order.status) : -1;

  return (
    <main className="cartpage">
      <style>{`
        .tracking-page { max-width: 680px; margin: 0 auto; }
        .tracking-search { display:flex; gap:10px; margin-bottom:32px; }
        .tracking-search input { flex:1; padding:13px 16px; border-radius:var(--r-sm); border:2px solid var(--line); font-size:15px; font-family:monospace; font-weight:600; text-transform:uppercase; letter-spacing:1px; outline:none; transition:border 0.2s; background:var(--surface); color:var(--text); }
        .tracking-search input:focus { border-color:var(--coral); }
        .tracking-search button { padding:13px 22px; border-radius:var(--r-sm); background:var(--coral); color:#fff; border:none; font-size:15px; font-weight:700; cursor:pointer; white-space:nowrap; transition:opacity 0.2s; }
        .tracking-search button:disabled { opacity:0.6; cursor:default; }
        .tracking-card { background:var(--surface); border-radius:var(--r); border:1.5px solid var(--line); padding:28px 28px 24px; margin-bottom:20px; }
        .tracking-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; gap:12px; flex-wrap:wrap; }
        .tracking-order-id { font-family:monospace; font-size:20px; font-weight:800; color:var(--coral); }
        .tracking-steps { position:relative; padding:8px 0; }
        .tracking-step { display:flex; gap:16px; padding:12px 0; position:relative; }
        .tracking-step-icon { width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; border:2.5px solid var(--line); background:var(--bg); transition:all 0.3s; z-index:1; }
        .tracking-step.done .tracking-step-icon { background:var(--teal-soft); border-color:var(--teal); }
        .tracking-step.current .tracking-step-icon { background:var(--coral-soft); border-color:var(--coral); box-shadow:0 0 0 4px var(--coral-soft); }
        .tracking-step-line { position:absolute; left:20px; top:54px; bottom:-12px; width:2px; background:var(--line); }
        .tracking-step.done .tracking-step-line { background:var(--teal); }
        .tracking-step-body { flex:1; padding-top:8px; }
        .tracking-step-label { font-weight:700; font-size:15px; color:var(--muted); }
        .tracking-step.done .tracking-step-label, .tracking-step.current .tracking-step-label { color:var(--text); }
        .tracking-step.current .tracking-step-label { color:var(--coral); }
        .tracking-step-desc { font-size:13px; color:var(--muted); margin-top:2px; }
        .tracking-step.done .tracking-step-desc, .tracking-step.current .tracking-step-desc { color:var(--text-muted); }
        .tracking-cancelled { text-align:center; padding:32px; }
        .tracking-empty { text-align:center; padding:48px 20px; color:var(--muted); }
        @media(max-width:600px) { .tracking-search { flex-direction:column; } }
      `}</style>
      <div className="wrap">
        <div className="tracking-page">
          <h1 className="page-title" style={{ marginBottom:8 }}>Seguimiento de pedido</h1>
          <p style={{ color:'var(--muted)', fontSize:14, marginBottom:24 }}>
            Ingresa el código de tu pedido (Ej: <code style={{ fontFamily:'monospace', background:'var(--surface-2)', padding:'2px 6px', borderRadius:4 }}>ORD-ABC123</code>) para ver el estado de tu entrega.
          </p>

          <div className="tracking-search">
            <input
              value={code}
              onChange={e => setCode(e.target.value.toUpperCase())}
              onKeyDown={e => { if (e.key === 'Enter') track(); }}
              placeholder="ORD-XXXXXXXX"
              disabled={loading}
            />
            <button onClick={() => track()} disabled={loading}>
              {loading ? '…' : <><Icon name="search" size={16} /> Buscar</>}
            </button>
          </div>

          {error && (
            <div style={{ background:'var(--coral-soft)', color:'var(--coral-deep)', padding:'14px 18px', borderRadius:'var(--r-sm)', marginBottom:20, fontWeight:600, fontSize:14 }}>
              ⚠️ {error}
            </div>
          )}

          {order && (
            <>
              <div className="tracking-card">
                <div className="tracking-header">
                  <div>
                    <div style={{ fontSize:12, color:'var(--muted)', marginBottom:4 }}>N° de pedido</div>
                    <div className="tracking-order-id">{order.id}</div>
                    <div style={{ fontSize:12.5, color:'var(--muted)', marginTop:4 }}>
                      {order.customer_name && <span>{order.customer_name} · </span>}
                      {new Date(order.created_at).toLocaleDateString('es-CL', { day:'numeric', month:'long', year:'numeric' })}
                    </div>
                  </div>
                  <div style={{ textAlign:'right' }}>
                    <div style={{ fontSize:13, color:'var(--muted)' }}>Total</div>
                    <div style={{ fontSize:22, fontWeight:800 }}>{window.formatCLP(order.total)}</div>
                  </div>
                </div>

                {order.status === 'cancelled' ? (
                  <div className="tracking-cancelled">
                    <div style={{ fontSize:48, marginBottom:8 }}>❌</div>
                    <div style={{ fontWeight:700, fontSize:18 }}>Pedido cancelado</div>
                    <p style={{ color:'var(--muted)', fontSize:14 }}>Este pedido fue cancelado. Contáctanos si necesitas ayuda.</p>
                  </div>
                ) : (
                  <div className="tracking-steps">
                    {STATUS_STEPS.map((s, i) => {
                      const isDone    = i < currentStep;
                      const isCurrent = i === currentStep;
                      const isLast    = i === STATUS_STEPS.length - 1;
                      return (
                        <div key={s.key} className={`tracking-step ${isDone ? 'done' : isCurrent ? 'current' : ''}`}>
                          {!isLast && <div className="tracking-step-line" />}
                          <div className="tracking-step-icon">{s.icon}</div>
                          <div className="tracking-step-body">
                            <div className="tracking-step-label">{s.label}</div>
                            {(isDone || isCurrent) && <div className="tracking-step-desc">{s.desc}</div>}
                          </div>
                        </div>
                      );
                    })}
                  </div>
                )}

                {order.tracking_code && (
                  <div style={{ marginTop:20, padding:'14px 16px', background:'var(--teal-soft)', borderRadius:'var(--r-sm)', fontSize:14 }}>
                    <div style={{ fontWeight:700, color:'var(--teal-deep)', marginBottom:4 }}>📦 Código de tracking del transportista</div>
                    <div style={{ fontFamily:'monospace', fontSize:16, fontWeight:700 }}>{order.tracking_code}</div>
                  </div>
                )}

                {order.dispatch_notes && (
                  <div style={{ marginTop:12, padding:'12px 16px', background:'var(--surface-2)', borderRadius:'var(--r-sm)', fontSize:14, color:'var(--text)' }}>
                    💬 {order.dispatch_notes}
                  </div>
                )}
              </div>

              {order.items && order.items.length > 0 && (
                <div className="tracking-card">
                  <div style={{ fontWeight:700, fontSize:15, marginBottom:14 }}>Productos de tu pedido</div>
                  <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
                    {order.items.map((it, i) => (
                      <div key={i} style={{ display:'flex', justifyContent:'space-between', alignItems:'center', fontSize:14 }}>
                        <div>
                          <div style={{ fontWeight:600 }}>{it.product_name}</div>
                          {it.product_brand && <div style={{ fontSize:12, color:'var(--muted)' }}>{it.product_brand}</div>}
                        </div>
                        <div style={{ textAlign:'right' }}>
                          <div style={{ fontWeight:700 }}>{window.formatCLP(it.price * it.qty)}</div>
                          <div style={{ fontSize:12, color:'var(--muted)' }}>Cant: {it.qty}</div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </>
          )}

          {searched && !loading && !error && !order && (
            <div className="tracking-empty">
              <div style={{ fontSize:48, marginBottom:12 }}>🔍</div>
              <div style={{ fontWeight:700, fontSize:18, marginBottom:8 }}>Pedido no encontrado</div>
              <p style={{ fontSize:14 }}>Verifica que el código sea correcto. Puedes encontrarlo en el correo de confirmación.</p>
            </div>
          )}

          <div style={{ marginTop:24, textAlign:'center', fontSize:13, color:'var(--muted)' }}>
            ¿Tienes cuenta? <button className="link-arrow" style={{ fontSize:13, background:'none', border:'none', color:'var(--coral)', cursor:'pointer', fontWeight:600 }} onClick={() => go({ name:'account' })}>Ver todos mis pedidos</button>
          </div>
        </div>
      </div>
    </main>
  );
}

Object.assign(window, { Cart, Checkout, LineImg, PaymentReturn, TrackingPage });