/* panel-pedir.jsx — Solicitar domiciliario + cálculo automático de tarifa (Supabase + Mapbox) */
const { useState: pdState, useMemo: pdMemo, useEffect: pdEffect, useRef: pdRef } = React;

/* Lógica de tarifas, geocoding y zona de operación: COMPARTIDA con el
   marketplace público en lib/calc/tarifa-domicilio.js (window.TreegoTarifa).
   Aquí solo se re-nombran las referencias PD_* que usa este formulario. */
const PD_BARRIOS = TreegoTarifa.BARRIOS;
const PD_BBOX = TreegoTarifa.BBOX;
const PD_BBOX_STR = TreegoTarifa.BBOX_STR;
const PD_MAX_KM = TreegoTarifa.MAX_KM;
const PD_MIN_RELEVANCE = TreegoTarifa.MIN_RELEVANCE;
const PD_TIPOS_PRECISOS = TreegoTarifa.TIPOS_PRECISOS;

/* tipo de inmueble — más subidas/búsqueda = un poco más de tarifa */
const PD_INMUEBLES = [
  ["casa", "Casa", "home"],
  ["apto", "Apartamento", "building"],
  ["conjunto", "Conjunto cerrado", "shield"],
  ["local", "Local / oficina", "building"],
  ["edificio", "Edificio", "building"],
];

const fmtMin = (m) => `${m} min`;
const fmtKm = (k) => k.toFixed(1).replace(".", ",") + " km";

/* tarifa por distancia y techos por municipio: lib/calc/tarifa-domicilio.js */
const PD_MICRO_KM = TreegoTarifa.MICRO_KM, PD_MICRO = TreegoTarifa.MICRO;
const PD_BASE = TreegoTarifa.BASE, PD_BASE_KM = TreegoTarifa.BASE_KM, PD_KM_EXTRA = TreegoTarifa.KM_EXTRA;
const calcExtraKm = TreegoTarifa.calcExtraKm;
const calcTarifaKm = TreegoTarifa.calcTarifaKm;
const calcTarifaEspecial = TreegoTarifa.calcTarifaEspecial;
const haversineKm = TreegoTarifa.haversineKm;
const pdGeocode = TreegoTarifa.geocode;

/* metodo_pago del formulario → valor almacenado en pedidos.metodo_pago */
const PD_PAGO_DB = {
  "Efectivo": "efectivo",
  "Transferencia / Nequi": "transferencia",
  "Datáfono": "datafono",
  "Ya pagado": "pagado",
};

/* ── Mini-mapa para ajustar la ubicación a mano (pin arrastrable) ──────────
   Respaldo para zonas rurales / veredas / conjuntos sin dirección formal.
   Se abre centrado en la mejor aproximación; el usuario arrastra el pin (o
   toca el mapa) y al confirmar, esas coordenadas tienen prioridad. */
