// EN House web — billing: plan, payment method on file, invoices, Stripe-style update sheet

// ───────────────────────── card brand glyphs ─────────────────────────
function BrandMark({ brand = "", size = 30 }) {
  const h = Math.round(size * 0.64);
  const box = { width: size, height: h, borderRadius: 4, background: "#fff", border: "1px solid var(--line)",
    display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 };
  if (/master/i.test(brand)) {
    return (
      <span style={box}>
        <svg width={size * 0.62} height={h * 0.7} viewBox="0 0 36 22">
          <circle cx="14" cy="11" r="11" fill="#EB001B" />
          <circle cx="22" cy="11" r="11" fill="#F79E1B" />
          <path d="M18 2.6a11 11 0 0 0 0 16.8 11 11 0 0 0 0-16.8Z" fill="#FF5F00" />
        </svg>
      </span>
    );
  }
  if (/amex/i.test(brand)) {
    return <span style={{ ...box, background: "#1F72CD" }}><span style={{ color: "#fff", fontSize: size * 0.26, fontWeight: 800, letterSpacing: ".02em" }}>AMEX</span></span>;
  }
  // default → Visa
  return <span style={box}><span style={{ color: "#1A1F71", fontSize: size * 0.34, fontWeight: 900, fontStyle: "italic", letterSpacing: "-.01em" }}>VISA</span></span>;
}

function brandOf(num) {
  const n = num.replace(/\s/g, "");
  if (n.startsWith("4")) return "Visa";
  if (/^5[1-5]/.test(n) || /^2[2-7]/.test(n)) return "Mastercard";
  if (/^3[47]/.test(n)) return "Amex";
  return "";
}

// ───────────────────────── Billing page ─────────────────────────
function Billing({ D, go }) {
  const b = D.billing;
  const [card, setCard] = React.useState(b.card);
  const [sheet, setSheet] = React.useState(false);

  return (
    <Page style={{ maxWidth: 760 }}>
      <button onClick={() => go("account")} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--ink-2)",
        fontFamily: "inherit", fontSize: 14, fontWeight: 600, display: "flex", alignItems: "center", gap: 8, padding: 0, marginBottom: 24 }}>
        <Icon name="chevL" size={16} /> Conta
      </button>

      <SectionHead eyebrow="Conta" title="Adesão & pagamentos." />

      {/* plan */}
      <div className="card" style={{ padding: 26, marginBottom: 18 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 16, flexWrap: "wrap" }}>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <span className="h2">{b.plan}</span>
              <Tag tone="accent">{b.status}</Tag>
            </div>
            <p className="cap" style={{ marginTop: 8, letterSpacing: ".06em" }}>{b.renews} · cancela quando quiseres</p>
          </div>
          <div style={{ textAlign: "right" }}>
            <div className="display num" style={{ fontSize: 38, lineHeight: 1 }}>{b.price}€</div>
            <div className="cap" style={{ marginTop: 4 }}>{b.cadence}</div>
          </div>
        </div>
      </div>

      {/* payment method */}
      <label className="label" style={{ display: "block", marginBottom: 10 }}>Método de pagamento</label>
      <div className="card" style={{ padding: 22, marginBottom: 10 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
          <BrandMark brand={card.brand} size={42} />
          <div style={{ flex: 1, minWidth: 160 }}>
            <div style={{ fontWeight: 700, fontSize: 16, letterSpacing: ".02em", display: "flex", alignItems: "center", gap: 8 }}>
              <span style={{ color: "var(--ink-3)" }}>••••</span> {card.last4}
            </div>
            <div className="cap" style={{ marginTop: 4 }}>{card.brand} · expira {card.exp} · {card.name}</div>
          </div>
          <Button variant="ghost" onClick={() => setSheet(true)} icon="card">Atualizar</Button>
        </div>
      </div>
      <p style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 36 }}>
        <Icon name="lock" size={13} style={{ color: "var(--ink-3)" }} />
        <span className="cap">Guardado em segurança pela Stripe. A EN House só vê os últimos quatro dígitos.</span>
      </p>

      {/* invoices */}
      <label className="label" style={{ display: "block", marginBottom: 10 }}>Recibos</label>
      <div className="card" style={{ padding: "4px 22px" }}>
        {b.invoices.map((inv, i) => (
          <div key={inv.id} style={{ display: "flex", alignItems: "center", gap: 16, padding: "18px 0",
            borderBottom: i === b.invoices.length - 1 ? "none" : "1px solid var(--line)" }}>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="h3" style={{ fontSize: 15 }}>{inv.desc}</div>
              <div className="cap" style={{ marginTop: 3 }}>{inv.date} · {inv.id}</div>
            </div>
            <span className="small" style={{ fontWeight: 700, color: "var(--ink)" }}>{inv.amount}</span>
            <Tag tone={inv.status === "Pago" ? "accent" : "dim"}>{inv.status}</Tag>
          </div>
        ))}
      </div>

      {sheet && <UpdateCardSheet current={card} onClose={() => setSheet(false)} onSaved={c => { setCard(c); setSheet(false); }} />}
    </Page>
  );
}

