/* eta-promedio.jsx — Indicador en vivo del ETA promedio de llegada del
   domiciliario al restaurante. Componente COMPARTIDO por el panel del
   restaurante (junto al formulario "Pedir domiciliario") y el dashboard admin.

   Llama a la RPC `eta_promedio_actual` (y `eta_promedio_por_zona` en admin),
   se refresca cada 60 s y cuando la pestaña vuelve a estar visible. No es un
   número estático: refleja los datos recientes + la oferta/demanda del momento.
   Si la RPC aún no está desplegada o falla, el componente se oculta solo
   (no rompe el panel). Aliasa los hooks (etState/etEffect) para no chocar con
   los `const { useState }` globales de icons.jsx. */
const { useState: etState, useEffect: etEffect, useRef: etRef } = React;

/* CSS propio (se inyecta una sola vez; funciona en panel y admin) */
let __etaStyleInjected = false;
const __ETA_CSS = `
  .eta-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r-lg,16px);
    background:linear-gradient(135deg,rgba(var(--color-primary-rgb,13,148,136),.08),var(--panel-2,#f6f1ea));border:1px solid var(--line-2,#e6ddd2);}
  .eta-card.warn{background:linear-gradient(135deg,rgba(217,119,6,.12),var(--panel-2,#f6f1ea));border-color:rgba(217,119,6,.35);}
  .eta-ico{width:42px;height:42px;border-radius:12px;background:var(--grad,linear-gradient(135deg,var(--color-primary-light),var(--color-primary-dark)));color:#fff;
    display:grid;place-items:center;flex:none;box-shadow:0 6px 16px -6px rgba(var(--color-primary-dark-rgb,15,118,110),.6);font-size:20px;}
  .eta-body{flex:1;min-width:0;}
  .eta-lbl{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3,#9a8e80);}
  .eta-val{font-family:var(--font-display,inherit);font-size:22px;font-weight:700;line-height:1.1;color:var(--ink,#241c15);display:flex;align-items:baseline;gap:8px;}
  .eta-val .u{font-size:14px;font-weight:600;color:var(--ink-2,#6f6356);}
  .eta-live{display:inline-block;width:7px;height:7px;border-radius:50%;background:#22c55e;margin-right:5px;vertical-align:1px;animation:eta-pulse 1.6s ease-in-out infinite;}
  @keyframes eta-pulse{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.55);}50%{box-shadow:0 0 0 5px rgba(34,197,94,0);}}
  .eta-sub{font-size:12.5px;color:var(--ink-2,#6f6356);margin-top:3px;line-height:1.45;}
  .eta-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;
    background:rgba(148,137,124,.16);color:var(--ink-2,#6f6356);margin-left:6px;}
  .eta-chip.prelim{background:rgba(217,119,6,.15);color:#b45309;}
  .eta-hint{font-size:12px;color:#b45309;font-weight:600;margin-top:5px;}
  .eta-zonas{margin-top:14px;border-top:1px solid var(--line,#ece4db);padding-top:12px;display:flex;flex-direction:column;gap:7px;}
  .eta-zona-row{display:flex;align-items:center;justify-content:space-between;font-size:13px;}
  .eta-zona-row .z{color:var(--ink-2,#6f6356);}
  .eta-zona-row b{font-variant-numeric:tabular-nums;}
  .eta-zona-row .pend{font-size:11px;color:var(--ink-3,#9a8e80);margin-left:6px;}

  /* ── Variante HERO (destacada, naranja) para la pantalla de Pedir ── */
  .eta-hero{position:relative;overflow:hidden;border-radius:var(--r-lg,16px);padding:20px;
    background:linear-gradient(140deg,var(--color-primary-light),var(--color-primary-dark));color:#fff;
    box-shadow:0 16px 34px -12px rgba(var(--color-primary-dark-rgb,15,118,110),.65);}
  .eta-hero.alta{background:linear-gradient(140deg,var(--color-primary),var(--color-primary-deep));}
  .eta-hero-glow{position:absolute;width:220px;height:220px;border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.35),transparent 65%);
    filter:blur(30px);top:-120px;right:-70px;pointer-events:none;}
  .eta-hero-top{position:relative;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
  .eta-hero-ico{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.20);display:grid;place-items:center;}
  .eta-hero-ico svg{width:21px;height:21px;color:#fff;}
  .eta-hero-live{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.09em;
    background:rgba(255,255,255,.20);padding:5px 10px;border-radius:999px;}
  .eta-hero-live .dot{width:8px;height:8px;border-radius:50%;background:#9bffba;animation:eta-pulse-w 1.5s ease-in-out infinite;}
  @keyframes eta-pulse-w{0%,100%{box-shadow:0 0 0 0 rgba(155,255,186,.7);}50%{box-shadow:0 0 0 6px rgba(155,255,186,0);}}
  .eta-hero-title{position:relative;font-size:13.5px;font-weight:600;opacity:.96;}
  .eta-hero-val{position:relative;font-family:var(--font-display,inherit);font-weight:800;font-size:42px;line-height:1.04;
    letter-spacing:-1.5px;display:flex;align-items:baseline;gap:8px;margin-top:2px;}
  .eta-hero-val .u{font-size:18px;font-weight:700;opacity:.9;letter-spacing:0;}
  .eta-hero-sub{position:relative;font-size:12.5px;opacity:.93;margin-top:6px;line-height:1.45;}
  .eta-hero-spec{position:relative;margin-top:12px;background:rgba(255,255,255,.17);border-radius:11px;
    padding:9px 12px;font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:8px;}
  .eta-hero-spec svg{flex:none;color:#fff;}
  .eta-hero-spec.warn{background:rgba(0,0,0,.16);}
`;

