// Pantalla de pago — EternaVoz
// Resumen del pedido + pasarela Stripe. Los datos de contacto (nombre, email,
// teléfono) los recoge la propia página de Stripe, no la app.

function UvPayCheck({ color }) {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" style={{ flex: "none" }}>
      <path d="M5 12.5l4 4 10-10" stroke={color} strokeWidth="2.4"
            strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function UvLock({ color, size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={{ flex: "none" }}>
      <rect x="4.5" y="10.5" width="15" height="10" rx="2.4" stroke={color} strokeWidth="2" />
      <path d="M8 10.5V7.5a4 4 0 0 1 8 0v3" stroke={color} strokeWidth="2" strokeLinecap="round" />
    </svg>
  );
}

function UvPayment({ p, data, price, onPay, onBack, paying, error }) {
  const nombre = data.apodo || data.nombre?.split(" ")[0] || t("pay_for_fallback");
  const chips = [
    data.genero && { k: t("pay_k_estilo"), v: data.genero },
    data.ocasion && { k: t("pay_k_ocasion"), v: data.ocasion },
    data.duracion && { k: t("pay_k_duracion"), v: data.duracion },
    data.idioma && { k: t("pay_k_idioma"), v: data.idioma },
  ].filter(Boolean);

  const incluye = [ t("pay_inc1"), t("pay_inc2"), t("pay_inc3") ];

  return (
    <div style={{ display: "flex", flexDirection: "column", height: "100%", background: p.bg, color: p.ink }}>
      {/* Header */}
      <div style={{ padding: "52px 22px 10px", display: "flex", alignItems: "center", gap: 10 }}>
        <button onClick={onBack} style={{
          width: 36, height: 36, borderRadius: 999,
          border: `1px solid ${p.inkFaint}`, background: p.surface,
          color: p.ink, cursor: "pointer", fontSize: 16, fontFamily: UV_FONTS.body,
        }}>←</button>
        <div style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 2 }}>
          <AltimaLogo color={EV_INK} size={14} />
          <div style={{
            fontSize: 9.5, letterSpacing: ".26em", textTransform: "uppercase",
            color: p.inkSoft, fontWeight: 600, fontFamily: UV_FONTS.display,
          }}>{t("pay_header")}</div>
        </div>
        <div style={{ width: 36 }} />
      </div>

      {/* Contenido */}
      <div style={{ flex: 1, minHeight: 0, overflowY: "auto", padding: "12px 24px 16px", WebkitOverflowScrolling: "touch" }}>
        <div style={{
          fontSize: 11.5, letterSpacing: ".18em", textTransform: "uppercase",
          color: p.warm, fontWeight: 700, fontFamily: UV_FONTS.body,
        }}>{t("pay_eyebrow")}</div>
        <div style={{
          fontFamily: UV_FONTS.display, fontWeight: 600, fontSize: 26,
          lineHeight: 1.18, margin: "8px 0 6px", letterSpacing: "-.01em",
        }}>{t("pay_title").replace("{n}", nombre)}</div>
        <div style={{ fontSize: 14, color: p.inkSoft, lineHeight: 1.5, fontFamily: UV_FONTS.body }}>
          {t("pay_sub")}
        </div>

        {/* Tarjeta resumen */}
        <div style={{
          marginTop: 20, borderRadius: 18, background: p.surface,
          border: `1px solid ${p.line}`, overflow: "hidden",
        }}>
          <div style={{ padding: "18px 18px 14px", display: "flex", gap: 14, alignItems: "center", borderBottom: `1px solid ${p.line}` }}>
            <div className="ev-mesh ev-grain ev-grain-strong" style={{
              width: 46, height: 46, borderRadius: 12, flex: "none",
              boxShadow: "0 8px 18px -10px rgba(120,60,30,.45)",
            }} />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 15, fontWeight: 600, fontFamily: UV_FONTS.body }}>{t("pay_item_name")}</div>
              <div style={{ fontSize: 13, color: p.inkSoft, marginTop: 2, fontFamily: UV_FONTS.body }}>{t("pay_item_for").replace("{n}", nombre)}</div>
            </div>
          </div>

          {chips.length > 0 && (
            <div style={{ padding: "14px 18px", display: "flex", flexWrap: "wrap", gap: 8, borderBottom: `1px solid ${p.line}` }}>
              {chips.map(c => (
                <div key={c.k} style={{
                  fontSize: 12, fontFamily: UV_FONTS.body, color: p.ink,
                  background: p.bg, border: `1px solid ${p.line}`,
                  padding: "6px 11px", borderRadius: 999,
                }}>
                  <span style={{ color: p.inkSoft }}>{c.k}:</span> <strong style={{ fontWeight: 600 }}>{c.v}</strong>
                </div>
              ))}
            </div>
          )}

          <div style={{ padding: "14px 18px", display: "flex", flexDirection: "column", gap: 10 }}>
            {incluye.map((t, i) => (
              <div key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
                <div style={{ marginTop: 1 }}><UvPayCheck color={p.accent} /></div>
                <div style={{ fontSize: 13.5, lineHeight: 1.45, color: p.ink, fontFamily: UV_FONTS.body }}>{t}</div>
              </div>
            ))}
          </div>

          {/* Total */}
          <div style={{
            padding: "16px 18px", background: p.surface2,
            display: "flex", alignItems: "baseline", justifyContent: "space-between",
          }}>
            <div>
              <div style={{ fontSize: 14, fontWeight: 600, fontFamily: UV_FONTS.body }}>{t("pay_total")}</div>
              <div style={{ fontSize: 11.5, color: p.inkSoft, fontFamily: UV_FONTS.body }}>{t("pay_total_note")}</div>
            </div>
            <div style={{ fontFamily: UV_FONTS.display, fontWeight: 700, fontSize: 30, color: p.accent }}>
              {price?.displayFull || "29,00 €"}
            </div>
          </div>
        </div>

        <div style={{
          marginTop: 14, display: "flex", gap: 8, alignItems: "flex-start",
          fontSize: 12, color: p.inkSoft, fontFamily: UV_FONTS.body, lineHeight: 1.5,
        }}>
          <div style={{ marginTop: 1 }}><UvLock color={p.inkSoft} size={13} /></div>
          <div>{t("pay_contact_note")}</div>
        </div>

        {error && (
          <div style={{
            marginTop: 12, padding: "10px 14px", borderRadius: 12,
            background: "rgba(190,60,60,.08)", border: "1px solid rgba(190,60,60,.25)",
            fontSize: 12.5, color: "#9a3b3b", fontFamily: UV_FONTS.body, lineHeight: 1.4,
          }}>{error}</div>
        )}
      </div>

      {/* Footer pago */}
      <div style={{
        padding: "12px 20px max(22px, env(safe-area-inset-bottom))",
        borderTop: `1px solid ${p.line}`, background: p.bg,
        display: "flex", flexDirection: "column", gap: 10,
      }}>
        <button onClick={onPay} disabled={paying} style={{
          height: 54, borderRadius: 14, border: "none",
          background: paying ? "#000" : p.ink, color: "#fff",
          cursor: paying ? "default" : "pointer",
          fontFamily: UV_FONTS.display, fontWeight: 600, fontSize: 16.5,
          display: "flex", alignItems: "center", justifyContent: "center", gap: 9,
          boxShadow: `0 12px 26px -10px ${p.ink}`,
        }}>
          {paying ? t("pay_connecting") : <>
            <UvLock color="#fff" size={15} />
            {t("pay_btn").replace("{p}", price?.display || "29 €")}
          </>}
        </button>
        <div style={{
          display: "flex", alignItems: "center", justifyContent: "center", gap: 7,
          fontSize: 11.5, color: p.inkSoft, fontFamily: UV_FONTS.body,
        }}>
          <UvLock color={p.inkSoft} size={12} />
          {t("pay_secure")} <strong style={{ fontWeight: 600, color: p.ink }}>Stripe</strong>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { UvPayment });