// payment.jsx - checkout / payment flow (exported to window)
const { useState: useStateP, useEffect: useEffectP } = React;

const PAY_METHODS = [
  { id: "card", icon: "quote", label: "Debit / Credit card", sub: "Visa, Mastercard, Verve" },
  { id: "transfer", icon: "building", label: "Bank transfer", sub: "Pay from any Nigerian bank" },
  { id: "ussd", icon: "chip", label: "USSD", sub: "Dial a code to pay" },
  { id: "installments", icon: "layers", label: "Pay monthly", sub: "Spread over 12 months" },
];

// Payment overlay. amount in ₦, label e.g. "Marine Cargo bundle".
function Payment({ open, amount, label, onClose, onSuccess }) {
  const D = window.VC_DATA;
  const [method, setMethod] = useStateP("card");
  const [stage, setStage] = useStateP("method"); // method | processing | approved
  const monthly = Math.round(amount / 12 / 1000) * 1000;

  useEffectP(() => { if (open) { setStage("method"); setMethod("card"); } }, [open]);

  const pay = () => {
    setStage("processing");
    setTimeout(() => setStage("approved"), 1700);
    setTimeout(() => { onSuccess && onSuccess(method); }, 2700);
  };

  return (
    <window.Overlay open={open} onClose={stage === "method" ? onClose : undefined} width={460}>
      {stage === "method" && (
        <div>
          <div style={{ padding: "20px 24px", borderBottom: "1px solid var(--border)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
            <div>
              <h2 className="display" style={{ fontSize: 20 }}>Checkout</h2>
              <p style={{ fontSize: 13, color: "var(--text-muted)", marginTop: 3 }}>{label}</p>
            </div>
            <button onClick={onClose} style={{ display: "grid", placeItems: "center", width: 34, height: 34, borderRadius: 999, background: "var(--surface-3)" }}><window.Icon name="close" size={17} /></button>
          </div>

          <div style={{ padding: 24 }}>
            {/* amount */}
            <div style={{ padding: 18, borderRadius: 16, background: "linear-gradient(135deg,var(--accent),var(--accent-2))", color: "#fff", marginBottom: 20, position: "relative", overflow: "hidden" }}>
              <div style={{ position: "absolute", right: -30, top: -30, width: 120, height: 120, borderRadius: 999, background: "rgba(255,255,255,.12)" }} />
              <div style={{ fontSize: 12.5, opacity: 0.9, fontWeight: 600 }}>Amount due {method === "installments" ? "today" : ""}</div>
              <div className="display mono" style={{ fontSize: 32, marginTop: 4 }}>{D.fmtFull(method === "installments" ? monthly : amount)}</div>
              {method === "installments" && <div style={{ fontSize: 12.5, opacity: 0.9, marginTop: 4 }}>then {D.fmtFull(monthly)}/mo × 11 · total {D.fmtFull(amount)}</div>}
            </div>

            {/* methods */}
            <div style={{ fontSize: 12.5, fontWeight: 700, color: "var(--text-faint)", textTransform: "uppercase", letterSpacing: ".03em", marginBottom: 10 }}>Payment method</div>
            <div style={{ display: "grid", gap: 8 }}>
              {PAY_METHODS.map((m) => {
                const on = method === m.id;
                return (
                  <button key={m.id} onClick={() => setMethod(m.id)} style={{
                    display: "flex", alignItems: "center", gap: 12, padding: 13, borderRadius: 13, textAlign: "left",
                    background: on ? "var(--accent-soft)" : "var(--surface)", border: "1.5px solid " + (on ? "var(--accent)" : "var(--border)"), transition: "all .2s",
                  }}>
                    <span style={{ display: "grid", placeItems: "center", width: 38, height: 38, borderRadius: 11, background: on ? "var(--accent)" : "var(--surface-3)", color: on ? "#fff" : "var(--text-muted)" }}><window.Icon name={m.icon} size={18} /></span>
                    <div style={{ flex: 1 }}><div style={{ fontWeight: 700, fontSize: 14 }}>{m.label}</div><div style={{ fontSize: 12, color: "var(--text-faint)" }}>{m.sub}</div></div>
                    <span style={{ width: 19, height: 19, borderRadius: 999, border: "2px solid " + (on ? "var(--accent)" : "var(--border-strong)"), display: "grid", placeItems: "center" }}>{on && <span style={{ width: 9, height: 9, borderRadius: 999, background: "var(--accent)" }} />}</span>
                  </button>
                );
              })}
            </div>

            {/* method-specific detail */}
            <div style={{ marginTop: 16 }}>
              {method === "card" && <CardForm />}
              {method === "transfer" && <TransferInfo amount={amount} />}
              {method === "ussd" && <UssdInfo amount={amount} />}
              {method === "installments" && <div style={{ padding: 14, borderRadius: 13, background: "var(--surface-2)", border: "1px solid var(--border)", fontSize: 13, color: "var(--text-muted)" }}>First instalment of <b className="mono" style={{ color: "var(--text)" }}>{D.fmtFull(monthly)}</b> charged today to your saved card ending <b>4242</b>. Cova auto-renews each month.</div>}
            </div>

            <window.Btn size="lg" iconR="arrowR" style={{ width: "100%", justifyContent: "center", marginTop: 18 }} onClick={pay}>
              Pay {D.fmtFull(method === "installments" ? monthly : amount)}
            </window.Btn>
            <p style={{ textAlign: "center", fontSize: 11.5, color: "var(--text-faint)", marginTop: 12, display: "flex", alignItems: "center", justifyContent: "center", gap: 6 }}><window.Icon name="vault" size={13} />Secured &amp; encrypted · PCI-DSS compliant</p>
          </div>
        </div>
      )}

      {stage === "processing" && (
        <div style={{ padding: 48, textAlign: "center" }}>
          <span style={{ display: "inline-block", width: 52, height: 52, border: "4px solid var(--surface-3)", borderTopColor: "var(--accent)", borderRadius: 999, animation: "vc-spin .8s linear infinite" }} />
          <h2 className="display" style={{ fontSize: 21, marginTop: 22 }}>Processing payment…</h2>
          <p style={{ fontSize: 14, color: "var(--text-muted)", marginTop: 6 }}>Confirming with your bank securely.</p>
        </div>
      )}

      {stage === "approved" && (
        <div style={{ padding: 44, textAlign: "center" }}>
          <span style={{ display: "grid", placeItems: "center", width: 72, height: 72, borderRadius: 999, background: "var(--success)", color: "#fff", margin: "0 auto", animation: "vc-scale-in .4s var(--ease) both" }}><window.Icon name="check" size={40} stroke={3} /></span>
          <h2 className="display" style={{ fontSize: 23, marginTop: 18 }}>Payment approved</h2>
          <p style={{ fontSize: 14, color: "var(--text-muted)", marginTop: 6 }}>Finalising your cover…</p>
        </div>
      )}
    </window.Overlay>
  );
}

function CardForm() {
  return (
    <div style={{ display: "grid", gap: 10 }}>
      <PayField label="Card number" value="4242 4242 4242 4242" icon="quote" mono />
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
        <PayField label="Expiry" value="08 / 28" mono />
        <PayField label="CVV" value="•••" mono />
      </div>
      <PayField label="Name on card" value="Adebola Okafor" />
    </div>
  );
}
function TransferInfo({ amount }) {
  const D = window.VC_DATA;
  return (
    <div style={{ padding: 16, borderRadius: 13, background: "var(--surface-2)", border: "1px solid var(--border)" }}>
      <div style={{ fontSize: 13, color: "var(--text-muted)" }}>Transfer <b className="mono" style={{ color: "var(--text)" }}>{D.fmtFull(amount)}</b> to your unique VaultCova account:</div>
      <div style={{ display: "flex", justifyContent: "space-between", marginTop: 12, paddingTop: 12, borderTop: "1px solid var(--border)" }}>
        <span style={{ fontSize: 13, color: "var(--text-faint)" }}>Wema Bank</span>
        <span className="mono" style={{ fontSize: 15, fontWeight: 700 }}>7831 0042 19</span>
      </div>
      <div style={{ fontSize: 11.5, color: "var(--text-faint)", marginTop: 6 }}>Account auto-confirms in seconds once paid.</div>
    </div>
  );
}
function UssdInfo({ amount }) {
  const D = window.VC_DATA;
  return (
    <div style={{ padding: 16, borderRadius: 13, background: "var(--surface-2)", border: "1px solid var(--border)", textAlign: "center" }}>
      <div style={{ fontSize: 13, color: "var(--text-muted)" }}>Dial this on your registered phone:</div>
      <div className="display mono" style={{ fontSize: 24, marginTop: 8, color: "var(--accent)" }}>*737*000*{Math.round(amount/1000)}#</div>
    </div>
  );
}
function PayField({ label, value, icon, mono }) {
  return (
    <label style={{ display: "block" }}>
      <span style={{ fontSize: 12, fontWeight: 600, color: "var(--text-muted)" }}>{label}</span>
      <div style={{ display: "flex", alignItems: "center", gap: 9, marginTop: 5, padding: "0 13px", borderRadius: 11, background: "var(--surface)", border: "1.5px solid var(--border)" }}>
        {icon && <window.Icon name={icon} size={16} style={{ color: "var(--text-faint)" }} />}
        <input defaultValue={value} className={mono ? "mono" : ""} style={{ flex: 1, border: "none", outline: "none", background: "transparent", padding: "11px 0", fontSize: 14.5, color: "var(--text)" }} />
      </div>
    </label>
  );
}

Object.assign(window, { Payment });