/* Roadmap & Checkout — generated training plan */
const { useState: useS } = React;

const PHASES = [
  {
    tier: 1,
    months: "Months 1–3",
    monthsRaw: "12 weeks",
    title: "SME Foundations",
    company: "Local Logistics Partner (SME)",
    companyShort: "SME",
    role: "Operations Intern · Muscat",
    price: 250,
    weeks: 12,
    competencies: ["Documentation", "WH ops", "Bill of lading", "INCOTERMS"],
    detail:
      "Foundational fluency in a small operator where you handle real shipments end-to-end. <b>Outcome:</b> CV-grade operational experience plus a supervisor evaluation that unlocks Tier 2.",
  },
  {
    tier: 2,
    months: "Months 4–6",
    monthsRaw: "12 weeks",
    title: "Mid-tier Operator",
    company: "GAC Oman",
    companyShort: "GAC",
    role: "Freight Coordinator · Sohar",
    price: 300,
    weeks: 12,
    competencies: ["Freight planning", "Customer ops", "ERP exposure", "KPI reporting"],
    detail:
      "Step up to a regional operator. You'll own a portfolio of recurring clients and learn how a structured ops team runs — process, tooling, and client comms.",
  },
  {
    tier: 3,
    months: "Months 7–9",
    months_raw: "12 weeks",
    title: "Enterprise Placement",
    company: "Asyad Group / DHL — assigned at confirmation",
    companyShort: "ENT",
    role: "Supply Chain Analyst · Muscat",
    price: 400,
    weeks: 12,
    competencies: ["Network design", "S&OP", "Customs strategy", "Vendor mgmt"],
    detail:
      "Graduate to an enterprise operator. Cross-functional exposure across customs, network design, and S&OP — the placement most employers convert into a full-time offer.",
  },
];

const PAY_STORE_KEY = "lc_pay";

