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

/* ── Fechas de entrega ──────────────────────────────────────────────
   Días de entrega: martes(2), jueves(4), sábado(6).
   Corte: 10:00 PM del día anterior. Tope: 2 meses a futuro. */
const DELIVERY_DOW = [2, 4, 6];
const DOW_SHORT = ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'];
const DOW_FULL  = ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'];
const MONTHS_ES = ['enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre'];

const startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
const startOfMonth = (d) => new Date(d.getFullYear(), d.getMonth(), 1);
const ymd = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
const parseYmd = (s) => { if (!s) return null; const [y, m, dd] = s.split('-').map(Number); return new Date(y, m - 1, dd); };
const isDeliveryDay = (d) => DELIVERY_DOW.includes(d.getDay());

// Primer día de entrega disponible: próximo mar/jue/sáb cuyo corte (22:00 del
// día anterior) aún no ha pasado.
function earliestDelivery(now) {
  const today = startOfDay(now);
  for (let i = 0; i < 90; i++) {
    const d = new Date(today); d.setDate(today.getDate() + i);
    if (isDeliveryDay(d)) {
      const cutoff = new Date(d); cutoff.setDate(d.getDate() - 1); cutoff.setHours(22, 0, 0, 0);
      if (now <= cutoff) return d;
    }
  }
  return today;
}
function maxDelivery(now) { const d = startOfDay(now); d.setMonth(d.getMonth() + 2); return d; }
const fmtDelivery = (d) => `${DOW_FULL[d.getDay()]} ${d.getDate()} de ${MONTHS_ES[d.getMonth()]}`;

// Calendario a medida: solo habilita días de entrega dentro del rango permitido.
function DeliveryDatePicker({ value, onChange, error }) {
  const now = React.useRef(new Date()).current;
  const max = React.useMemo(() => maxDelivery(now), []);
  const selected = parseYmd(value);
  const [open, setOpen] = React.useState(false);
  const [avail, setAvail] = React.useState(null); // { map: {ymd:{full}}, earliest }
  const wrapRef = React.useRef(null);

  // Disponibilidad real de fechas (corte configurado + cupo por día) del servidor.
  React.useEffect(() => {
    let alive = true;
    fetch('/api/settings/public').then((r) => r.json()).then((j) => {
      if (!alive || !j || !j.data) return;
      const map = {};
      (j.data.dates || []).forEach((x) => { map[x.date] = { full: !!x.full }; });
      setAvail({ map, earliest: j.data.earliest });
    }).catch(() => {});
    return () => { alive = false; };
  }, []);

  // Primera fecha disponible (servidor) o fallback local si la API no responde.
  const min = React.useMemo(
    () => (avail && avail.earliest ? parseYmd(avail.earliest) : earliestDelivery(now)),
    [avail]
  );
  const [view, setView] = React.useState(() => startOfMonth(selected || earliestDelivery(now)));

  // Al cargar la disponibilidad, si no hay fecha elegida, abrir el calendario en
  // el mes de la primera fecha disponible.
  React.useEffect(() => {
    if (avail && avail.earliest && !selected) setView(startOfMonth(parseYmd(avail.earliest)));
  }, [avail]);

  // Cerrar el calendario al hacer click fuera o con Escape (conserva la fecha).
  React.useEffect(() => {
    if (!open) return;
    const onDown = (e) => { if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false); };
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    document.addEventListener('mousedown', onDown);
    document.addEventListener('touchstart', onDown);
    document.addEventListener('keydown', onKey);
    return () => {
      document.removeEventListener('mousedown', onDown);
      document.removeEventListener('touchstart', onDown);
      document.removeEventListener('keydown', onKey);
    };
  }, [open]);

  const canPrev = startOfMonth(view) > startOfMonth(min);
  const canNext = startOfMonth(view) < startOfMonth(max);

  // Celdas del mes (lunes primero).
  const first = startOfMonth(view);
  const lead = (first.getDay() + 6) % 7; // 0 = lunes
  const daysInMonth = new Date(view.getFullYear(), view.getMonth() + 1, 0).getDate();
  const cells = [];
  for (let i = 0; i < lead; i++) cells.push(null);
  for (let day = 1; day <= daysInMonth; day++) cells.push(new Date(view.getFullYear(), view.getMonth(), day));

  const pick = (d) => { onChange(ymd(d)); setOpen(false); };

  return (
    <div className="datepick" ref={wrapRef}>
      <button type="button" className={'inp datepick-field' + (error ? ' err' : '')} onClick={() => setOpen((o) => !o)}>
        <Icon name="Clock" size={17} />
        <span className={selected ? '' : 'datepick-ph'}>{selected ? fmtDelivery(selected) : 'Elige tu fecha de entrega'}</span>
        <Icon name="ChevronDown" size={16} />
      </button>
      {open && (
        <React.Fragment>
          <div className="datepick-pop">
            <div className="datepick-head">
              <button type="button" className="datepick-nav" disabled={!canPrev}
                onClick={() => setView(new Date(view.getFullYear(), view.getMonth() - 1, 1))} aria-label="Mes anterior">‹</button>
              <span className="datepick-month">{MONTHS_ES[view.getMonth()]} {view.getFullYear()}</span>
              <button type="button" className="datepick-nav" disabled={!canNext}
                onClick={() => setView(new Date(view.getFullYear(), view.getMonth() + 1, 1))} aria-label="Mes siguiente">›</button>
            </div>
            <div className="datepick-dows">
              {['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom'].map((d, i) => <span key={i}>{d}</span>)}
            </div>
            <div className="datepick-grid">
              {cells.map((d, i) => {
                if (!d) return <span key={i} className="datepick-cell empty"></span>;
                const key = ymd(d);
                const a = avail ? avail.map[key] : undefined;
                // Con disponibilidad del servidor: solo fechas presentes y no llenas.
                // Sin ella (fallback): regla local por rango de fechas de entrega.
                const inRangeLocal = isDeliveryDay(d) && d >= min && d <= max;
                const full = avail ? !!(a && a.full) : false;
                const selectable = avail ? (!!a && !a.full) : inRangeLocal;
                const marked = avail ? !!a : inRangeLocal;
                const isSel = selected && ymd(selected) === key;
                return (
                  <button key={i} type="button" disabled={!selectable}
                    className={'datepick-cell' + (marked ? ' del' : '') + (full ? ' full' : '') + (isSel ? ' on' : '')}
                    title={full ? 'Fecha llena' : undefined}
                    onClick={() => pick(d)}>{d.getDate()}</button>
                );
              })}
            </div>
            <div className="datepick-legend"><span className="datepick-legend-dot"></span> Entrega: martes · jueves · sábado. Las fechas <s>llenas</s> no están disponibles.</div>
          </div>
        </React.Fragment>
      )}
    </div>
  );
}
window.eoEarliestDelivery = () => ymd(earliestDelivery(new Date()));

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, fecha, onEdit }) {
  const list = Object.values(items);
  const { subtotal, delivery, total } = window.computeTotals(list, city);
  const count = list.reduce((s, l) => s + l.qty, 0);
  const fechaD = parseYmd(fecha);
  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>
      {fechaD && (
        <div className="sum-delivery"><Icon name="Clock" size={15}/> Entrega: <b>{fmtDelivery(fechaD)}</b></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.slots || l.product.slots || []).map((s) => {
                const bonus = (l.swaps || []).filter((sw) => sw.target === s.id).length * ((l.despensa && l.despensa.blockSize) || 2);
                const parts = window.slotParts ? window.slotParts(s, l.config)
                  : 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 + bonus} {s.unit}:</b> {parts.join(', ') || '—'}</div>;
              })}
              {l.swaps && l.swaps.length > 0 && (
                <div className="sum-slot muted">Cambios: quitaste {l.swaps.length} de despensa → +{l.swaps.filter((sw) => sw.target === 'filetes').length * 2} filetes, +{l.swaps.filter((sw) => sw.target === 'recipientes').length * 2} recipientes</div>
              )}
              {l.product.includes && 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>
  );
}

