/* global React, Icon, Button, euro, FEEST, buildOrder, ITEM_BY_ID */
const { useState: useStateF, useEffect: useEffectF } = React;

/* ============================================================
   STAP 4 — Overzicht
   ============================================================ */
function ReviewLine({ label, qty, total, sub }) {
  return (
    <div className="rline">
      <span>{qty != null && <span className="rqty tnum">{qty}×</span>}{label}{sub && <span className="muted" style={{ fontWeight: 400 }}> · {sub}</span>}</span>
      <span className="tnum" style={{ fontWeight: 600 }}>{euro(total)}</span>
    </div>
  );
}

function StepOverzicht({ state, goTo, setParent, agreed, setAgreed, showErr }) {
  const { lines, total } = buildOrder(state);
  const p = state.parent;
  const v = state.volunteer;
  const pickup = FEEST.pickupOptions.find((o) => o.id === p.pickup);
  const pickupMissing = showErr && !p.pickup;
  return (
    <div className="wizard-main" style={{ maxWidth: 760, margin: "0 auto", width: "100%" }}>
      <div className="section-block">
        <h2 className="section-title"><Icon name="check" size={22} style={{ color: "var(--primary)" }} /> Controleer je bestelling</h2>
        <p className="section-sub">Klopt alles? Daarna reken je veilig af via Mollie.</p>

        <div className="card" style={{ overflow: "hidden" }}>
          {/* gegevens */}
          <div className="review-sec">
            <div className="rh"><h3>Gegevens</h3><button className="linkbtn" onClick={() => goTo(0)}><Icon name="edit" size={14} style={{ verticalAlign: "-2px", marginRight: 4 }} />Wijzig</button></div>
            <div className="kv"><span className="k">Naam</span><span className="v">{p.naam || "—"}</span></div>
            <div className="kv"><span className="k">E-mail</span><span className="v">{p.email || "—"}</span></div>
            <div className="kv"><span className="k">Telefoon</span><span className="v">{p.telefoon || "—"}</span></div>
            <div className="kv"><span className="k">Volwassenen</span><span className="v">{p.volwassenen}</span></div>
            {p.opmerking && <div className="kv"><span className="k">Opmerking</span><span className="v" style={{ fontWeight: 400 }}>{p.opmerking}</span></div>}
          </div>
          {/* kinderen */}
          <div className="review-sec">
            <div className="rh"><h3>Kinderen ({state.kids.length})</h3><button className="linkbtn" onClick={() => goTo(1)}><Icon name="edit" size={14} style={{ verticalAlign: "-2px", marginRight: 4 }} />Wijzig</button></div>
            {state.kids.map((k) => (
              <div className="kv" key={k.id}>
                <span className="k">{k.naam || "Kind"}</span>
                <span className="v" style={{ fontWeight: 400 }}>{k.opSchool ? k.groep || "groep onbekend" : "niet op school"}</span>
              </div>
            ))}
          </div>
          {/* bestelling */}
          <div className="review-sec">
            <div className="rh"><h3>Eten, drinken & extra's</h3><button className="linkbtn" onClick={() => goTo(2)}><Icon name="edit" size={14} style={{ verticalAlign: "-2px", marginRight: 4 }} />Wijzig</button></div>
            {lines.length === 0 ? <p className="muted" style={{ fontSize: 14 }}>Nog niets in je mandje.</p>
              : lines.map((l) => <ReviewLine key={l.key} label={l.name} qty={l.kind === "donation" ? null : l.qty} total={l.total} sub={l.sub} />)}
            {v.wil && (
              <div style={{ display: "flex", gap: 9, alignItems: "center", marginTop: 12, color: "var(--rust-600)", fontSize: 13.5, fontWeight: 600 }}>
                <Icon name="hand" size={16} /> Je helpt mee{v.taak ? `: ${v.taak.toLowerCase()}` : ""}{v.dagdeel ? ` · ${v.dagdeel.toLowerCase()}` : ""}
              </div>
            )}
          </div>
          {/* totaal */}
          <div className="review-sec" style={{ background: "var(--surface-sunk)" }}>
            <div className="cart-total" style={{ borderTop: 0, padding: 0, marginTop: 0 }}>
              <span className="t-lbl">Totaal te betalen</span>
              <span className="t-val tnum">{euro(total)}</span>
            </div>
          </div>
        </div>

        {/* bonnen & muntjes ophalen — verplichte keuze */}
        <div className="section-block" style={{ marginTop: "var(--space-6)" }}>
          <h3 className="section-title" style={{ fontSize: "var(--text-lg)", alignItems: "flex-start" }}>
            <Icon name="gift" size={20} style={{ color: "var(--primary)", flex: "none", marginTop: "3px" }} />
            <span>Hoe wil je je bonnen &amp; muntjes ontvangen?<span style={{ color: "var(--rust-600)" }}> *</span></span>
          </h3>
          <p className="section-sub">Na je bestelling krijg je waardebonnen en muntjes. Kies hoe je die wilt ontvangen.</p>
          <div className={"pickup-grid" + (pickupMissing ? " pickup-grid--err" : "")} role="radiogroup" aria-label="Hoe wil je de bonnen ontvangen?" aria-required="true">
            {FEEST.pickupOptions.map((opt) => {
              const on = p.pickup === opt.id;
              return (
                <button key={opt.id} type="button" role="radio" aria-checked={on}
                  className={"pickup-opt" + (on ? " is-on" : "")} onClick={() => setParent("pickup", opt.id)}>
                  <span className="po-ic"><Icon name={opt.icon} size={22} /></span>
                  <span className="po-body">
                    <span className="po-label">{opt.label}</span>
                    <span className="po-desc">{opt.desc}</span>
                  </span>
                  <span className="po-radio" aria-hidden="true" />
                </button>
              );
            })}
          </div>
          {pickupMissing && (
            <p style={{ display: "flex", alignItems: "center", gap: 8, color: "var(--rust-600)", fontSize: 13.5, fontWeight: 600, marginTop: 12 }}>
              <Icon name="info" size={16} /> Kies hoe je je bonnen en muntjes wilt ontvangen.
            </p>
          )}
        </div>

        <label style={{ display: "flex", gap: 12, alignItems: "flex-start", marginTop: 20, fontSize: 14, color: "var(--fg-2)", cursor: "pointer", lineHeight: 1.5 }}>
          <input type="checkbox" checked={agreed} onChange={(e) => setAgreed(e.target.checked)} style={{ width: 20, height: 20, accentColor: "var(--primary)", marginTop: 1, flex: "none" }} />
          {pickup
            ? <span>Ik weet dat ik mijn bonnen en muntjes ontvang via <b>{pickup.label.toLowerCase()}</b>, en dat aanpassen kan tot {FEEST.event.deadline}.</span>
            : <span>Ik weet dat ik mijn bonnen en muntjes ontvang via de gekozen manier hierboven, en dat aanpassen kan tot {FEEST.event.deadline}.</span>}
        </label>
      </div>
    </div>
  );
}