// ───────────────────────── Stripe-style update sheet ─────────────────────────
function UpdateCardSheet({ current, onClose, onSaved }) {
  const [num, setNum] = React.useState("");
  const [exp, setExp] = React.useState("");
  const [cvc, setCvc] = React.useState("");
  const [name, setName] = React.useState(current.name || "");
  const [zip, setZip] = React.useState("");
  const [phase, setPhase] = React.useState("idle"); // idle | saving | done

  const fmtNum = v => v.replace(/\D/g, "").slice(0, 16).replace(/(.{4})/g, "$1 ").trim();
  const fmtExp = v => { const d = v.replace(/\D/g, "").slice(0, 4); return d.length > 2 ? d.slice(0, 2) + "/" + d.slice(2) : d; };
  const brand = brandOf(num);
  const last4 = num.replace(/\s/g, "").slice(-4);
  const valid = num.replace(/\s/g, "").length >= 15 && exp.length === 5 && cvc.length >= 3 && name.trim() && zip.trim();

  const save = () => {
    setPhase("saving");
    setTimeout(() => {
      setPhase("done");
      setTimeout(() => onSaved({ brand: brand || "Visa", last4, exp, name: name.trim() }), 950);
    }, 1500);
  };

  return (
    <Modal onClose={phase === "idle" ? onClose : () => {}}>
      <div style={{ padding: 30 }}>
        {phase === "done" ? (
          <div className="fade" style={{ textAlign: "center", padding: "20px 0 8px" }}>
            <div style={{ width: 64, height: 64, borderRadius: 999, margin: "0 auto 22px",
              background: "color-mix(in srgb, var(--accent) 12%, transparent)", border: "1px solid var(--line-2)",
              display: "flex", alignItems: "center", justifyContent: "center", color: "var(--accent)" }}>
              <Icon name="check" size={30} stroke={2} />
            </div>
            <h2 className="h2">Cartão atualizado.</h2>
            <p className="body" style={{ margin: "12px auto 0", maxWidth: 320 }}>
              A próxima quota sai do teu {brand || "cartão"} terminado em {last4}.
            </p>
          </div>
        ) : (
          <>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 4 }}>
              <Eyebrow accent>Método de pagamento</Eyebrow>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 6, color: "var(--ink-3)" }}>
                <Icon name="lock" size={13} /><span className="cap" style={{ letterSpacing: ".1em" }}>via Stripe</span>
              </span>
            </div>
            <h2 className="h2" style={{ marginBottom: 6 }}>Atualizar cartão.</h2>
            <p className="small" style={{ marginBottom: 22 }}>Substitui o cartão da tua adesão. A cobrança seguinte usa o novo.</p>

            {/* hosted element */}
            <div className="stripe-el">
              <div className="se-row">
                <input inputMode="numeric" placeholder="Número do cartão" value={num}
                  onChange={e => setNum(fmtNum(e.target.value))} disabled={phase !== "idle"} />
                <span style={{ paddingRight: 14, display: "flex" }}>
                  {brand ? <BrandMark brand={brand} size={32} /> : <Icon name="card" size={20} style={{ color: "var(--ink-3)" }} />}
                </span>
              </div>
              <div className="se-hr" />
              <div className="se-row">
                <input inputMode="numeric" placeholder="MM / AA" value={exp}
                  onChange={e => setExp(fmtExp(e.target.value))} disabled={phase !== "idle"} />
                <div className="se-vr" />
                <input inputMode="numeric" placeholder="CVC" value={cvc}
                  onChange={e => setCvc(e.target.value.replace(/\D/g, "").slice(0, 4))} disabled={phase !== "idle"} />
                <div className="se-vr" />
                <input inputMode="numeric" placeholder="Cód. postal" value={zip}
                  onChange={e => setZip(e.target.value.slice(0, 8))} disabled={phase !== "idle"} />
              </div>
            </div>
            <input className="box" placeholder="Nome no cartão" value={name}
              onChange={e => setName(e.target.value)} disabled={phase !== "idle"} style={{ marginTop: 12 }} />

            <div style={{ display: "flex", gap: 11, alignItems: "flex-start", margin: "20px 0 22px", padding: "13px 15px",
              background: "color-mix(in srgb, var(--accent) 5%, transparent)", border: "1px solid var(--line)", borderRadius: 6 }}>
              <Icon name="shield" size={16} style={{ color: "var(--accent)", flexShrink: 0, marginTop: 1 }} />
              <span className="cap" style={{ lineHeight: 1.5 }}>
                Os dados do cartão vão encriptados <strong style={{ color: "var(--ink)" }}>diretamente para a Stripe</strong>. A EN House recebe apenas um token — nunca vê nem guarda o número.
              </span>
            </div>

            <div style={{ display: "flex", gap: 12 }}>
              <Button variant="ghost" onClick={onClose} disabled={phase === "saving"}>Cancelar</Button>
              <Button variant="primary" block disabled={!valid || phase === "saving"} onClick={save}>
                {phase === "saving" ? <><Spinner /> A guardar…</> : <><Icon name="lock" size={16} /> Guardar cartão</>}
              </Button>
            </div>
            <p style={{ textAlign: "center", marginTop: 14, display: "flex", justifyContent: "center", alignItems: "center", gap: 6 }}>
              <span className="cap">Processado por</span>
              <span style={{ fontWeight: 900, fontSize: 14, letterSpacing: "-0.02em", color: "var(--ink-2)" }}>stripe</span>
            </p>
          </>
        )}
      </div>
    </Modal>
  );
}

Object.assign(window, { Billing, UpdateCardSheet, BrandMark });