function RoadmapScreen({ onBack, onPay, onPaid }) {
  const [mode, setMode] = useS("first"); // "first" or "full"
  // phase: idle | creating | checking | result
  const [phase, setPhase] = useS("idle");
  const [err, setErr] = useS("");
  const [result, setResult] = useS(null); // { paymentStatus, amountOmr, sessionId, invoice, clientReference }

  const total = PHASES.reduce((s, p) => s + p.price, 0);
  const dueNow = mode === "first" ? PHASES[0].price : total;
  const totalWeeks = PHASES.reduce((s, p) => s + p.weeks, 0);
  const partnerCut = Math.round(dueNow * 0.96);
  const platformCut = dueNow - partnerCut;

  // On return from Thawani's hosted page (?pay=return | ?pay=cancel),
  // confirm the real status server-side before showing anything.
  React.useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const pay = params.get("pay");
    if (!pay) return;

    let stored = null;
    try {
      stored = JSON.parse(sessionStorage.getItem(PAY_STORE_KEY) || "null");
    } catch (e) {
      stored = null;
    }
    // Strip the query param so a refresh doesn't re-trigger this.
    window.history.replaceState({}, "", window.location.pathname);

    if (pay === "cancel") {
      setResult({
        paymentStatus: "cancelled",
        amountOmr: stored ? stored.amount : null,
        sessionId: stored ? stored.sessionId : null,
      });
      setPhase("result");
      return;
    }

    if (!stored || !stored.sessionId) {
      setResult({ paymentStatus: "unknown", amountOmr: null });
      setPhase("result");
      return;
    }

    setPhase("checking");
    fetch("/api/checkout/status/" + encodeURIComponent(stored.sessionId))
      .then((r) => r.json())
      .then((d) => {
        setResult({
          paymentStatus: d.paymentStatus || "unknown",
          amountOmr: d.amountOmr != null ? d.amountOmr : stored.amount,
          sessionId: d.sessionId || stored.sessionId,
          invoice: d.invoice || null,
          clientReference: d.clientReference || stored.reference || null,
        });
        setPhase("result");
        sessionStorage.removeItem(PAY_STORE_KEY);
      })
      .catch(() => {
        setResult({
          paymentStatus: "unknown",
          amountOmr: stored.amount,
          sessionId: stored.sessionId,
        });
        setPhase("result");
      });
  }, []);

  const startPayment = () => {
    setErr("");
    setPhase("creating");
    const reference = "LC-" + Date.now();
    const label =
      mode === "first"
        ? "logicconnect — Phase 1 (SME)"
        : "logicconnect — Full Programme (T1–T3)";
    fetch("/api/checkout/session", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        amountOmr: dueNow,
        label,
        reference,
        customer: { name: "Khalid Al Balushi" },
      }),
    })
      .then(async (r) => {
        const d = await r.json();
        if (!r.ok || !d.redirectUrl) {
          throw new Error(
            (d && d.error) || "Could not start the Thawani session."
          );
        }
        sessionStorage.setItem(
          PAY_STORE_KEY,
          JSON.stringify({
            sessionId: d.sessionId,
            amount: dueNow,
            mode,
            reference: d.clientReference || reference,
          })
        );
        window.location.href = d.redirectUrl;
      })
      .catch((e) => {
        setErr(e.message || "Payment could not be started. Please retry.");
        setPhase("idle");
      });
  };

  const busy = phase === "creating" || phase === "checking";

  return (
    <div>
      <header className="roadmap-head">
        <div className="crumb">
          <span className="back" onClick={onBack}>
            ← Back to intake
          </span>
          <span className="sep">/</span>
          <span>Plan</span>
          <span className="sep">/</span>
          <span style={{ color: "var(--ink)" }}>Roadmap · draft</span>
        </div>
        <h1 className="title">
          Your custom <em>logistics training</em> roadmap
        </h1>
        <p className="lede">
          Atlas drafted a three-phase progression based on your intake. Each phase
          unlocks the next on successful completion. Review, edit, or accept — your
          placement officer will approve before activation.
        </p>

        <div className="roadmap-meta">
          <div className="meta-stat">
            <div className="k">Total duration</div>
            <div className="v">
              {totalWeeks}
              <span className="suf">weeks</span>
            </div>
          </div>
          <div className="meta-stat">
            <div className="k">Placements</div>
            <div className="v">
              3<span className="suf">tier 1 → 3</span>
            </div>
          </div>
          <div className="meta-stat">
            <div className="k">Estimated fee</div>
            <div className="v">
              {total}
              <span className="suf">OMR</span>
            </div>
          </div>
          <div className="meta-stat">
            <div className="k">Issued</div>
            <div className="v" style={{ fontSize: 16, paddingTop: 6 }}>
              19 May 2026
            </div>
          </div>
        </div>
      </header>

      <div className="roadmap-wrap">
        <div className="timeline">
          {PHASES.map((p, i) => (
            <article key={i} className="phase" data-tier={p.tier}>
              <span className="node">T{p.tier}</span>
              <div className="phase-card">
                <div className="phase-row">
                  <div className="left">
                    <div className="tier-tag">
                      Phase {p.tier} · {p.months} · {p.monthsRaw || "12 weeks"}
                    </div>
                    <h3>{p.title}</h3>
                    <div className="company-row">
                      <span className="clogo">{p.companyShort}</span>
                      <span>{p.company} — {p.role}</span>
                    </div>
                    <div className="competencies">
                      {p.competencies.map((c) => (
                        <span key={c} className="comp">
                          {c}
                        </span>
                      ))}
                    </div>
                  </div>
                  <div className="right">
                    <div className="price">
                      {p.price}
                      <span className="cur">OMR</span>
                    </div>
                    <div className="price-sub">Placement fee</div>
                  </div>
                </div>
                <div
                  className="phase-detail"
                  dangerouslySetInnerHTML={{ __html: p.detail }}
                />
              </div>
            </article>
          ))}

          <div
            style={{
              paddingLeft: 76,
              marginTop: 6,
              display: "flex",
              gap: 10,
              flexWrap: "wrap",
            }}
          >
            <button className="btn ghost">
              <Refresh size={14} />
              Regenerate with different mix
            </button>
            <button className="btn ghost">
              <FileText size={14} />
              Switch a placement
            </button>
          </div>
        </div>

        <aside>
          <div className="checkout">
            <h4>Checkout summary</h4>
            <div className="ck-sub">Tier-gated · pay as you progress</div>

            {PHASES.map((p) => (
              <div className="ck-line" key={p.tier}>
                <div className="l">
                  Phase {p.tier} · {p.companyShort}
                  <span className="sub">{p.months}</span>
                </div>
                <div className="r mono">{p.price}.00</div>
              </div>
            ))}

            <div className="ck-mode" role="tablist">
              <button
                className={mode === "first" ? "on" : ""}
                onClick={() => setMode("first")}
              >
                Pay Phase 1
              </button>
              <button
                className={mode === "full" ? "on" : ""}
                onClick={() => setMode("full")}
              >
                Pay in full
              </button>
            </div>

            <div className="ck-total">
              <span className="label">
                {mode === "first" ? "Due now" : "Total"}
              </span>
              <span className="value">
                {dueNow}
                <span className="cur">OMR</span>
              </span>
            </div>

            <button
              className="pay-btn"
              onClick={startPayment}
              disabled={busy}
              style={busy ? { opacity: 0.7, cursor: "wait" } : null}
            >
              <Card size={16} />
              {phase === "creating"
                ? "Opening secure checkout…"
                : phase === "checking"
                ? "Confirming payment…"
                : "Proceed to payment"}
              <ArrowRight size={16} className="arrow" />
            </button>

            {err && (
              <div
                style={{
                  marginTop: 10,
                  fontSize: 12.5,
                  color: "var(--red)",
                  lineHeight: 1.5,
                }}
              >
                {err}
              </div>
            )}

            <div className="ck-foot">
              <Lock size={13} className="lock" />
              <span>
                Refundable within 30 days of plan activation if no placement is
                secured. Secured via Thawani (UAT sandbox).
              </span>
            </div>

            <div className="admin-note">
              <div className="tag">
                <Info size={11} style={{ marginRight: 2 }} />
                Admin / Pitch detail · revenue model
              </div>
              <div>
                Each payment is auto-split on receipt. The partner company is paid
                directly; logicconnect retains a small commission for placement &
                progression services.
              </div>
              <div className="split-bar">
                <div className="partner" />
                <div className="platform" />
              </div>
              <div className="split-legend">
                <span>
                  <b>96%</b> → partner ({partnerCut} OMR)
                </span>
                <span>
                  <b>4%</b> → platform ({platformCut} OMR)
                </span>
              </div>
            </div>
          </div>
        </aside>
      </div>

      {phase === "checking" && <PaymentChecking />}

      {phase === "result" &&
        result &&
        (result.paymentStatus === "paid" ? (
          <PaymentSuccess
            result={result}
            onClose={() => {
              setPhase("idle");
              setResult(null);
            }}
            onProceed={() => {
              setPhase("idle");
              setResult(null);
              onPaid && onPaid(result);
            }}
          />
        ) : (
          <PaymentNotice
            result={result}
            onClose={() => {
              setPhase("idle");
              setResult(null);
            }}
          />
        ))}
    </div>
  );
}

