/* panel-views.jsx — componentes compartidos + Dashboard · Pedidos · Mis Repartidores */
const { useState: pUseState, useEffect: pUseEffect } = React;

/* Iconos de etapa del timeline (/assets/tracking/opt/, pre-optimizados).
   Se activan con window.TREEGO_TRACKING_ICONS = true (hoy solo en
   test-tracking.html). "Entregado" (índice 4) conserva el check por defecto. */
const TL_USE_ICONS = typeof TREEGO_TRACKING_ICONS !== 'undefined' && TREEGO_TRACKING_ICONS;
const TL_ICONS = [
  '/assets/tracking/opt/etapa-camino-restaurante.png',
  '/assets/tracking/opt/etapa-en-restaurante.png',
  '/assets/tracking/opt/etapa-recogio-pedido.png',
  '/assets/tracking/opt/etapa-camino-cliente.png',
  null, /* Entregado → icono por defecto */
];

/* ---------- compartidos ---------- */
function StageBadge({ stage }) {
  if (stage >= 4) return <span className="pill pill-ok"><Icon name="check" style={{ width: 12, height: 12 }} />Entregado</span>;
  return <span className="pill pill-brand"><span style={{ width: 7, height: 7, borderRadius: 9, background: "var(--g2)" }}></span>{STAGES[stage]}</span>;
}

function MiniStages({ stage }) {
  return (
    <div className="mini-stages">
      {[0, 1, 2, 3, 4].map((i) => (
        <span key={i} className={"ms" + (i < stage ? " done" : i === stage ? " cur" : "")}></span>
      ))}
    </div>
  );
}

function OrderCard({ o, selected, onClick }) {
  const d = DRIVERS.find((x) => x.name === o.driver);
  return (
    <div className={"ocard" + (selected ? " sel" : "")} onClick={onClick}>
      <div className="oh">
        <span className="oid">#{o.id}</span>
        <div>
          <div className="oclient">{o.client}</div>
          <div className="ozone">{o.zone}</div>
        </div>
        <div className="ostage"><StageBadge stage={o.stage} /></div>
      </div>
      <MiniStages stage={o.stage} />
      <div className="ometa">
        <span className="dvr"><span className="av"><Avatar name={o.driver} /></span>{o.driver.split(" ")[0]}</span>
        <span>·</span>
        <span>{o.stage >= 4 ? "Entregado" : `Llega en ${o.eta} min`}</span>
        <span style={{ marginLeft: "auto", fontWeight: 600, color: "var(--ink)" }}>{fmtCOP(o.total)}</span>
      </div>
    </div>
  );
}

