/* eslint-disable */

function App() {
  const [checkout, setCheckout] = React.useState(null);

  const onCheckout = (which) => setCheckout(which || "lifetime");

  return (
    <>
      <div className="app-bg"><div className="grid" /></div>
      <TopNav onGetKey={() => onCheckout("lifetime")} />
      <Landing heroVariant="default" featured="lifetime" onCheckout={onCheckout} />
      <PurchasePing />
      <Footer />
      <CheckoutModal
        open={!!checkout}
        which={checkout}
        setWhich={setCheckout}
        onClose={() => setCheckout(null)}
      />
    </>
  );
}

const CheckoutModal = ({ open, which, setWhich, onClose }) => {
  const [loading, setLoading] = React.useState(false);
  const [err, setErr] = React.useState("");
  React.useEffect(() => {
    if (open) {
      setErr("");
      setLoading(false);
    }
  }, [open]);

  const isLifetime = which === "lifetime";
  const price = isLifetime ? 25 : 10;

  const goStripe = async () => {
    setErr("");
    setLoading(true);
    try {
      const res = await fetch("/api/checkout", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ product: which }),
      });
      const data = await res.json().catch(() => ({}));
      if (data.url) {
        window.location.href = data.url;
        return;
      }
      setErr(data.error || `Checkout failed (${res.status})`);
    } catch {
      setErr("Checkout request failed. Is this page opened via http://localhost:3001 (node server.js)?");
    } finally {
      setLoading(false);
    }
  };

  return (
    <Modal open={open} onClose={onClose} title="Checkout" width={520}>
      <div className="col" style={{ gap: 18 }}>
        <p className="muted" style={{ margin: 0, fontSize: 14 }}>
          Pick a plan, then continue to <StripeMark /> — real card form is on their hosted page.
        </p>
        <div className="grid-2" style={{ gap: 12 }}>
          <PlanPick
            title="Monthly"
            price="$10"
            period="/ month"
            desc="Auto-renews every 30 days. Cancel anytime."
            selected={!isLifetime}
            onClick={() => setWhich("monthly")}
          />
          <PlanPick
            title="Lifetime"
            price="$25"
            period="once"
            desc="Permanent key. All future updates included."
            selected={isLifetime}
            onClick={() => setWhich("lifetime")}
            accent
          />
        </div>
        <Receipt price={price} isLifetime={isLifetime} />
        {err ? (
          <div className="surface" style={{ padding: 12, fontSize: 13, borderColor: "var(--bad)", color: "var(--fg-1)" }}>
            {err}
          </div>
        ) : null}
        <div className="row" style={{ justifyContent: "space-between" }}>
          <button type="button" className="btn ghost" onClick={onClose} disabled={loading}>
            Cancel
          </button>
          <button type="button" className="btn accent" onClick={goStripe} disabled={loading}>
            {loading ? "Opening Stripe…" : `Pay $${price} on Stripe`} <Icon name="arrow-right" size={14} />
          </button>
        </div>
      </div>
    </Modal>
  );
};

const PlanPick = ({ title, price, period, desc, selected, onClick, accent }) => (
  <button
    type="button"
    onClick={onClick}
    className={`plan-pick-btn ${selected ? "plan-pick-btn--selected" : ""}`}
    style={{
      background: selected ? "var(--accent-soft)" : "var(--bg-2)",
      border: `1px solid ${selected ? "var(--accent-line)" : "var(--line)"}`,
    }}
  >
    <div className="spread">
      <span className="muted mono" style={{ fontSize: 11, letterSpacing: ".14em", textTransform: "uppercase" }}>{title}</span>
      {selected && <span className="badge accent">Selected</span>}
    </div>
    <div className="row" style={{ alignItems: "baseline", gap: 6 }}>
      <span style={{ fontFamily: "var(--font-display)", fontSize: 30, fontWeight: 600, letterSpacing: "-0.03em" }}>{price}</span>
      <span className="muted">{period}</span>
    </div>
    <span className="muted" style={{ fontSize: 13 }}>{desc}</span>
  </button>
);

const Receipt = ({ price, isLifetime }) => (
  <div className="surface" style={{ padding: 16, fontSize: 13 }}>
    <div className="spread"><span className="muted">Subtotal</span><span className="mono">${price.toFixed(2)}</span></div>
    <div className="spread" style={{ marginTop: 4 }}><span className="muted">Tax</span><span className="mono">$0.00</span></div>
    <div className="divider" style={{ marginBlock: 10 }} />
    <div className="spread"><span style={{ fontWeight: 500 }}>Total today</span><span className="mono" style={{ fontWeight: 600 }}>${price.toFixed(2)}</span></div>
    {!isLifetime && <div className="dim mono" style={{ fontSize: 11, marginTop: 8 }}>Renews ${price.toFixed(2)} every 30 days. Cancel anytime.</div>}
  </div>
);

const StripeMark = () => (
  <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, color: "#635bff", letterSpacing: "-0.02em", fontSize: 14 }}>stripe</span>
);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);