function PaymentChecking() {
  return (
    <div className="modal-bg">
      <div className="modal" style={{ maxWidth: 360, textAlign: "center" }}>
        <div style={{ margin: "8px 0 14px" }}>
          <span className="typing" style={{ justifyContent: "center" }}>
            <span />
            <span />
            <span />
          </span>
        </div>
        <h3>Confirming payment</h3>
        <p>Verifying the result with Thawani — one moment.</p>
      </div>
    </div>
  );
}

function PaymentNotice({ result, onClose }) {
  const cancelled = result.paymentStatus === "cancelled";
  return (
    <div className="modal-bg" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div
          className="check"
          style={{ background: cancelled ? "var(--gold-deep)" : "var(--red)" }}
        >
          <Info size={26} />
        </div>
        <h3>{cancelled ? "Payment cancelled" : "Payment not completed"}</h3>
        <p>
          {cancelled
            ? "You left the Thawani checkout before completing payment. Your plan is unchanged — you can retry whenever you're ready."
            : "We couldn't confirm a successful payment for this session. No charge was captured. Please try again."}
        </p>
        {result.sessionId && (
          <div className="receipt">
            <div className="rl">
              <span>Session</span>
              <span>{String(result.sessionId).slice(0, 22)}…</span>
            </div>
            <div className="rl">
              <span>Status</span>
              <span>{result.paymentStatus}</span>
            </div>
            {result.amountOmr != null && (
              <div className="rl">
                <span>Amount</span>
                <span>{result.amountOmr}.00 OMR</span>
              </div>
            )}
          </div>
        )}
        <button
          className="btn lg"
          style={{ width: "100%", marginTop: 18, justifyContent: "center" }}
          onClick={onClose}
        >
          Back to roadmap
          <ArrowRight size={16} />
        </button>
      </div>
    </div>
  );
}

