/* ============ MAKI — Vista del cliente (tracking) ============ */

function TrackingScreen({ orders }) {
  // Pedido de ejemplo mostrado al cliente
  const order = orders.find(o => o.state === "despachado") || orders.find(o => o.state === "preparacion") || orders[0];
  const idx = MAKI.STATES.findIndex(s => s.id === order.state);
  const steps = MAKI.STATES.filter(s => s.id !== "confirmado"); // vista simplificada para cliente
  const cIdx = steps.findIndex(s => s.id === order.state) >= 0 ? steps.findIndex(s => s.id === order.state) : Math.min(idx, steps.length - 1);

  return (
    <div style={{ height: "100%", overflowY: "auto", background: `radial-gradient(120% 80% at 50% 0%, ${cv("--primary-tint")} 0%, ${cv("--bg")} 55%)`, display: "flex", flexDirection: "column", alignItems: "center", padding: "32px 24px 48px" }}>
      <div style={{ textAlign: "center", maxWidth: 560, marginBottom: 26 }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 8, fontSize: 12.5, fontWeight: 700, color: cv("--ink-3"), background: cv("--surface"), border: `1px solid ${cv("--line")}`, padding: "6px 13px", borderRadius: 99, marginBottom: 16 }}>
          <Icon name="user" size={14} color={cv("--primary")} /> Lo que ve tu cliente — seguimiento en vivo
        </div>
        <p style={{ fontSize: 14, color: cv("--ink-2"), fontWeight: 500, margin: 0, lineHeight: 1.55 }}>
          Cada cambio de estado dispara una notificación automática por el canal donde pidió (WhatsApp, web o email) y abre este link de seguimiento. Cero llamadas de "¿cómo viene mi pedido?".
        </p>
        <a href={"seguimiento.html?order=" + order.id} target="_blank" rel="noopener" style={{ display: "inline-flex", alignItems: "center", gap: 7, marginTop: 14, padding: "8px 15px", borderRadius: 99, background: cv("--primary"), color: "#fff", textDecoration: "none", fontSize: 13, fontWeight: 800 }}>
          <Icon name="phone" size={14} stroke={2.3} color="#fff" /> Abrir vista de cliente (celular)
        </a>
      </div>

      {/* Tarjeta tipo teléfono */}
      <div style={{ width: 380, maxWidth: "100%", background: cv("--surface"), borderRadius: 28, boxShadow: "var(--sh-3)", overflow: "hidden", border: `1px solid ${cv("--line")}` }}>
        {/* Encabezado de marca */}
        <div style={{ background: cv("--ink"), color: "#fff", padding: "20px 22px 22px" }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 18 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
              <div style={{ position: "relative", width: 26, height: 26 }}>
                <div style={{ position: "absolute", inset: 0, borderRadius: "50%", background: "#fff", opacity: .12 }} />
                <div style={{ position: "absolute", inset: 5, borderRadius: "50%", background: cv("--primary") }} />
              </div>
              <span style={{ fontWeight: 800, fontSize: 16 }}>Niji Sushi</span>
            </div>
            <ChannelTag channel={order.channel} />
          </div>
          <div style={{ fontSize: 12.5, opacity: .65, fontWeight: 600 }}>Pedido {order.id}</div>
          <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: "-0.02em", marginTop: 2 }}>
            {order.state === "despachado" ? "¡En camino! 🛵" : order.state === "entregado" ? "Entregado ✓" : "Lo estamos preparando"}
          </div>
          <div style={{ fontSize: 13, opacity: .8, fontWeight: 600, marginTop: 4 }}>
            {order.mode === "Envío" ? `Llega aprox. ${order.due} · ${order.address.split(",")[0]}` : `Retiro ${order.due} · en local`}
          </div>
        </div>

        {/* Timeline cliente */}
        <div style={{ padding: "24px 22px" }}>
          {steps.map((s, i) => {
            const done = i < cIdx, current = i === cIdx;
            return (
              <div key={s.id} style={{ display: "flex", gap: 14, alignItems: "stretch" }}>
                <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
                  <div style={{
                    width: 28, height: 28, borderRadius: "50%", flexShrink: 0,
                    background: done ? cv(s.color) : current ? cv(s.color) : cv("--surface-2"),
                    border: `2px solid ${done || current ? cv(s.color) : cv("--line-2")}`,
                    display: "flex", alignItems: "center", justifyContent: "center", color: "#fff",
                    boxShadow: current ? `0 0 0 5px ${cv(s.bg)}` : "none",
                  }}>
                    {done ? <Icon name="check" size={15} stroke={3} /> :
                      current ? <span style={{ width: 8, height: 8, borderRadius: "50%", background: "#fff", animation: "maki-pulse-dot 1.4s infinite" }} /> :
                        <span style={{ width: 7, height: 7, borderRadius: "50%", background: cv("--line-2") }} />}
                  </div>
                  {i < steps.length - 1 && <div style={{ width: 2, flex: 1, minHeight: 26, background: done ? cv(s.color) : cv("--line"), margin: "2px 0" }} />}
                </div>
                <div style={{ paddingBottom: 18, paddingTop: 2 }}>
                  <div style={{ fontSize: 14.5, fontWeight: current ? 800 : done ? 700 : 600, color: done || current ? cv("--ink") : cv("--ink-3") }}>{s.label}</div>
                  {current && <div style={{ fontSize: 12.5, color: cv(s.color), fontWeight: 700, marginTop: 2 }}>Ahora · actualizado recién</div>}
                </div>
              </div>
            );
          })}
        </div>

        {/* Resumen */}
        <div style={{ padding: "16px 22px 22px", borderTop: `1px solid ${cv("--line")}` }}>
          <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12.5, color: cv("--ink-3"), fontWeight: 700, marginBottom: 10 }}>
            <span>{order.items.reduce((s, i) => s + i.qty, 0)} ítems</span>
            <span>Total {MAKI.money(order.total)}</span>
          </div>
          <button style={{ width: "100%", padding: "13px", borderRadius: 12, border: "none", background: cv("--ch-whatsapp"), color: "#fff", fontWeight: 750, fontSize: 14, fontFamily: "inherit", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", gap: 8 }}>
            <Icon name="whatsapp" size={17} stroke={2.2} /> Escribirle al local
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TrackingScreen });