const STEPS = [
  { n: 1, label: 'Arma tu mercado', icon: 'ShoppingBag' },
  { n: 2, label: 'Tus datos',       icon: 'User' },
  { n: 3, label: '¡Listo!',         icon: 'Check' },
];

function Stepper({ step, onGoto }) {
  return (
    <div className="stepper-band">
      <div className="stepper-band-inner">
        {STEPS.map((s, i) => {
          const state = s.n < step ? 'done' : s.n === step ? 'now' : 'todo';
          const canGo = s.n < step && step < 3;
          return (
            <React.Fragment key={s.n}>
              <button
                className={'step ' + state + (canGo ? ' clickable' : '')}
                onClick={() => canGo && onGoto(s.n)}
                disabled={!canGo}
              >
                <span className="step-dot">
                  {state === 'done' ? <Icon name="Check" size={16}/> : <span className="step-num">{s.n}</span>}
                </span>
                <span className="step-label">{s.label}</span>
              </button>
              {i < STEPS.length - 1 && <span className={'step-bar' + (s.n < step ? ' done' : '')}></span>}
            </React.Fragment>
          );
        })}
      </div>
    </div>
  );
}

/* Read-only summary of the order — shown beside the form in step 2 */
function OrderSummary({ items, city, onEdit }) {
  const list = Object.values(items);
  const { subtotal, delivery, total } = window.computeTotals(list);
  const count = list.reduce((s, l) => s + l.qty, 0);
  return (
    <aside className="cart-panel summary">
      <div className="cart-panel-head">
        <h3><Icon name="Receipt" size={20}/> Tu pedido</h3>
        <button className="mini-edit" onClick={onEdit}><Icon name="Edit" size={14}/> Editar</button>
      </div>
      <div className="cart-list">
        {list.map((l) => l.product.combo ? (
          <div className="sum-combo" key={l.product.id}>
            <div className="line tidy">
              <span className="line-qty">1×</span>
              <span className="line-name">{l.product.name}</span>
              <span className="line-price">{window.eoMoney(l.product.price)}</span>
            </div>
            <div className="sum-combo-body">
              {l.product.slots.map((s) => {
                const parts = Object.entries((l.config && l.config[s.id]) || {})
                  .map(([id, q]) => `${q}× ${(window.EO_DATA.BY_ID[id] || {}).name || id}`);
                return <div className="sum-slot" key={s.id}><b>{s.qty} {s.unit}:</b> {parts.join(', ') || '—'}</div>;
              })}
              {l.product.includes.length > 0 && <div className="sum-slot muted">+ {l.product.includes.length} productos incluidos</div>}
            </div>
          </div>
        ) : (
          <div className="line tidy" key={l.product.id}>
            <span className="line-qty">{l.qty}×</span>
            <span className="line-name">{l.product.name}</span>
            <span className="line-price">{window.eoMoney(l.product.price * l.qty)}</span>
          </div>
        ))}
      </div>
      <div className="cart-foot">
        <div className="trow"><span>Subtotal · {count} prod.</span><span>{window.eoMoney(subtotal)}</span></div>
        <div className="trow"><span>Domicilio · {city}</span><span className={delivery === 0 ? 'free' : ''}>{delivery === 0 ? 'Incluido' : window.eoMoney(delivery)}</span></div>
        <div className="trow total"><span>Total</span><span>{window.eoMoney(total)}</span></div>
      </div>
    </aside>
  );
}

function Field({ icon, label, hint, children, error, full }) {
  return (
    <label className={'field' + (error ? ' err' : '') + (full ? ' full' : '')}>
      <span className="field-label">{icon && <Icon name={icon} size={16}/>} {label}</span>
      {children}
      {error ? <span className="field-msg">{error}</span> : hint && <span className="field-hint">{hint}</span>}
    </label>
  );
}