function etaInjectCss() {
  if (__etaStyleInjected) return;
  const s = document.createElement('style');
  s.id = 'treego-eta-styles';
  s.textContent = __ETA_CSS;
  document.head.appendChild(s);
  __etaStyleInjected = true;
}

/* Indicador principal.
   variant: 'hero' (destacado, pantalla Pedir) | 'restaurante' (compacto) | 'admin' (con zonas).
   spec: ETA específico en minutos para la dirección ya geocodificada (solo 'hero'). */
function EtaPromedio({ variant, spec }) {
  const [data, setData] = etState(undefined);   // undefined=cargando · null=oculto · obj=datos
  const [zonas, setZonas] = etState([]);
  const timer = etRef(null);
  etaInjectCss();

  etEffect(() => {
    let alive = true;
    async function cargar() {
      if (!window.treego_db) { if (alive) setData(null); return; }
      try {
        const { data: rows, error } = await window.treego_db.rpc('eta_promedio_actual');
        if (!alive) return;
        if (error || !rows || !rows.length) { setData(null); return; } // RPC ausente/fallo → ocultar
        setData(rows[0]);
        if (variant === 'admin') {
          const { data: zr } = await window.treego_db.rpc('eta_promedio_por_zona');
          if (alive && zr) setZonas(zr);
        }
      } catch (e) {
        if (alive) setData(null);
      }
    }
    cargar();
    /* refresco cada 60 s + cuando la pestaña vuelve a estar visible */
    timer.current = setInterval(cargar, 60000);
    const onVis = () => { if (document.visibilityState === 'visible') cargar(); };
    document.addEventListener('visibilitychange', onVis);
    window.addEventListener('focus', onVis);
    return () => {
      alive = false;
      if (timer.current) clearInterval(timer.current);
      document.removeEventListener('visibilitychange', onVis);
      window.removeEventListener('focus', onVis);
    };
  }, [variant]);

  /* ── Variante HERO: SIEMPRE visible (no se oculta aunque la RPC aún no
       responda o no esté desplegada); muestra el ETA general y, cuando hay
       dirección geocodificada, refina con el ETA específico. ── */
  if (variant === 'hero') {
    const ok = data && typeof data === 'object';
    const genMin = ok ? Math.max(1, Math.round(Number(data.eta_min) || 0)) : null;
    const specMin = (spec != null && isFinite(spec)) ? Math.max(1, Math.round(spec)) : null;
    const main = genMin != null ? genMin : specMin;          // número grande a mostrar
    const preliminar = ok ? data.fuente !== 'reciente' : false;
    const alta = ok ? (Number(data.factor_congestion) || 1) >= 1.4 : false;
    const disp = ok ? Number(data.disponibles) || 0 : 0;
    const curso = ok ? Number(data.en_curso) || 0 : 0;
    const pend = ok ? Number(data.pendientes_sin_asignar) || 0 : 0;
    const contexto = ok
      ? `${disp} repartidor${disp === 1 ? '' : 'es'} disponible${disp === 1 ? '' : 's'} · ${curso} en curso`
        + (pend > 0 ? ` · ${pend} en cola` : '')
      : null;
    return (
      <div className={'eta-hero' + (alta ? ' alta' : '')}>
        <div className="eta-hero-glow"></div>
        <div className="eta-hero-top">
          <span className="eta-hero-ico"><Icon name="zap" /></span>
          <span className="eta-hero-live"><span className="dot"></span>EN VIVO</span>
        </div>
        <div className="eta-hero-title">
          {main != null ? 'Domiciliarios llegando en' : (data === undefined ? 'Calculando tiempo de llegada…' : 'Estimando tiempo de llegada…')}
        </div>
        {main != null && <div className="eta-hero-val">~{main}<span className="u">min</span></div>}
        {contexto
          ? <div className="eta-hero-sub">{contexto}{preliminar ? ' · estimado preliminar' : ''}</div>
          : (main != null
              ? <div className="eta-hero-sub">Repartidor disponible más cercano</div>
              : <div className="eta-hero-sub">Conectando con la red de repartidores…</div>)}
        {genMin != null && specMin != null && (
          <div className="eta-hero-spec"><Icon name="pin" style={{ width: 14, height: 14 }} />Para esta dirección: ~{specMin} min</div>
        )}
        {alta && (
          <div className="eta-hero-spec warn"><Icon name="flag" style={{ width: 14, height: 14 }} />Alta demanda ahora · si no es urgente, podría bajar</div>
        )}
      </div>
    );
  }

  if (data === undefined) {
    return (
      <div className="eta-card" aria-busy="true">
        <span className="eta-ico">⏱</span>
        <div className="eta-body"><div className="eta-lbl">Tiempo promedio de llegada</div>
          <div className="eta-sub">Calculando con datos en vivo…</div></div>
      </div>
    );
  }
  if (data === null) return null; // sin datos / RPC no disponible → no estorbar

  const min = Math.max(1, Math.round(Number(data.eta_min) || 0));
  const preliminar = data.fuente !== 'reciente';
  const congestion = Number(data.factor_congestion) || 1;
  const alta = congestion >= 1.4; // demanda apretada
  const disp = Number(data.disponibles) || 0;
  const curso = Number(data.en_curso) || 0;
  const pend = Number(data.pendientes_sin_asignar) || 0;

  const contexto = `${disp} repartidor${disp === 1 ? '' : 'es'} disponible${disp === 1 ? '' : 's'}`
    + ` · ${curso} en curso` + (pend > 0 ? ` · ${pend} en cola` : '');

  return (
    <div className={'eta-card' + (alta ? ' warn' : '')}>
      <span className="eta-ico">⏱</span>
      <div className="eta-body">
        <div className="eta-lbl">
          Tiempo promedio de llegada actual
          {preliminar
            ? <span className="eta-chip prelim" title="Aún no hay suficiente historial; estimación basada en la ubicación actual de los repartidores.">Estimado preliminar</span>
            : <span className="eta-chip"><span className="eta-live"></span>en vivo</span>}
        </div>
        <div className="eta-val"><span>~{min}</span><span className="u">min</span></div>
        <div className="eta-sub">{contexto}</div>
        {variant === 'restaurante' && alta && (
          <div className="eta-hint">Alta demanda ahora. Si tu pedido no es urgente, en unos minutos podría bajar.</div>
        )}
        {variant === 'admin' && zonas.length > 0 && (
          <div className="eta-zonas">
            {zonas.slice(0, 6).map((z) => (
              <div className="eta-zona-row" key={z.zona_id}>
                <span className="z">{z.municipio}{z.barrio && z.barrio !== z.municipio ? ' · ' + z.barrio : ''}
                  {z.pendientes_sin_asignar > 0 && <span className="pend">{z.pendientes_sin_asignar} en cola</span>}
                </span>
                <b>~{Math.max(1, Math.round(Number(z.eta_min) || 0))} min{z.fuente !== 'reciente' ? '*' : ''}</b>
              </div>
            ))}
            {zonas.some((z) => z.fuente !== 'reciente') && (
              <div className="eta-sub" style={{ marginTop: 2 }}>* estimado preliminar (pocos datos en la zona)</div>
            )}
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { EtaPromedio });