/* ============================================================
   MOLLIE — betaal-mock
   ============================================================ */
const MOLLIE_METHODS = [
  { id: "ideal", nm: "iDEAL", em: "🏦" },
  { id: "card", nm: "Creditcard", em: "💳" },
  { id: "paypal", nm: "PayPal", em: "🅿️" },
];
function Mollie({ amount, onSuccess, onCancel }) {
  const [method, setMethod] = useStateF("ideal");
  const [phase, setPhase] = useStateF("select"); // select | processing
  const pay = () => { setPhase("processing"); setTimeout(() => onSuccess(method), 2200); };
  return (
    <div className="mollie-wrap">
      <div className="mollie">
        <div className="mollie-top">
          <span className="mollie-logo">mollie<span>.</span></span>
          <div className="mollie-amt"><div className="a tnum">{euro(amount)}</div><div className="m">De Schovenhorst</div></div>
        </div>
        {phase === "select" ? (
          <div className="mollie-body">
            <h4>Kies je betaalmethode</h4>
            <p className="sub">Eindfeest — bestelling Ouderraad (OR)</p>
            {MOLLIE_METHODS.map((m) => (
              <div key={m.id} className={"mollie-method" + (method === m.id ? " is-sel" : "")} onClick={() => setMethod(m.id)}>
                <span className="ico">{m.em}</span>
                <span className="nm">{m.nm}</span>
                <span className="rad" />
              </div>
            ))}
            {method === "ideal" && (
              <select className="inp" style={{ marginTop: 6, borderRadius: 10 }} defaultValue="">
                <option value="" disabled>Kies je bank…</option>
                <option>ABN AMRO</option><option>ING</option><option>Rabobank</option><option>SNS</option><option>ASN Bank</option><option>bunq</option>
              </select>
            )}
            <button className="mollie-pay tnum" onClick={pay}>Betaal {euro(amount)}</button>
            <button className="mollie-cancel" onClick={onCancel}>Annuleren en terug</button>
          </div>
        ) : (
          <div className="mollie-body">
            <div className="mollie-spin">
              <div className="ring" />
              <div style={{ textAlign: "center" }}>
                <div style={{ fontWeight: 700, color: "#1a1a25" }}>Betaling verwerken…</div>
                <div style={{ fontSize: 13, color: "#8a8a96", marginTop: 4 }}>Je wordt zo teruggestuurd.</div>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

/* ============================================================
   BEVESTIGING + tijdlijn
   ============================================================ */
function Confirmation({ state, orderNr, onRestart, manageHref }) {
  const { total, count } = buildOrder(state);
  const schoolKids = state.kids.filter((k) => k.opSchool);
  const pickup = FEEST.pickupOptions.find((o) => o.id === state.parent.pickup) || FEEST.pickupOptions[0];
  const pickupStep = {
    kind: {
      when: "Week vóór het feest",
      t: "Muntjes & bonnen naar huis",
      d: schoolKids.length > 0
        ? `${schoolKids.map((k) => k.naam).filter(Boolean).join(", ") || "Je (oudste) kind"} krijgt jullie muntjes en waardebonnen mee in de schooltas.`
        : "Je muntjes en waardebonnen worden meegegeven met je (oudste) kind op school.",
    },
    schoolplein: {
      when: "Woensdag 2 juli",
      t: "Ophalen op het schoolplein",
      d: "Haal je bonnen en muntjes op bij de hoofdingang van De Schovenhorst om 08:30u of 12:30u, bij een van de OR-leden.",
    },
    festival: {
      when: "Donderdagavond op het feest",
      t: "Ophalen tijdens het festival",
      d: "Je bonnen en muntjes liggen klaar bij de muntenverkoop op het festival. Let op: dit kan druk zijn — kom op tijd.",
    },
  }[pickup.id];
  const tl = [
    { icon: "mail", when: "Nu", t: "Betaling ontvangen", d: `We hebben je bestelling van ${euro(total)} ontvangen. Een bevestiging staat in je inbox op ${state.parent.email || "je e-mailadres"}.`, now: true },
    { icon: "edit", when: `Tot ${FEEST.event.deadline}`, t: "Aanpassen kan nog", d: "Iets vergeten of toch een muntje meer? Via de link in je e-mail pas je je bestelling aan tot de sluitingsdatum." },
    { icon: pickup.icon, when: pickupStep.when, t: pickupStep.t, d: pickupStep.d },
    { icon: "ticket", when: EV_DATE, t: "Op het feest", d: "Lever je bonnen in bij de kraam en je eten staat klaar. Muntjes ruil je in voor drinken. Geen rij, meer tijd om te genieten." },
  ];
  return (
    <div className="confirm-wrap">
      <div className="confirm-hero">
        <div className="confirm-badge"><Icon name="checkBig" size={42} /></div>
        <p className="eyebrow" style={{ marginBottom: 12 }}>Gelukt — tot op het feest!</p>
        <h1>Bedankt, {state.parent.naam ? state.parent.naam.split(" ")[0] : "ouder"}!</h1>
        <p className="lead">Je bestelling voor het eindfeest is gelukt en betaald. Hieronder zie je precies wat er nu gebeurt.</p>
        <div className="ordernr"><Icon name="ticket" size={16} style={{ color: "var(--primary)" }} /> Bestelnummer <b>{orderNr}</b></div>
      </div>

      <div className="card" style={{ padding: "var(--space-6)", marginBottom: "var(--space-6)" }}>
        <h3 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-lg)", fontWeight: 700, margin: "0 0 6px" }}>Wat gebeurt er nu?</h3>
        <p className="muted" style={{ fontSize: 14, margin: "0 0 8px" }}>Van betaling tot het feest zelf.</p>
        <div className="timeline">
          {tl.map((s, i) => (
            <div key={i} className={"tl-step" + (s.now ? " is-now" : "")}>
              <div className="tl-dot"><Icon name={s.icon} size={20} /></div>
              <div className="tl-body">
                <div className="tl-when">{s.when}</div>
                <h4>{s.t}</h4>
                <p>{s.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
        <Button variant="secondary" icon="left" onClick={onRestart}>Nieuwe bestelling</Button>
        <Button icon="mail" onClick={() => alert("In de echte site openen we hier de mailbevestiging.")}>Bekijk bevestigingsmail</Button>
        {manageHref && <a className="btn btn--secondary" href={manageHref}><Icon name="edit" size={18} /> Pas je bestelling aan</a>}
      </div>
    </div>
  );
}
const EV_DATE = window.FEEST.event.date;

Object.assign(window, { StepOverzicht, Mollie, Confirmation });