/* ============================================================
   Pantalla — Inferencia de Ruta (rutas en vivo)
   Desde la última captura, el backend rutea por vías reales (Routes API)
   a TODOS los destinos posibles. Cada ruta es un "viaje" con tiempo de
   llegada y un CONTADOR EN VIVO de cuánto le falta al vehículo para llegar
   a ese punto. Como varios Google Maps corriendo a la vez.
   ============================================================ */

const REB_REFETCH_MS = 60000;  // refrescar tráfico cada 60 s

const fmtMMSS = (secs) => {
  const s = Math.max(0, Math.round(secs));
  const m = Math.floor(s / 60);
  const r = s % 60;
  return `${m}:${String(r).padStart(2, "0")}`;
};
const fmtMin = (secs) => `${Math.round((secs || 0) / 60)} min`;
const fmtKm = (m) => `${((m || 0) / 1000).toFixed(1)} km`;

const KIND_META = {
  nodo: { label: "NODO", color: "var(--g-celadon)" },
  puesto: { label: "PUESTO", color: "var(--g-signal-yellow)" },
  frontera: { label: "FRONTERA", color: "var(--g-signal-orange)" },
};

const ReboteScreen = ({ plate, showDiscarded = true, onNavigate }) => {
  const [selectedCorridor, setSelectedCorridor] = React.useState(null);
  const [projection, setProjection] = React.useState(null);
  const [fetchedAt, setFetchedAt] = React.useState(0);  // Date.now() al recibir
  const [tick, setTick] = React.useState(0);            // fuerza re-render cada 1 s

  // Carga + refetch periódico (tráfico fresco). Reloj real (sin elapsed_min).
  React.useEffect(() => {
    if (!plate) { setProjection(null); return; }
    let cancelled = false;
    const load = () => window.SonarAPI.getProjection(plate.placa).then(p => {
      if (cancelled) return;
      setProjection(p);
      setFetchedAt(Date.now());
    });
    load();
    const id = setInterval(load, REB_REFETCH_MS);
    return () => { cancelled = true; clearInterval(id); };
  }, [plate]);

  // Tic de 1 s para los contadores en vivo.
  React.useEffect(() => {
    const id = setInterval(() => setTick(t => t + 1), 1000);
    return () => clearInterval(id);
  }, []);

  if (!plate) return <EmptyStateForRebote onNavigate={onNavigate} />;
  if (!projection) return <ReboteLoading plate={plate} />;

  // Segundos transcurridos desde que llegó la proyección (para el contador local).
  const sinceFetch = (Date.now() - fetchedAt) / 1000;
  const liveRemaining = (r) => r.remaining_s - sinceFetch;

  let routes = (projection.routes || []).map(r => ({ ...r, _rem: liveRemaining(r) }));
  if (!showDiscarded) routes = routes.filter(r => r._rem > -120);
  routes.sort((a, b) => a.duration_s - b.duration_s);

  const enCamino = routes.filter(r => r._rem > 0).length;
  const elapsedLive = (projection.elapsed_s || 0) + sinceFetch;

  return (
    <div className="fade-in" style={{ height: "100%", display: "grid", gridTemplateColumns: "minmax(0, 1fr) 480px", minHeight: 0 }}>
      {/* MAPA */}
      <div style={{ position: "relative", overflow: "hidden", background: "var(--s-map-bg)", minWidth: 0 }}>
        <div style={{
          position: "absolute", top: 18, left: 18, zIndex: 10, padding: "12px 16px",
          background: "var(--s-glass)", backdropFilter: "blur(12px)",
          border: "1px solid var(--g-border-on-dark)", borderRadius: "var(--g-radius-card)",
          display: "flex", alignItems: "center", gap: 14,
        }}>
          <div style={{ width: 36, height: 36, borderRadius: "50%", background: "rgba(229, 51, 63, 0.15)", display: "grid", placeItems: "center" }}>
            <window.Icon name="waypoints" style={{ width: 18, height: 18, color: "var(--g-signal-red-soft)" }} />
          </div>
          <div>
            <div className="eyebrow eyebrow--accent" style={{ marginBottom: 2 }}>Inferencia activa · {routes.length} rutas</div>
            <div style={{ fontSize: 15, fontWeight: 500, color: "var(--g-text-cream)", letterSpacing: -0.2 }}>
              <span className="plate plate--sm" style={{ marginRight: 8, verticalAlign: "middle" }}>{plate.placa}</span>
              desde {projection.origin.nombre} · hace {fmtMMSS(elapsedLive)}
            </div>
          </div>
        </div>

        <window.QuindioMap
          mode="rebote"
          plate={plate}
          projection={projection}
          showDiscarded={showDiscarded}
          selectedCorridor={selectedCorridor}
          fillToBorder={true}
        />
      </div>

      {/* PANEL DERECHO */}
      <div style={{ borderLeft: "1px solid var(--g-border-on-dark)", background: "var(--s-panel)", display: "flex", flexDirection: "column", minHeight: 0, overflow: "hidden" }}>
        <div style={{ padding: "var(--density-pad)", borderBottom: "1px solid var(--g-border-on-dark)", flexShrink: 0 }}>
          <div className="eyebrow eyebrow--accent">Rutas proyectadas · viajes en vivo</div>
          <div style={{ marginTop: 6, fontSize: 13, color: "var(--g-text-mute-dark)", lineHeight: 1.5 }}>
            Ruteo real por vías a cada destino. El contador es el tiempo estimado para que el vehículo llegue allí. <b style={{ color: "var(--g-signal-green)" }}>{enCamino} en camino</b>.
          </div>
        </div>

        <div className="scroll" style={{ flex: 1, minHeight: 0, overflowY: "auto" }}>
          {routes.map(r => (
            <RouteRow
              key={r.dest.kind + r.dest.id}
              route={r}
              selected={selectedCorridor === r.dest.id}
              onClick={() => setSelectedCorridor(selectedCorridor === r.dest.id ? null : r.dest.id)}
            />
          ))}
        </div>

        <div style={{ padding: "var(--density-pad)", borderTop: "1px solid var(--g-border-on-dark)", display: "grid", gap: 8 }}>
          <button className="btn btn--primary" style={{ justifyContent: "center", padding: "12px" }} onClick={() => onNavigate("candado")}>
            <window.Icon name="lock" /> Activar Plan Candado
            <window.Icon name="arrow-right" style={{ marginLeft: "auto" }} />
          </button>
          <button className="btn" style={{ justifyContent: "center", padding: "10px" }} onClick={() => onNavigate("mapa")}>
            <window.Icon name="arrow-left" /> Volver al Mapa
          </button>
        </div>
      </div>
    </div>
  );
};