// Zonas de entrega — para organizar y planear las rutas.
const ZONAS = ['Norte', 'Sur', 'Oriente', 'Occidente'];

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' : '',
    cedula: (data.cedula || '').replace(/\D/g, '').length < 5 ? 'Necesitamos tu cédula para la factura' : '',
    whatsapp: data.whatsapp.replace(/\D/g, '').length < 7 ? 'Necesitamos un WhatsApp válido' : '',
    zona: !data.zona ? 'Elige tu zona' : '',
    direccion: !data.direccion.trim() ? '¿A dónde lo llevamos?' : '',
    fecha: !data.fecha ? 'Elige una fecha de entrega' : '',
  };
  const valid = !errs.nombre && !errs.cedula && !errs.whatsapp && !errs.zona && !errs.direccion && !errs.fecha;

  // Preseleccionar el primer día de entrega disponible.
  React.useEffect(() => {
    if (!data.fecha) onChange({ fecha: window.eoEarliestDelivery() });
  }, []);

  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="Receipt" label="Cédula" full hint="Para la factura de tu compra" error={touched && errs.cedula}>
              <input className="inp" value={data.cedula} placeholder="Ej. 1 144 567 890" inputMode="numeric"
                onChange={(e) => onChange({ cedula: 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">
              <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="MapPin" label="Zona" hint="Nos ayuda a planear la ruta de entrega" error={touched && errs.zona}>
              <div className="select-wrap">
                <select className="inp" value={data.zona || ''} onChange={(e) => onChange({ zona: e.target.value })}>
                  <option value="" disabled>Selecciona tu zona</option>
                  {ZONAS.map((z) => <option key={z} value={z}>{z}</option>)}
                </select>
                <Icon name="ChevronDown" size={16}/>
              </div>
            </Field>

            <Field icon="Home" label="Dirección" full hint="Barrio, calle, #" error={touched && errs.direccion}>
              <input className="inp" value={data.direccion} placeholder="Ej. Cra 100 #11-60"
                onChange={(e) => onChange({ direccion: e.target.value })} />
            </Field>

            <Field icon="MapPin" label="Indicaciones" full hint="Por fa déjanos las indicaciones para que el domiciliario se ubique fácilmente (opcional)">
              <textarea className="inp area" rows={2} value={data.indicaciones || ''} placeholder="Ej. Conjunto Los Almendros, Torre 4 apto 502, portería primer piso"
                onChange={(e) => onChange({ indicaciones: e.target.value })} />
            </Field>

            <Field icon="Clock" label="Fecha de entrega" full hint="Entregamos martes, jueves y sábado" error={touched && errs.fecha}>
              <DeliveryDatePicker value={data.fecha} onChange={(v) => onChange({ fecha: v })} error={touched && !!errs.fecha} />
            </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} fecha={data.fecha} onEdit={onBack} />
    </div>
  );
}