function PaymentSuccess({ result, onClose, onProceed }) {
  const amount = result.amountOmr != null ? result.amountOmr : 0;
  const partner = Math.round(amount * 0.96);
  const platform = amount - partner;
  const txn =
    result.clientReference ||
    (result.sessionId ? String(result.sessionId).slice(0, 22) : "—");
  return (
    <div className="modal-bg" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="check">
          <Check size={28} />
        </div>
        <h3>Payment received</h3>
        <p>
          Your placement is being confirmed. You'll receive your onboarding
          pack and supervisor contact within 24 hours.
        </p>
        <div className="receipt">
          <div className="rl">
            <span>REF</span>
            <span>{txn}</span>
          </div>
          {result.invoice && (
            <div className="rl">
              <span>Invoice</span>
              <span>{result.invoice}</span>
            </div>
          )}
          <div className="rl">
            <span>Amount</span>
            <span>{amount}.00 OMR</span>
          </div>
          <div className="rl">
            <span>Method</span>
            <span>Thawani · UAT</span>
          </div>
          <div className="rl split">
            <span>↳ to partner (96%)</span>
            <span>{partner}.00 OMR</span>
          </div>
          <div className="rl" style={{ color: "var(--muted)" }}>
            <span>↳ platform fee (4%)</span>
            <span>{platform}.00 OMR</span>
          </div>
        </div>
        <button
          className="btn lg gold"
          style={{ width: "100%", marginTop: 18, justifyContent: "center" }}
          onClick={onProceed || onClose}
        >
          See your journey — fresh grad → hired
          <ArrowRight size={16} />
        </button>
        <button
          className="btn ghost"
          style={{
            width: "100%",
            marginTop: 8,
            justifyContent: "center",
            background: "transparent",
            border: 0,
            color: "var(--muted)",
          }}
          onClick={onClose}
        >
          View receipt only
        </button>
      </div>
    </div>
  );
}

/* ============ POST-PAYMENT JOURNEY ============ */
/* Activated program: takes the student from Point A (fresh grad) to
   Point B (hired in logistics). Phase 1 is live post-payment; later
   tiers unlock on completion. Pitch artifact, not a live tracker. */
const JOURNEY_STAGES = [
  {
    kind: "anchor",
    key: "A",
    label: "Point A",
    title: "Fresh graduate",
    body: "No market experience yet — a degree and ambition. This is where Atlas met you.",
    status: "done",
  },
  {
    kind: "step",
    tag: "Activated",
    title: "Plan activated & payment confirmed",
    body: "Phase 1 placement secured. Onboarding pack, supervisor contact and reporting instructions are released to you within 24 hours.",
    status: "done",
    bullets: [
      "Welcome email to you + your assigned supervisor",
      "Onboarding pack: company contact, start date, reporting instructions",
    ],
  },
];

function phaseStage(p, idx) {
  const live = idx === 0;
  return {
    kind: "phase",
    tier: p.tier,
    tag: `Phase ${p.tier} · ${p.months}`,
    title: p.title,
    company: p.company,
    companyShort: p.companyShort,
    role: p.role,
    competencies: p.competencies,
    status: live ? "active" : "locked",
    statusLabel: live ? "In onboarding" : `Unlocks after Phase ${p.tier - 1}`,
    body: live
      ? "You start here. Log weekly timesheets — each pings your supervisor for approval. A mid-point check-in and a final evaluation gate completion."
      : "Unlocks automatically when the previous placement is completed and your supervisor's final evaluation clears.",
    outcome:
      p.tier === 3
        ? "Enterprise placement — the tier most employers convert into a full-time offer."
        : "CV-grade experience + supervisor evaluation that unlocks the next tier.",
  };
}