function TrackingDetail({ order }) {
  const mapApi = React.useRef(null);   /* API imperativa del MapboxMap */
  const simRef = React.useRef(null);   /* simulador activo (null en producción) */
  const [liveStage, setLiveStage]   = pUseState(0);   /* etapa actual (0-4) */
  const [stageTimes, setStageTimes] = pUseState({});  /* hora real de cada etapa */
  const [posVivo, setPosVivo]       = pUseState(null); /* última posición real del repartidor */

  /* ══ API lista para producción ══════════════════════════════════
     Único punto de entrada de datos del tracking. Hoy las llama el
     simulador (tracking-sim.js); en producción las llaman los eventos
     reales: repartidor_tracking → updateDriverLocation, y
     pedido_eventos → updateTimelineStatus. Nada más cambia. */
  const updateDriverLocation = (lat, lng) => {
    if (mapApi.current) mapApi.current.updateDriverLocation(lat, lng);
    if (lat != null && lng != null) setPosVivo({ lat: Number(lat), lng: Number(lng) });
  };
  const updateTimelineStatus = (statusId) => {
    const t = new Date().toLocaleTimeString('es-CO', { hour: 'numeric', minute: '2-digit' });
    setLiveStage(statusId);
    /* Al reiniciar el ciclo (etapa 0) se limpian las horas registradas */
    setStageTimes((prev) =>
      statusId === 0 ? { 0: t } : prev[statusId] ? prev : { ...prev, [statusId]: t }
    );
  };

  /* Coordenadas reales del viaje (vienen del pedido en la BD) */
  const origen   = order && order.origen;
  const destino  = order && order.destino;
  const realTrip = !!(origen && origen.lat != null && destino && destino.lat != null);
  /* Punto de partida de la moto para la etapa "Asignado" (leg A / línea azul).
     En producción es la primera fila de repartidor_tracking; en este fallback
     se usa la coordenada real del pedido de prueba (order.trip.moto) o, si no
     existe, un punto cercano al restaurante. Antes era el propio restaurante,
     lo que dejaba el leg A en longitud cero (velocímetro congelado y sin
     rotación); ahora el trayecto azul es real, fluido y con velocidad. */
  const tripMoto = order && order.trip && order.trip.moto;
  const motoInicio = realTrip
    ? (tripMoto && tripMoto.lat != null &&
       (tripMoto.lat !== origen.lat || tripMoto.lng !== origen.lng)
        ? { lat: Number(tripMoto.lat), lng: Number(tripMoto.lng) }
        : { lat: origen.lat + 0.004, lng: origen.lng - 0.003 })
    : undefined;

  const apagarSim = () => {
    if (simRef.current) {
      simRef.current.destroy();
      simRef.current = null;
    }
  };

  /* ── Simulador local: SOLO fallback visual mientras no llegan
        datos reales; con el primer evento/posición real se apaga ── */
  pUseEffect(() => {
    if (!order || typeof createTrackingSimulation === 'undefined') return;
    const sim = createTrackingSimulation({
      /* con coordenadas reales, el fallback recorre el viaje real */
      coords: realTrip
        ? { motoStart: motoInicio, restaurante: origen, cliente: destino }
        : undefined,
      /* leg A ya es un trayecto real → duración normal (no el atajo de 3 s) */
      timing: undefined,
      onLocation: updateDriverLocation,
      onStatus:   updateTimelineStatus,
      onRoute:    (legA, legB) => mapApi.current && mapApi.current.setRouteLine(legA, legB),
    });
    simRef.current = sim;
    sim.start();
    return () => {
      sim.destroy();
      simRef.current = null;
    };
  }, [order ? order.dbId || order.id : null]); // eslint-disable-line

  /* ── Supabase Realtime (producción): ubicaciones + etapas ─────
     repartidor_tracking (= ubicaciones) → updateDriverLocation
     pedido_eventos      (= etapas)      → updateTimelineStatus  */
  const EVENTO_STAGE = {
    pedido_creado: 0, repartidor_asignado: 0, llego_restaurante: 1,
    pedido_recogido: 2, en_camino: 3, entregado: 4,
  };
  pUseEffect(() => {
    if (!order || !window.treego_db) return;
    const pedidoId = order.dbId || order.id;

    const channel = window.treego_db
      .channel(`tracking-pedido-${pedidoId}`)
      .on(
        'postgres_changes',
        {
          event:  'INSERT',          /* cada INSERT en repartidor_tracking */
          schema: 'public',
          table:  'repartidor_tracking',
          filter: `pedido_id=eq.${pedidoId}`,
        },
        (payload) => {
          const { latitud, longitud } = payload.new;
          if (latitud != null && longitud != null) {
            apagarSim(); /* datos reales: el simulador se apaga */
            updateDriverLocation(Number(latitud), Number(longitud));
          }
        }
      )
      .on(
        'postgres_changes',
        {
          event:  'INSERT',          /* cada etapa nueva en pedido_eventos */
          schema: 'public',
          table:  'pedido_eventos',
          filter: `pedido_id=eq.${pedidoId}`,
        },
        (payload) => {
          const st = EVENTO_STAGE[payload.new.tipo_evento];
          if (st != null) {
            apagarSim();
            updateTimelineStatus(st);
          }
        }
      )
      .subscribe((status) => {
        if (status === 'SUBSCRIBED') {
          console.info(`[Treego] Realtime activo para pedido #${order.id} (ubicaciones + etapas)`);
        }
      });

    /* Cleanup: desuscribir al cambiar de pedido o al desmontar */
    return () => {
      window.treego_db.removeChannel(channel);
    };
  }, [order ? order.dbId || order.id : null]); // eslint-disable-line

  /* Retorno nulo va después de los hooks (regla de hooks) */
  if (!order) return null;

  /* ETA honesto: con el pedido ya en camino (etapa 3), el mejor estimado es el
     tramo restante desde la posición real → cliente. Se compara con el ETA
     prometido (order.eta, en minutos) y, si se superó por > umbral, se muestra
     una nota neutra y veraz. TreegoEta viene de lib/calc/eta-mensaje.js. */
  let etaInfo = { minutos: order.eta, retrasado: false, aviso: null };
  if (window.TreegoEta) {
    const etaActualSeg = (posVivo && liveStage === 3 && destino && destino.lat != null)
      ? window.TreegoEta.etaRestanteSeg(posVivo.lat, posVivo.lng, destino.lat, destino.lng)
      : null;
    const origSeg = order.eta != null ? order.eta * 60 : null;
    const m = window.TreegoEta.mensajeEta(origSeg, etaActualSeg);
    etaInfo = { minutos: m.minutos != null ? m.minutos : order.eta, retrasado: m.retrasado, aviso: m.aviso };
  }

  return (
    <div>
      {/* ── Mapa Mapbox controlado por ref (realtime o fallback) ── */}
      <MapboxMap
        key={order.dbId || order.id}
        ref={mapApi}
        stage={liveStage}
        orderId={order.id}
        pedidoId={order.dbId}
        repartidorId={order.repartidorId}
        zone={order.zone}
        trip={realTrip ? { moto: motoInicio, rest: origen, cli: destino } : undefined}
      />

      {/* ── Info del repartidor y ETA ── */}
      <div className="between" style={{ margin: "18px 2px 6px" }}>
        <div className="row">
          <span className="av" style={{ width: 34, height: 34, borderRadius: "50%", overflow: "hidden", display: "block" }}>
            <Avatar name={order.driver} />
          </span>
          <div>
            <div style={{ fontWeight: 600, fontSize: 14 }}>{order.driver}</div>
            <div className="muted" style={{ fontSize: 12 }}>
              Pedido #{order.id}{order.items ? ` · ${order.items} ítems` : ""}
              {!window.treego_db && (
                <span style={{ marginLeft: 6, color: "var(--amber)", fontSize: 11 }}>· demo</span>
              )}
            </div>
          </div>
        </div>
        <div style={{ textAlign: "right" }}>
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 20, color: "var(--g1)" }}>
            {liveStage >= 4 ? "—" : (etaInfo.minutos != null ? etaInfo.minutos : order.eta) + " min"}
          </div>
          <div className="muted" style={{ fontSize: 11 }}>
            {liveStage >= 4 ? "Entregado" : "ETA cliente"}
          </div>
        </div>
      </div>

      {/* Aviso HONESTO de ETA actualizado (solo panel del restaurante): cuando el
          repartidor ya lleva el pedido y el estimado real supera al prometido, se
          informa el nuevo ETA de forma neutra y veraz, sin inventar causas. */}
      {etaInfo.retrasado && liveStage < 4 && (
        <div style={{ display: "flex", alignItems: "center", gap: 8, background: "var(--bg-2)", border: "1px solid var(--line)", borderRadius: 12, padding: "9px 12px", margin: "2px 2px 0", fontSize: 12.5, color: "var(--ink-2)" }}>
          <Icon name="clock" style={{ width: 14, height: 14, flexShrink: 0 }} />
          <span>{etaInfo.aviso}</span>
        </div>
      )}

      {/* ── Línea de tiempo de etapas (sincronizada con el mapa) ── */}
      <div className={"vstages" + (TL_USE_ICONS ? " vpic" : "")}>
        {STAGES.map((s, i) => (
          <div key={s} className={"vstage" + (i < liveStage ? " done" : i === liveStage ? " cur" : "")}>
            <span className="vr">
              {i < liveStage
                ? <Icon name="check" /> /* completada → círculo naranja + check */
                : TL_USE_ICONS && TL_ICONS[i]
                  ? <img loading="lazy" src={TL_ICONS[i]} alt={s} />
                  : <Icon name={STAGE_ICONS[i]} />}
            </span>
            <span className="vln"></span>
            <span className="vl">{s}</span>
            <span className="vt">{stageTimes[i] || "—"}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------- DASHBOARD ---------- */
function Dashboard({ orders, deliveredToday, fines, selId, setSel, fineOpen, setFineOpen }) {
  const sel = orders.find((o) => o.id === selId) || orders[0];
  const done = deliveredToday || [];
  const finesReal = fines || [];
  const arrivals = done.map((d) => d.arrival).filter((n) => typeof n === "number");
  const avgArr = arrivals.length ? Math.round(arrivals.reduce((a, b) => a + b, 0) / arrivals.length) : null;
  const kpis = [
    ["pkg", String(orders.length + done.length), "Pedidos hoy", "", ""],
    ["truck", String(orders.filter((o) => o.stage < 4).length), "En curso ahora", "", ""],
    ["check", String(done.length), "Entregados hoy", "", ""],
    ["clock", avgArr != null ? avgArr + " min" : "—", "Llegada promedio", "", ""],
    ["chart", String(S.plan.used || 0), "Pedidos del mes", "", ""],
  ];
  return (
    <div className="fade-in">
      {/* ETA promedio de llegada en vivo — siempre visible en el dashboard */}
      {typeof EtaPromedio !== "undefined" && (
        <div style={{ marginBottom: 18 }}><EtaPromedio variant="restaurante" /></div>
      )}
      {fineOpen && finesReal.length > 0 && (
        <div className="malert">
          <span className="ico"><Icon name="flag" /></span>
          <div>
            <h4>Multa aplicada · Pedido #{finesReal[0].id}</h4>
            <p>El repartidor {finesReal[0].driver} esperó {finesReal[0].waited} min. {finesReal[0].minutes} min de multa × {fmtCOP(S.plan.perMinute)} = <b style={{ color: "var(--ink)" }}>{fmtCOP(finesReal[0].minutes * S.plan.perMinute)}</b> ({finesReal[0].date}).</p>
          </div>
          <button className="x" onClick={() => setFineOpen(false)}>✕</button>
        </div>
      )}
      <div className="kpis">
        {kpis.map(([ic, n, l, d, dir]) => (
          <div className="kpi" key={l}>
            <div className="top"><span className="ic"><Icon name={ic} /></span>{d && <span className={"delta " + dir}>{d}</span>}</div>
            <div className="n">{n}</div>
            <div className="l">{l}</div>
          </div>
        ))}
      </div>
      <div className="dash">
        <div>
          <div className="sec-title"><h3>Pedidos en curso</h3><span className="muted" style={{ fontSize: 13 }}>{orders.filter((o) => o.stage < 4).length} activos</span></div>
          <div className="olist">
            {orders.map((o) => <OrderCard key={o.id} o={o} selected={sel && o.id === sel.id} onClick={() => setSel(o.id)} />)}
            {orders.length === 0 && <div className="card card-pad" style={{ textAlign: "center", color: "var(--ink-3)" }}>Aún no tienes pedidos en curso.</div>}
          </div>
        </div>
        <div className="track">
          <div className="card card-pad" style={{ marginBottom: 20 }}>
            <div className="between" style={{ marginBottom: 14 }}><h3 style={{ fontSize: 17 }}>Seguimiento en vivo</h3>{sel && <span className="pill pill-brand">#{sel.id}</span>}</div>
            {sel ? <TrackingDetail order={sel} /> : <p className="muted" style={{ margin: 0 }}>Cuando tengas un pedido activo verás aquí su seguimiento en vivo.</p>}
          </div>
          <div className="card card-pad">
            <div className="eyebrow-s" style={{ marginBottom: 14 }}>Tu plan · {S.plan.name}</div>
            <div className="usage">
              <div className="ud">
                <b>Domicilios ilimitados</b>
                <div style={{ fontSize: 13, marginTop: 2 }}><span className="muted">{S.plan.used || 0} pedidos en el período actual.</span></div>
                <p>Se renueva el {S.plan.renew}. Tolerancia de espera: {S.plan.tolerance} min · Costo por minuto: {fmtCOP(S.plan.perMinute)}.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- Modal de cancelación de pedido (Bloque 3) ---------- */
function CancelarPedidoModal({ pedido, onClose, onDone }) {
  const [motivo, setMotivo] = pUseState(MOTIVOS_CANCELACION[0]);
  const [detalle, setDetalle] = pUseState("");
  const [busy, setBusy] = pUseState(false);
  const [err, setErr] = pUseState("");
  const [ok, setOk] = pUseState(false);

  async function confirmar() {
    if (busy) return;
    const texto = motivo === "Otro" ? detalle.trim() : motivo + (detalle.trim() ? " · " + detalle.trim() : "");
    if (!texto) { setErr("Describe brevemente el motivo."); return; }
    setBusy(true); setErr("");
    const r = await window.cancelarPedido(pedido.dbId, texto);
    setBusy(false);
    if (!r.ok) { setErr(r.motivo); return; }
    setOk(true); onDone && onDone();
  }

  return (
    <React.Fragment>
      <div className="drawer-bg" onClick={onClose}></div>
      <div className="an-modal tk-modal">
        <button className="dx" onClick={onClose}><Icon name="plus" style={{ transform: "rotate(45deg)" }} /></button>
        <div className="tk-head">
          <span className="tk-ic"><Icon name="flag" /></span>
          <div><h2>Cancelar pedido #{pedido.id}</h2><div className="tk-sub">Solo es posible antes de que el repartidor recoja el pedido</div></div>
        </div>
        {ok ? (
          <div className="tk-ok">
            <p>El pedido fue cancelado. Si tenía repartidor asignado, ya recibió la notificación.</p>
            <button className="btn btn-primary full" onClick={onClose}>Listo</button>
          </div>
        ) : (
          <React.Fragment>
            <div className="tk-body">
              {err && <p style={{ color: "var(--red)", fontSize: 13.5, margin: "0 0 14px" }}>{err}</p>}
              <div className="tk-grp">
                <span className="tk-lbl">Motivo</span>
                <select className="tk-select" value={motivo} onChange={(e) => setMotivo(e.target.value)}>
                  {MOTIVOS_CANCELACION.map((m) => <option key={m} value={m}>{m}</option>)}
                </select>
              </div>
              <div className="tk-grp">
                <span className="tk-lbl">{motivo === "Otro" ? "Describe el motivo *" : "Detalle (opcional)"}</span>
                <textarea className="tk-select" rows="2" value={detalle} onChange={(e) => setDetalle(e.target.value)} placeholder="Ej. el cliente pidió cambiar la dirección…"></textarea>
              </div>
            </div>
            <div className="tk-foot">
              <button className="btn btn-primary full" disabled={busy} onClick={confirmar} style={{ background: "var(--red)", borderColor: "var(--red)" }}>
                <Icon name="flag" />{busy ? "Cancelando…" : "Confirmar cancelación"}
              </button>
              <button className="tk-cancel" disabled={busy} onClick={onClose}>Volver</button>
            </div>
          </React.Fragment>
        )}
      </div>
    </React.Fragment>
  );
}

/* ---------- Card "pendiente de calificar" (Bloque 1) ---------- */
function PorCalificarCard({ p, onCalificar }) {
  const fecha = new Date(p.fecha_cierre || p.fecha_creacion).toLocaleDateString("es-CO", { day: "numeric", month: "short" });
  const repNombre = p.repartidores ? p.repartidores.nombre_completo : "—";
  const [enviandoEnc, setEnviandoEnc] = pUseState(false);
  async function compartirEncuesta() {
    if (enviandoEnc) return;
    setEnviandoEnc(true);
    const enc = await window.cargarEncuestaCliente(p.id);
    setEnviandoEnc(false);
    if (!enc || enc.estado !== "pendiente") { alert(enc ? "La encuesta del cliente ya fue " + (enc.estado === "respondida" ? "respondida." : "cerrada (expiró a las 24 h).") : "Este pedido aún no tiene encuesta de cliente."); return; }
    window.open(window.linkWhatsAppEncuesta(enc.telefono, enc.token), "_blank");
  }
  return (
    <div className="card card-pad" style={{ display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap" }}>
      <span className="ic" style={{ display: "grid", placeItems: "center", width: 38, height: 38, borderRadius: 10, background: "var(--panel-2)", color: "var(--g2)" }}><Icon name="star" /></span>
      <div style={{ flex: 1, minWidth: 180 }}>
        <b>#{p.codigo_restaurante || p.id} · {p.nombre_cliente}</b>
        <div className="muted" style={{ fontSize: 12.5, marginTop: 2 }}>Entregado el {fecha} por {repNombre}</div>
      </div>
      <span className="pill pill-warn">Pendiente de calificar</span>
      <div className="row" style={{ gap: 8 }}>
        <button className="btn btn-ghost" style={{ padding: "8px 12px", fontSize: 12.5 }} disabled={enviandoEnc} onClick={compartirEncuesta}>
          <Icon name="user" style={{ width: 14, height: 14 }} />{enviandoEnc ? "Cargando…" : "Encuesta al cliente"}
        </button>
        <button className="btn btn-primary" style={{ padding: "8px 14px" }} onClick={() => onCalificar(p)}>
          <Icon name="star" style={{ width: 14, height: 14 }} />Calificar
        </button>
      </div>
    </div>
  );
}

/* ---------- PEDIDOS ---------- */
function Pedidos({ orders, deliveredToday, setSel, openDetail }) {
  const [tab, setTab] = pUseState("activos");
  const [porCalificar, setPorCalificar] = pUseState([]);
  const [misCalifs, setMisCalifs] = pUseState([]);
  const [calificarPedido, setCalificarPedido] = pUseState(null);
  const [cancelarPed, setCancelarPed] = pUseState(null);
  const active = orders.filter(o => o.stage < 4);
  const done   = deliveredToday || [];
  const rows   = tab === "activos" ? active : done;

  const recargarCalifs = () => {
    if (!window.treego_db) return;
    window.cargarPedidosSinCalificar().then(setPorCalificar);
    window.cargarMisCalificaciones().then(setMisCalifs);
  };
  pUseEffect(recargarCalifs, [deliveredToday.length]);

  const CalifModal = window.CalificarModal;
  return (
    <div className="fade-in">
      <div className="tabs">
        <button className={tab === "activos" ? "on" : ""} onClick={() => setTab("activos")}>
          Activos<span className="c">{active.length}</span>
        </button>
        <button className={tab === "entregados" ? "on" : ""} onClick={() => setTab("entregados")}>
          Entregados hoy<span className="c">{done.length}</span>
        </button>
        <button className={tab === "calificar" ? "on" : ""} onClick={() => setTab("calificar")}>
          Por calificar<span className="c">{porCalificar.length}</span>
        </button>
        <button className={tab === "calificaciones" ? "on" : ""} onClick={() => setTab("calificaciones")}>
          Calificaciones<span className="c">{misCalifs.length}</span>
        </button>
      </div>
      {tab === "calificar" && (
        <div style={{ display: "grid", gap: 12 }}>
          {porCalificar.length === 0 && (
            <div className="card card-pad" style={{ textAlign: "center", color: "var(--ink-3)" }}>No tienes entregas pendientes de calificar. ¡Estás al día!</div>
          )}
          {porCalificar.map((p) => <PorCalificarCard key={p.id} p={p} onCalificar={setCalificarPedido} />)}
        </div>
      )}
      {tab === "calificaciones" && (
        <div className="card" style={{ overflow: "hidden" }}>
          <table className="tbl">
            <thead><tr><th>Fecha</th><th>Pedido</th><th>Repartidor</th><th>Calificación</th><th>Comentario</th></tr></thead>
            <tbody>
              {misCalifs.length === 0 && (
                <tr><td colSpan={5} style={{ textAlign: "center", color: "var(--ink-3)", padding: 32 }}>Aún no has calificado ningún pedido</td></tr>
              )}
              {misCalifs.map((c) => (
                <tr key={c.id}>
                  <td className="muted">{new Date(c.fecha).toLocaleDateString("es-CO", { day: "numeric", month: "short" })}</td>
                  <td className="id">#{c.pedidos ? (c.pedidos.codigo_restaurante || c.pedido_id) : c.pedido_id}</td>
                  <td>{c.repartidores ? c.repartidores.nombre_completo : "—"}</td>
                  <td>
                    <span style={{ display: "inline-flex", gap: 2 }}>
                      {[1, 2, 3, 4, 5].map((n) => (
                        <Icon key={n} name="star" style={{ width: 15, height: 15, color: n <= c.puntuacion ? "var(--g2)" : "var(--line-2)" }} />
                      ))}
                    </span>
                  </td>
                  <td className="muted" style={{ maxWidth: 260, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{c.comentario || "—"}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
      {calificarPedido && CalifModal && (
        <CalifModal pedido={calificarPedido} onClose={() => setCalificarPedido(null)} onCreated={recargarCalifs} />
      )}
      {(tab === "activos" || tab === "entregados") && (
      <div className="card" style={{overflow:"hidden"}}>
        <table className="tbl">
          <thead><tr><th>Pedido</th><th>Cliente</th><th>Zona</th><th>Repartidor</th><th>Estado</th><th style={{textAlign:"right"}}>Valor</th>{tab === "activos" && <th></th>}</tr></thead>
          <tbody>
            {rows.map(o => {
              const cancelable = tab === "activos" && (ESTADOS_CANCELABLES || []).includes(o.estado);
              return (
              <tr key={o.id} style={{cursor:"pointer"}} onClick={() => openDetail(o.id)}>
                <td className="id">#{o.id}
                  <div className="muted" style={{fontSize:11.5,marginTop:3}}>{o.time}</div>
                  {/* origen del pedido: en línea (marketplace) o cargado por el restaurante */}
                  <span className={"pill " + (o.esMarketplace ? "pill-brand" : "pill-mut")}
                    style={{fontSize:10,padding:"2px 8px",marginTop:4}}>
                    {o.esMarketplace ? "Marketplace" : "Directo"}
                  </span>
                </td>
                <td><b>{o.client}</b></td>
                <td className="muted">{o.zone}</td>
                <td><div className="dvrcell"><span className="av"><Avatar name={o.driver} /></span>{o.driver.split(" ")[0]}</div></td>
                <td>{tab === "activos"
                  ? <StageBadge stage={o.stage} />
                  : <span className="pill pill-ok"><Icon name="check" style={{width:12,height:12}} />{o.arrival} min</span>}
                </td>
                <td style={{textAlign:"right",fontWeight:600}}>{fmtCOP(o.total)}</td>
                {tab === "activos" && (
                  <td style={{textAlign:"right", whiteSpace:"nowrap"}}>
                    {/* F2 p50: compartir el link de rastreo en vivo con el cliente */}
                    <button className="btn btn-ghost"
                      title="Enviar al cliente el link de rastreo en vivo por WhatsApp"
                      style={{padding:"6px 10px",fontSize:12.5,marginRight:6}}
                      onClick={async (e) => {
                        e.stopPropagation();
                        const tok = await window.cargarRastreoPedido(o.dbId);
                        if (!tok) { alert("Este pedido aún no tiene link de rastreo."); return; }
                        window.open(window.linkWhatsAppRastreo(o.telefono, tok, o.id), "_blank");
                      }}>
                      <Icon name="pin" style={{width:14,height:14}} />Rastreo
                    </button>
                    <button className="btn btn-ghost" disabled={!cancelable}
                      title={cancelable ? "Cancelar este pedido" : "Ya no se puede cancelar: el repartidor recogió el pedido"}
                      style={{padding:"6px 10px",fontSize:12.5,color:cancelable?"var(--red)":"var(--ink-3)",opacity:cancelable?1:.55,cursor:cancelable?"pointer":"not-allowed"}}
                      onClick={(e) => { e.stopPropagation(); if (cancelable) setCancelarPed(o); }}>
                      <Icon name="flag" style={{width:14,height:14}} />Cancelar
                    </button>
                  </td>
                )}
              </tr>
              );
            })}
            {rows.length === 0 && (
              <tr><td colSpan={7} style={{textAlign:'center',color:'var(--ink-3)',padding:32}}>
                Sin pedidos por ahora
              </td></tr>
            )}
          </tbody>
        </table>
      </div>
      )}
      {cancelarPed && <CancelarPedidoModal pedido={cancelarPed} onClose={() => setCancelarPed(null)} onDone={() => {}} />}
    </div>
  );
}

/* ---------- MIS REPARTIDORES ---------- */
function Repartidores({ drivers, onOpen }) {
  const list = drivers || [];
  if (list.length === 0) {
    return (
      <div className="fade-in" style={{textAlign:'center',padding:64,color:'var(--ink-3)'}}>
        Sin repartidores registrados
      </div>
    );
  }
  return (
    <div className="fade-in">
      <div className="dgrid">
        {list.map(d => (
          <div className="dcard" key={d.name} onClick={() => onOpen(d.name)}>
            <div className="dtop">
              <span className="dav" style={{ overflow: "hidden" }}>
                {d.foto
                  ? <img loading="lazy" src={d.foto} alt={d.name} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
                  : <Avatar name={d.name} watermark />}
              </span>
              <div>
                <div className="dnm">{d.name}</div>
                <div className="drt"><Star />{d.rating} · {d.years}</div>
                <span className="pill pill-brand" style={{marginTop:8}}><Star />{d.badge}</span>
              </div>
            </div>
            <div className="dbar">
              <div className="db"><div className="n">{d.punct}</div><div className="l">Puntualidad</div></div>
              <div className="db"><div className="n">{d.hyg}</div><div className="l">Higiene</div></div>
              <div className="db"><div className="n">{d.deliveries}</div><div className="l">Entregas</div></div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { StageBadge, MiniStages, OrderCard, TrackingDetail, Dashboard, Pedidos, Repartidores });