function Confirmacion({ items, city, data, orderNo, onRestart }) {
  const list = Object.values(items);
  const { delivery, total } = window.computeTotals(list, city);
  const count = list.reduce((s, l) => s + l.qty, 0);
  // Abono del 50% que programa el pedido (redondeado a la centena más cercana).
  const abono = Math.round((total / 2) / 100) * 100;
  // orderNo puede ser UUID (de BD) o fallback local
  const displayNo = orderNo.includes('-') && orderNo.length > 10
    ? 'EO-' + orderNo.slice(0, 8).toUpperCase()
    : orderNo;

  // Abre WhatsApp de EO (Ale) con el mensaje del pedido (con el detalle completo).
  const gestionarPago = () => {
    const eoMoney = window.eoMoney;
    const lineas = list.map((l) => {
      const p = l.product;
      if (p.combo) {
        const slots = (l.slots || p.slots || []).map((s) => {
          const parts = window.slotParts(s, l.config);
          const qty = s.qty + ((l.swaps || []).filter((sw) => sw.target === s.id).length * ((l.despensa && l.despensa.blockSize) || 2));
          return `   • ${qty} ${s.unit}: ${parts.length ? parts.join(', ') : 'Sin elegir'}`;
        });
        const inc = (p.includes && p.includes.length) ? [`   • Incluye: ${p.includes.join(', ')}`] : [];
        return [`▪ ${p.name} (Combo) — ${eoMoney(p.price)}`, ...slots, ...inc].join('\n');
      }
      const mar = (p.aliño && data.marinados && data.marinados[p.id]) ? ` · ${data.marinados[p.id]}` : '';
      return `▪ ${l.qty}× ${p.name}${mar} — ${eoMoney(p.price * l.qty)}`;
    }).join('\n');

    const msg =
      `Hola Ale! 👋 He realizado el pedido de mi mercado óptimo en Espacio Ordenado 🛒🥬🥥, con Nro de Orden ${displayNo}.\n\n` +
      `🧾 Detalle del pedido:\n${lineas}\n\n` +
      `🚚 Domicilio (${city}${data.zona ? ` · Zona ${data.zona}` : ''}): ${delivery === 0 ? 'Incluido' : eoMoney(delivery)}\n` +
      `💰 Total: ${eoMoney(total)}\n` +
      `💳 Abono para programar (50%): ${eoMoney(abono)}\n\n` +
      `📝 Nota: Mi pedido quedará programado una vez haga el abono del 50%. Por favor envíame los datos de pago. 🙏`;
    window.open(`https://wa.me/573169193307?text=${encodeURIComponent(msg)}`, '_blank');
  };

  return (
    <div className="done-wrap">
      <div className="done-card pending">
        <div className="done-badge pending">
          <Icon name="Hourglass" size={42}/>
        </div>
        <div className="eyebrow center pending"><i></i> Pendiente de abono · {displayNo}</div>
        <h1 className="done-title">¡Casi listo, {data.nombre.split(' ')[0] || 'gracias'}! Falta 1 paso</h1>

        <div className="done-alert">
          <b>Tu pedido aún NO está programado.</b> Se programa apenas hagas el <b>abono del 50% ({window.eoMoney(abono)})</b> por WhatsApp. Escríbenos y te enviamos los datos de pago 👇
        </div>

        <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 abono"><span><Icon name="Receipt" size={16}/> Abono para programar (50%)</span><span className="done-abono">{window.eoMoney(abono)}</span></div>
          {data.fecha && <div className="done-row sub"><span><Icon name="Clock" size={16}/> Entrega tentativa: {fmtDelivery(parseYmd(data.fecha))}</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> Recibido</div>
          <div className="done-step amber"><span className="ds-dot amber"><Icon name="Hourglass" size={12}/></span> Abono 50%</div>
          <div className="done-step"><span className="ds-dot"></span> Programado</div>
        </div>

        <button className="btn btn-lg btn-pay" onClick={gestionarPago}>
          <Icon name="MessageCircle" size={20}/> Enviar y pagar por WhatsApp <Icon name="ArrowRight" size={18}/>
        </button>
        <button className="link-restart" onClick={onRestart}>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 });