function JourneyScreen({ onBack, onStories, result }) {
  const amount = result && result.amountOmr != null ? result.amountOmr : null;
  const stages = [
    ...JOURNEY_STAGES,
    ...PHASES.map(phaseStage),
    {
      kind: "step",
      tag: "Certification",
      title: "Certificate issued & tier completed",
      body: "On each completion you get a verifiable PDF certificate (OLA + company branding, QR-verifiable). Your tier increments and the next catalogue unlocks.",
      status: "locked",
    },
    {
      kind: "anchor",
      key: "B",
      label: "Point B",
      title: "Hired in the logistics sector",
      body: "Three real placements, three certificates, a portfolio — not one line on a CV. This is the outcome the plan is engineered for.",
      status: "goal",
    },
  ];

  return (
    <div>
      <header className="roadmap-head">
        <div className="crumb">
          <span className="back" onClick={onBack}>
            ← Plan & payment
          </span>
          <span className="sep">/</span>
          <span>Journey</span>
          <span className="sep">/</span>
          <span style={{ color: "var(--ink)" }}>Active</span>
        </div>
        <h1 className="title">
          Your journey — <em>fresh grad → hired</em>
        </h1>
        <p className="lede">
          Payment confirmed. Your program is now active. Here's exactly what
          happens between today and a full-time role in logistics — every
          milestone, who you'll work with, and what unlocks next.
        </p>

        <div className="roadmap-meta">
          <div className="meta-stat">
            <div className="k">Plan status</div>
            <div className="v" style={{ fontSize: 18, paddingTop: 6, color: "var(--green)" }}>
              ● Active
            </div>
          </div>
          <div className="meta-stat">
            <div className="k">Current tier</div>
            <div className="v">
              1<span className="suf">of 3</span>
            </div>
          </div>
          <div className="meta-stat">
            <div className="k">Next milestone</div>
            <div className="v" style={{ fontSize: 16, paddingTop: 6 }}>
              Onboarding pack
            </div>
          </div>
          {amount != null && (
            <div className="meta-stat">
              <div className="k">Paid</div>
              <div className="v">
                {amount}
                <span className="suf">OMR</span>
              </div>
            </div>
          )}
        </div>
      </header>

      <div className="journey">
        {stages.map((s, i) => (
          <article
            key={i}
            className={"jstage " + s.kind + " is-" + s.status}
          >
            <span className="jnode">
              {s.status === "done" ? (
                <Check size={13} />
              ) : s.kind === "anchor" ? (
                s.key
              ) : s.kind === "phase" ? (
                "T" + s.tier
              ) : (
                <Sparkle size={12} />
              )}
            </span>
            <div className="jcard">
              <div className="jcard-head">
                <div>
                  {s.tag && <div className="jtag">{s.tag}</div>}
                  {s.kind === "anchor" && (
                    <div className="jtag">{s.label}</div>
                  )}
                  <h3>{s.title}</h3>
                </div>
                {s.statusLabel && (
                  <span
                    className={
                      "jstatus " +
                      (s.status === "active" ? "on" : "off")
                    }
                  >
                    {s.statusLabel}
                  </span>
                )}
              </div>
              {s.company && (
                <div className="company-row" style={{ marginTop: 4 }}>
                  <span className="clogo">{s.companyShort}</span>
                  <span>
                    {s.company} — {s.role}
                  </span>
                </div>
              )}
              <p className="jbody">{s.body}</p>
              {s.bullets && (
                <ul className="jlist">
                  {s.bullets.map((b) => (
                    <li key={b}>{b}</li>
                  ))}
                </ul>
              )}
              {s.competencies && (
                <div className="competencies" style={{ marginTop: 10 }}>
                  {s.competencies.map((c) => (
                    <span key={c} className="comp">
                      {c}
                    </span>
                  ))}
                </div>
              )}
              {s.outcome && (
                <div className="joutcome">
                  <Sparkle size={12} /> {s.outcome}
                </div>
              )}
            </div>
          </article>
        ))}
      </div>

      <div className="journey-cta">
        <div>
          <h4>What happens in the next 7 days</h4>
          <p>
            Onboarding pack email → supervisor introduction → confirm your
            start date → first weekly timesheet. You'll be notified at each
            step (email + in-app).
          </p>
        </div>
        <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
          <button className="btn" onClick={onStories}>
            See where this leads
            <ArrowRight size={15} />
          </button>
          <button className="btn ghost" onClick={onBack}>
            Plan & payment breakdown
          </button>
        </div>
      </div>
    </div>
  );
}

window.RoadmapScreen = RoadmapScreen;
window.JourneyScreen = JourneyScreen;