// Order confirmation + WA handoff

function Confirmation({ go, orderId, form, total, items, onReset }) {
  const lines = items.map((it) => ({ ...it, p: PRODUCTS.find((x) => x.id === it.id) })).filter((l) => l.p);
  const message = [
    `Halo Baswara! 🍫`,
    `Saya ingin memesan:`,
    ``,
    ...lines.map((l) => `• ${l.p.name} ${l.p.weight} × ${l.qty} — ${formatIDR(l.p.price * l.qty)}`),
    ``,
    `Ongkir: ${form.shippingFee == null ? "mohon dikonfirmasi" : form.shippingFee === 0 ? "Gratis" : formatIDR(form.shippingFee)}`,
    `Total: ${formatIDR(total)}${form.shippingFee == null ? " + ongkir" : ""}`,
    ``,
    `Nama: ${form.name}`,
    `No. WA: ${form.phone}`,
    form.method === "pickup" ? "" : `Alamat: ${form.address}, ${form.zone === OTHER_ZONE ? form.city : form.zone} ${form.postal}`,
    `Pengiriman: ${form.shippingLabel}`,
    form.notes ? `Catatan: ${form.notes}` : "",
    ``,
    `Order #${orderId}`,
  ].filter(Boolean).join("\n");

  return (
    <div className="screen" data-screen-label="06 Confirmation">
      <div style={{
        background: "var(--cocoa-deep)", color: "#fff8e7",
        padding: "60px 24px 80px", position: "relative", overflow: "hidden",
      }}>
        {/* Petals */}
        <svg style={{ position: "absolute", inset: 0, opacity: 0.18 }} width="100%" height="100%">
          <defs>
            <pattern id="conf-petals" width="60" height="60" patternUnits="userSpaceOnUse">
              <g transform="translate(30 30)">
                {[0, 72, 144, 216, 288].map((deg, i) => (
                  <ellipse key={i} cx="0" cy="-9" rx="4" ry="9" fill="#fff8e7" transform={`rotate(${deg})`} />
                ))}
              </g>
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#conf-petals)" />
        </svg>

        <div style={{ position: "relative" }}>
          <div style={{
            width: 64, height: 64, borderRadius: "50%",
            background: "var(--gold)", color: "var(--cocoa-deep)",
            display: "flex", alignItems: "center", justifyContent: "center",
            margin: "0 auto 22px",
          }}>
            <Icon name="check" size={28} stroke={2.4} />
          </div>
          <div className="eyebrow" style={{ color: "var(--gold-soft)", textAlign: "center" }}>
            Suksma · Terima kasih
          </div>
          <h1 className="h-display" style={{
            fontSize: 36, color: "#fff8e7", textAlign: "center",
            margin: "10px 0 0",
          }}>
            Pesanan diterima.
          </h1>
          <p style={{
            textAlign: "center", color: "rgba(255,248,231,0.7)",
            fontSize: 14, marginTop: 12, lineHeight: 1.5,
          }}>
            Tinggal kirim pesan WhatsApp ini ke kami<br/>untuk konfirmasi terakhir.
          </p>
        </div>
      </div>

      <div style={{ padding: "20px", marginTop: -50, position: "relative" }}>
        <div style={{
          background: "var(--surface)", border: "1px solid var(--line)",
          borderRadius: "var(--r-xl)", padding: 20, boxShadow: "var(--shadow-md)",
        }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 14 }}>
            <div className="eyebrow">Order #{orderId}</div>
            <div style={{ fontSize: 11, color: "var(--ink-muted)", fontFamily: "var(--font-mono)" }}>
              {new Date().toLocaleDateString("id-ID", { day: "numeric", month: "long", year: "numeric" })}
            </div>
          </div>

          {lines.map((l) => (
            <div key={l.id} style={{ display: "flex", gap: 12, padding: "10px 0", alignItems: "center" }}>
              <div style={{
                width: 48, height: 48, borderRadius: 10,
                background: `linear-gradient(135deg, ${l.p.color}22, ${l.p.accent}30)`,
                display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0,
                position: "relative", overflow: "hidden",
              }}>
                <ProductPhoto p={l.p} />
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 500 }}>{l.p.name}</div>
                <div style={{ fontSize: 11, color: "var(--ink-muted)" }}>{l.qty} × {formatIDR(l.p.price)}</div>
              </div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 13 }}>
                {formatIDR(l.p.price * l.qty)}
              </div>
            </div>
          ))}
          <hr className="hr-dot" style={{ margin: "10px 0" }} />
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
            <span style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 20 }}>Total</span>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 18, fontWeight: 700, color: "var(--gold)" }}>
              {formatIDR(total)}
            </span>
          </div>
        </div>

        {/* WA primary */}
        <a href={waLink(message)} target="_blank" rel="noopener" style={{
          display: "flex", alignItems: "center", justifyContent: "center", gap: 10,
          background: "#25D366", color: "white",
          padding: "18px 24px", borderRadius: 999,
          fontSize: 16, fontWeight: 600, fontFamily: "var(--font-body)",
          textDecoration: "none", marginTop: 22,
          boxShadow: "0 8px 20px -8px rgba(37, 211, 102, 0.5)",
        }}>
          <Icon name="wa" size={20} /> Kirim ke WhatsApp
        </a>

        {/* Recap */}
        <div style={{ marginTop: 22, padding: "0 4px" }}>
          <div className="eyebrow" style={{ marginBottom: 10 }}>Yang akan terjadi</div>
          {[
            { n: "01", t: "Kami terima pesananmu di WA", s: "Biasanya dalam 30 menit" },
            { n: "02", t: "Konfirmasi & pembayaran", s: "Transfer / COD" },
            { n: "03", t: form.method === "pickup" ? "Cokelat siap diambil" : "Cokelat dikirim", s: form.shippingLabel },
          ].map((s) => (
            <div key={s.n} style={{ display: "flex", gap: 14, padding: "12px 0", borderBottom: "1px solid var(--line)" }}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--gold)", width: 24 }}>{s.n}</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 500 }}>{s.t}</div>
                <div style={{ fontSize: 11, color: "var(--ink-muted)", marginTop: 2 }}>{s.s}</div>
              </div>
            </div>
          ))}
        </div>

        <button onClick={() => { onReset(); go("landing"); }} style={{
          width: "100%", padding: "14px", marginTop: 22,
          background: "transparent", border: "1px solid var(--line)",
          borderRadius: 999, fontSize: 14, fontFamily: "var(--font-body)",
          color: "var(--ink-soft)", cursor: "pointer",
        }}>
          Kembali ke beranda
        </button>

        <div style={{ height: 24 }} />
      </div>
    </div>
  );
}

window.Confirmation = Confirmation;