function DatosForm({ items, city, onCityChange, data, onChange, onBack, onConfirm, submitting, submitError }) {
  const { CITIES, MARINADOS } = window.EO_DATA;
  const [touched, setTouched] = React.useState(false);
  const proteins = Object.values(items).filter((l) => l.product.aliño);

  const errs = {
    nombre: !data.nombre.trim() ? 'Cuéntanos tu nombre' : '',
    whatsapp: data.whatsapp.replace(/\D/g, '').length < 7 ? 'Necesitamos un WhatsApp válido' : '',
    direccion: !data.direccion.trim() ? '¿A dónde lo llevamos?' : '',
  };
  const valid = !errs.nombre && !errs.whatsapp && !errs.direccion;

  const submit = () => {
    setTouched(true);
    if (valid) onConfirm();
  };

  return (
    <div className="checkout">
      <div className="checkout-main">
        <div className="form-card">
          <div className="form-head">
            <h2 className="section-title">Tus datos de entrega</h2>
            <p className="section-sub">Con esto coordinamos tu domicilio. Te escribimos por WhatsApp para confirmar.</p>
          </div>

          <div className="form-grid">
            <Field icon="User" label="Nombre completo" full error={touched && errs.nombre}>
              <input className="inp" value={data.nombre} placeholder="Ej. Valentina Ríos"
                onChange={(e) => onChange({ nombre: e.target.value })} />
            </Field>

            <Field icon="Phone" label="WhatsApp" hint="Te contactamos por aquí" error={touched && errs.whatsapp}>
              <input className="inp" value={data.whatsapp} placeholder="Ej. 300 123 4567" inputMode="tel"
                onChange={(e) => onChange({ whatsapp: e.target.value })} />
            </Field>

            <Field icon="MapPin" label="Ciudad / zona">
              <div className="select-wrap">
                <select className="inp" value={city} onChange={(e) => onCityChange(e.target.value)}>
                  {CITIES.map((c) => <option key={c} value={c}>{c}</option>)}
                </select>
                <Icon name="ChevronDown" size={16}/>
              </div>
            </Field>

            <Field icon="Home" label="Dirección" full hint="Barrio, calle, # — y datos del conjunto si aplica" error={touched && errs.direccion}>
              <input className="inp" value={data.direccion} placeholder="Ej. Cra 100 #11-60, Torre 4 apto 502"
                onChange={(e) => onChange({ direccion: e.target.value })} />
            </Field>
          </div>
        </div>

        {proteins.length > 0 && (
          <div className="form-card">
            <div className="form-head">
              <h3 className="form-sub-title"><Icon name="Sparkles" size={18}/> Aliña tus proteínas</h3>
              <p className="section-sub">Opcional — elige el marinado para cada filete.</p>
            </div>
            <div className="marinados">
              {proteins.map((l) => (
                <div className="marinado-row" key={l.product.id}>
                  <span className="marinado-name">{l.product.name}</span>
                  <div className="select-wrap sm">
                    <select className="inp"
                      value={data.marinados[l.product.id] || MARINADOS[0]}
                      onChange={(e) => onChange({ marinados: { ...data.marinados, [l.product.id]: e.target.value } })}>
                      {MARINADOS.map((m) => <option key={m} value={m}>{m}</option>)}
                    </select>
                    <Icon name="ChevronDown" size={15}/>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        <div className="form-card">
          <div className="form-head">
            <h3 className="form-sub-title"><Icon name="Edit" size={17}/> Observaciones</h3>
            <p className="section-sub">¿Repetir alguna fruta o verdura? ¿Algo especial? Cuéntanos aquí.</p>
          </div>
          <textarea className="inp area" rows={3} value={data.notas} placeholder="Ej. Sin cebolla, doble porción de fresas, timbre dañado…"
            onChange={(e) => onChange({ notas: e.target.value })} />
        </div>

        <div className="checkout-actions">
          <button className="btn btn-ghost" onClick={onBack} disabled={submitting}>
            <Icon name="ArrowLeft" size={18}/> Volver al mercado
          </button>
          <button className="btn btn-primary btn-lg" onClick={submit} disabled={submitting}>
            {submitting
              ? <React.Fragment><span className="btn-spinner"/> Enviando…</React.Fragment>
              : <React.Fragment><Icon name="MessageCircle" size={20}/> Confirmar pedido</React.Fragment>
            }
          </button>
        </div>
        {touched && !valid && <p className="form-error-hint">Revisa los campos marcados para continuar.</p>}
        {submitError && <p className="form-error-hint" style={{color:'var(--err)'}}>{submitError}</p>}
      </div>

      <OrderSummary items={items} city={city} onEdit={onBack} />
    </div>
  );
}

function Confirmacion({ items, city, data, orderNo, onRestart }) {
  const list = Object.values(items);
  const { total } = window.computeTotals(list);
  const count = list.reduce((s, l) => s + l.qty, 0);
  // orderNo puede ser UUID (de BD) o fallback local
  const displayNo = orderNo.includes('-') && orderNo.length > 10
    ? 'EO-' + orderNo.slice(0, 8).toUpperCase()
    : orderNo;
  return (
    <div className="done-wrap">
      <div className="done-card">
        <div className="done-badge">
          <Icon name="ChefHat" size={44}/>
        </div>
        <div className="eyebrow center">Pedido confirmado · {displayNo}</div>
        <h1 className="done-title">¡Holii, {data.nombre.split(' ')[0] || 'gracias'}! Manos a la obra 🧺</h1>
        <p className="done-msg">
          <b>Iniciamos la preparación de tu pedido.</b> Lo lavamos, porcionamos y organizamos para ti.
          En un momento <b>te contactaremos por WhatsApp</b> al <b>{data.whatsapp}</b> para coordinar la
          entrega en <b>{city}</b>.
        </p>

        <div className="done-summary">
          <div className="done-row"><span><Icon name="ShoppingBag" size={16}/> {count} {count === 1 ? 'producto' : 'productos'}</span><span className="done-total">{window.eoMoney(total)}</span></div>
          <div className="done-row sub"><span><Icon name="Home" size={16}/> {data.direccion}</span></div>
          <div className="done-row sub"><span><Icon name="MessageCircle" size={16}/> Te escribimos al {data.whatsapp}</span></div>
        </div>

        <div className="done-steps">
          <div className="done-step on"><span className="ds-dot"><Icon name="Check" size={14}/></span> Pedido recibido</div>
          <div className="done-step on"><span className="ds-dot"><Icon name="ChefHat" size={13}/></span> En preparación</div>
          <div className="done-step"><span className="ds-dot"><Icon name="MessageCircle" size={13}/></span> Te contactamos por WZ</div>
          <div className="done-step"><span className="ds-dot"><Icon name="Truck" size={13}/></span> En camino</div>
        </div>

        <button className="btn btn-secondary btn-lg" onClick={onRestart}>
          <Icon name="Plus" size={18}/> Hacer otro pedido
        </button>
        <div className="eyebrow center muted">Limpio<i></i>Fresco<i></i>Natural<i></i>Organizado</div>
      </div>
    </div>
  );
}

Object.assign(window, { Stepper, DatosForm, Confirmacion, OrderSummary });