// ============================================================
// LVRD Diagnostic Checkout — the four step components
//
// Each step receives the shared `data` + `setData` + nav
// callbacks from <App>. Steps own their own validation; on
// success they call `onNext`.
//
// Step 04 uses Stripe Payment Element (real keys) or falls
// back to a mock UI when credentials are absent (dev/preview).
// The Stripe Elements instance + stripe object are passed in
// via `stripeCtx` which App initializes when step 4 is reached.
// ============================================================

const { useState: useStateS, useEffect: useEffectS, useRef: useRefS } = React;

// ------------------------------------------------------------
// Step 01 — Quick start
//   email + business one-liner
// ------------------------------------------------------------
function Step01({ data, setData, onNext }) {
  const [errors, setErrors] = useStateS({});

  function submit(e) {
    if (e) e.preventDefault();
    const errs = {};
    if (!data.email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) {
      errs.email = "Enter a valid email so we can send your receipt.";
    }
    if (!data.businessOneLine || data.businessOneLine.trim().length < 3) {
      errs.businessOneLine = "Tell us what you do in one line.";
    }
    setErrors(errs);
    if (Object.keys(errs).length === 0) onNext();
  }

  return (
    <StepShell
      eyebrow="Start the diagnostic"
      headline={<span>Ninety minutes. Three documents. <em>The week you've been losing.</em></span>}
      lede="Two quick fields and we keep going. You can review everything before you pay on the last step."
    >
      <form onSubmit={submit} noValidate>
        <TextField
          id="email"
          label="Your email"
          help="Receipt goes here. Your diagnostic prep goes here. We don't sell or share."
          value={data.email || ""}
          onChange={(v) => setData({ email: v })}
          placeholder="you@yourbusiness.com"
          type="email"
          autoComplete="email"
          autoFocus
          error={errors.email}
        />
        <TextField
          id="biz-one"
          label="What do you run?"
          help="One line. Plain words."
          value={data.businessOneLine || ""}
          onChange={(v) => setData({ businessOneLine: v })}
          placeholder="HVAC contractor in Charlotte, NC"
          error={errors.businessOneLine}
        />
        <div className="dx-step-foot">
          <button type="submit" className="dx-btn-primary">
            <span>Keep going</span>
            <span aria-hidden="true">&rarr;</span>
          </button>
          <span className="dx-foot-meta">90-min session &nbsp;&middot;&nbsp; 10-hour guarantee &nbsp;&middot;&nbsp; Blueprint is yours either way</span>
        </div>
      </form>
    </StepShell>
  );
}

// ------------------------------------------------------------
// Step 02 — About your business
// ------------------------------------------------------------
const TEAM_SIZE_OPTIONS = [
  { value: "solo",  label: "Just me" },
  { value: "2-5",   label: "2 to 5" },
  { value: "6-20",  label: "6 to 20" },
  { value: "20+",   label: "20+" },
];

const TOOLS_OPTIONS = [
  { value: "quickbooks",    label: "QuickBooks" },
  { value: "jobber",        label: "Jobber" },
  { value: "servicetitan",  label: "ServiceTitan" },
  { value: "google",        label: "Google Workspace" },
  { value: "microsoft",     label: "Microsoft 365" },
  { value: "excel",         label: "Excel / spreadsheets" },
  { value: "paper",         label: "Pen and paper" },
  { value: "other",         label: "Other" },
];

function Step02({ data, setData, onNext, onBack }) {
  const [errors, setErrors] = useStateS({});
  const tools = data.tools || [];
  const showOther = tools.includes("other");

  function submit(e) {
    if (e) e.preventDefault();
    const errs = {};
    if (!data.businessType || data.businessType.trim().length < 2) errs.businessType = "Tell us what kind.";
    if (!data.teamSize) errs.teamSize = "Pick a size.";
    if (!data.biggestTimeSink || data.biggestTimeSink.trim().length < 6) errs.biggestTimeSink = "A sentence or two.";
    if (!tools.length) errs.tools = "Pick at least one.";
    if (showOther && (!data.toolsOther || !data.toolsOther.trim())) errs.toolsOther = "Tell us which other tool.";
    if (!data.phone || data.phone.replace(/\D/g, "").length < 7) errs.phone = "We need a number to call.";
    setErrors(errs);
    if (Object.keys(errs).length === 0) onNext();
  }

  return (
    <StepShell
      eyebrow="About your business"
      headline={<span>A few quick taps. <em>So the diagnostic isn't starting from zero.</em></span>}
      lede="What you put here seeds the call. Plain words. Chip what fits, type the rest."
    >
      <form onSubmit={submit} noValidate>
        <TextField
          id="biz-type"
          label="What kind of business?"
          help="A line is plenty. We just need the shape."
          value={data.businessType || ""}
          onChange={(v) => setData({ businessType: v })}
          placeholder="Residential roofing, 3 trucks"
          error={errors.businessType}
        />

        <ChipGroup
          label="How big is the team?"
          options={TEAM_SIZE_OPTIONS}
          value={data.teamSize || null}
          onChange={(v) => setData({ teamSize: v })}
        />
        {errors.teamSize && <div className="dx-field-error" style={{ marginTop: "-20px", marginBottom: "28px" }}>{errors.teamSize}</div>}

        <TextareaField
          id="time-sink"
          label="What's eating your week right now?"
          help="The thing you'd hand off first if you could. Plain words."
          value={data.biggestTimeSink || ""}
          onChange={(v) => setData({ biggestTimeSink: v })}
          placeholder="Quotes, scheduling, the phone never stops, supplier follow-ups..."
          rows={4}
          error={errors.biggestTimeSink}
        />

        <ChipGroup
          label="What tools are you running on?"
          hint="Tap all that apply"
          mode="multi"
          options={TOOLS_OPTIONS}
          value={tools}
          onChange={(v) => setData({ tools: v })}
        />
        {errors.tools && <div className="dx-field-error" style={{ marginTop: "-20px", marginBottom: "16px" }}>{errors.tools}</div>}

        {showOther && (
          <TextField
            id="tools-other"
            label="Which other?"
            value={data.toolsOther || ""}
            onChange={(v) => setData({ toolsOther: v })}
            placeholder="Tell us what we're missing"
            error={errors.toolsOther}
          />
        )}

        <TextField
          id="phone"
          label="Best number for the call"
          help="The 90-minute diagnostic happens over a call. Mobile is fine."
          value={data.phone || ""}
          onChange={(v) => setData({ phone: v })}
          placeholder="(555) 555-0100"
          type="tel"
          inputMode="tel"
          autoComplete="tel"
          error={errors.phone}
        />

        <TextField
          id="heard"
          label="How'd you hear about LVRD?"
          hint="Optional"
          value={data.heardFrom || ""}
          onChange={(v) => setData({ heardFrom: v })}
          placeholder="A friend, a podcast, a search..."
        />

        <div className="dx-step-foot">
          <button type="submit" className="dx-btn-primary">
            <span>Keep going</span>
            <span aria-hidden="true">&rarr;</span>
          </button>
        </div>
      </form>
    </StepShell>
  );
}

// ------------------------------------------------------------
// Step 03 — How this works
//   No form fields. Value reinforcement before payment.
// ------------------------------------------------------------
function Step03({ onNext, onBack }) {
  return (
    <StepShell
      eyebrow="How this works"
      headline={<span>Three steps. <em>The first one takes 90 minutes.</em></span>}
      lede="Before you pay, a quick recap of what you're getting and the two guarantees that come with it."
    >
      <ol className="dx-r-steps">
        <li className="dx-r-step">
          <span className="n">01</span>
          <div className="body">
            <h3 className="name">We talk for 90 minutes. We map your week.</h3>
            <p className="desc">A real conversation. No deck. We map where the day actually goes and draft the team that would handle it.</p>
          </div>
        </li>
        <li className="dx-r-step">
          <span className="n">02</span>
          <div className="body">
            <h3 className="name">You get the map, the blueprint, the playbook.</h3>
            <p className="desc">Three documents, delivered within 5 business days of the call. Yours regardless of what comes next.</p>
          </div>
        </li>
        <li className="dx-r-step">
          <span className="n">03</span>
          <div className="body">
            <h3 className="name">You decide what's next.</h3>
            <p className="desc">Self-install with a developer, hand it to your team, or have us build it. Your call. No follow-up sales pressure.</p>
          </div>
        </li>
      </ol>

      <h2 className="dx-r-h2">Two guarantees</h2>
      <div className="dx-r-guarantees">
        <div className="dx-guar">
          <span className="dx-guar-label">Guarantee 01 &nbsp;&middot;&nbsp; The 10-hour guarantee</span>
          <h3 className="dx-guar-h">If we don't find ten hours, you don't pay.</h3>
          <p className="dx-guar-body">After the 90-minute diagnostic, if you don't see at least 10 hours a week of work an AI team would handle for you, email ryan@lvrd.ai within 24 hours. Full refund. No negotiation.</p>
        </div>
        <div className="dx-guar">
          <span className="dx-guar-label">Guarantee 02 &nbsp;&middot;&nbsp; The blueprint is yours</span>
          <h3 className="dx-guar-h">Whether you hire us or not, the documents are yours.</h3>
          <p className="dx-guar-body">The map, the blueprint, and the playbook are yours to keep. Self-install, hand them to a developer, or sit on them for a year.</p>
        </div>
      </div>

      <div className="dx-step-foot">
        <button type="button" className="dx-btn-primary" onClick={onNext}>
          <span>Continue to payment</span>
          <span aria-hidden="true">&rarr;</span>
        </button>
        <span className="dx-foot-meta">One-time charge &nbsp;&middot;&nbsp; No auto-renewal &nbsp;&middot;&nbsp; Encrypted via Stripe</span>
      </div>
    </StepShell>
  );
}

// ------------------------------------------------------------
// Step 04 — Secure your spot
//   Two-column layout (summary left, payment right) on desktop.
//   Stacked on mobile. Uses real Stripe Payment Element when
//   credentials are available; falls back to mock UI in dev.
//
//   stripeCtx shape:
//     { stripe, elements, loading, error, mock }
//   - loading: credentials are being fetched from the API
//   - mock: no credentials — show dev-mode UI
//   - stripe + elements: initialized Stripe.js objects
// ------------------------------------------------------------
function Step04({ data, onPay, onBack, stripeCtx }) {
  const paymentElRef = useRefS(null);
  const expressElRef = useRefS(null);
  const [submitting, setSubmitting] = useStateS(false);
  const [stripeError, setStripeError] = useStateS(null);
  const [elemMounted, setElemMounted] = useStateS(false);

  // Mount Stripe Payment Element once elements are ready.
  useEffectS(() => {
    if (!stripeCtx || !stripeCtx.elements || elemMounted) return;
    if (!paymentElRef.current) return;

    const paymentElement = stripeCtx.elements.create("payment", {
      layout: "tabs",
    });
    paymentElement.mount(paymentElRef.current);
    setElemMounted(true);

    return () => {
      paymentElement.unmount();
    };
  }, [stripeCtx && stripeCtx.elements, elemMounted]);

  // Mount Stripe Express Checkout Element (Apple Pay, Google Pay, Link, etc.)
  useEffectS(() => {
    if (!stripeCtx || !stripeCtx.elements) return;
    if (!expressElRef.current) return;

    const expressElement = stripeCtx.elements.create("expressCheckout", {
      buttonHeight: 52,
    });
    expressElement.mount(expressElRef.current);

    return () => {
      expressElement.unmount();
    };
  }, [stripeCtx && stripeCtx.elements]);

  async function pay() {
    if (submitting) return;
    setStripeError(null);

    // Mock mode (dev without Stripe keys) — simulate success.
    if (!stripeCtx || stripeCtx.mock) {
      setSubmitting(true);
      const completed = {
        ...data,
        paidAt: new Date().toISOString(),
        paymentMethod: "mock",
        amount: 500,
        reference: "dx_" + Date.now().toString(36).slice(-8),
      };
      try {
        localStorage.setItem("lvrd_dx_completed", JSON.stringify(completed));
        localStorage.removeItem("lvrd_dx_v1");
      } catch (_) {}
      setTimeout(() => {
        window.location.href = "checkout-flow-booked.html";
      }, 700);
      return;
    }

    if (!stripeCtx.stripe || !stripeCtx.elements) return;
    setSubmitting(true);

    const { error } = await stripeCtx.stripe.confirmPayment({
      elements: stripeCtx.elements,
      confirmParams: {
        return_url: window.location.origin + "/checkout-flow-booked.html",
      },
    });

    // If we get here, confirmPayment returned an error.
    // Successful payments redirect; they never reach this code.
    if (error) {
      setStripeError(error.message);
      setSubmitting(false);
    }
  }

  const isLoading = stripeCtx && stripeCtx.loading;
  const isMock = !stripeCtx || stripeCtx.mock;

  return (
    <StepShell
      wide
      eyebrow="Secure your spot"
      headline={<span>Last step. <em>Pay and pick a time.</em></span>}
      lede="Encrypted via Stripe. Your card never touches LVRD."
    >
      <div className="dx-pay-grid">
        {/* Order summary column */}
        <aside className="dx-summary" aria-label="Order summary">
          <h3 className="dx-summary-h">Order summary</h3>

          <div className="dx-summary-line">
            <span>
              <span className="label">LVRD Diagnostic</span>
              <span className="label-sub">90-min session, delivered within 5 business days</span>
            </span>
            <span className="amount">$500.00</span>
          </div>

          <div className="dx-summary-total">
            <span className="label">Total due today</span>
            <span className="amount">$500.00</span>
          </div>

          <div className="dx-summary-block">
            <span className="dx-summary-block-label">What you keep</span>
            A map of your operations &middot; Your AI team blueprint &middot; Your operating playbook. Three documents you keep regardless of whether you hire us to build.
          </div>

          <div className="dx-fineprint">
            <p><strong style={{ color: "var(--fg-strong)", fontWeight: 600 }}>10-hour guarantee.</strong> Full refund if it doesn't pencil out.</p>
            <p>Blueprint is yours either way.</p>
            <p>One-time charge. No auto-renewal.</p>
            <p>Delivered within 5 business days of the call.</p>
          </div>
        </aside>

        {/* Payment column */}
        <section className="dx-pay" aria-label="Payment">
          {isLoading ? (
            <div className="dx-stripe-loading">
              <span className="spinner" />
              <span>Preparing secure checkout&hellip;</span>
            </div>
          ) : (
            <>
              {/* Express Checkout (Apple Pay, Google Pay, Link, PayPal) */}
              {!isMock && (
                <>
                  <h3 className="dx-pay-h">Express payment</h3>
                  <div ref={expressElRef} id="express-checkout-element" />
                  <div className="dx-divider"><span>Or pay with card</span></div>
                </>
              )}

              {/* Stripe Payment Element (card + BNPL tabs) */}
              {!isMock ? (
                <div ref={paymentElRef} id="payment-element" />
              ) : (
                <div className="dx-pmt-mock">
                  <strong>Dev mode — no Stripe credentials</strong>
                  Click "Pay $500" to simulate a successful payment and continue to the booking page.
                </div>
              )}

              {stripeError && (
                <div className="dx-stripe-error" role="alert">{stripeError}</div>
              )}

              <div className="dx-pay-restate">
                <strong>10-hour guarantee.</strong> If we don't find ten hours a week of work an AI team would handle, email Ryan within 24 hours of the call. Full refund.
              </div>

              <div className="dx-pay-cta">
                <button
                  type="button"
                  className="dx-pay-btn"
                  disabled={submitting}
                  onClick={pay}
                >
                  {submitting ? (
                    <>
                      <span className="spinner" />
                      <span>Processing&hellip;</span>
                    </>
                  ) : (
                    <>
                      <LockIcon />
                      <span>Pay $500</span>
                    </>
                  )}
                </button>
                <div className="dx-pay-trust">
                  <LockIcon />
                  <span>Encrypted via Stripe &nbsp;&middot;&nbsp; Your card never touches LVRD</span>
                </div>
              </div>
            </>
          )}
        </section>
      </div>
    </StepShell>
  );
}

Object.assign(window, {
  Step01,
  Step02,
  Step03,
  Step04,
});