function PdPinPicker({ center, rest, onConfirm, onClose }) {
  const boxRef = pdRef(null);
  const mapRef = pdRef(null);
  const mkRef = pdRef(null);
  const [pos, setPos] = pdState({ lat: center.lat, lng: center.lng });

  pdEffect(() => {
    if (!boxRef.current || typeof mapboxgl === "undefined" || !TREEGO_CONFIG.mapboxToken) return;
    mapboxgl.accessToken = TREEGO_CONFIG.mapboxToken;
    const map = new mapboxgl.Map({
      container: boxRef.current,
      style: TREEGO_CONFIG.mapboxStyleUrl || "mapbox://styles/mapbox/streets-v12",
      center: [center.lng, center.lat],
      zoom: 16,
    });
    map.addControl(new mapboxgl.NavigationControl({ showCompass: false }), "top-right");

    /* marcador del restaurante (referencia visual del origen) */
    if (rest) {
      const rEl = document.createElement("div");
      rEl.style.cssText = "font-size:22px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));";
      rEl.textContent = "🍽️";
      rEl.title = "Restaurante";
      new mapboxgl.Marker({ element: rEl, anchor: "center" }).setLngLat([rest.lng, rest.lat]).addTo(map);
    }

    /* pin del cliente: arrastrable */
    const mk = new mapboxgl.Marker({ color: window.TREEGO_BRAND.primary, draggable: true })
      .setLngLat([center.lng, center.lat]).addTo(map);
    mk.on("dragend", () => { const ll = mk.getLngLat(); setPos({ lat: ll.lat, lng: ll.lng }); });
    map.on("click", (e) => { mk.setLngLat(e.lngLat); setPos({ lat: e.lngLat.lat, lng: e.lngLat.lng }); });

    mapRef.current = map; mkRef.current = mk;
    return () => map.remove();
  }, []); // eslint-disable-line

  const dist = rest ? haversineKm(rest, pos) : 0;
  const lejos = dist > PD_MAX_KM;

  return (
    <div className="pd-pin-overlay" onClick={onClose}>
      <div className="pd-pin-modal" onClick={(e) => e.stopPropagation()}>
        <div className="pd-pin-head">
          <b><Icon name="pin" style={{ width: 17, height: 17 }} /> Ajusta la ubicación exacta</b>
          <button type="button" className="pd-pin-x" onClick={onClose} aria-label="Cerrar"><span aria-hidden>✕</span></button>
        </div>
        <p className="muted" style={{ fontSize: 13, margin: "0 0 12px", lineHeight: 1.5 }}>
          Arrastra el pin naranja (o toca el mapa) hasta la <b style={{ color: "var(--ink)" }}>puerta exacta</b> del cliente. Ideal para veredas, conjuntos o fincas sin dirección formal.
        </p>
        <div ref={boxRef} className="pd-pin-map" />
        <div className="pd-pin-foot">
          <span className={"pd-pin-coords" + (lejos ? " lejos" : "")}>
            {rest ? (lejos ? "⚠️ " : "") + fmtKm(dist) + " del restaurante" : ""}
          </span>
          <div className="row" style={{ gap: 10 }}>
            <button type="button" className="btn btn-ghost" onClick={onClose}>Cancelar</button>
            <button type="button" className="btn btn-primary" onClick={() => onConfirm(pos.lat, pos.lng)}><Icon name="check" />Confirmar ubicación</button>
          </div>
        </div>
      </div>
    </div>
  );
}