const RouteRow = ({ route, selected, onClick }) => {
  const rem = route._rem;
  const vencida = rem <= 0;
  const meta = KIND_META[route.dest.kind] || KIND_META.nodo;
  const color = vencida ? "var(--g-text-mute-dark)" : (route.dest.kind === "frontera" ? "var(--g-signal-orange)" : "var(--g-signal-green)");
  const pct = route.duration_s ? Math.min(100, Math.max(0, (1 - rem / route.duration_s) * 100)) : 0;
  const code = route.dest.codigo || route.dest.nombre || route.dest.id;

  return (
    <button onClick={onClick} style={{
      width: "100%", display: "block", textAlign: "left", cursor: "pointer",
      background: selected ? "rgba(79, 212, 255, 0.06)" : "transparent",
      border: 0, borderTop: "1px solid var(--g-border-on-dark)",
      padding: "12px var(--density-pad)", color: "var(--g-text-cream)",
      fontFamily: "var(--font-sans)", position: "relative", opacity: vencida ? 0.72 : 1,
    }}>
      {selected && <div style={{ position: "absolute", left: 0, top: 8, bottom: 8, width: 2, background: "var(--g-celadon)", boxShadow: "0 0 8px var(--g-celadon)" }} />}

      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 6 }}>
        <span style={{ fontSize: 9, letterSpacing: 1.2, color: meta.color, fontWeight: 600, minWidth: 54 }}>{meta.label}</span>
        <span style={{ fontSize: 13, fontWeight: 600, letterSpacing: 0.3 }}>{code}</span>
        <span style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 6 }}>
          {vencida ? (
            <span style={{ fontSize: 11, color: "var(--g-text-mute-dark)", fontWeight: 500 }}>ventana vencida</span>
          ) : (
            <>
              <window.Icon name="timer" style={{ width: 13, height: 13, color }} />
              <span style={{ fontSize: 17, fontWeight: 600, fontVariantNumeric: "tabular-nums", color, letterSpacing: 0.4 }}>{fmtMMSS(rem)}</span>
            </>
          )}
        </span>
      </div>

      <div style={{ display: "flex", alignItems: "center", gap: 14, fontSize: 11.5, color: "var(--g-text-mute-dark)" }}>
        <span><window.Icon name="route" style={{ width: 12, height: 12, verticalAlign: "-2px", marginRight: 4 }} />{fmtMin(route.duration_s)} de viaje</span>
        <span>{fmtKm(route.distance_m)}</span>
        {route.dest.nombre && route.dest.codigo && <span style={{ flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{route.dest.nombre}</span>}
      </div>

      {/* Barra de progreso del viaje */}
      <div style={{ marginTop: 9, height: 3, borderRadius: 2, background: "rgba(255,255,255,0.06)", overflow: "hidden" }}>
        <div style={{ width: `${pct}%`, height: "100%", background: color, borderRadius: 2, transition: "width 1s linear" }} />
      </div>
    </button>
  );
};

const ReboteLoading = ({ plate }) => (
  <div style={{ display: "grid", placeItems: "center", height: "100%", color: "var(--g-text-mute-dark)" }}>
    <div style={{ textAlign: "center" }}>
      <window.Icon name="loader" style={{ width: 28, height: 28, color: "var(--g-celadon)" }} />
      <div style={{ marginTop: 12, fontSize: 13 }}>Calculando rutas por vías para <b style={{ color: "var(--g-text-cream)" }}>{plate.placa}</b>…</div>
    </div>
  </div>
);

const EmptyStateForRebote = ({ onNavigate }) => (
  <div style={{ display: "grid", placeItems: "center", height: "100%", padding: 40, textAlign: "center" }}>
    <div style={{ maxWidth: 360 }}>
      <window.Icon name="waypoints" style={{ width: 40, height: 40, color: "var(--g-text-mute-dark)" }} />
      <h2 className="ds-h3" style={{ marginTop: 20, color: "var(--g-text-cream)" }}>Sin inferencia activa</h2>
      <p style={{ marginTop: 10, fontSize: 13, color: "var(--g-text-mute-dark)" }}>
        Consulta una placa en el Mapa Operacional para inferir sus rutas probables.
      </p>
      <button className="btn btn--primary" style={{ marginTop: 20, padding: "11px 18px" }} onClick={() => onNavigate && onNavigate("mapa")}>
        <window.Icon name="map" size={15} /> Ir al Mapa a elegir placa
        <window.Icon name="arrow-right" size={15} style={{ marginLeft: 6 }} />
      </button>
    </div>
  </div>
);

window.ReboteScreen = ReboteScreen;