function PedirDomiciliario({ usuario, restId, onCreated }) {
  const [form, setForm] = pdState({
    cliente: "", telefono: "", direccion: "", detalle: "",
    barrio: "", comida: "", inmueble: "", valor: "", pago: "Efectivo", notas: "",
  });
  const [sent, setSent] = pdState(null); /* {numero, tarifa, eta, pago, barrio} */
  const [busy, setBusy] = pdState(false);
  const [err, setErr] = pdState("");
  /* undefined = cargando · null = restaurante sin coordenadas · {lat,lng} = origen */
  const [restCoords, setRestCoords] = pdState(undefined);
  /* {lat, lng, km, source:'sugerencia'|'manual', relevance?, tipo?, label?} del cliente */
  const [geo, setGeo] = pdState(null);
  const [sugs, setSugs] = pdState([]);       /* sugerencias del autocompletado */
  const [sugBusy, setSugBusy] = pdState(false);
  const [sugOpen, setSugOpen] = pdState(false);
  const [picking, setPicking] = pdState(false); /* mini-mapa de ajuste manual abierto */
  const [zonaLive, setZonaLive] = pdState(null); /* zona detectada por PostGIS (incl. tarifa_especial) */
  const geoSeq = pdRef(0);
  const chosenRef = pdRef("");   /* dirección ya confirmada (sugerencia o pin): no re-buscar */
  const blurT = pdRef(null);

  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
  const setInmueble = (v) => setForm((f) => ({ ...f, inmueble: v }));

  /* origen del pedido: latitud/longitud del restaurante en Supabase */
  pdEffect(() => {
    let on = true;
    (async () => {
      if (!window.treego_db || !restId) {
        setRestCoords(S.rest && S.rest.lat != null ? { lat: S.rest.lat, lng: S.rest.lng } : null);
        return;
      }
      const { data } = await window.treego_db
        .from("restaurantes")
        .select("latitud, longitud")
        .eq("id", restId)
        .single();
      if (!on) return;
      if (data && data.latitud != null && data.longitud != null) {
        setRestCoords({ lat: Number(data.latitud), lng: Number(data.longitud) });
      } else {
        setRestCoords(null);
      }
    })();
    return () => { on = false; };
  }, [restId]);

  /* ── Autocompletado (con debounce): direccion → sugerencias ──────────────
     PASO 1-2: primero se busca en el diccionario LOCAL de conjuntos de Cajicá
     (instantáneo, sin red); si hay match fuerte se usa la coord curada y NO se
     consulta Mapbox. PASO 3: si no, Mapbox restringido al bbox. PASO 4 (la
     protección relevancia≥0.6 + tipo address/poi y el pin manual) se aplica al
     elegir/renderizar. El restaurante SIEMPRE elige de la lista (nunca se
     adivina a ciegas). Si el texto coincide con lo ya elegido, no re-busca. */
  pdEffect(() => {
    const texto = form.direccion.trim();
    if (texto && texto === chosenRef.current) { setSugs([]); setSugBusy(false); return; }
    /* el texto cambió respecto a lo confirmado → la ubicación deja de ser válida */
    setGeo(null);
    if (texto.length < 3 || !restCoords) { setSugs([]); setSugBusy(false); setSugOpen(false); return; }

    /* PASO 1-2: diccionario local curado (coincidencia difusa, en el navegador) */
    const locales = (typeof window !== "undefined" && window.TreegoConjuntos
      ? window.TreegoConjuntos.buscar(texto, 4) : []).map((c, i) => ({
        id: "conj:" + i, label: c.n + " · " + c.m, lng: c.lng, lat: c.lat,
        relevance: 1, tipo: "conjunto", curado: true, score: c.score, municipio: c.m,
      }));
    const matchFuerte = locales.length > 0 && locales[0].score >= 0.7;
    if (locales.length) { setSugs(locales); setSugOpen(true); }

    /* match fuerte en el diccionario → no gastamos llamada a Mapbox */
    if (matchFuerte) { setSugBusy(false); setSugOpen(true); return; }

    setSugBusy(true); setSugOpen(true);
    const seq = ++geoSeq.current;
    const t = setTimeout(async () => {
      try {
        const list = await pdGeocode(texto, form.barrio, restCoords, { autocomplete: true, limit: 6 });
        if (seq !== geoSeq.current) return;
        setSugs(locales.concat(list)); /* conjuntos del catálogo primero */
      } catch (e) {
        console.warn("[Treego] Autocompletado falló:", e);
        if (seq === geoSeq.current) setSugs(locales);
      } finally {
        if (seq === geoSeq.current) setSugBusy(false);
      }
    }, 350);
    return () => clearTimeout(t);
  }, [form.direccion, form.barrio, restCoords]);

  /* detección de zona en vivo (PostGIS / ST_Contains): da la tarifa especial
     fija de Hacienda Fontanar cuando el destino cae dentro de su polígono.
     Depende de coords precisas: por eso ahora se alimenta solo de una
     sugerencia elegida o del pin manual (no de un centroide adivinado). */
  pdEffect(() => {
    if (!geo || !window.treego_db) { setZonaLive(null); return; }
    let on = true;
    (async () => {
      try {
        const { data } = await window.treego_db
          .rpc("detectar_zona", { lat: geo.lat, lng: geo.lng });
        if (on) setZonaLive(data && data.length ? data[0] : null);
      } catch (e) {
        if (on) setZonaLive(null);
      }
    })();
    return () => { on = false; };
  }, [geo]);

  /* elegir una sugerencia del autocompletado → fija coords (sin re-geocodificar) */
  function elegirSugerencia(s) {
    if (blurT.current) clearTimeout(blurT.current);
    chosenRef.current = s.label;
    /* al elegir un conjunto del catálogo, autoselecciona su municipio (editable) */
    const setMuni = s.curado && s.municipio && PD_BARRIOS.indexOf(s.municipio) >= 0 ? { barrio: s.municipio } : {};
    setForm((f) => ({ ...f, direccion: s.label, ...setMuni }));
    setSugs([]); setSugOpen(false); setSugBusy(false);
    setGeo({
      lat: s.lat, lng: s.lng, km: haversineKm(restCoords, { lat: s.lat, lng: s.lng }),
      source: s.curado ? "conjunto" : "sugerencia", relevance: s.relevance, tipo: s.tipo, label: s.label,
    });
  }

  /* confirmar el pin del mini-mapa → coords manuales (máxima prioridad) */
  function confirmarPin(lat, lng) {
    const label = form.direccion.trim();
    chosenRef.current = label || "ubicación marcada en el mapa";
    setGeo({ lat, lng, km: haversineKm(restCoords, { lat, lng }), source: "manual", label });
    setSugs([]); setSugOpen(false);
    setPicking(false);
  }

  /* mejor aproximación para centrar el mini-mapa: geo actual → 1ª sugerencia → restaurante */
  const centroPin = geo
    ? { lat: geo.lat, lng: geo.lng }
    : (sugs[0] ? { lat: sugs[0].lat, lng: sugs[0].lng } : restCoords);

  const ready = form.direccion.trim() && form.barrio && form.inmueble;
  const km = geo ? geo.km : 0;
  /* distancia absurda para la zona de operación: el geocoding falló → no se
     cobra a ciegas; se obliga a ajustar el pin (salvo que ya sea manual). */
  const distanciaAbsurda = geo && geo.source !== "manual" && geo.km > PD_MAX_KM;
  /* sugerencia poco precisa (centroide de municipio/depto en vez de la puerta) */
  const geoImpreciso = geo && geo.source === "sugerencia" &&
    (geo.relevance < PD_MIN_RELEVANCE || !PD_TIPOS_PRECISOS.includes(geo.tipo));

  /* prioridad de tarifa: Fontanar (zona especial fija) > techo municipio (Chía/Zipa) > distancia */
  const fontanar = zonaLive && zonaLive.tarifa_especial != null ? Number(zonaLive.tarifa_especial) : null;
  const especial = ready && geo ? calcTarifaEspecial(form.barrio, restCoords, km) : null;
  const tarifa = ready && geo && !distanciaAbsurda
    ? (fontanar != null ? fontanar : (especial ? especial.tarifa : calcTarifaKm(km)))
    : null;
  const tier = km <= PD_MICRO_KM ? "micro" : km <= PD_BASE_KM ? "base" : "extendida";
  const extraKm = calcExtraKm(km);
  const extra = extraKm * PD_KM_EXTRA;
  const eta = pdMemo(() => (geo ? Math.min(35, Math.round(8 + km * 1.8)) : null), [geo, km]);

  const sinUbicacion = restCoords === null;

  /* redirección automática a Pedidos tras confirmar */
  pdEffect(() => {
    if (!sent || !onCreated) return;
    const t = setTimeout(() => onCreated(), 4000);
    return () => clearTimeout(t);
  }, [sent]);

  async function pedir() {
    if (busy) return;
    setErr("");
    if (!form.direccion.trim() || !form.barrio || !form.inmueble) {
      setErr("Dirección, municipio y tipo de inmueble son obligatorios.");
      return;
    }
    if (sinUbicacion) {
      setErr("Configura la ubicación de tu restaurante en Configuración antes de pedir.");
      return;
    }
    if (!window.treego_db || !restId) {
      setErr("Sin conexión con la base de datos. Intenta de nuevo.");
      return;
    }
    if (!geo) {
      setErr("Selecciona la dirección de la lista de sugerencias o ajústala en el mapa.");
      return;
    }
    if (distanciaAbsurda) {
      setErr("No pudimos calcular la ubicación con precisión. Ajusta el pin en el mapa antes de continuar.");
      return;
    }
    setBusy(true);
    const distKm = Math.round(geo.km * 100) / 100;

    /* 0. detección automática de zona/barrio por coordenadas (PostGIS).
       Define la tarifa especial fija (Hacienda Fontanar) y alimenta la analítica.
       El restaurante nunca la ve ni la elige. Si falla, el pedido se crea igual. */
    let zona = null;
    try {
      const { data: zres } = await window.treego_db
        .rpc("detectar_zona", { lat: geo.lat, lng: geo.lng });
      if (zres && zres.length) zona = zres[0];
    } catch (e) {
      console.warn("[Treego] detectar_zona falló:", e);
    }

    /* mismo cálculo que la card en vivo:
       Fontanar (zona especial fija) > techo municipio (Chía/Zipa) > distancia */
    const espEnvio = calcTarifaEspecial(form.barrio, restCoords, geo.km);
    const valorEnvio = (zona && zona.tarifa_especial != null)
      ? Number(zona.tarifa_especial)
      : (espEnvio ? espEnvio.tarifa : calcTarifaKm(geo.km));

    /* 1. dirección del cliente (destino geocodificado) */
    const { data: dir, error: dirErr } = await window.treego_db
      .from("direcciones")
      .insert({
        direccion: form.direccion.trim(),
        municipio: form.barrio,
        barrio: zona ? zona.barrio : null,
        tipo_inmueble: form.inmueble,
        detalle: form.detalle.trim() || null,
        latitud: geo.lat,
        longitud: geo.lng,
      })
      .select("id")
      .single();
    if (dirErr || !dir) {
      console.error("[Treego] Error guardando dirección:", dirErr?.message);
      setErr("No se pudo guardar la dirección. Intenta de nuevo.");
      setBusy(false);
      return;
    }

    /* 2. pedido */
    const valorPedido = Number(String(form.valor).replace(/[^\d]/g, "")) || null;
    const { data: ped, error: pedErr } = await window.treego_db
      .from("pedidos")
      .insert({
        restaurante_id: restId,
        direccion_id: dir.id,
        zona_id: zona ? zona.zona_id : null,
        nombre_cliente: form.cliente.trim() || null,
        telefono_cliente: form.telefono.trim() || null,
        valor_pedido: valorPedido,
        valor_envio: valorEnvio,
        distancia_km: distKm,
        tipo_zona: geo.km <= PD_BASE_KM ? "urbana" : "rural",
        metodo_pago: PD_PAGO_DB[form.pago] || form.pago.toLowerCase(),
        notas: form.notas.trim() || null,
        estado_actual: "creado",
        fecha_creacion: new Date().toISOString(),
      })
      .select("id")
      .single();
    if (pedErr || !ped) {
      console.error("[Treego] Error creando pedido:", pedErr?.message);
      setErr("No se pudo crear el pedido. Intenta de nuevo.");
      setBusy(false);
      return;
    }

    /* 3. evento de trazabilidad */
    const { error: evErr } = await window.treego_db
      .from("pedido_eventos")
      .insert({
        pedido_id: ped.id,
        usuario_id: usuario ? usuario.id : null,
        tipo_evento: "pedido_creado",
        fecha_evento: new Date().toISOString(),
      });
    if (evErr) console.warn("[Treego] Pedido creado pero el evento no se registró:", evErr.message);

    if (S.plan) S.plan.used += 1;
    setBusy(false);
    setSent({ numero: ped.id, tarifa: valorEnvio, eta, pago: form.pago, barrio: form.barrio });
  }

  function resetForm() {
    chosenRef.current = "";
    setSent(null); setGeo(null); setSugs([]); setSugOpen(false); setErr("");
    setForm({ cliente: "", telefono: "", direccion: "", detalle: "", barrio: "", comida: "", inmueble: "", valor: "", pago: "Efectivo", notas: "" });
  }

  if (sent) {
    return (
      <div className="fade-in pd-done-wrap">
        <div className="card card-pad pd-done">
          <span className="pd-done-ico"><Icon name="check" /></span>
          <h2>¡Domiciliario solicitado!</h2>
          <p className="muted">Tu pedido <b style={{ color: "var(--ink)" }}>#{sent.numero}</b> fue creado. Estamos asignando al repartidor disponible más cercano a <b style={{ color: "var(--ink)" }}>{sent.barrio}</b>. Te llevaremos a Pedidos en unos segundos…</p>
          <div className="pd-done-sum">
            <div><span className="muted">Número de pedido</span><b>#{sent.numero}</b></div>
            <div><span className="muted">Tarifa del domicilio</span><b>{fmtCOP(sent.tarifa)}</b></div>
            <div><span className="muted">Pago</span><b>{sent.pago}</b></div>
          </div>
          <div className="row" style={{ gap: 12, marginTop: 8 }}>
            <button className="btn btn-primary" onClick={() => onCreated && onCreated()}><Icon name="pkg" />Ver pedidos</button>
            <button className="btn btn-ghost" onClick={resetForm}><Icon name="plus" />Pedir otro</button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="fade-in">
      <div className="pd-grid">
      {/* ---- formulario ---- */}
      <div className="card card-pad">
        <h3 style={{ fontSize: 18, marginBottom: 4 }}>Datos del pedido</h3>
        <p className="muted" style={{ fontSize: 13.5, marginBottom: 20 }}>Completa la información del domicilio y calcularemos la tarifa automáticamente.</p>

        {sinUbicacion && (
          <div className="login-err"><Icon name="flag" style={{ width: 15, height: 15 }} />Configura la ubicación de tu restaurante en Configuración antes de pedir.</div>
        )}
        {err && <div className="login-err"><Icon name="flag" style={{ width: 15, height: 15 }} />{err}</div>}

        <div className="pd-section-lbl">Entrega</div>
        <div className="set-field">
          <label>Dirección de entrega *</label>
          <div className="pd-ac-wrap">
            <input
              value={form.direccion}
              onChange={set("direccion")}
              onFocus={() => { if (sugs.length) setSugOpen(true); }}
              onBlur={() => { blurT.current = setTimeout(() => setSugOpen(false), 150); }}
              placeholder="Empieza a escribir: Cra. 5 # 3-21…"
              autoComplete="off"
              role="combobox"
              aria-expanded={sugOpen}
            />
            {sugOpen && (sugBusy || sugs.length > 0) && (
              <div className="pd-ac-list" onMouseDown={(e) => e.preventDefault()}>
                {sugs.map((s) => {
                  const preciso = s.curado || (PD_TIPOS_PRECISOS.includes(s.tipo) && s.relevance >= PD_MIN_RELEVANCE);
                  return (
                    <button type="button" key={s.id || s.label} className="pd-ac-item" onClick={() => elegirSugerencia(s)}>
                      <Icon name={preciso ? "pin" : "map"} style={{ width: 16, height: 16, color: preciso ? "var(--g2)" : "var(--ink-3)" }} />
                      <span className="t">{s.label}
                        {s.curado
                          ? <em className="pd-ac-cat"> · conjunto del catálogo</em>
                          : (!preciso && <em className="pd-ac-warn"> · aproximada, ajusta el pin</em>)}
                      </span>
                    </button>
                  );
                })}
                {sugBusy && <div className="pd-ac-status">{sugs.length ? "Buscando más direcciones…" : "Buscando direcciones…"}</div>}
                {!sugBusy && sugs.length === 0 && <div className="pd-ac-status">Sin coincidencias · ajusta el pin en el mapa</div>}
              </div>
            )}
          </div>
          {/* estado de la ubicación fijada + acceso al ajuste manual */}
          {geo && !distanciaAbsurda && (
            <div className={"pd-ac-hint" + (geoImpreciso ? " warn" : " ok")}>
              <Icon name={geo.source === "manual" ? "pin" : geoImpreciso ? "flag" : "check"} style={{ width: 14, height: 14 }} />
              {geo.source === "manual"
                ? `Ubicación marcada en el mapa · ${fmtKm(geo.km)}`
                : geo.source === "conjunto"
                  ? `Conjunto del catálogo · ${fmtKm(geo.km)}`
                  : geoImpreciso
                    ? `Ubicación aproximada · conviene ajustar el pin`
                    : `Ubicación fijada · ${fmtKm(geo.km)}`}
            </div>
          )}
          {!sinUbicacion && (form.direccion.trim().length >= 3 || geo) && (
            <button type="button" className="pd-adjust-btn" onClick={() => setPicking(true)}>
              <Icon name="pin" style={{ width: 15, height: 15 }} />📍 Ajustar ubicación en el mapa
            </button>
          )}
        </div>

        <div className="row" style={{ gap: 14, alignItems: "flex-start" }}>
          <div className="set-field" style={{ flex: 1 }}>
            <label>Municipio *</label>
            <select value={form.barrio} onChange={set("barrio")}>
              <option value="" disabled>Selecciona…</option>
              {PD_BARRIOS.map((b) => <option key={b} value={b}>{b}</option>)}
            </select>
          </div>
          <div className="set-field" style={{ flex: 1 }}>
            <label>Detalle (torre, apto, piso)</label>
            <input value={form.detalle} onChange={set("detalle")} placeholder="Torre 2 · Apto 504" />
          </div>
        </div>

        <div className="set-field">
          <label>Tipo de inmueble *</label>
          <div className="pd-chips">
            {PD_INMUEBLES.map(([v, label, ic]) => (
              <button key={v} type="button" className={"pd-chip" + (form.inmueble === v ? " on" : "")} onClick={() => setInmueble(v)}>
                <Icon name={ic} />{label}
              </button>
            ))}
          </div>
        </div>

        <div className="pd-section-lbl" style={{ marginTop: 8 }}>Cliente</div>
        <div className="row" style={{ gap: 14, alignItems: "flex-start" }}>
          <div className="set-field" style={{ flex: 1 }}><label>Nombre</label><input value={form.cliente} onChange={set("cliente")} placeholder="Nombre del cliente" /></div>
          <div className="set-field" style={{ flex: 1 }}><label>Teléfono</label><input value={form.telefono} onChange={set("telefono")} placeholder="300 000 0000" inputMode="tel" /></div>
        </div>
        <div className="set-field"><label>Forma de pago</label>
          <select value={form.pago} onChange={set("pago")}>
            {["Efectivo", "Transferencia / Nequi", "Datáfono", "Ya pagado"].map((p) => <option key={p} value={p}>{p}</option>)}
          </select>
        </div>
        <div className="set-field"><label>Valor del pedido (opcional)</label><input value={form.valor} onChange={set("valor")} placeholder="$ 0" inputMode="numeric" /></div>
        <div className="set-field" style={{ marginBottom: 0 }}><label>Notas extra</label><textarea rows="3" value={form.notas} onChange={set("notas")} placeholder="Instrucciones para el repartidor: timbre dañado, dejar en portería, llamar al llegar…"></textarea></div>
      </div>

      {/* ---- resumen + tarifa ---- */}
      <div className="pd-aside">
        {/* Indicador HERO del ETA promedio: SIEMPRE visible al entrar, antes de
            llenar nada; se refina con el ETA específico al calcular la tarifa. */}
        {typeof EtaPromedio !== "undefined" && (
          <EtaPromedio variant="hero" spec={eta} />
        )}
        <div className="card pd-quote">
          <div className="pd-quote-glow"></div>
          <div className="eyebrow-s" style={{ color: "var(--g2)", position: "relative" }}>Tarifa del domicilio</div>
          {distanciaAbsurda ? (
            <div className="pd-alert">
              <span className="pd-alert-ico"><Icon name="flag" /></span>
              <p><b>No pudimos calcular la ubicación con precisión.</b> La distancia estimada ({fmtKm(km)}) está fuera de la zona de operación. Por favor ajusta el pin en el mapa.</p>
              <button type="button" className="btn btn-primary full" onClick={() => setPicking(true)}><Icon name="pin" />📍 Ajustar ubicación en el mapa</button>
            </div>
          ) : tarifa ? (
            <React.Fragment>
              <div className="pd-price">{fmtCOP(tarifa)}</div>
              <div className="pd-price-sub">Tarifa fija · pagada por el cliente</div>
              <div className="pd-break">
                {fontanar != null ? (
                  <React.Fragment>
                    <div className="between"><span className="muted">Hacienda Fontanar · tarifa especial</span><span>{fmtCOP(fontanar)}</span></div>
                    <div className="between"><span className="muted" style={{ fontSize: 12 }}>Zona fija detectada por ubicación · {fmtKm(km)}</span><span></span></div>
                  </React.Fragment>
                ) : especial ? (
                  <React.Fragment>
                    <div className="between"><span className="muted">{especial.municipio} · {especial.mitad === "entrada" ? "entrada (mitad cercana)" : "afueras (mitad alejada)"}</span><span>{fmtCOP(especial.tarifa)}</span></div>
                    <div className="between"><span className="muted" style={{ fontSize: 12 }}>Tarifa fija de zona · {fmtKm(km)}</span><span></span></div>
                  </React.Fragment>
                ) : (
                  <React.Fragment>
                    {tier === "micro" && (
                      <div className="between"><span className="muted">Micro-domicilio urbano · hasta 1,5 km</span><span>{fmtCOP(PD_MICRO)}</span></div>
                    )}
                    {tier === "base" && (
                      <div className="between"><span className="muted">Domicilio base urbano · hasta 4 km</span><span>{fmtCOP(PD_BASE)}</span></div>
                    )}
                    {tier === "extendida" && (
                      <React.Fragment>
                        <div className="between"><span className="muted">Domicilio base urbano · 4 km</span><span>{fmtCOP(PD_BASE)}</span></div>
                        <div className="between"><span className="muted">{extraKm} km extra × {fmtCOP(PD_KM_EXTRA)}</span><span>+ {fmtCOP(extra)}</span></div>
                      </React.Fragment>
                    )}
                    <div className="between"><span className="muted" style={{ fontSize: 12 }}>{form.barrio} · {fmtKm(km)}</span><span></span></div>
                  </React.Fragment>
                )}
                <div className="between pd-break-total"><b>Total domicilio</b><b>{fmtCOP(tarifa)}</b></div>
              </div>
              {geoImpreciso && (
                <div className="pd-ac-hint warn" style={{ marginBottom: 12 }}>
                  <Icon name="flag" style={{ width: 14, height: 14 }} />
                  Ubicación aproximada. <button type="button" className="pd-link" onClick={() => setPicking(true)}>Ajustar el pin</button> para cobrar la distancia exacta.
                </div>
              )}
              <div className="pd-eta"><span className="ic"><Icon name="truck" /></span><div><b>Llega en ~{fmtMin(eta)}</b><span className="muted">Repartidor disponible más cercano</span></div></div>
              <button className="btn btn-primary full" disabled={busy || sinUbicacion} onClick={pedir}><Icon name="zap" />{busy ? "Creando pedido…" : "Solicitar domiciliario"}</button>
              <div className="pd-note"><Icon name="shield" style={{ width: 13, height: 13 }} />Repartidor verificado</div>
            </React.Fragment>
          ) : (
            <div className="pd-empty">
              <span className="pd-empty-ico"><Icon name="pin" /></span>
              {sinUbicacion ? (
                <p>Configura la <b>ubicación de tu restaurante</b> en Configuración antes de pedir.</p>
              ) : sugBusy ? (
                <p>Buscando <b>direcciones</b> en la zona…</p>
              ) : form.direccion.trim().length >= 3 && !geo ? (
                <p><b>Elige la dirección</b> de la lista de sugerencias o <b>ajústala en el mapa</b>.</p>
              ) : (
                <p>Escribe la <b>dirección</b> y elígela de las sugerencias, luego completa <b>municipio</b> y <b>tipo de inmueble</b> para ver la tarifa.</p>
              )}
              <div className="pd-empty-range">Hasta 1,5 km <b>{fmtCOP(PD_MICRO)}</b> · hasta 4 km <b>{fmtCOP(PD_BASE)}</b> · luego <b>{fmtCOP(PD_KM_EXTRA)}</b>/km</div>
            </div>
          )}
        </div>

        <div className="card card-pad pd-plan">
          <div className="eyebrow-s" style={{ marginBottom: 12 }}>Tu plan</div>
          {S.plan ? (
            <React.Fragment>
              <div className="between"><span className="muted">{S.plan.name}</span><b>Domicilios ilimitados</b></div>
              <div className="muted" style={{ fontSize: 12.5, marginTop: 8 }}>{S.plan.used} pedidos este período · sin límite ni cobro extra.</div>
            </React.Fragment>
          ) : (
            <div className="muted" style={{ fontSize: 12.5 }}>Cargando plan…</div>
          )}
        </div>
      </div>
      </div>{/* /pd-grid */}

      {picking && centroPin && (
        <PdPinPicker
          center={centroPin}
          rest={restCoords}
          onConfirm={confirmarPin}
          onClose={() => setPicking(false)}
        />
      )}
    </div>
  );
}

Object.assign(window, { PedirDomiciliario });